Swap feature - UI Bug

[snowman-45]

While we are making a swap transaction, In the payment screen, one blockchain is showing. It is confusing for user to understand which blockchain it is, blockchain to which we are receiving the fund or it is the network, which we are using to send funds.

I am attaching screenshot of the issue for your reference.

[codeman-crypto]

@coderabbitai plan

[coderabbitai]

Warning

A plan generation is already in progress. Please wait for it to complete before requesting a new plan.

[coderabbitai]

Coding Plan

Summary

• Thread the existing fromBlockChain value through the TransactionDetails model and the checkout→payment-details navigation so the deposit (pay-in) network is available where it is needed.
• Correct the network badge beneath the deposit address to use the source/from blockchain (since the deposit address lives on that chain) instead of the destination chain.
• Update the shared networkTextWidget() helper to render explicit directional wording so users unambiguously understand the badge refers to the network they must send funds on.
• Apply the same fix consistently to both the live payment-details screen and the transaction-history payment-details screen.

Design Choices

Design Choice 1: Should the payment-details screen show a single corrected/clarified network badge, or display both the send and receive networks?

Options Considered:

1. Correct and clearly label the single badge to reflect the send/deposit network (the from blockchain) with explicit directional wording attached to the deposit address.
2. Display two clearly labeled badges — the send network (near the deposit address) and the receive network (near the user's wallet/destination context).

Chosen Option: 1

Rationale: The screen's purpose is solely to guide the user in sending funds to the deposit address, so a single, correctly-sourced and clearly-labeled "send/deposit network" badge directly resolves the confusion without adding unrelated receive-side clutter; receive-side network context already exists on the prior checkout screen.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Carry the Source Blockchain Through the Payment Flow

Ensure the source/from blockchain (the network associated with the deposit address) is available on the payment-details screens. Currently only the destination blockchain is threaded through, which is why the wrong network is shown.

Task 1: Extend the transaction details model to carry the source blockchain

Add a source-blockchain field so the payment-details screen can label the deposit address with the correct network.

• Update the TransactionDetails class in lib/src/swap/util/data_class.dart to include a fromBlockChain field alongside the existing toBlockChain.
• Keep the field optional/nullable to match existing patterns and avoid breaking other construction sites.

Task 2: Populate the source blockchain at the navigation call site

Provide the source-blockchain value when navigating from checkout to the payment-details screen.

• Update the navigation call in lib/src/swap/screen/swap_payment_page.dart (the pushNamed(Routes.swapPaymentDetails, ...) site) to pass the fromBlockChain value already held in _exchangeDataWithRecipientAddress into the extended TransactionDetails constructor.

🤖 Prompt for AI agents

This phase ensures the source (`from`) blockchain is threaded through the data
model and navigation so payment-details screens have access to the correct
network for the deposit address.

**Task 1: Extend `TransactionDetails` in `lib/src/swap/util/data_class.dart`**
- Add a new `fromBlockChain` field to the `TransactionDetails` class, alongside
the existing `toBlockChain` field.
- Make the field optional/nullable to match the existing pattern and avoid
breaking any other construction sites.

**Task 2: Populate `fromBlockChain` at the navigation call site in
`lib/src/swap/screen/swap_payment_page.dart`**
- Locate the `pushNamed(Routes.swapPaymentDetails, ...)` call.
- Pass the `fromBlockChain` value already available in
`_exchangeDataWithRecipientAddress` into the updated `TransactionDetails`
constructor.

Phase 2: Make the Network Label Unambiguous on Payment Screens

Update the display so the network badge near the deposit address clearly communicates that it is the network the user must use to send funds, and so it reflects the correct (source) chain.

Task 1: Add directional context to the network label helper

Make the shared network text helper express which direction the network applies to, instead of a bare NETWORK: string.

• Update networkTextWidget() in lib/src/swap/util/utils.dart to accept and render explicit directional wording (e.g., a label clarifying this is the network to send/deposit funds on, such as "Send via <NETWORK>" or "Deposit network: <NETWORK>").
• Preserve the existing styling/theme approach; only the label text/structure changes. Consider an optional parameter so callers can specify the directional context, keeping the helper reusable.

Task 2: Show the correct, clearly-labeled network on the standard payment-details screen

Fix the semantic mismatch by labeling the deposit address with the source network and clear wording.

• In lib/src/swap/screen/swap_payment_details_page.dart, store the new fromBlockChain (via networkWithUppercase) in initState, mirroring how _toBlockChain is currently derived.
• Replace the networkTextWidget(_toBlockChain) call beneath the "Recipient Address" section so it uses the source blockchain and the new directional label, making clear this is the network on which funds must be sent to the deposit address.

Task 3: Apply the same clarification on the transaction-history payment-details screen

Bring the history variant in line so the same confusion is resolved when viewing transactions from history.

• In lib/src/swap/screen/swap_transaction_payment_details_page.dart, change the GetCurrenciesFullProvider lookup that currently matches on currencyTo so it resolves the blockchain for currencyFrom (the deposit/send currency).
• Render the resulting source network through the updated networkTextWidget() with the directional label, matching the behavior of the standard payment-details screen.

🤖 Prompt for AI agents

This phase updates the UI so the network badge beneath the deposit address is
both correct (source chain) and unambiguous (explicitly directional wording).
Changes span the shared helper and both payment-details screens.

**Task 1: Update `networkTextWidget()` in `lib/src/swap/util/utils.dart`**
- Modify `networkTextWidget()` to accept an optional parameter for directional
label context (e.g., a prefix string like "Send via" or "Deposit network:").
- Render the directional wording alongside the network name in the widget
output.
- Preserve all existing styling and theming; only the label text/structure
should change.
- Keep the helper reusable for callers that may not need the directional
context.

**Task 2: Fix the standard payment-details screen in
`lib/src/swap/screen/swap_payment_details_page.dart`**
- In `initState`, derive and store `fromBlockChain` from the new
`TransactionDetails.fromBlockChain` field using `networkWithUppercase`,
mirroring the existing pattern for `_toBlockChain`.
- Replace the `networkTextWidget(_toBlockChain)` call in the "Recipient Address"
section with a call that passes the source blockchain (`_fromBlockChain`) and
the new directional label parameter.

**Task 3: Fix the transaction-history payment-details screen in
`lib/src/swap/screen/swap_transaction_payment_details_page.dart`**
- Update the `GetCurrenciesFullProvider` lookup so it resolves the blockchain
for `currencyFrom` (the deposit/send currency) instead of the current
`currencyTo`.
- Pass the resolved source network to the updated `networkTextWidget()` with the
appropriate directional label, matching the behavior of the standard
payment-details screen.

Research

The swap feature is fully encapsulated in lib/src/swap/. Payment-related UI lives in swap/screen/, with shared display helpers in swap/util/utils.dart and data models in swap/util/data_class.dart. The relevant screens are swap_payment_page.dart (checkout/confirmation, which correctly shows both fromBlockChain on the "You send" row and toBlockChain on the "You get" row via networkWidget()), and swap_payment_details_page.dart plus swap_transaction_payment_details_page.dart (the "send funds to the address below" screens). The latter two show only a single networkTextWidget() badge beneath the deposit (pay-in) address. Critically, the pay-in address is where the user sends the source coin, so it lives on the source/from blockchain — yet the current code labels it with the destination/to blockchain, producing both a semantic mismatch and an unclear, label-less badge. The TransactionDetails model only carries toBlockChain, with no fromBlockChain field.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase ensures the source (`from`) blockchain is threaded through the data
model and navigation so payment-details screens have access to the correct
network for the deposit address.

**Task 1: Extend `TransactionDetails` in `lib/src/swap/util/data_class.dart`**
- Add a new `fromBlockChain` field to the `TransactionDetails` class, alongside
the existing `toBlockChain` field.
- Make the field optional/nullable to match the existing pattern and avoid
breaking any other construction sites.

**Task 2: Populate `fromBlockChain` at the navigation call site in
`lib/src/swap/screen/swap_payment_page.dart`**
- Locate the `pushNamed(Routes.swapPaymentDetails, ...)` call.
- Pass the `fromBlockChain` value already available in
`_exchangeDataWithRecipientAddress` into the updated `TransactionDetails`
constructor.
===============================================================================

Task: 2

This phase updates the UI so the network badge beneath the deposit address is
both correct (source chain) and unambiguous (explicitly directional wording).
Changes span the shared helper and both payment-details screens.

**Task 1: Update `networkTextWidget()` in `lib/src/swap/util/utils.dart`**
- Modify `networkTextWidget()` to accept an optional parameter for directional
label context (e.g., a prefix string like "Send via" or "Deposit network:").
- Render the directional wording alongside the network name in the widget
output.
- Preserve all existing styling and theming; only the label text/structure
should change.
- Keep the helper reusable for callers that may not need the directional
context.

**Task 2: Fix the standard payment-details screen in
`lib/src/swap/screen/swap_payment_details_page.dart`**
- In `initState`, derive and store `fromBlockChain` from the new
`TransactionDetails.fromBlockChain` field using `networkWithUppercase`,
mirroring the existing pattern for `_toBlockChain`.
- Replace the `networkTextWidget(_toBlockChain)` call in the "Recipient Address"
section with a call that passes the source blockchain (`_fromBlockChain`) and
the new directional label parameter.

**Task 3: Fix the transaction-history payment-details screen in
`lib/src/swap/screen/swap_transaction_payment_details_page.dart`**
- Update the `GetCurrenciesFullProvider` lookup so it resolves the blockchain
for `currencyFrom` (the deposit/send currency) instead of the current
`currencyTo`.
- Pass the resolved source network to the updated `networkTextWidget()` with the
appropriate directional label, matching the behavior of the standard
payment-details screen.

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!