From cba65cfc79a70099650ac9f21858dac0db72b1ae Mon Sep 17 00:00:00 2001
From: Harry Pierson <harrypierson@hotmail.com>
Date: Mon, 12 Jun 2023 11:51:46 -0700
Subject: [PATCH] merging #163 changes into release branch

---
 .gitignore                                    |  1 +
 .../contractPanelController.ts                |  9 ++-
 src/panel/components/Hash.tsx                 |  6 +-
 src/panel/components/views/Contract.tsx       | 69 ++++++++++++++++++-
 src/shared/messages/contractViewRequest.ts    |  5 +-
 5 files changed, 84 insertions(+), 6 deletions(-)

diff --git a/.gitignore b/.gitignore
index e30fe50..63a4708 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ deps
 .DS_Store
 .tools/
 obj
+.idea/
\ No newline at end of file
diff --git a/src/extension/panelControllers/contractPanelController.ts b/src/extension/panelControllers/contractPanelController.ts
index 501d798..4a6d4d7 100644
--- a/src/extension/panelControllers/contractPanelController.ts
+++ b/src/extension/panelControllers/contractPanelController.ts
@@ -5,6 +5,7 @@ import ContractViewRequest from "../../shared/messages/contractViewRequest";
 import ContractViewState from "../../shared/viewState/contractViewState";
 import Log from "../util/log";
 import PanelControllerBase from "./panelControllerBase";
+import { reverseHex } from "@cityofzion/neon-core/lib/u";
 
 const LOG_PREFIX = "ContractPanelController";
 
@@ -38,9 +39,13 @@ export default class ContractPanelController extends PanelControllerBase<
   protected async onRequest(request: ContractViewRequest) {
     Log.log(LOG_PREFIX, "Request:", request);
     if (request.copyHash) {
-      await vscode.env.clipboard.writeText(this.contractHash);
+      let scriptHash = this.contractHash;
+      if (request.reverse) {
+        scriptHash = `0x${reverseHex(scriptHash.substring(2))}`;
+      }
+      await vscode.env.clipboard.writeText(scriptHash);
       vscode.window.showInformationMessage(
-        `Contract hash copied to clipboard: ${this.contractHash}`
+        `Contract hash copied to clipboard: ${scriptHash}`
       );
     }
   }
diff --git a/src/panel/components/Hash.tsx b/src/panel/components/Hash.tsx
index 0d1c467..1b7130a 100644
--- a/src/panel/components/Hash.tsx
+++ b/src/panel/components/Hash.tsx
@@ -1,10 +1,12 @@
+import { reverseHex } from "@cityofzion/neon-core/lib/u";
 import React from "react";
 
 type Props = {
   hash: string;
+  reverse?: boolean;
 };
 
-export default function Hash({ hash }: Props) {
+export default function Hash({ hash, reverse }: Props) {
   return (
     <span
       style={{
@@ -12,7 +14,7 @@ export default function Hash({ hash }: Props) {
         wordBreak: "break-all",
       }}
     >
-      {hash}
+      { (!reverse) ? hash : `0x${reverseHex(hash.substring(2))}`}
     </span>
   );
 }
diff --git a/src/panel/components/views/Contract.tsx b/src/panel/components/views/Contract.tsx
index fd38865..5a4dc28 100644
--- a/src/panel/components/views/Contract.tsx
+++ b/src/panel/components/views/Contract.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 
 import ContractViewState from "../../../shared/viewState/contractViewState";
 import ContractViewRequest from "../../../shared/messages/contractViewRequest";
@@ -23,6 +23,47 @@ export default function Contract({ viewState, postMessage }: Props) {
     viewState.autoCompleteData.contractPaths[hash] ||
     viewState.autoCompleteData.contractPaths[name] ||
     [];
+
+  const [hovering, setHovering] = React.useState(false);
+
+  const tooltipStyle: CSSProperties = {
+    visibility: hovering ? "visible" : "hidden",
+    minWidth: "300px", // adjust this value as needed or keep as 'auto'
+    maxWidth: "600px", // prevent the tooltip from becoming too wide
+    backgroundColor: "#555",
+    color: "#fff",
+    textAlign: "center",
+    borderRadius: "6px",
+    padding: "5px",
+
+    /* Position the tooltip */
+    position: "absolute",
+    zIndex: 1,
+    bottom: "150%" /* Place tooltip above the element */,
+    left: "50%",
+    transform: "translateX(-30%)", // Use transform to center the tooltip
+
+    opacity: hovering ? 1 : 0,
+    transition: "opacity 0.3s",
+  };
+
+  const iconStyle: CSSProperties = {
+    position: "relative",
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "15px",
+    height: "15px",
+    cursor: "pointer",
+    fontSize: "12px",
+    fontWeight: "bold",
+    borderRadius: "50%",
+    backgroundColor: hovering ? "grey" : "white",
+    color: "black",
+    transition: "background-color 0.3s",
+    marginLeft: "5px",
+  };
+
   return (
     <div style={{ padding: 10 }}>
       <h1>{name}</h1>
@@ -57,6 +98,32 @@ export default function Contract({ viewState, postMessage }: Props) {
           <em> &mdash; click to copy contract hash to clipboard</em>
         </div>
       </p>
+      <p style={{ paddingLeft: 20 }}>
+        <div style={{ fontWeight: "bold", marginBottom: 10, marginTop: 15 }}>
+          <span>Hash (reversed):</span>
+          <span
+            style={iconStyle}
+            onMouseEnter={() => setHovering(true)}
+            onMouseLeave={() => setHovering(false)}
+          >
+            ?
+            <span style={tooltipStyle}>
+              Various tools in the Neo N3 ecosystem expect different byte order
+              for contract hash strings. Please check the byte order expected by
+              the tools you are using.
+            </span>
+          </span>
+        </div>
+        <div
+          style={{ cursor: "pointer", paddingLeft: 20 }}
+          onClick={() => postMessage({ copyHash: true, reverse: true })}
+        >
+          <strong>
+            <Hash hash={hash} reverse={true} />
+          </strong>{" "}
+          <em> &mdash; click to copy contract hash to clipboard</em>
+        </div>
+      </p>
       {!!supportedStandards.length && (
         <p style={{ paddingLeft: 20 }}>
           <div style={{ fontWeight: "bold", marginBottom: 10, marginTop: 15 }}>
diff --git a/src/shared/messages/contractViewRequest.ts b/src/shared/messages/contractViewRequest.ts
index 5e5c581..98dab2e 100644
--- a/src/shared/messages/contractViewRequest.ts
+++ b/src/shared/messages/contractViewRequest.ts
@@ -1,3 +1,6 @@
-type ContractViewRequest = { copyHash?: boolean };
+type ContractViewRequest = { 
+    copyHash?: boolean,
+    reverse?: boolean
+};
 
 export default ContractViewRequest;