Refactored BidHistory layout, txnArrow was placed in incorrect row

src/components/AddressView.tsx

@@ -1,4 +1,5 @@
 import { useZoraUsername } from "@zoralabs/nft-hooks";
+import { useMediaContext } from "../context/useMediaContext";
 
 type AddressViewProps = {
   address: string;
@@ -8,20 +9,27 @@ type AddressViewProps = {
 const PREFIX_ADDRESS = "0x";
 
 export const AddressView = ({ address, showChars = 6 }: AddressViewProps) => {
+  const { getStyles } = useMediaContext();
   const username = useZoraUsername(address);
 
   const addressFirst = address.slice(0, showChars + PREFIX_ADDRESS.length);
   const addressLast = address.slice(address.length - showChars);
 
   if (username.username?.username) {
-    return <span>{`@${username.username.username}`}</span>;
+    return (
+      <a {...getStyles("addressLink")} href={`https://zora.co/${username.username.username}`} target="_blank">
+        <span>{`@${username.username.username}`}</span>
+      </a>
+    );
   }
   if (!username.error && !username.username) {
     return <span>...</span>;
   }
   return (
-    <span>
-      {addressFirst}...{addressLast}
-    </span>
+    <a {...getStyles("addressLink")} href={`https://zora.co/${address}`} target="_blank">
+      <span>
+        {addressFirst}...{addressLast}
+      </span>
+    </a>
   );
 };

src/constants/style.ts

@@ -146,17 +146,17 @@ export const Style = {
         grid-auto-column: 1fr;
         padding: ${theme.textBlockPadding};
         border-top: ${theme.borderStyle};
-        ${getActiveStyle()}
+        ${getActiveStyle()};
       `;
     },
     cardTitle: (theme: ThemeOptionsType) => css`
       font-size: inherit;
       margin: 0;
-      max-width: calc(${theme.previewCard.width} - 30px),
+      max-width: calc(${theme.previewCard.width} - 30px);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      ${theme.titleFont}
+      ${theme.titleFont};
     `,
     // Styles for full-page view
     fullPage: (theme: ThemeOptionsType) => theme.bodyFont,
@@ -200,8 +200,14 @@ export const Style = {
       theme.bodyFont,
     ],
     // CSS Class for restyling and targeting
-    fullPageHistoryItemDescription: (theme: ThemeOptionsType) => css`
-      ${theme.showTxnLinks ? "margin-right: 20px;" : ""}
+    fullPageHistoryItemDescription: () => css`
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    `,
+    fullPageHistoryItemDescriptionCopy: () => css`
+      display: flex;
+      flex-direction: row;
     `,
     fullPageHistoryItemMeta: () => css`
       position: relative;
@@ -222,7 +228,7 @@ export const Style = {
         opacity: 0.8;
         background-repeat: no-repeat;
         background-position: center;
-        top: 14px;
+        top: 2px;
         z-index: 10;
         right: 0;
         transition: opacity 0.4s ease-in;
@@ -361,7 +367,14 @@ export const Style = {
       `,
       theme.bodyFont,
     ],
-    pricingAmount: (theme: ThemeOptionsType) => theme.titleFont,
+    pricingAmount: (theme: ThemeOptionsType) => theme.bodyFont,
+    addressLink: (theme: ThemeOptionsType) => [
+      css`
+        text-decoration: none;
+        color: ${theme.linkColor};
+      `,
+      theme.titleFont,
+    ],
     nftProposal: (theme: ThemeOptionsType) => css`
       border: ${theme.borderStyle};
       border-radius: ${theme.defaultBorderRadius}px;

src/nft-full/BidHistory.tsx

@@ -119,10 +119,19 @@ export const BidHistory = ({ showPerpetual = true }: BidHistoryProps) => {
           key={`${bidItem.actor}-${bidItem.createdAt}`}
         >
           <div {...getStyles("fullPageHistoryItemDescription")}>
-            <span {...getStyles("pricingAmount")}>
-              <AddressView address={bidItem.actor} />{" "}
-            </span>
-            {bidItem.activityDescription} {bidItem.pricing}
+            <div {...getStyles("fullPageHistoryItemDescriptionCopy")}>
+              <AddressView address={bidItem.actor} />&nbsp;
+              <span {...getStyles("pricingAmount")}>{bidItem.activityDescription} {bidItem.pricing}</span>
+            </div>
+            {bidItem.transactionHash && style.theme.showTxnLinks && (
+              <a
+                {...getStyles("fullPageHistoryTxnLink")}
+                href={`https://etherscan.io/tx/${bidItem.transactionHash}`}
+                target="_blank"
+              >
+                {getString("BID_HISTORY_VIEW_TRANSACTION")}
+              </a>
+            )}
           </div>
           {bidItem.createdAt && (
             <div {...getStyles("fullPageHistoryItemMeta")}>
@@ -132,15 +141,6 @@ export const BidHistory = ({ showPerpetual = true }: BidHistoryProps) => {
               >
                 {formatDate(bidItem.createdAt)}
               </time>
-              {bidItem.transactionHash && style.theme.showTxnLinks && (
-                <a
-                  {...getStyles("fullPageHistoryTxnLink")}
-                  href={`https://etherscan.io/tx/${bidItem.transactionHash}`}
-                  target="_blank"
-                >
-                  {getString("BID_HISTORY_VIEW_TRANSACTION")}
-                </a>
-              )}
             </div>
           )}
         </li>