Merge branch 'develop' into feature/trace-tx

2021-11-18 16:15:25 -03:00 · 2021-11-18 16:15:25 -03:00 · 2a72602f12
parent 56c5c420fb 7f381878ee
commit 2a72602f12
9 changed files with 142 additions and 116 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -35,7 +35,7 @@
        "@types/react-syntax-highlighter": "^13.5.2",
        "chart.js": "^3.5.1",
        "ethers": "^5.5.1",
-        "highlightjs-solidity": "^2.0.1",
+        "highlightjs-solidity": "^2.0.2",
        "query-string": "^7.0.1",
        "react": "^17.0.2",
        "react-blockies": "^1.4.1",
@ -46,7 +46,7 @@
        "react-image": "^4.0.3",
        "react-router-dom": "^5.3.0",
        "react-scripts": "4.0.3",
-        "react-syntax-highlighter": "^15.4.4",
+        "react-syntax-highlighter": "^15.4.5",
        "serve": "^13.0.2",
        "typescript": "^4.4.4",
        "use-keyboard-shortcut": "^1.0.6",
@ -9283,9 +9283,9 @@
      }
    },
    "node_modules/highlightjs-solidity": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/highlightjs-solidity/-/highlightjs-solidity-2.0.1.tgz",
-      "integrity": "sha512-9YY+HQpXMTrF8HgRByjeQhd21GXAz2ktMPTcs6oWSj5HJR52fgsNoelMOmgigwcpt9j4tu4IVSaWaJB2n2TbvQ=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/highlightjs-solidity/-/highlightjs-solidity-2.0.2.tgz",
+      "integrity": "sha512-q0aYUKiZ9MPQg41qx/KpXKaCpqql50qTvmwGYyLFfcjt9AE/+C9CwjVIdJZc7EYj6NGgJuFJ4im1gfgrzUU1fQ=="
    },
    "node_modules/history": {
      "version": "4.10.1",
@ -14920,20 +14920,25 @@
      }
    },
    "node_modules/react-syntax-highlighter": {
-      "version": "15.4.4",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz",
-      "integrity": "sha512-PsOFHNTzkb3OroXdoR897eKN5EZ6grht1iM+f1lJSq7/L0YVnkJaNVwC3wEUYPOAmeyl5xyer1DjL6MrumO6Zw==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.5.tgz",
+      "integrity": "sha512-RC90KQTxZ/b7+9iE6s9nmiFLFjWswUcfULi4GwVzdFVKVMQySkJWBuOmJFfjwjMVCo0IUUuJrWebNKyviKpwLQ==",
      "dependencies": {
        "@babel/runtime": "^7.3.1",
        "highlight.js": "^10.4.1",
        "lowlight": "^1.17.0",
-        "prismjs": "^1.22.0",
+        "prismjs": "^1.25.0",
        "refractor": "^3.2.0"
      },
      "peerDependencies": {
        "react": ">= 0.14.0"
      }
    },
+    "node_modules/react-syntax-highlighter/node_modules/prismjs": {
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
+      "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
+    },
    "node_modules/read-pkg": {
      "version": "5.2.0",
      "license": "MIT",
@ -25780,9 +25785,9 @@
      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
    },
    "highlightjs-solidity": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/highlightjs-solidity/-/highlightjs-solidity-2.0.1.tgz",
-      "integrity": "sha512-9YY+HQpXMTrF8HgRByjeQhd21GXAz2ktMPTcs6oWSj5HJR52fgsNoelMOmgigwcpt9j4tu4IVSaWaJB2n2TbvQ=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/highlightjs-solidity/-/highlightjs-solidity-2.0.2.tgz",
+      "integrity": "sha512-q0aYUKiZ9MPQg41qx/KpXKaCpqql50qTvmwGYyLFfcjt9AE/+C9CwjVIdJZc7EYj6NGgJuFJ4im1gfgrzUU1fQ=="
    },
    "history": {
      "version": "4.10.1",
@ -29547,15 +29552,22 @@
      }
    },
    "react-syntax-highlighter": {
-      "version": "15.4.4",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz",
-      "integrity": "sha512-PsOFHNTzkb3OroXdoR897eKN5EZ6grht1iM+f1lJSq7/L0YVnkJaNVwC3wEUYPOAmeyl5xyer1DjL6MrumO6Zw==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.5.tgz",
+      "integrity": "sha512-RC90KQTxZ/b7+9iE6s9nmiFLFjWswUcfULi4GwVzdFVKVMQySkJWBuOmJFfjwjMVCo0IUUuJrWebNKyviKpwLQ==",
      "requires": {
        "@babel/runtime": "^7.3.1",
        "highlight.js": "^10.4.1",
        "lowlight": "^1.17.0",
-        "prismjs": "^1.22.0",
+        "prismjs": "^1.25.0",
        "refractor": "^3.2.0"
+      },
+      "dependencies": {
+        "prismjs": {
+          "version": "1.25.0",
+          "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
+          "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
+        }
      }
    },
    "read-pkg": {
--- a/package.json
+++ b/package.json
@ -30,7 +30,7 @@
    "@types/react-syntax-highlighter": "^13.5.2",
    "chart.js": "^3.5.1",
    "ethers": "^5.5.1",
-    "highlightjs-solidity": "^2.0.1",
+    "highlightjs-solidity": "^2.0.2",
    "query-string": "^7.0.1",
    "react": "^17.0.2",
    "react-blockies": "^1.4.1",
@ -41,7 +41,7 @@
    "react-image": "^4.0.3",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
-    "react-syntax-highlighter": "^15.4.4",
+    "react-syntax-highlighter": "^15.4.5",
    "serve": "^13.0.2",
    "typescript": "^4.4.4",
    "use-keyboard-shortcut": "^1.0.6",
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@ -6,25 +6,26 @@ import ValueHighlighter from "./components/ValueHighlighter";
 import FormattedBalance from "./components/FormattedBalance";
 import {
  AddressContext,
+  ChecksummedAddress,
  TokenMeta,
  TokenTransfer,
-  TransactionData,
 } from "./types";
 import { ResolvedAddresses } from "./api/address-resolver";
+import { Metadata } from "./useSourcify";

 type TokenTransferItemProps = {
  t: TokenTransfer;
-  txData: TransactionData;
  tokenMeta?: TokenMeta | null | undefined;
  resolvedAddresses: ResolvedAddresses | undefined;
+  metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };

 // TODO: handle partial
 const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
  t,
-  txData,
  tokenMeta,
  resolvedAddresses,
+  metadatas,
 }) => (
  <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
    <span className="text-gray-500">
@ -37,6 +38,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
          address={t.from}
          addressCtx={AddressContext.FROM}
          resolvedAddresses={resolvedAddresses}
+          metadata={metadatas[t.from]}
        />
      </div>
      <div className="flex space-x-1">
@ -45,6 +47,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
          address={t.to}
          addressCtx={AddressContext.TO}
          resolvedAddresses={resolvedAddresses}
+          metadata={metadatas[t.to]}
        />
      </div>
      <div className="col-span-3 flex space-x-1">
@ -60,6 +63,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
        <TransactionAddress
          address={t.token}
          resolvedAddresses={resolvedAddresses}
+          metadata={metadatas[t.token]}
        />
      </div>
    </div>
--- a/src/components/InternalCreate.tsx
+++ b/src/components/InternalCreate.tsx
@ -1,45 +1,44 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
+import TransactionAddress from "./TransactionAddress";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
-import { TransactionData, InternalOperation } from "../types";
+import { InternalOperation } from "../types";
+import { ResolvedAddresses } from "../api/address-resolver";

 type InternalCreateProps = {
-  txData: TransactionData;
  internalOp: InternalOperation;
+  resolvedAddresses: ResolvedAddresses | undefined;
 };

 const InternalCreate: React.FC<InternalCreateProps> = ({
-  txData,
  internalOp,
-}) => {
-  return (
-    <>
-      <div className="flex items-baseline space-x-1 text-xs">
-        <span className="text-gray-500">
-          <FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
-        </span>
-        <span>Contract</span>
-        <div className="flex items-baseline">
-          <AddressHighlighter address={internalOp.to}>
-            <DecoratedAddressLink address={internalOp.to} creation />
-          </AddressHighlighter>
-        </div>
-        <span className="flex items-baseline text-gray-400">
-          (Creator:{" "}
-          <AddressHighlighter address={internalOp.from}>
-            <DecoratedAddressLink
-              address={internalOp.from}
-              txFrom={internalOp.from === txData.from}
-              txTo={internalOp.from === txData.to}
-            />
-          </AddressHighlighter>
-          )
-        </span>
-      </div>
-    </>
-  );
-};
+  resolvedAddresses,
+}) => (
+  <div className="flex items-baseline space-x-1 whitespace-nowrap">
+    <span className="text-gray-500">
+      <FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
+    </span>
+    <span>Contract</span>
+    <div className="flex items-baseline">
+      <AddressHighlighter address={internalOp.to}>
+        <DecoratedAddressLink
+          address={internalOp.to}
+          creation
+          resolvedAddresses={resolvedAddresses}
+        />
+      </AddressHighlighter>
+    </div>
+    <span className="flex items-baseline text-gray-400">
+      (Creator:{" "}
+      <TransactionAddress
+        address={internalOp.from}
+        resolvedAddresses={resolvedAddresses}
+      />
+      )
+    </span>
+  </div>
+);

-export default React.memo(InternalCreate);
+export default InternalCreate;
--- a/src/components/InternalSelfDestruct.tsx
+++ b/src/components/InternalSelfDestruct.tsx
@ -1,52 +1,57 @@
-import React, { useContext } from "react";
+import React from "react";
 import { formatEther } from "@ethersproject/units";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
-import { RuntimeContext } from "../useRuntime";
 import { TransactionData, InternalOperation } from "../types";
-
-const CHI_ADDRESS = "0x0000000000004946c0e9F43F4Dee607b0eF1fA1c";
-const GST2_ADDRESS = "0x0000000000b3F879cb30FE243b4Dfee438691c04";
+import { ResolvedAddresses } from "../api/address-resolver";
+import TransactionAddress from "./TransactionAddress";

 type InternalSelfDestructProps = {
  txData: TransactionData;
  internalOp: InternalOperation;
+  resolvedAddresses: ResolvedAddresses | undefined;
 };

 const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
  txData,
  internalOp,
+  resolvedAddresses,
 }) => {
-  const { provider } = useContext(RuntimeContext);
-  const network = provider?.network;
-
  const toMiner =
    txData.confirmedData?.miner !== undefined &&
    internalOp.to === txData.confirmedData.miner;

  return (
    <>
-      <div className="flex items-baseline space-x-1 text-xs">
+      <div className="flex items-baseline space-x-1 whitespace-nowrap">
        <span className="text-gray-500">
          <FontAwesomeIcon icon={faAngleRight} size="1x" /> SELF DESTRUCT
        </span>
        <span>Contract</span>
        <div className="flex items-baseline">
          <AddressHighlighter address={internalOp.from}>
-            <DecoratedAddressLink address={internalOp.from} selfDestruct />
+            <DecoratedAddressLink
+              address={internalOp.from}
+              selfDestruct
+              resolvedAddresses={resolvedAddresses}
+            />
          </AddressHighlighter>
        </div>
-        {network?.chainId === 1 && internalOp.to === CHI_ADDRESS && (
-          <span className="text-gray-400">(Chi Gastoken)</span>
-        )}
-        {network?.chainId === 1 && internalOp.to === GST2_ADDRESS && (
-          <span className="text-gray-400">(GST2 Gastoken)</span>
+        {internalOp.value.isZero() && (
+          <div className="flex items-baseline text-gray-400">
+            (To:{" "}
+            <TransactionAddress
+              address={internalOp.to}
+              resolvedAddresses={resolvedAddresses}
+            />
+            )
+          </div>
        )}
      </div>
      {!internalOp.value.isZero() && (
-        <div className="ml-5 flex items-baseline space-x-1 text-xs">
+        <div className="ml-5 flex items-baseline space-x-1">
          <span className="text-gray-500">
            <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
          </span>
@ -59,7 +64,11 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
                  toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
                }`}
              >
-                <DecoratedAddressLink address={internalOp.to} miner={toMiner} />
+                <DecoratedAddressLink
+                  address={internalOp.to}
+                  miner={toMiner}
+                  resolvedAddresses={resolvedAddresses}
+                />
              </div>
            </AddressHighlighter>
          </div>
@ -69,4 +78,4 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
  );
 };

-export default React.memo(InternalSelfDestruct);
+export default InternalSelfDestruct;
--- a/src/components/InternalTransactionOperation.tsx
+++ b/src/components/InternalTransactionOperation.tsx
@ -22,11 +22,18 @@ const InternalTransactionOperation: React.FC<InternalTransactionOperationProps>
        />
      )}
      {internalOp.type === OperationType.SELF_DESTRUCT && (
-        <InternalSelfDestruct txData={txData} internalOp={internalOp} />
+        <InternalSelfDestruct
+          txData={txData}
+          internalOp={internalOp}
+          resolvedAddresses={resolvedAddresses}
+        />
      )}
      {(internalOp.type === OperationType.CREATE ||
        internalOp.type === OperationType.CREATE2) && (
-        <InternalCreate txData={txData} internalOp={internalOp} />
+        <InternalCreate
+          internalOp={internalOp}
+          resolvedAddresses={resolvedAddresses}
+        />
      )}
    </>
  );
--- a/src/components/InternalTransfer.tsx
+++ b/src/components/InternalTransfer.tsx
@ -26,7 +26,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
    internalOp.to === txData.confirmedData.miner;

  return (
-    <div className="flex items-baseline space-x-1 text-xs">
+    <div className="flex items-baseline space-x-1 whitespace-nowrap">
      <span className="text-gray-500">
        <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
      </span>
@ -44,6 +44,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
              miner={fromMiner}
              txFrom={internalOp.from === txData.from}
              txTo={internalOp.from === txData.to}
+              resolvedAddresses={resolvedAddresses}
            />
          </div>
        </AddressHighlighter>
@ -61,6 +62,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
              miner={toMiner}
              txFrom={internalOp.to === txData.from}
              txTo={internalOp.to === txData.to}
+              resolvedAddresses={resolvedAddresses}
            />
          </div>
        </AddressHighlighter>
@ -69,4 +71,4 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
  );
 };

-export default React.memo(InternalTransfer);
+export default InternalTransfer;
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@ -88,6 +88,11 @@ const Details: React.FC<DetailsProps> = ({
    if (txData.confirmedData?.createdContractAddress) {
      _addresses.push(txData.confirmedData.createdContractAddress);
    }
+    for (const t of txData.tokenTransfers) {
+      _addresses.push(t.from);
+      _addresses.push(t.to);
+      _addresses.push(t.token);
+    }
    return _addresses;
  }, [txData]);
  const { sourcifySource } = useAppConfigContext();
@ -194,7 +199,7 @@ const Details: React.FC<DetailsProps> = ({
          </div>
        )}
        {internalOps && internalOps.length > 0 && (
-          <div className="mt-2 space-y-1">
+          <div className="mt-2 space-y-1 overflow-x-auto">
            {internalOps.map((op, i) => (
              <InternalTransactionOperation
                key={i}
@ -213,17 +218,15 @@ const Details: React.FC<DetailsProps> = ({
      )}
      {txData.tokenTransfers.length > 0 && (
        <InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
-          <div>
-            {txData.tokenTransfers.map((t, i) => (
-              <TokenTransferItem
-                key={i}
-                t={t}
-                txData={txData}
-                tokenMeta={txData.tokenMetas[t.token]}
-                resolvedAddresses={resolvedAddresses}
-              />
-            ))}
-          </div>
+          {txData.tokenTransfers.map((t, i) => (
+            <TokenTransferItem
+              key={i}
+              t={t}
+              tokenMeta={txData.tokenMetas[t.token]}
+              resolvedAddresses={resolvedAddresses}
+              metadatas={metadatas}
+            />
+          ))}
        </InfoRow>
      )}
      <InfoRow title="Value">
@ -250,24 +253,16 @@ const Details: React.FC<DetailsProps> = ({
      {txData.type === 2 && (
        <>
          <InfoRow title="Max Priority Fee Per Gas">
-            <span>
-              <FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
-              <FormattedBalance
-                value={txData.maxPriorityFeePerGas!}
-                decimals={9}
-              />{" "}
-              Gwei)
-            </span>
+            <FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
+            <FormattedBalance
+              value={txData.maxPriorityFeePerGas!}
+              decimals={9}
+            />{" "}
+            Gwei)
          </InfoRow>
          <InfoRow title="Max Fee Per Gas">
-            <span>
-              <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
-              <FormattedBalance
-                value={txData.maxFeePerGas!}
-                decimals={9}
-              />{" "}
-              Gwei)
-            </span>
+            <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
+            <FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
          </InfoRow>
        </>
      )}
@ -309,18 +304,16 @@ const Details: React.FC<DetailsProps> = ({
      )}
      {txData.confirmedData && hasEIP1559 && (
        <InfoRow title="Block Base Fee">
-          <span>
-            <FormattedBalance
-              value={txData.confirmedData.blockBaseFeePerGas!}
-              decimals={9}
-            />{" "}
-            Gwei (
-            <FormattedBalance
-              value={txData.confirmedData.blockBaseFeePerGas!}
-              decimals={0}
-            />{" "}
-            wei)
-          </span>
+          <FormattedBalance
+            value={txData.confirmedData.blockBaseFeePerGas!}
+            decimals={9}
+          />{" "}
+          Gwei (
+          <FormattedBalance
+            value={txData.confirmedData.blockBaseFeePerGas!}
+            decimals={0}
+          />{" "}
+          wei)
        </InfoRow>
      )}
      {txData.confirmedData && (
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit e439c36937deb321ad01c23ac23941e8a491efe9
+Subproject commit 30e4ffa0153594b11421cf383b1192e4414d2f66