Merge branch 'feature/compact-token-section' into develop

src/TokenTransferItem.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
+import { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar";
 import TransactionAddress from "./components/TransactionAddress";
 import ValueHighlighter from "./components/ValueHighlighter";
 import FormattedBalance from "./components/FormattedBalance";
@@ -26,12 +27,8 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
 }) => {
   return (
     <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
-      <span className="text-gray-500">
-        <FontAwesomeIcon icon={faCaretRight} size="1x" />
-      </span>
-      <div className="grid grid-cols-7 gap-x-1 w-full">
-        <div className="col-span-2 flex space-x-1">
-          <span className="font-bold">From</span>
+      <div className="grid grid-cols-4 gap-x-1 w-full items-baseline">
+        <div className="flex items-baseline space-x-1">
           <TransactionAddress
             address={t.from}
             addressCtx={AddressContext.FROM}
@@ -39,8 +36,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             showCodeIndicator
           />
         </div>
-        <div className="col-span-2 flex space-x-1">
-          <span className="font-bold">To</span>
+        <div className="flex items-baseline space-x-1">
+          <span className="text-gray-500">
+            <FontAwesomeIcon icon={faCaretRight} size="1x" />
+          </span>
           <TransactionAddress
             address={t.to}
             addressCtx={AddressContext.TO}
@@ -48,8 +47,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             showCodeIndicator
           />
         </div>
-        <div className="col-span-3 flex space-x-1">
-          <span className="font-bold">For</span>
+        <div className="col-span-2 flex items-baseline space-x-1">
+          <span className="text-gray-500">
+            <FontAwesomeIcon icon={faSackDollar} size="1x" />
+          </span>
           <span>
             <ValueHighlighter value={t.value}>
               <FormattedBalance

src/components/InternalCreate.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
+import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
 import TransactionAddress from "./TransactionAddress";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
@@ -15,16 +16,17 @@ const InternalCreate: React.FC<InternalCreateProps> = ({ internalOp }) => (
     <span className="text-gray-500">
       <FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
     </span>
-    <span>Contract</span>
+    <span className="flex items-baseline text-gray-400">
+      <TransactionAddress address={internalOp.from} showCodeIndicator />
+    </span>
+    <span className="text-gray-500">
+      <FontAwesomeIcon icon={faCaretRight} size="1x" />
+    </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:{" "}
-      <TransactionAddress address={internalOp.from} showCodeIndicator />)
-    </span>
   </div>
 );
 

src/components/InternalSelfDestruct.tsx

@@ -30,7 +30,6 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
         <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 />

src/components/InternalTransfer.tsx

@@ -2,6 +2,8 @@ import React, { useContext } from "react";
 import { formatEther } from "@ethersproject/units";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
+import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
+import { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
 import { RuntimeContext } from "../useRuntime";
@@ -41,48 +43,58 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
   );
 
   return (
-    <div className="flex items-baseline space-x-1 whitespace-nowrap">
-      <span className="text-gray-500">
-        <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
-      </span>
-      <span>
-        {formatEther(internalOp.value)} {symbol}
-      </span>
-      <div className="flex items-baseline">
-        <span className="text-gray-500">From</span>
-        <AddressHighlighter address={internalOp.from}>
-          <div
-            className={`flex items-baseline space-x-1 ${
-              fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
-            }`}
-          >
-            <DecoratedAddressLink
-              address={internalOp.from}
-              miner={fromMiner}
-              txFrom={internalOp.from === txData.from}
-              txTo={internalOp.from === txData.to}
-              eoa={fromHasCode === undefined ? undefined : !fromHasCode}
-            />
+    <div className="flex items-baseline space-x-1 truncate">
+      <div className="grid grid-cols-6 gap-x-1 w-full items-baseline">
+        <div className="col-span-2 flex items-baseline space-x-1">
+          <span className="text-gray-500">
+            <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
+          </span>
+          <div className="flex items-baseline truncate">
+            <AddressHighlighter address={internalOp.from}>
+              <div
+                className={`flex items-baseline space-x-1 ${
+                  fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+                }`}
+              >
+                <DecoratedAddressLink
+                  address={internalOp.from}
+                  miner={fromMiner}
+                  txFrom={internalOp.from === txData.from}
+                  txTo={internalOp.from === txData.to}
+                  eoa={fromHasCode === undefined ? undefined : !fromHasCode}
+                />
+              </div>
+            </AddressHighlighter>
           </div>
-        </AddressHighlighter>
-      </div>
-      <div className="flex items-baseline">
-        <span className="text-gray-500">To</span>
-        <AddressHighlighter address={internalOp.to}>
-          <div
-            className={`flex items-baseline space-x-1 ${
-              toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
-            }`}
-          >
-            <DecoratedAddressLink
-              address={internalOp.to}
-              miner={toMiner}
-              txFrom={internalOp.to === txData.from}
-              txTo={internalOp.to === txData.to}
-              eoa={toHasCode === undefined ? undefined : !toHasCode}
-            />
-          </div>
-        </AddressHighlighter>
+        </div>
+        <div className="col-span-2 flex items-baseline space-x-1">
+          <span className="text-gray-500">
+            <FontAwesomeIcon icon={faCaretRight} size="1x" />
+          </span>
+          <AddressHighlighter address={internalOp.to}>
+            <div
+              className={`flex items-baseline space-x-1 ${
+                toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+              }`}
+            >
+              <DecoratedAddressLink
+                address={internalOp.to}
+                miner={toMiner}
+                txFrom={internalOp.to === txData.from}
+                txTo={internalOp.to === txData.to}
+                eoa={toHasCode === undefined ? undefined : !toHasCode}
+              />
+            </div>
+          </AddressHighlighter>
+        </div>
+        <div className="col-span-2 flex items-baseline space-x-1">
+          <span className="text-gray-500">
+            <FontAwesomeIcon icon={faSackDollar} size="1x" />
+          </span>
+          <span>
+            {formatEther(internalOp.value)} {symbol}
+          </span>
+        </div>
       </div>
     </div>
   );