From e54ae84e594f35134eba59b6a6e3574744177170 Mon Sep 17 00:00:00 2001
From: Fuxing Loh <4266087+fuxingloh@users.noreply.github.com>
Date: Thu, 30 Nov 2023 14:10:58 +0800
Subject: [PATCH] feat(website): add RawAccountHistory to show history at txn
 history (#1917)

---
 next.config.js                                |   4 +-
 src/pages/transactions/[txid].page.tsx        |   2 +
 .../_components/RawAccountHistory.tsx         | 111 ++++++++++++++++++
 3 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/transactions/_components/RawAccountHistory.tsx

diff --git a/next.config.js b/next.config.js
index 258a3d470..54ce3c472 100644
--- a/next.config.js
+++ b/next.config.js
@@ -14,8 +14,8 @@ const securityHeaders = [
         process.env.NODE_ENV === "development" ? `'unsafe-eval'` : ""
       };` +
       `style-src 'self' fonts.googleapis.com 'unsafe-inline';` +
-      `font-src fonts.gstatic.com;` +
-      `connect-src 'self' ocean.defichain.com 35.241.191.23:3000 *.jellyfishsdk.com playground.jellyfishsdk.com wallet.defichain.com; ${
+      `font-src fonts.gstatic.com data:;` +
+      `connect-src 'self' ocean.defichain.com 35.241.191.23:3000 *.jellyfishsdk.com playground.jellyfishsdk.com wallet.defichain.com ${
         process.env.NODE_ENV === "development"
           ? `ws://localhost:3000/_next/webpack-hmr`
           : ""
diff --git a/src/pages/transactions/[txid].page.tsx b/src/pages/transactions/[txid].page.tsx
index a7449bc2f..8ebf51b9f 100644
--- a/src/pages/transactions/[txid].page.tsx
+++ b/src/pages/transactions/[txid].page.tsx
@@ -31,6 +31,7 @@ import { TransactionSummaryTable } from "./_components/TransactionSummaryTable";
 import { TransactionDfTx } from "./_components/TransactionDfTx";
 import { isAlphanumeric } from "../../utils/commons/StringValidator";
 import { RawTransaction } from "./_components/RawTransaction";
+import { RawAccountHistory } from "./_components/RawAccountHistory";
 
 interface TransactionPageProps {
   txid: string;
@@ -103,6 +104,7 @@ export default function TransactionPage(
           isEvmTx={isEvmTx}
         />
         <TransactionDfTx dftx={dftx} transaction={props.transaction} />
+        <RawAccountHistory transaction={props.transaction} />
       </Container>
     </>
   );
diff --git a/src/pages/transactions/_components/RawAccountHistory.tsx b/src/pages/transactions/_components/RawAccountHistory.tsx
new file mode 100644
index 000000000..4f8364893
--- /dev/null
+++ b/src/pages/transactions/_components/RawAccountHistory.tsx
@@ -0,0 +1,111 @@
+import { useWhaleApiClient } from "@contexts/WhaleContext";
+import { Transaction } from "@defichain/whale-api-client/dist/api/transactions";
+import { ReactElement, useCallback, useState } from "react";
+
+export function RawAccountHistory(props: {
+  transaction: Transaction;
+}): ReactElement {
+  return (
+    <div className="mt-8 mb-6 dark:text-gray-100">
+      <h2 className="font-medium text-xl">Raw Account History</h2>
+
+      <p className="align-middle mb-4 text-sm">
+        Query raw defid account state at TxId:{" "}
+        <code className="p-1 bg-gray-100 dark:bg-gray-800 rounded text-xs">
+          {props.transaction.txid}
+        </code>{" "}
+        and TxNo:{" "}
+        <code className="p-1 bg-gray-100 dark:bg-gray-800 rounded text-xs">
+          {props.transaction.order}
+        </code>
+      </p>
+
+      <QueryAddressHistory transaction={props.transaction} />
+    </div>
+  );
+}
+
+function QueryAddressHistory(props: {
+  transaction: Transaction;
+}): ReactElement {
+  const api = useWhaleApiClient();
+  const [address, setAddress] = useState<string>();
+  const [response, setResponse] = useState<any>();
+
+  const onClick = useCallback(() => {
+    if (address === undefined) {
+      setResponse("Address is required");
+      return;
+    }
+
+    api.address
+      .getAccountHistory(
+        address,
+        props.transaction.block.height,
+        props.transaction.order,
+      )
+      .then((response) => {
+        setResponse(response);
+      })
+      .catch((e) => {
+        setResponse(e);
+      });
+  }, [address]);
+
+  return (
+    <div className="">
+      <div className="flex items-center mb-4 gap-4">
+        <input
+          type="text"
+          name="text"
+          className="block w-full max-w-sm rounded border-0 px-2 py-1.5 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 placeholder:text-gray-400"
+          placeholder="DeFiChain address"
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+        />
+        <button
+          type="button"
+          className="rounded px-2 py-1.5 bg-gray-100 dark:bg-gray-800"
+          onClick={onClick}
+        >
+          GET
+        </button>
+      </div>
+
+      {response !== undefined && (
+        <div className="rounded text-xs p-3 bg-gray-100 dark:bg-gray-800 dark:text-gray-100">
+          <pre>{JSON.stringify(response, null, 2)}</pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// function decodeAddresses (options: {
+//   network: string
+//   vins: TransactionVin[];
+//   vouts: TransactionVout[];
+// }): string[] {
+//   const addresses = new Set<string>()
+//
+//   for (const vin of options.vins) {
+//     if (vin.vout?.script?.hex === undefined) {
+//       continue
+//     }
+//     const address = fromScriptHex(vin.vout.script.hex!, options.network)
+//     if (address !== undefined) {
+//       addresses.add(address.address)
+//     }
+//   }
+//
+//   for (const vout of options.vouts) {
+//     if (vout.script?.hex === undefined) {
+//       continue
+//     }
+//     const address = fromScriptHex(vout.script.hex!, options.network)
+//     if (address !== undefined) {
+//       addresses.add(address.address)
+//     }
+//   }
+//   return Array.from(addresses)
+// }