Add generic resolvers support to internal ops

src/components/InternalCreate.tsx

@@ -4,26 +4,33 @@ import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
 import { TransactionData, 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,
+  resolvedAddresses,
 }) => {
   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" /> CREATE
         </span>
         <span>Contract</span>
         <div className="flex items-baseline">
           <AddressHighlighter address={internalOp.to}>
-            <DecoratedAddressLink address={internalOp.to} creation />
+            <DecoratedAddressLink
+              address={internalOp.to}
+              creation
+              resolvedAddresses={resolvedAddresses}
+            />
           </AddressHighlighter>
         </div>
         <span className="flex items-baseline text-gray-400">
@@ -33,6 +40,7 @@ const InternalCreate: React.FC<InternalCreateProps> = ({
               address={internalOp.from}
               txFrom={internalOp.from === txData.from}
               txTo={internalOp.from === txData.to}
+              resolvedAddresses={resolvedAddresses}
             />
           </AddressHighlighter>
           )

src/components/InternalSelfDestruct.tsx

@@ -1,11 +1,12 @@
-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";
+import { ResolvedAddresses } from "../api/address-resolver";
+import TransactionAddress from "./TransactionAddress";
 
 const CHI_ADDRESS = "0x0000000000004946c0e9F43F4Dee607b0eF1fA1c";
 const GST2_ADDRESS = "0x0000000000b3F879cb30FE243b4Dfee438691c04";
@@ -13,40 +14,47 @@ const GST2_ADDRESS = "0x0000000000b3F879cb30FE243b4Dfee438691c04";
 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 && (
+        {internalOp.value.isZero() && (
-          <span className="text-gray-400">(Chi Gastoken)</span>
+          <div className="flex items-baseline text-gray-400">
-        )}
+            (To:{" "}
-        {network?.chainId === 1 && internalOp.to === GST2_ADDRESS && (
+            <TransactionAddress
-          <span className="text-gray-400">(GST2 Gastoken)</span>
+              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 +67,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>

src/components/InternalTransactionOperation.tsx

@@ -22,11 +22,19 @@ 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
+          txData={txData}
+          internalOp={internalOp}
+          resolvedAddresses={resolvedAddresses}
+        />
       )}
     </>
   );

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>

src/transaction/Details.tsx

@@ -206,7 +206,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}