ShortAddress.js

// Visually looks like an ellipsis, like "0x123...def", but the underlying text
// actually has the whole address, so when you select it to copy-paste you get
// the whole thing.
const ShortAddress = ({ address, ensAddress }) => {
  if (ensAddress != null) return <span>{ensAddress}</span>;

  const nibbles = 3; // to keep, at each side
  const prefix = "0x".length;
  const start = address.slice(0, prefix + nibbles);
  const mid = address.slice(prefix + nibbles, -nibbles);
  const end = address.slice(-nibbles);
  const ellipsisWidth = "0.8em";
  return (
    <span className="relative">
      {/* first, the ellipsis in the middle (displayed, not copied) */}
      <span className="absolute select-none pointer-events-none z-[1]">
        <span className="invisible">{start}</span>
        <span
          className="inline-flex flex-grow justify-around"
          style={{ width: ellipsisWidth }}
        >
          <span>.</span>
          <span>.</span>
          <span>.</span>
        </span>
      </span>
      {/* now, the full address */}
      <span>{start.slice(0, -1)}</span>
      <span style={{ letterSpacing: ellipsisWidth }}>{start.slice(-1)}</span>
      <span className="text-[0px]">{mid}</span>
      <span>{end}</span>
    </span>
  );
};

export default ShortAddress;