feat: shorten "From" in details

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

@@ -2,15 +2,51 @@ import { ERC20Permit, ERC721Permit } from "@ubiquibot/permit-generation/types";
 import { BigNumber, ethers } from "ethers";
 import { app, AppState } from "../app-state";
 
+// dinamically shortens a string by slicing and elipsing it's middle
 function shortenAddress(address: string): string {
-  return `${address.slice(0, 10)}...${address.slice(-8)}`;
+  const initialLength = 42; // address has 42 chars
+  const maxWidth = 570; // with to trigger shortning
+
+  if (window.innerWidth >= maxWidth) {
+    return address;
+  }
+
+  // remove 1 letter for every 6px below 520px
+  const charsToRemove = Math.floor((maxWidth - window.innerWidth) / 6);
+
+  // limit shortening
+  const newLength = Math.max(initialLength - charsToRemove, 20);
+
+  const frontChars = Math.ceil(newLength / 2);
+  const backChars = newLength - frontChars;
+
+  return `${address.slice(0, frontChars)}...${address.slice(-backChars)}`;
+}
+
+// function to update addresses based on the current window size
+function updateAddresses() {
+  const addressElements = document.getElementsByClassName("address");
+
+  Array.from(addressElements).forEach((element) => {
+    // get or store the original address as an attribute
+    let fullAddress = element.getAttribute("data-full-address");
+    if (!fullAddress) {
+      fullAddress = element.innerHTML;
+      element.setAttribute("data-full-address", fullAddress);
+    }
+
+    element.innerHTML = shortenAddress(fullAddress);
+  });
 }
 
+// triggers shortening on resize
+window.addEventListener("resize", updateAddresses);
+
 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 +70,10 @@ 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}">${reward.owner}</a>`,
+    },
     {
       name: "Expiry",
       value: (() => {
@@ -52,6 +91,8 @@ export function insertErc20PermitTableData(
     },
   ]);
   table.setAttribute(`data-make-claim-rendered`, "true");
+  // shortens addresses if necessary
+  updateAddresses();
   return requestedAmountElement;
 }
 
@@ -117,15 +158,6 @@ function renderTokenFields(tokenAddress: string, explorerUrl: string) {
 }
 
 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}">${receiverAddress}</a>`;
 }

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;