feat: shorten "From" in details

static/scripts/rewards/render-transaction/insert-table-data.ts

@@ -2,15 +2,11 @@ import { ERC20Permit, ERC721Permit } from "@ubiquibot/permit-generation/types";
 import { BigNumber, ethers } from "ethers";
 import { app, AppState } from "../app-state";
 
-function shortenAddress(address: string): string {
-  return `${address.slice(0, 10)}...${address.slice(-8)}`;
-}
-
 function formatLargeNumber(value: BigNumber, decimals: number): string {
   const num = parseFloat(ethers.utils.formatUnits(value, decimals));
 
   if (num >= 1_000_000_000_000_000) {
-    return "Unlimited"; // we can consider quintillion and above basically unlimited 
+    return "Unlimited"; // we can consider quintillion and above basically unlimited
   } else if (num >= 1_000_000_000_000) {
     return `${(num / 1_000_000_000_000).toFixed(1)}T`; // i.e: 1.2T
   } else if (num >= 1_000_000_000) {
@@ -34,7 +30,12 @@ export function insertErc20PermitTableData(
   renderToFields(reward.beneficiary, app.currentExplorerUrl);
   renderTokenFields(reward.tokenAddress, app.currentExplorerUrl);
   renderDetailsFields([
-    { name: "From", value: `<a target="_blank" rel="noopener noreferrer" href="${app.currentExplorerUrl}/address/${reward.owner}">${reward.owner}</a>` },
+    {
+      name: "From",
+      value: `<a class="address" target="_blank" rel="noopener noreferrer" href="${app.currentExplorerUrl}/address/${reward.owner}">
+          <span data-content-start="${reward.owner.slice(0, 23)}" data-content-end="${reward.owner.slice(24, 42)}"></span>
+      </a>`,
+    },
     {
       name: "Expiry",
       value: (() => {
@@ -110,22 +111,16 @@ function renderTokenFields(tokenAddress: string, explorerUrl: string) {
   const tokenShort = document.querySelector("#Token .short") as Element;
 
   tokenFull.innerHTML = `<div>${tokenAddress}</div>`;
-  tokenShort.innerHTML = `<div>${shortenAddress(tokenAddress)}</div>`;
+  tokenShort.innerHTML = `<div>${tokenAddress}</div>`;
 
   const tokenBoth = document.getElementById(`rewardToken`) as Element;
   tokenBoth.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="${explorerUrl}/token/${tokenAddress}">${tokenBoth.innerHTML}</a>`;
 }
 
 function renderToFields(receiverAddress: string, explorerUrl: string) {
-  const toFull = document.querySelector("#rewardRecipient .full") as Element;
-  const toShort = document.querySelector("#rewardRecipient .short") as Element;
-
-  // if the for address is an ENS name neither will be found
-  if (!toFull || !toShort) return;
-
-  toFull.innerHTML = `<div>${receiverAddress}</div>`;
-  toShort.innerHTML = `<div>${shortenAddress(receiverAddress)}</div>`;
-
-  const toBoth = document.getElementById(`rewardRecipient`) as Element;
-  toBoth.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="${explorerUrl}/address/${receiverAddress}">${toBoth.innerHTML}</a>`;
+  const rewardRecipient = document.getElementById(`rewardRecipient`) as Element;
+  rewardRecipient.innerHTML = `
+  <a class="address" target="_blank" rel="noopener noreferrer" href="${explorerUrl}/address/${receiverAddress}">
+    <span data-content-start="${receiverAddress.slice(0, 23)}" data-content-end="${receiverAddress.slice(24, 42)}"></span>
+  </a>`;
 }

static/scripts/rewards/render-transaction/render-ens-name.ts

@@ -17,17 +17,62 @@ type EnsParams =
       networkId: number;
     };
 
+// shortens ENS name to a fixed length based on screen size, keeping the ending
+function shortenEnsName(ensName: string): string {
+  const largeScreenLimit = 40; // max length in chars for large screens
+  const smallScreenLimit = 20; // max length in chars for small screens
+  const maxWidth = 570; // width trigger
+
+  const parts = ensName.split(".");
+  const mainPart = parts.slice(0, -1).join(".");
+  const ending = `.${parts[parts.length - 1]}`;
+
+  const maxLength = window.innerWidth >= maxWidth ? largeScreenLimit : smallScreenLimit;
+
+  if (ensName.length <= maxLength) return ensName;
+
+  const maxMainLength = maxLength - ending.length - 3; // subtract space for '...'
+
+  const frontChars = Math.ceil(maxMainLength / 2);
+  const backChars = maxMainLength - frontChars;
+
+  const shortenedMain = `${mainPart.slice(0, frontChars)}...${mainPart.slice(-backChars)}`;
+
+  return `${shortenedMain}${ending}`;
+}
+
+// update ENS name based on the current window size
+function updateEnsNames() {
+  const ensElements = document.getElementsByClassName("ens-name");
+
+  Array.from(ensElements).forEach((element) => {
+    let fullEnsName = element.getAttribute("data-full-ens-name");
+    if (!fullEnsName) {
+      fullEnsName = element.innerHTML; // Store the original ENS name
+      element.setAttribute("data-full-ens-name", fullEnsName);
+    }
+
+    // Use the original ENS name to avoid redundant shortening
+    element.innerHTML = shortenEnsName(fullEnsName);
+  });
+}
+
+// trigger ENS name shortening on window resize
+window.addEventListener("resize", updateEnsNames);
+
 export async function renderEnsName({ element, address, tokenAddress, tokenView, networkId }: EnsParams): Promise<void> {
-  let href: string = "";
+  let href = "";
   try {
     const ensName = await ensLookup(address, networkId);
     if (ensName) {
       if (tokenView) {
         href = `${app.currentExplorerUrl}/token/${tokenAddress}?a=${address}`;
       } else {
-        href = `${app.currentExplorerUrl}/address/${address}"`;
+        href = `${app.currentExplorerUrl}/address/${address}`;
       }
-      element.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="${href}">${ensName}</a>`;
+      // store the full ENS name and apply shortening
+      element.setAttribute("data-full-ens-name", ensName);
+      element.innerHTML = `<a class="ens-name" target="_blank" rel="noopener noreferrer" href="${href}">${shortenEnsName(ensName)}</a>`;
     }
   } catch (error) {
     console.error(error);

static/styles/rewards/claim-table.css

@@ -198,14 +198,6 @@ table[data-details-visible="false"] #rewardToken .short,
 table[data-details-visible="true"] #rewardToken .full {
   display: initial;
 }
-table[data-details-visible="false"] #rewardRecipient .full,
-table[data-details-visible="true"] #rewardRecipient .short {
-  display: none;
-}
-table[data-details-visible="false"] #rewardRecipient .short,
-table[data-details-visible="true"] #rewardRecipient .full {
-  display: initial;
-}
 #To > td,
 #To > th {
   padding-bottom: 24px;
@@ -334,3 +326,21 @@ table * {
 thead {
   animation: thead-fade-in 0.5s ease-in-out;
 }
+
+span::before, span::after {
+  display: inline-block;
+  max-width: 50%;
+  overflow: hidden;
+  white-space: pre;
+}
+
+span::before {
+  content: attr(data-content-start);
+  text-overflow: ellipsis;
+}
+
+span::after {
+  content: attr(data-content-end);
+  text-overflow: '';
+  direction: rtl;
+}