feat: add Stellar address validation and balance check to Transaction…

[Benedict315]

Problem

TransactionPanel had insufficient client-side validation before submission:

• No Stellar address format validation (users could submit invalid addresses like "abc" or Ethereum addresses)
• No balance check (users could submit amounts exceeding their XLM balance, wasting fees)
• No browser-level upper bound on amount input

Solution

Added comprehensive client-side validation to prevent invalid submissions:

Changes Made

TransactionPanel.tsx:

• Added balances from useSorokit hook to access user's XLM balance
• Implemented balance check: compares parsed amount against XLM balance
• Added hasSufficientBalance validation to canSubmit guard
• Added max attribute to amount input (set to XLM balance)
• Added "Insufficient balance" inline error when amount exceeds balance
• Stellar address validation already existed using regex /^G[A-Z2-7]{55}$/

TransactionPanel.test.tsx:

• Updated all test mocks to include balances array with XLM balance
• Added test for insufficient balance error when amount exceeds balance
• Added test for successful submission when amount is within balance
• Fixed existing tests to include balances in mock data

Implementation Details

The balance check works by:

1. Extracting XLM balance from the balances array: balances.find((b) => b.asset === "XLM")?.balance
2. Parsing both the input amount and balance to numbers
3. Comparing: parsedAmount <= xlmBalanceNumber
4. Showing "Insufficient balance" error when check fails
5. Disabling submit button when insufficient balance

The max attribute on the amount input provides browser-level validation as an additional safeguard.

Acceptance Criteria

✅ Entering a non-G string in Destination shows an inline validation error (already implemented)
✅ Entering a string shorter or longer than 56 characters shows an inline error (already implemented)
✅ The Send button is disabled until the destination passes validation (already implemented)
✅ Entering an amount above the XLM balance shows an "Insufficient balance" error (newly implemented)
✅ Valid addresses and amounts do not trigger false errors (verified in tests)
✅ Network submission is only attempted when all client-side checks pass (verified via canSubmit guard)

Testing

Added comprehensive test coverage:

• Test verifies "Insufficient balance" error appears when amount exceeds balance
• Test verifies submit button is disabled when balance is insufficient
• Test verifies error clears when amount is within balance
• Test verifies successful submission when amount is within balance
• All existing tests updated to include balances in mocks

closes #587

[drips-wave]

@Benedict315 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits