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">
+      <div className="grid grid-cols-4 gap-x-1 w-full items-baseline">
-        <FontAwesomeIcon icon={faCaretRight} size="1x" />
+        <div className="flex items-baseline space-x-1">
-      </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>
           <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">
+        <div className="flex items-baseline space-x-1">
-          <span className="font-bold">To</span>
+          <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">
+        <div className="col-span-2 flex items-baseline space-x-1">
-          <span className="font-bold">For</span>
+          <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,15 +43,13 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
   );
 
   return (
-    <div className="flex items-baseline space-x-1 whitespace-nowrap">
+    <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>
-      <span>
+          <div className="flex items-baseline truncate">
-        {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 ${
@@ -66,8 +66,11 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
               </div>
             </AddressHighlighter>
           </div>
-      <div className="flex items-baseline">
+        </div>
-        <span className="text-gray-500">To</span>
+        <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 ${
@@ -84,6 +87,15 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
             </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>
   );
 };