Skip to content

🚸 app: expand pay asset selector hit area#847

Merged
cruzdanilo merged 5 commits intomainfrom
misc
Feb 27, 2026
Merged

🚸 app: expand pay asset selector hit area#847
cruzdanilo merged 5 commits intomainfrom
misc

Conversation

@cruzdanilo
Copy link
Copy Markdown
Member

@cruzdanilo cruzdanilo commented Feb 27, 2026


Open with Devin

Greptile Summary

expanded the clickable area of the pay asset selector by moving the onPress handler from the inner XStack to the outer container, improving usability.

  • UI improvement: moved onPress handler to outer XStack in Pay.tsx, making the entire row clickable instead of just the asset logo and text
  • Type safety: tightened query update calls across loan components with generic type parameters (setQueryData<Loan>)
  • Mock swapper: added testnet/anvil routing through mock swapper in lifi.ts to avoid external API calls during testing
  • ETH minting: extended e2e mint script to handle native ETH via anvil_setBalance and calculate USD values
  • Mock deployment: deployed mock swapper at deterministic address using vm.etch and anvil_setCode RPC for consistent test environment

Confidence Score: 5/5

  • this PR is safe to merge with no concerns
  • all changes are well-contained improvements: the main UI change expands hit area without altering logic, type safety improvements prevent runtime errors, and test infrastructure changes are properly isolated to test/mock environments
  • no files require special attention

Important Files Changed

Filename Overview
src/components/pay-mode/Pay.tsx expanded asset selector hit area by moving onPress handler to outer XStack
src/components/loans/Amount.tsx improved type safety with generic parameter and changed null to undefined
src/utils/lifi.ts added mock swapper routing for testnet and anvil chains
.maestro/src/script/mint.ts extended mint script to handle native ETH and calculate USD value
contracts/test/mocks/Mocks.s.sol deployed mock swapper at expected address using vm.etch and anvil_setCode

Last reviewed commit: fb12f95

Summary by CodeRabbit

Release Notes

  • New Features

    • Expanded the clickable area for the pay asset selector in the header, improving usability.
  • Improvements

    • Enhanced type safety and consistency for loan state management.
    • Added testnet support for swap routing with mock swapper integration.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Feb 27, 2026

🦋 Changeset detected

Latest commit: fb12f95

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Feb 27, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9de44fb and fb12f95.

📒 Files selected for processing (14)
  • .changeset/warm-eagles-fly.md
  • .maestro/flows/local.yaml
  • .maestro/src/script/mint.ts
  • .maestro/src/script/setBalance.ts
  • .maestro/src/server.ts
  • .maestro/subflows/mint.yaml
  • contracts/test/mocks/Mocks.s.sol
  • src/components/loans/Amount.tsx
  • src/components/loans/Asset.tsx
  • src/components/loans/Installments.tsx
  • src/components/loans/Maturity.tsx
  • src/components/loans/Receiver.tsx
  • src/components/pay-mode/Pay.tsx
  • src/utils/lifi.ts
💤 Files with no reviewable changes (1)
  • .maestro/src/script/setBalance.ts

Walkthrough

This PR enhances Maestro testing workflows by introducing ETH balance manipulation via anvil, consolidates this logic into the mint script (removing setBalance.ts), updates loan component type annotations for better type safety, expands the pay asset selector hit area, adds testnet-specific swapper logic, and injects contract code for anvil-based testing environments.

Changes

Cohort / File(s) Summary
Maestro ETH Minting
.maestro/flows/local.yaml, .maestro/src/script/mint.ts, .maestro/src/script/setBalance.ts
Adds new ETH mint flow invocation to local.yaml; consolidates ETH balance handling into mint.ts with bifurcated logic for ETH (anvil_setBalance) vs ERC20 (writeContract); removes dedicated setBalance.ts as functionality is absorbed into mint.ts.
Maestro Output & Assertions
.maestro/subflows/mint.yaml, .maestro/src/server.ts
Updates mint subflow to assert against output.usd instead of numeric amount; normalizes ETH asset field in activity payload from address to "ETH" string.
Loan Component Type Refinements
src/components/loans/Amount.tsx, src/components/loans/Asset.tsx, src/components/loans/Installments.tsx, src/components/loans/Maturity.tsx, src/components/loans/Receiver.tsx
Consistently updates setQueryData calls to use explicit generic type parameter <Loan> for improved type safety; modifies Maturity.tsx to store maturity as BigInt; updates Asset.tsx to use viem Address type for selectedMarket state.
Testing Infrastructure
contracts/test/mocks/Mocks.s.sol, src/utils/lifi.ts
Adds LibString import for address/bytes utilities and anvil-specific contract code injection/fork manipulation in Solidity mock setup; introduces testnet-specific route resolution in lifi.ts using mockSwapper with synthetic route generation.
UI & Configuration
src/components/pay-mode/Pay.tsx, .changeset/warm-eagles-fly.md
Expands pay asset selector clickable region from inner to outer XStack container; adds changeset documenting pay asset selector hit area expansion.

Sequence Diagram(s)

sequenceDiagram
    participant Flow as Maestro Flow
    participant Script as mint.ts Script
    participant Anvil as Anvil RPC
    participant Activity as Activity Logger
    participant State as Blockchain State

    Flow->>Script: Execute mint flow with asset (ETH or ERC20)
    Script->>Script: Check if asset is ETH via symbol mapping
    alt Asset is ETH
        Script->>Anvil: eth_getBalance(account)
        Anvil-->>Script: currentBalance
        Script->>Script: Calculate newBalance = currentBalance + amount
        Script->>Anvil: anvil_setBalance(account, newBalance)
        Anvil->>State: Update ETH balance
        Script->>Activity: Log activity with ethAddress, ETH, amount delta
    else Asset is ERC20
        Script->>Script: Lookup market by symbol, get contract address
        Script->>State: writeContract(mockErc20Abi.mint)
        State->>State: Mint tokens with decimals applied
        Script->>Activity: Log activity with token address, amount
    end
    Activity-->>Flow: Activity recorded
    Script->>Script: Set output.usd = amount × market.usdPrice
    Script-->>Flow: Return output with usd value
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • dieguezguille
  • franm91
🚥 Pre-merge checks | ✅ 2
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title 'expand pay asset selector hit area' accurately describes the main change in Pay.tsx, but the changeset scope is much broader, including major refactoring of mint script, ERC20/ETH handling, and contract mocking.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch misc

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

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

@gemini-code-assist
Copy link
Copy Markdown

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request primarily enhances the user experience by expanding the interactive area of the asset selector on the payment screen. Concurrently, it significantly bolsters the project's testing infrastructure through the addition of a new Maestro flow for minting ETH, an updated minting script that now handles ETH and calculates USD values, and the integration of a mock swapper for LIFI in test environments. These changes collectively aim to improve both user interaction and the robustness of automated testing.

Highlights

  • Improved Asset Selector Usability: The clickable area for the asset selector in the pay screen has been expanded, making it easier for users to select payment assets.
  • Enhanced Maestro Test Flows: A new Maestro subflow for minting ETH was added, and the existing minting script was updated to support ETH and calculate USD values for minted assets.
  • Streamlined Test Environment Swapping: A mock swapper implementation was integrated into the LIFI utility for test environments, enabling simulated asset swaps without real blockchain interactions.
  • Increased Type Safety in UI Components: Multiple React components involved in loan creation (Amount, Asset, Installments, Maturity, Receiver) were updated to use explicit type assertions for improved type safety.
  • Refined Smart Contract Mocking: The Mocks.s.sol script was updated to correctly set the mock swapper code on Anvil chains, improving the reliability of local testing.
Changelog
  • .changeset/warm-eagles-fly.md
    • Added a new changeset file documenting the UI improvement.
  • .maestro/flows/local.yaml
    • Integrated a new Maestro subflow for minting ETH into the local test suite.
  • .maestro/src/script/mint.ts
    • Modified the minting script to support ETH, calculate USD values, and use the anvil utility for balance manipulation.
  • .maestro/src/script/setBalance.ts
    • Removed the dedicated script for setting account balances.
  • .maestro/src/server.ts
    • Updated the activity logging to display "ETH" for the Ethereum address.
  • .maestro/subflows/mint.yaml
    • Adjusted the assertion logic to verify minted amounts using the calculated USD value.
  • contracts/test/mocks/Mocks.s.sol
    • Imported LibString for address and bytes, and added logic to set the mock swapper code on Anvil.
  • src/components/loans/Amount.tsx
    • Updated queryClient.setQueryData calls to use explicit Loan type assertion.
  • src/components/loans/Asset.tsx
    • Changed the selectedMarket state type to Address and updated queryClient.setQueryData calls with Loan type assertion.
  • src/components/loans/Installments.tsx
    • Updated queryClient.setQueryData calls to use explicit Loan type assertion.
  • src/components/loans/Maturity.tsx
    • Updated queryClient.setQueryData calls with Loan type assertion and BigInt conversion for maturity.
  • src/components/loans/Receiver.tsx
    • Updated queryClient.setQueryData calls to use explicit Loan type assertion.
  • src/components/pay-mode/Pay.tsx
    • Refactored the asset selection UI to expand the clickable area.
  • src/utils/lifi.ts
    • Imported getAddress and added a mock swapper implementation for test environments.
Activity
  • No specific activity has been recorded for this pull request yet.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request enhances the app's payment flow by expanding the asset selector's hit area for better usability. It also includes several under-the-hood improvements, such as adding mock logic for asset swaps on testnets, and refactoring state updates for loan data to be more type-safe. While reviewing, I identified a potential runtime error across multiple components where queryClient.setQueryData is used. The updater function doesn't handle cases where the existing query data (old) is undefined, which would cause a crash when using the spread operator (...old). I've left comments with suggestions to fix this potential issue.

Comment thread src/components/loans/Amount.tsx
Comment thread src/components/loans/Amount.tsx
Comment thread src/components/loans/Asset.tsx
Comment thread src/components/loans/Installments.tsx
Comment thread src/components/loans/Maturity.tsx
Comment thread src/components/loans/Maturity.tsx
Comment thread src/components/loans/Receiver.tsx
Comment thread src/components/loans/Receiver.tsx
Copy link
Copy Markdown

@devin-ai-integration devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 1 potential issue.

View 4 additional findings in Devin Review.

Open in Devin Review

Comment thread src/components/pay-mode/Pay.tsx
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: fb12f95fc8

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/utils/lifi.ts
@sentry
Copy link
Copy Markdown

sentry Bot commented Feb 27, 2026

Codecov Report

❌ Patch coverage is 28.57143% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 69.49%. Comparing base (9de44fb) to head (fb12f95).
⚠️ Report is 5 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
src/utils/lifi.ts 0.00% 5 Missing ⚠️
src/components/pay-mode/Pay.tsx 0.00% 2 Missing ⚠️
src/components/loans/Amount.tsx 50.00% 1 Missing ⚠️
src/components/loans/Maturity.tsx 50.00% 1 Missing ⚠️
src/components/loans/Receiver.tsx 50.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #847      +/-   ##
==========================================
- Coverage   69.52%   69.49%   -0.04%     
==========================================
  Files         212      212              
  Lines        7755     7760       +5     
  Branches     2507     2506       -1     
==========================================
+ Hits         5392     5393       +1     
- Misses       2135     2139       +4     
  Partials      228      228              
Flag Coverage Δ
e2e 69.49% <28.57%> (-0.04%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@cruzdanilo cruzdanilo merged commit fb12f95 into main Feb 27, 2026
13 of 16 checks passed
@cruzdanilo cruzdanilo deleted the misc branch February 27, 2026 19:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant