Conversation
🦋 Changeset detectedLatest commit: 2d9ea89 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 |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughComprehensive feature release introducing installments/pay-later payment modes, redesigned home screen with new CardStatus and PortfolioSummary components, font unification to SplineSans, widespread design token standardization across spacing, new payment-related UI sheets, hook refactoring, and Spanish translation expansion. Includes Maestro E2E test updates validating new payment flows. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Home as Home Component
participant CardStatus as CardStatus Component
participant PayModeSheet as PayModeSheet
participant InstallmentsSheet as InstallmentsSheet
participant useInstallmentRates as useInstallmentRates Hook
participant mutateMode as setCardMode Mutation
participant Backend as Backend API
User->>Home: Opens Home Screen
Home->>CardStatus: Renders with mode, collateral, creditLimit
User->>CardStatus: Taps "Now/Later" Toggle
CardStatus->>PayModeSheet: Opens mode selection
User->>PayModeSheet: Selects "Pay Later"
PayModeSheet->>CardStatus: Calls onModeChange
CardStatus->>InstallmentsSheet: Opens installment selector
User->>InstallmentsSheet: Selects installment count
InstallmentsSheet->>useInstallmentRates: Requests APR for selection
useInstallmentRates->>Backend: Queries market data
Backend-->>useInstallmentRates: Returns rates, utilization
useInstallmentRates-->>InstallmentsSheet: Returns payment schedule
InstallmentsSheet->>User: Displays APR and payments
User->>InstallmentsSheet: Confirms installment count
InstallmentsSheet->>mutateMode: Calls onModeChange(installmentCount)
mutateMode->>Backend: POST card mode change
Backend-->>mutateMode: Confirms update, returns new limits
mutateMode->>Home: Updates state optimistically
Home->>CardStatus: Re-renders with new mode/limits
CardStatus-->>User: Displays updated spending limit
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Summary of ChangesHello @dieguezguille, 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 delivers a comprehensive redesign of the application's core user interface, specifically targeting the home and payments sections. The changes aim to modernize the application's appearance, improve navigation, and introduce new functionalities such as an installments calculator and enhanced card management options. The update focuses on providing a more intuitive and visually appealing experience for users interacting with their financial data and card services. Highlights
Changelog
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
✅ All tests passed. |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Greptile Summaryredesigned home screen with new installments payment system and visual refresh
Confidence Score: 4/5
Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
Start[User opens Home screen] --> CardStatus[CardStatus Component]
CardStatus --> Toggle{Pay Mode Toggle}
Toggle -->|Now mode = 0| DebitView[Shows Spending Limit]
Toggle -->|Later mode > 0| CreditView[Shows Credit Limit]
Toggle --> InstallmentsButton[User taps Later toggle]
InstallmentsButton -->|mode = 0| SetMode[Set mode to lastInstallments ?? 1]
InstallmentsButton -->|mode > 0| OpenSheet[Open InstallmentsSheet]
OpenSheet --> SelectInstallments[InstallmentsSheet]
SelectInstallments --> LoadRates[useInstallmentRates hook]
LoadRates --> CalcRates[Calculate APR for 1-12 installments]
CalcRates --> Display[Display horizontal scroll cards]
Display --> UserSelect[User selects installment count]
UserSelect --> UpdateMode[Call onModeChange with selected count]
UpdateMode --> MutateMode[mutateMode API call]
MutateMode --> UpdateCache[Update queryClient cache]
CardStatus --> LearnMore[User taps Learn More]
LearnMore --> PayModeSheet[PayModeSheet Component]
PayModeSheet --> ExplainModes[Explain Now vs Later modes]
CreditView --> Payment[User makes purchase]
Payment --> CreateDebt[Debt created with maturity]
CreateDebt --> HomePayments[OverduePayments/UpcomingPayments]
HomePayments --> PaymentClick[User clicks payment]
PaymentClick --> PayComponent[Pay Component]
PayComponent --> AssetSelect[Select payment asset]
AssetSelect --> CalcRoute[Calculate swap route if needed]
CalcRoute --> RepayDebt[Execute repayAtMaturity]
Last reviewed commit: 1220ff6 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
dieguezguille
force-pushed
the
home
branch
2 times, most recently
from
0d1fe98 to
5b91963
Compare
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
dieguezguille
force-pushed
the
home
branch
2 times, most recently
from
3a975ae to
fcfdce3
Compare
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
| marginVertical="$s4" | ||
| onLayout={(event) => setWidth(event.nativeEvent.layout.width)} | ||
| > | ||
| <XStack width={width * 2} x={mode > 0 ? -width : 0} animation="default" animateOnly={["transform"]}> |
There was a problem hiding this comment.
🟡 LimitPaginator briefly shows wrong panel on initial mount in credit mode
In CardStatus.tsx, the LimitPaginator component initialises width to 0 via useState(0). On the first render, both inner XStack panels have width={0}, so nothing is visible. After onLayout fires and sets width to the real value, the panels instantly become visible (width is not animated), but the x transform from 0 to -width IS animated via animation="default" animateOnly={["transform"]} at src/components/home/CardStatus.tsx:265. This means when mode > 0 (credit mode), users briefly see the spending-limit panel slide out and the credit-limit panel slide in, instead of the credit-limit panel appearing directly.
Was this helpful? React with 👍 or 👎 to provide feedback.
| overflow="hidden" | ||
| alignItems="center" | ||
| justifyContent="flex-end" | ||
| backgroundColor="#1A181A" |
There was a problem hiding this comment.
🔴 Hardcoded hex color bypasses mandatory tokenized styling
The new card preview container uses a hardcoded hex color ("#1A181A") instead of a Tamagui design token, violating the mandatory app styling rule that disallows hardcoded styling values (.agents/rules/app.md:41-45).
Was this helpful? React with 👍 or 👎 to provide feedback.
| label={`$${(Number(spendingLimit) / 1e6).toLocaleString(language, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`} | ||
| alignItems="center" | ||
| > | ||
| <Text aria-hidden title3 secondary> | ||
| $ | ||
| </Text> | ||
| <Text sensitive aria-hidden title3 emphasized> | ||
| {(Number(spendingLimit) / 1e6).toLocaleString(language, { | ||
| minimumFractionDigits: 2, | ||
| maximumFractionDigits: 2, | ||
| })} | ||
| </Text> | ||
| </Amount> | ||
| </XStack> | ||
| <XStack width={width} height={48} alignItems="center" gap="$s3" paddingHorizontal="$s4"> | ||
| <CreditCard size={20} color="$uiNeutralSecondary" /> | ||
| <YStack flex={1} justifyContent="center"> | ||
| <XStack alignItems="center" gap="$s2"> | ||
| <Text callout emphasized> | ||
| {t("Credit limit")} | ||
| </Text> | ||
| <Pressable hitSlop={15} onPress={onCreditLimitInfoPress} aria-label={t("Credit limit info")}> | ||
| <Info size={16} color="$interactiveBaseBrandDefault" /> | ||
| </Pressable> | ||
| </XStack> | ||
| <Text sensitive footnote secondary> | ||
| {t("Collateral {{value}}", { | ||
| value: `$${(Number(collateral) / 1e18).toLocaleString(language, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`, | ||
| })} |
There was a problem hiding this comment.
🟡 BigInt-to-Number conversions can display incorrect limits for large balances
The new limit labels convert on-chain bigint values with Number(...) before formatting (spending limit, credit limit, and collateral). Once values exceed JS safe integer precision, the rendered amounts become rounded/incorrect even though the underlying on-chain value is exact, which can mislead users about available limits in high-balance accounts (src/components/home/CardStatus.tsx:277-305, src/components/home/CardStatus.tsx:309-319).
Prompt for agents
Update src/components/home/CardStatus.tsx in LimitPaginator (lines 277-305 and 309-319) to avoid Number(...) on bigint monetary values. Format bigint values using bigint-safe helpers (for example viem formatUnits or a dedicated bigint formatter) and only convert to string output, never to Number first. Ensure spendingLimit, creditLimit, and collateral labels all use the same safe formatting path.
Was this helpful? React with 👍 or 👎 to provide feedback.
| const ButtonColumn = ({ | ||
| primary, | ||
| secondary, | ||
| danger, | ||
| dangerSecondary, | ||
| outlined, | ||
| transparent, | ||
| loading, | ||
| disabled, | ||
| ...properties | ||
| }: ComponentPropsWithoutRef<typeof ButtonColumnFrame>) => { | ||
| const context = { primary, secondary, danger, dangerSecondary, outlined, transparent, loading, disabled }; | ||
| return ( | ||
| <ButtonContext.context value={context}> | ||
| <ButtonColumnFrame {...context} {...properties} /> | ||
| </ButtonContext.context> | ||
| ); |
There was a problem hiding this comment.
🔴 Multi-line arrow function for ButtonColumn violates mandatory function declaration rule
ButtonColumn is introduced as a multi-line arrow/function expression, which violates the repository’s mandatory TypeScript rule requiring function declarations for all multi-line functions (.agents/rules/typescript.md:22-25). This is an explicit rule-file requirement and must be treated as a bug per the review policy.
Prompt for agents
In src/components/shared/StyledButton.tsx, replace the multi-line `const ButtonColumn = (...) => { ... }` block at lines 191-207 with an equivalent `function ButtonColumn(...) { ... }` declaration, preserving behavior and types.
Was this helpful? React with 👍 or 👎 to provide feedback.
| const ButtonLabel = (properties: ComponentPropsWithoutRef<typeof Text>) => { | ||
| const { disabled } = use(ButtonContext.context); | ||
| return ( | ||
| <Text | ||
| footnote | ||
| color={disabled ? "$interactiveOnDisabled" : "$interactiveBaseBrandDefault"} | ||
| textAlign="center" | ||
| {...properties} | ||
| /> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🔴 Multi-line arrow function for ButtonLabel violates mandatory function declaration rule
ButtonLabel is introduced as a multi-line arrow/function expression, which violates the mandatory TypeScript rule requiring function declarations for multi-line functions (.agents/rules/typescript.md:22-25). This is an explicit repository rule violation and must be reported as a bug.
Prompt for agents
In src/components/shared/StyledButton.tsx, replace the multi-line `const ButtonLabel = (...) => { ... }` block at lines 210-220 with an equivalent `function ButtonLabel(...) { ... }` declaration, preserving behavior and typing.
Was this helpful? React with 👍 or 👎 to provide feedback.
| /> | ||
| </Mask> | ||
| </Defs> | ||
| <Rect width={screenWidth} height={screenHeight} fill="rgba(0,0,0,0.56)" mask="url(#cutout)" /> |
There was a problem hiding this comment.
🔴 Hardcoded overlay RGBA color bypasses mandatory tokenized styling
The spotlight overlay fill is hardcoded as "rgba(0,0,0,0.56)" instead of using a design token, which violates the mandatory app styling rule requiring token-based styling (.agents/rules/app.md:41-45).
Was this helpful? React with 👍 or 👎 to provide feedback.
| height={cutout.height} | ||
| rx={cutoutRadius} | ||
| fill="none" | ||
| stroke="white" |
There was a problem hiding this comment.
🔴 Hardcoded stroke color bypasses mandatory tokenized styling
The spotlight cutout border uses a hardcoded "white" stroke instead of a design token, violating the mandatory token-only styling rule in the app guidelines (.agents/rules/app.md:41-45).
Was this helpful? React with 👍 or 👎 to provide feedback.
| const [acknowledged, setAcknowledged] = useState(true); | ||
| return ( | ||
| <ModalSheet open={open} onClose={onClose} disableDrag> | ||
| <ModalSheet open={open} onClose={onClose} disableDrag heightPercent={90}> |
There was a problem hiding this comment.
🚩 Removal of ScrollView from ConnectionSheet and IntroSheet may clip content on small screens
Both ConnectionSheet and IntroSheet had their <ScrollView> wrappers removed and replaced with a heightPercent={90} on the ModalSheet. On very small screens or with large font accessibility settings, the content may no longer be scrollable and could be clipped. The adjustsFontSizeToFit and numberOfLines props added to text help mitigate this, but it's worth verifying on small devices.
Was this helpful? React with 👍 or 👎 to provide feedback.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2d9ea896a4
ℹ️ 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".
| </Button.Icon> | ||
| </Button> | ||
| </YStack> | ||
| <YStack flex={1} padding="$s4" gap="$s4_5"> |
There was a problem hiding this comment.
This sheet now renders fixed content inside a heightPercent={90} modal without any ScrollView, so on smaller devices or with larger accessibility text the disclaimer/link block and primary CTA can be pushed below the viewport with no way to reach them. That creates a dead-end in the onboarding flow for affected users; restoring a scroll container (as in the previous implementation) prevents content from being clipped.
Useful? React with 👍 / 👎.
1 participant
closes #501, closes #599, closes #713
Summary by CodeRabbit
New Features
Style & UI Improvements
Bug Fixes
Greptile Summary
this pr implements a comprehensive home screen redesign focused on the new pay mode selection feature, allowing users to toggle between instant payments (pay now/debit mode) and installment-based credit (pay later/credit mode). the changes introduce:
Amountcomponent, addedButtonColumnandButtonLabelvariants to styled button, redesigned portfolio summary with asset logo previewsthe implementation integrates with existing financial calculations from
@exactly/liband maintains consistency with the project's established patterns.Confidence Score: 4/5
useInstallmentRates.tsline 29 which has already been flagged in previous comments.Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[Home Screen] --> B{Card Exists?} B -->|Yes| C[CardStatus Component] C --> D[Pay Mode Toggle] D --> E{User Selects Mode} E -->|Pay Now| F[Debit Mode - mode=0] E -->|Pay Later| G[Credit Mode - mode>0] G --> H[InstallmentsSheet] H --> I[useInstallmentRates Hook] I --> J[Calculate APR for 1-12 installments] J --> K[Display rates in scrollable cards] K --> L[User selects installment count] L --> M[Update card mode via setCardMode API] C --> N[LimitPaginator] N --> O{Mode Check} O -->|mode=0| P[Show Spending Limit] O -->|mode>0| Q[Show Credit Limit] D --> R[Learn More] R --> S[PayModeSheet] S --> T[Explain Pay Now vs Pay Later] A --> U[PortfolioSummary] U --> V[Display assets with Amount component] V --> W[Show APR & collateral]Last reviewed commit: b87e85f