fix: Shortened addresses on Transaction html table at lower res

[Klakurka]

Related to #1061

Test plan

Go to the /button/xxx page and look at the layout of the Transaction page columns. Look at it on mobile. In master, it's way worse.

Summary by CodeRabbit

Release Notes

• New Features

  • Added copy-to-clipboard button for addresses with "Copied!" confirmation feedback
  • Consistent address truncation with ellipsis display across the application

• Improvements

  • Enhanced dark mode styling for address copying functionality
  • Improved responsive layout for mobile and smaller screens
  • Better keyboard accessibility with focus indicators

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR adds centralized address formatting and clipboard copy functionality to PayButton components. It introduces formatAddressWithEllipsis utility for consistent address truncation, refactors PaybuttonDetail to use this utility, adds copy-to-clipboard with visual feedback in PaybuttonTransactions, and implements comprehensive responsive CSS styling with dark mode support and accessibility features.

Changes

Cohort / File(s)	Summary
Address formatting utility utils/index.ts	Added formatAddressWithEllipsis() function that truncates addresses to a prefix (16 chars for bitcoin addresses, 10 otherwise) + 5-char suffix with ellipsis in between. Returns original string if already short enough.
Component refactoring components/Paybutton/PaybuttonDetail.tsx	Replaced inline address truncation logic with centralized formatAddressWithEllipsis() calls for consistent address display across detail card.
Clipboard & interaction enhancement components/Transaction/PaybuttonTransactions.tsx	Added copy-to-clipboard functionality with per-row feedback state and 1200ms timeout. Displays full and shortened address variants with copy button, "Copied!" tooltip, and proper cleanup on unmount. Updated dependencies and imports.
Styling & responsiveness components/Transaction/transaction.module.css	Enhanced copy button visuals (reduced margin, improved hover opacity/filters, focus accessibility). Updated tooltip styling (accent background, repositioned, added transition effect). Added responsive address display with addressFull/addressShort breakpoint at 1599px. Included dark mode adaptations (icon inversion) and media query for narrow screens.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

• transaction.module.css: Comprehensive styling changes across multiple concerns (button visuals, tooltips, responsive layout, dark mode, accessibility)—verify breakpoint logic and color contrast in both themes.
• PaybuttonTransactions.tsx: Clipboard integration with state/ref management and useCallback dependencies—ensure timeout cleanup and memo dependency correctness.
• Address formatting logic: Verify formatAddressWithEllipsis handles edge cases (short addresses, non-bitcoin prefixes) and coordinate with PaybuttonDetail refactor.

Possibly related PRs

• Added vertical scrollbar to addresses list #1077: Modifies the same PaybuttonDetail.tsx address rendering and adds per-address copy actions, creating potential for code conflicts or duplicated logic.

Suggested reviewers

• lissavxo
• chedieck

Poem

🐰 A clipboard click, addresses trim with care,
Ellipsis dance where text grows spare,
Bitcoin's first sixteen shine bright,
Copy buttons glow in dark and light,
User joy in every fare! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description is incomplete. It lacks a meaningful Description section explaining the problem and solution, though it references the related issue and includes a basic test plan.	Expand the Description section to explain what problem is being solved and how the changes address it. Provide context about the layout issues at lower resolutions.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main change: addressing shortened address display in the Transaction table at lower resolutions/mobile viewports.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/transactions-table-addr-layout

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

components/Transaction/PaybuttonTransactions.tsx (2)

1-2: Clipboard copy flow is well-structured and cleaned up correctly

The per-row copy handler with copiedRowId, timeout ref, and unmount cleanup is solid: it avoids multiple pending timers and prevents React warnings about state updates after unmount. Error handling via console.error is fine for this UI context.

One minor a11y improvement you could consider later: add a feature-detect guard around navigator.clipboard (for older browsers / non-HTTPS) and expose a fallback or clearer user feedback when it’s unavailable.

Also applies to: 8-15, 42-46, 47-69

---

133-161: Address cell rendering and tooltip behavior are correct; consider keyboard accessibility

The new Address cell layout (full vs ellipsized address plus a copy icon with “Copied!” tooltip) integrates cleanly with formatAddressWithEllipsis, and the copiedRowId state combined with the updated useMemo deps ensures the tooltip visibility updates as expected. Wrapping the table with style.transactionsTable for responsive tweaks is also appropriate.

As a follow-up improvement, you might want to:

• Swap the clickable div for a semantic <button type="button"> or add role="button" and tabIndex={0} plus Enter/Space key handling so the copy control is keyboard-accessible and the :focus-visible styling in CSS becomes effective.

Also applies to: 164-167

components/Transaction/transaction.module.css (1)

81-91: Copy button and tooltip styling align with new UX; clean up duplicate CSS properties

The updated .copy_btn, tooltip, and dark-mode rules match the new per-row copy behavior and look good.

Static analysis is right about the duplicate properties though:

• .copy_btn sets display twice (inline-block and later flex).
• .tooltiptext2 sets z-index twice (1 and later 99999999).

Since only the last declaration takes effect, consider dropping the earlier ones for clarity, e.g.:

.copy_btn {
-  position: relative;
-  display: inline-block;
+  position: relative;
   margin-left: 5px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   min-width: 20px;
}

.tooltiptext2 {
-  position: absolute;
-  z-index: 1;
+  position: absolute;
   width: 110px;
   right: 100%;
   /* ... */
-  z-index: 99999999;
+  z-index: 99999999;
}

That will satisfy the linter and keep the intent obvious.

Also applies to: 93-102, 104-122, 124-127, 129-137, 139-142

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e72861c and ab451a5.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (4)

• components/Paybutton/PaybuttonDetail.tsx (2 hunks)
• components/Transaction/PaybuttonTransactions.tsx (3 hunks)
• components/Transaction/transaction.module.css (1 hunks)
• utils/index.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

components/Paybutton/PaybuttonDetail.tsx (1)

utils/index.ts (1)

• formatAddressWithEllipsis (16-23)

components/Transaction/PaybuttonTransactions.tsx (2)

utils/index.ts (1)

• formatAddressWithEllipsis (16-23)

services/transactionService.ts (1)

• fetchTransactionsByPaybuttonId (659-664)

🪛 Biome (2.1.2)

components/Transaction/transaction.module.css

[error] 86-86: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

display is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)

---

[error] 118-118: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

z-index is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run Tests

🔇 Additional comments (3)

utils/index.ts (1)

16-23: Centralized address ellipsis helper looks solid

The truncation logic is clear, handles short strings safely, and gives a consistent format for both bitcoin-like and other addresses. Centralizing this behavior here is a good move for reuse across components.

components/Paybutton/PaybuttonDetail.tsx (1)

12-12: Good reuse of shared address formatter

Using formatAddressWithEllipsis here keeps Paybutton detail addresses consistent with the transactions table while still copying the full address via the icon. This is a clean refactor with no behavioral regressions.

Also applies to: 61-68

components/Transaction/transaction.module.css (1)

144-153: Responsive table and dual address display classes are consistent with the React changes

Defining .transactionsTable and using it to scope the :global(.paybutton-table-ctn ...) column-hiding rules is a good way to limit the small-screen override to this table. The .addressFull / .addressShort pair with the 1599px breakpoint cleanly switch between full and truncated address views, matching how the React component renders both spans.

Also applies to: 155-161, 163-170