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 ( - {hash} + { (!reverse) ? hash : `0x${reverseHex(hash.substring(2))}`} ); } 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 (
+