fix: hidden buttons wallet edit form

[lissavxo]

Related to #1094

Description

Fix wallet edit form to stop hiding the action buttons.

Test plan

Go to the Wallets page, try editing a wallet with at least six addresses, and make sure the buttons are not hidden when scrolling to the bottom.

Summary by CodeRabbit

• New Features

  • Selectable wallet addresses via checkboxes for easier multi-selection
  • Conditional default network toggles (XEC/BCH) shown only when applicable

• Style

  • Improved form layout with a flexible, columnar container and a scrollable content area
  • Refined spacing and placement of default wallet controls and separators

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Form container styling changed from a fixed-height, scrollable block to a flexible column layout. The wallet edit form replaces inline address rendering with a checkbox list for selectable addresses and integrates react-hook-form registrations for Default XEC/BCH toggles inside a scrollable form area.

Changes

Cohort / File(s)	Summary
CSS Layout Update components/Paybutton/paybutton.module.css	.form_ctn converted from fixed min-height with vertical scrolling to a flex column layout; removed overflow-y: auto and min-height: 44rem, added display: flex and flex-direction: column.
Wallet Form Refactor components/Wallet/EditWalletForm.tsx	Replaced inline address rendering with a checkbox list per address and handleSelectedAddressesChange; introduced a scrollable container for form content; added react-hook-form register fields for isXECDefault and isBCHDefault with conditional rendering and disabled state based on current wallet flags; reorganized default-wallet area and address sub-details.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A tiny rabbit hops on keys,
I swap fixed heights for columned ease.
Checkboxes lined in tidy rows,
Default toggles where the wind now blows.
Hooray — the wallet garden grows!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main change: fixing hidden buttons in the wallet edit form, which directly aligns with the primary changeset modifications.
Description check	✅ Passed	The description covers all required sections: Related to issue, a non-technical description of the fix, and a detailed test plan for validation.

✨ 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/edit-wallet-form

---

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: 3

🧹 Nitpick comments (1)

components/Wallet/EditWalletForm.tsx (1)

70-71: Remove unused empty useEffect.

This useEffect has no body and serves no purpose. Removing it will improve code clarity.

🔎 Proposed fix

-  useEffect(() => {
-  }, [selectedAddressIdList])
-

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1c793b1 and 7263283.

📒 Files selected for processing (2)

• components/Paybutton/paybutton.module.css
• components/Wallet/EditWalletForm.tsx

🧰 Additional context used

🪛 Biome (2.1.2)

components/Wallet/EditWalletForm.tsx

[error] 113-113: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

⏰ 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 (2)

components/Paybutton/paybutton.module.css (1)

148-149: LGTM! CSS change supports the scrollable inner container.

The transition from fixed-height scrolling to a flexible column layout aligns with the new scrollable wrapper introduced in EditWalletForm.tsx. This ensures action buttons remain visible while the form content scrolls.

components/Wallet/EditWalletForm.tsx (1)

90-90: LGTM! Scrollable wrapper fixes the hidden buttons issue.

The scrollable container with maxHeight: 'calc(90vh - 150px)' ensures form content scrolls independently while action buttons remain visible at the bottom.

[coderabbitai]

Actionable comments posted: 0

♻️ Duplicate comments (1)

components/Wallet/EditWalletForm.tsx (1)

112-114: Use a unique key for button pill elements.

conn.addressId is the same for all paybuttons belonging to the same address, so it won't be unique within this inner map. Use conn.id or a composite key instead to avoid React reconciliation issues.

🔎 Proposed fix

                           {addr.paybuttons.map((conn) => (
-                              <div key={conn.addressId} className={style.buttonpill}>{conn.paybutton.name}</div>
+                              <div key={conn.id} className={style.buttonpill}>{conn.paybutton.name}</div>
                            ))}

🧹 Nitpick comments (1)

components/Wallet/EditWalletForm.tsx (1)

70-71: Remove empty useEffect.

This effect has no body and serves no purpose—it's dead code that should be removed.

🔎 Proposed fix

-  useEffect(() => {
-  }, [selectedAddressIdList])
-

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7263283 and 9d7e01c.

📒 Files selected for processing (1)

• components/Wallet/EditWalletForm.tsx

⏰ 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)

components/Wallet/EditWalletForm.tsx (3)

90-99: Scrollable container and name input look good.

The inline style with maxHeight: 'calc(90vh - 150px)' appropriately ensures the form content scrolls while keeping action buttons visible, addressing the original issue.

---

100-119: Address checkbox list implementation is correct.

The checkbox list properly initializes from thisWalletAddressIdList and wires to handleSelectedAddressesChange. Keys on the outer div elements are unique via addr.id.

---

121-145: Default wallet toggles are correctly implemented.

The htmlFor attributes now match the corresponding input id values (isXECDefault and isBCHDefault), fixing the previous accessibility issues. The conditional rendering based on usedNetworks and the disabled state logic are appropriate.