From 25f821548e0d2b9b2e2c962ed418458b2448313d Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 8 Nov 2021 07:49:30 -0300
Subject: [PATCH 1/4] Extract InputDecoder component

---
 src/transaction/Details.tsx              | 56 ++++--------------
 src/transaction/decoder/InputDecoder.tsx | 75 ++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 45 deletions(-)
 create mode 100644 src/transaction/decoder/InputDecoder.tsx

diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 3df374a..b6246b2 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -6,7 +6,6 @@ import {
 } 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";
@@ -33,8 +32,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 } from "../use4Bytes";
 import { DevDoc, UserDoc } from "../useSourcify";
 import { ResolvedAddresses } from "../api/address-resolver";
@@ -338,48 +336,16 @@ 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}
-                  txData={txData}
-                  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}
+          txDesc={txDesc}
+          txData={txData}
+          userMethod={userMethod}
+          devMethod={devMethod}
+          utfInput={utfInput}
+          resolvedAddresses={resolvedAddresses}
+        />
       </InfoRow>
     </ContentFrame>
   );
diff --git a/src/transaction/decoder/InputDecoder.tsx b/src/transaction/decoder/InputDecoder.tsx
new file mode 100644
index 0000000..69820fd
--- /dev/null
+++ b/src/transaction/decoder/InputDecoder.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import { TransactionDescription } from "@ethersproject/abi";
+import { Tab } from "@headlessui/react";
+import ModeTab from "../../components/ModeTab";
+import DecodedParamsTable from "./DecodedParamsTable";
+import { TransactionData } from "../../types";
+import { DevMethod, UserMethod } from "../../useSourcify";
+import { ResolvedAddresses } from "../../api/address-resolver";
+
+type InputDecoderProps = {
+  fourBytes: string;
+  resolvedTxDesc: TransactionDescription | null | undefined;
+  txDesc: TransactionDescription | null | undefined;
+  txData: TransactionData;
+  userMethod: UserMethod | undefined;
+  devMethod: DevMethod | undefined;
+  utfInput: string;
+  resolvedAddresses: ResolvedAddresses | undefined;
+};
+
+const InputDecoder: React.FC<InputDecoderProps> = ({
+  fourBytes,
+  resolvedTxDesc,
+  txDesc,
+  txData,
+  userMethod,
+  devMethod,
+  utfInput,
+  resolvedAddresses,
+}) => (
+  <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}
+            txData={txData}
+            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>
+);
+
+export default InputDecoder;

From c0f934b190670c36a98f87c4318c31cf6385102b Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 8 Nov 2021 08:02:05 -0300
Subject: [PATCH 2/4] Remove unnecessary attributes; simplify code

---
 src/transaction/Details.tsx                   |  16 +--
 src/transaction/LogEntry.tsx                  |   4 -
 src/transaction/Logs.tsx                      |   1 -
 src/transaction/decoder/DecodedParamRow.tsx   |   5 -
 .../decoder/DecodedParamsTable.tsx            |   4 -
 src/transaction/decoder/InputDecoder.tsx      | 111 ++++++++++--------
 6 files changed, 62 insertions(+), 79 deletions(-)

diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index b6246b2..ef6a5fa 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -5,7 +5,6 @@ import {
   Interface,
 } from "@ethersproject/abi";
 import { BigNumber } from "@ethersproject/bignumber";
-import { toUtf8String } from "@ethersproject/strings";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
 import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@@ -62,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 = useMemo(() => {
@@ -339,11 +328,10 @@ const Details: React.FC<DetailsProps> = ({
         <InputDecoder
           fourBytes={fourBytes}
           resolvedTxDesc={resolvedTxDesc}
-          txDesc={txDesc}
-          txData={txData}
+          hasParamNames={resolvedTxDesc === txDesc}
+          data={txData.data}
           userMethod={userMethod}
           devMethod={devMethod}
-          utfInput={utfInput}
           resolvedAddresses={resolvedAddresses}
         />
       </InfoRow>
diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx
index d8bf1ea..de34971 100644
--- 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,
@@ -106,7 +103,6 @@ const LogEntry: React.FC<LogEntryProps> = ({
                       <DecodedParamsTable
                         args={resolvedLogDesc.args}
                         paramTypes={resolvedLogDesc.eventFragment.inputs}
-                        txData={txData}
                         hasParamNames={resolvedLogDesc === logDesc}
                         resolvedAddresses={resolvedAddresses}
                       />
diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index 1fd4207..85104f7 100644
--- 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}
diff --git a/src/transaction/decoder/DecodedParamRow.tsx b/src/transaction/decoder/DecodedParamRow.tsx
index 677ceab..b553c36 100644
--- a/src/transaction/decoder/DecodedParamRow.tsx
+++ b/src/transaction/decoder/DecodedParamRow.tsx
@@ -8,7 +8,6 @@ import Uint256Decoder from "./Uint256Decoder";
 import AddressDecoder from "./AddressDecoder";
 import BooleanDecoder from "./BooleanDecoder";
 import BytesDecoder from "./BytesDecoder";
-import { TransactionData } from "../../types";
 import { ResolvedAddresses } from "../../api/address-resolver";
 
 type DecodedParamRowProps = {
@@ -16,7 +15,6 @@ type DecodedParamRowProps = {
   i?: number | undefined;
   r: any;
   paramType: ParamType;
-  txData: TransactionData;
   arrayElem?: number | undefined;
   help?: string | undefined;
   resolvedAddresses?: ResolvedAddresses | undefined;
@@ -27,7 +25,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
   i,
   r,
   paramType,
-  txData,
   arrayElem,
   help,
   resolvedAddresses,
@@ -102,7 +99,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
             i={idx}
             r={e}
             paramType={paramType.components[idx]}
-            txData={txData}
           />
         ))}
       {paramType.baseType === "array" &&
@@ -112,7 +108,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
             prefix={paramType.name ?? <span className="italic">param_{i}</span>}
             r={e}
             paramType={paramType.arrayChildren}
-            txData={txData}
             arrayElem={idx}
           />
         ))}
diff --git a/src/transaction/decoder/DecodedParamsTable.tsx b/src/transaction/decoder/DecodedParamsTable.tsx
index 8f4a562..376eee2 100644
--- a/src/transaction/decoder/DecodedParamsTable.tsx
+++ b/src/transaction/decoder/DecodedParamsTable.tsx
@@ -1,14 +1,12 @@
 import React from "react";
 import { ParamType, Result } from "@ethersproject/abi";
 import DecodedParamRow from "./DecodedParamRow";
-import { TransactionData } from "../../types";
 import { DevMethod, UserMethod } from "../../useSourcify";
 import { ResolvedAddresses } from "../../api/address-resolver";
 
 type DecodedParamsTableProps = {
   args: Result;
   paramTypes: ParamType[];
-  txData: TransactionData;
   hasParamNames?: boolean;
   userMethod?: UserMethod | undefined;
   devMethod?: DevMethod | undefined;
@@ -18,7 +16,6 @@ type DecodedParamsTableProps = {
 const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
   args,
   paramTypes,
-  txData,
   hasParamNames = true,
   devMethod,
   resolvedAddresses,
@@ -49,7 +46,6 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
           i={i}
           r={r}
           paramType={paramTypes[i]}
-          txData={txData}
           help={devMethod?.params?.[paramTypes[i].name]}
           resolvedAddresses={resolvedAddresses}
         />
diff --git a/src/transaction/decoder/InputDecoder.tsx b/src/transaction/decoder/InputDecoder.tsx
index 69820fd..d516539 100644
--- a/src/transaction/decoder/InputDecoder.tsx
+++ b/src/transaction/decoder/InputDecoder.tsx
@@ -1,75 +1,84 @@
-import React from "react";
+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 { TransactionData } from "../../types";
 import { DevMethod, UserMethod } from "../../useSourcify";
 import { ResolvedAddresses } from "../../api/address-resolver";
 
 type InputDecoderProps = {
   fourBytes: string;
   resolvedTxDesc: TransactionDescription | null | undefined;
-  txDesc: TransactionDescription | null | undefined;
-  txData: TransactionData;
+  hasParamNames: boolean;
+  data: string;
   userMethod: UserMethod | undefined;
   devMethod: DevMethod | undefined;
-  utfInput: string;
   resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const InputDecoder: React.FC<InputDecoderProps> = ({
   fourBytes,
   resolvedTxDesc,
-  txDesc,
-  txData,
+  hasParamNames,
+  data,
   userMethod,
   devMethod,
-  utfInput,
   resolvedAddresses,
-}) => (
-  <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}
-            txData={txData}
-            hasParamNames={resolvedTxDesc === txDesc}
-            userMethod={userMethod}
-            devMethod={devMethod}
-            resolvedAddresses={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={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>
-);
+        </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;

From 55a6e40c5a3444a8342ef9d69fd3b3ecb78f0c96 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 8 Nov 2021 11:04:38 +0000
Subject: [PATCH 3/4] Bump @types/react from 17.0.33 to 17.0.34 (#113)

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ce287b1..a2a252d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "@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-highlight": "^0.12.5",
@@ -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": "*",
@@ -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": "*",
diff --git a/package.json b/package.json
index ab9241d..f90d3d4 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@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-highlight": "^0.12.5",

From 70327ac69d83a0b8ec96f9f0500eca2bdbd30454 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 8 Nov 2021 11:06:54 +0000
Subject: [PATCH 4/4] Bump @types/react-dom from 17.0.10 to 17.0.11 (#112)

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a2a252d..f90c375 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,7 @@
         "@types/node": "^14.17.5",
         "@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",
@@ -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": "*"
       }
@@ -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": "*"
       }
diff --git a/package.json b/package.json
index f90d3d4..e6bb2b3 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@types/node": "^14.17.5",
     "@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",