Merge branch 'develop' into feature/trace-tx

2021-11-08 08:14:46 -03:00 · 2021-11-08 08:14:46 -03:00 · eb22a227f1
parent f1fe98965b 70327ac69d
commit eb22a227f1
6 changed files with 111 additions and 76 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -27,9 +27,9 @@
        "@testing-library/user-event": "^12.1.10",
        "@types/jest": "^26.0.24",
        "@types/node": "^14.17.5",
-        "@types/react": "^17.0.33",
+        "@types/react": "^17.0.34",
        "@types/react-blockies": "^1.4.1",
-        "@types/react-dom": "^17.0.10",
+        "@types/react-dom": "^17.0.11",
        "@types/react-highlight": "^0.12.5",
        "@types/react-router-dom": "^5.3.2",
        "@types/react-syntax-highlighter": "^13.5.2",
@ -3127,9 +3127,9 @@
      "license": "MIT"
    },
    "node_modules/@types/react": {
-      "version": "17.0.33",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.33.tgz",
-      "integrity": "sha512-pLWntxXpDPaU+RTAuSGWGSEL2FRTNyRQOjSWDke/rxRg14ncsZvx8AKWMWZqvc1UOaJIAoObdZhAWvRaHFi5rw==",
+      "version": "17.0.34",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz",
+      "integrity": "sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==",
      "dependencies": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@ -3145,9 +3145,9 @@
      }
    },
    "node_modules/@types/react-dom": {
-      "version": "17.0.10",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.10.tgz",
-      "integrity": "sha512-8oz3NAUId2z/zQdFI09IMhQPNgIbiP8Lslhv39DIDamr846/0spjZK0vnrMak0iB8EKb9QFTTIdg2Wj2zH5a3g==",
+      "version": "17.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
+      "integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
      "dependencies": {
        "@types/react": "*"
      }
@ -21796,9 +21796,9 @@
      "version": "1.5.4"
    },
    "@types/react": {
-      "version": "17.0.33",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.33.tgz",
-      "integrity": "sha512-pLWntxXpDPaU+RTAuSGWGSEL2FRTNyRQOjSWDke/rxRg14ncsZvx8AKWMWZqvc1UOaJIAoObdZhAWvRaHFi5rw==",
+      "version": "17.0.34",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz",
+      "integrity": "sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==",
      "requires": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@ -21814,9 +21814,9 @@
      }
    },
    "@types/react-dom": {
-      "version": "17.0.10",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.10.tgz",
-      "integrity": "sha512-8oz3NAUId2z/zQdFI09IMhQPNgIbiP8Lslhv39DIDamr846/0spjZK0vnrMak0iB8EKb9QFTTIdg2Wj2zH5a3g==",
+      "version": "17.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
+      "integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
      "requires": {
        "@types/react": "*"
      }
--- a/package.json
+++ b/package.json
@ -22,9 +22,9 @@
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.24",
    "@types/node": "^14.17.5",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
    "@types/react-blockies": "^1.4.1",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
    "@types/react-highlight": "^0.12.5",
    "@types/react-router-dom": "^5.3.2",
    "@types/react-syntax-highlighter": "^13.5.2",
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@ -1,8 +1,6 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { TransactionDescription } from "@ethersproject/abi";
 import { BigNumber } from "@ethersproject/bignumber";
-import { toUtf8String } from "@ethersproject/strings";
-import { Tab } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
 import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@ -29,8 +27,7 @@ import PercentageBar from "../components/PercentageBar";
 import ExternalLink from "../components/ExternalLink";
 import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
-import ModeTab from "../components/ModeTab";
-import DecodedParamsTable from "./decoder/DecodedParamsTable";
+import InputDecoder from "./decoder/InputDecoder";
 import {
  rawInputTo4Bytes,
  use4Bytes,
@ -64,16 +61,6 @@ const Details: React.FC<DetailsProps> = ({
    txData.confirmedData?.blockBaseFeePerGas !== undefined &&
    txData.confirmedData?.blockBaseFeePerGas !== null;

-  const utfInput = useMemo(() => {
-    try {
-      return txData && toUtf8String(txData.data);
-    } catch (err) {
-      console.warn("Error while converting input data to string");
-      console.warn(err);
-      return "<can't decode>";
-    }
-  }, [txData]);
-
  const fourBytes = txData.to !== null ? rawInputTo4Bytes(txData.data) : "0x";
  const fourBytesEntry = use4Bytes(fourBytes);
  const fourBytesTxDesc = useTransactionDescription(
@ -331,47 +318,15 @@ const Details: React.FC<DetailsProps> = ({
        </>
      )}
      <InfoRow title="Input Data">
-        <Tab.Group>
-          <Tab.List className="flex space-x-1 mb-1">
-            <ModeTab>Decoded</ModeTab>
-            <ModeTab>Raw</ModeTab>
-            <ModeTab>UTF-8</ModeTab>
-          </Tab.List>
-          <Tab.Panels>
-            <Tab.Panel>
-              {fourBytes === "0x" ? (
-                <>No parameters</>
-              ) : resolvedTxDesc === undefined ? (
-                <>Waiting for data...</>
-              ) : resolvedTxDesc === null ? (
-                <>Can't decode data</>
-              ) : (
-                <DecodedParamsTable
-                  args={resolvedTxDesc.args}
-                  paramTypes={resolvedTxDesc.functionFragment.inputs}
-                  hasParamNames={resolvedTxDesc === txDesc}
-                  userMethod={userMethod}
-                  devMethod={devMethod}
-                  resolvedAddresses={resolvedAddresses}
-                />
-              )}
-            </Tab.Panel>
-            <Tab.Panel>
-              <textarea
-                className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
-                value={txData.data}
-                readOnly
-              />
-            </Tab.Panel>
-            <Tab.Panel>
-              <textarea
-                className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
-                value={utfInput}
-                readOnly
-              />
-            </Tab.Panel>
-          </Tab.Panels>
-        </Tab.Group>
+        <InputDecoder
+          fourBytes={fourBytes}
+          resolvedTxDesc={resolvedTxDesc}
+          hasParamNames={resolvedTxDesc === txDesc}
+          data={txData.data}
+          userMethod={userMethod}
+          devMethod={devMethod}
+          resolvedAddresses={resolvedAddresses}
+        />
      </InfoRow>
    </ContentFrame>
  );
--- a/src/transaction/LogEntry.tsx
+++ b/src/transaction/LogEntry.tsx
@ -7,19 +7,16 @@ import Copy from "../components/Copy";
 import ModeTab from "../components/ModeTab";
 import DecodedParamsTable from "./decoder/DecodedParamsTable";
 import DecodedLogSignature from "./decoder/DecodedLogSignature";
-import { TransactionData } from "../types";
 import { useTopic0 } from "../useTopic0";
 import { ResolvedAddresses } from "../api/address-resolver";

 type LogEntryProps = {
-  txData: TransactionData;
  log: Log;
  logDesc: LogDescription | null | undefined;
  resolvedAddresses: ResolvedAddresses | undefined;
 };

 const LogEntry: React.FC<LogEntryProps> = ({
-  txData,
  log,
  logDesc,
  resolvedAddresses,
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@ -69,7 +69,6 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
              {txData.confirmedData.logs.map((l, i) => (
                <LogEntry
                  key={i}
-                  txData={txData}
                  log={l}
                  logDesc={logDescs?.[i]}
                  resolvedAddresses={resolvedAddresses}
--- a/src/transaction/decoder/InputDecoder.tsx
+++ b/src/transaction/decoder/InputDecoder.tsx
@ -0,0 +1,84 @@
+import React, { useMemo } from "react";
+import { TransactionDescription } from "@ethersproject/abi";
+import { toUtf8String } from "@ethersproject/strings";
+import { Tab } from "@headlessui/react";
+import ModeTab from "../../components/ModeTab";
+import DecodedParamsTable from "./DecodedParamsTable";
+import { DevMethod, UserMethod } from "../../useSourcify";
+import { ResolvedAddresses } from "../../api/address-resolver";
+
+type InputDecoderProps = {
+  fourBytes: string;
+  resolvedTxDesc: TransactionDescription | null | undefined;
+  hasParamNames: boolean;
+  data: string;
+  userMethod: UserMethod | undefined;
+  devMethod: DevMethod | undefined;
+  resolvedAddresses: ResolvedAddresses | undefined;
+};
+
+const InputDecoder: React.FC<InputDecoderProps> = ({
+  fourBytes,
+  resolvedTxDesc,
+  hasParamNames,
+  data,
+  userMethod,
+  devMethod,
+  resolvedAddresses,
+}) => {
+  const utfInput = useMemo(() => {
+    try {
+      return toUtf8String(data);
+    } catch (err) {
+      console.warn("Error while converting input data to string");
+      console.warn(err);
+      return "<can't decode>";
+    }
+  }, [data]);
+
+  return (
+    <Tab.Group>
+      <Tab.List className="flex space-x-1 mb-1">
+        <ModeTab>Decoded</ModeTab>
+        <ModeTab>Raw</ModeTab>
+        <ModeTab>UTF-8</ModeTab>
+      </Tab.List>
+      <Tab.Panels>
+        <Tab.Panel>
+          {fourBytes === "0x" ? (
+            <>No parameters</>
+          ) : resolvedTxDesc === undefined ? (
+            <>Waiting for data...</>
+          ) : resolvedTxDesc === null ? (
+            <>Can't decode data</>
+          ) : (
+            <DecodedParamsTable
+              args={resolvedTxDesc.args}
+              paramTypes={resolvedTxDesc.functionFragment.inputs}
+              hasParamNames={hasParamNames}
+              userMethod={userMethod}
+              devMethod={devMethod}
+              resolvedAddresses={resolvedAddresses}
+            />
+          )}
+        </Tab.Panel>
+        <Tab.Panel>
+          <textarea
+            className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
+            value={data}
+            readOnly
+          />
+        </Tab.Panel>
+        <Tab.Panel>
+          <textarea
+            className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
+            value={utfInput}
+            readOnly
+          />
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+};
+
+export default InputDecoder;