Merge branch 'feature/ui-tweaks' into develop

src/TokenTransferItem.tsx

@@ -20,10 +20,16 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
     <span className="text-gray-500">
       <FontAwesomeIcon icon={faCaretRight} size="1x" />
     </span>
+    <div className="grid grid-cols-5">
+      <div className="flex space-x-2">
         <span className="font-bold">From</span>
         <AddressOrENSName address={t.from} />
+      </div>
+      <div className="flex space-x-2">
         <span className="font-bold">To</span>
         <AddressOrENSName address={t.to} />
+      </div>
+      <div className="col-span-3 flex space-x-2">
         <span className="font-bold">For</span>
         <span>
           <FormattedBalance
@@ -39,7 +45,9 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
               </div>
               <AddressLink
                 address={t.token}
-            text={`${tokenMetas[t.token].name} (${tokenMetas[t.token].symbol})`}
+                text={`${tokenMetas[t.token].name} (${
+                  tokenMetas[t.token].symbol
+                })`}
               />
             </>
           ) : (
@@ -47,6 +55,8 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
           )}
         </span>
       </div>
+    </div>
+  </div>
 );
 
 export default React.memo(TokenTransferItem);

src/components/AddressLink.tsx

@@ -11,7 +11,7 @@ const AddressLink: React.FC<AddressLinkProps> = ({ address, text }) => (
     className="text-link-blue hover:text-link-blue-hover font-address truncate"
     to={`/address/${address}`}
   >
-    <p className="truncate" title={text}>
+    <p className="truncate" title={text ?? address}>
       {text ?? address}
     </p>
   </NavLink>