Sam/ramp plugins #5691

samholmes · 2025-08-13T19:33:47Z

CHANGELOG

Does this branch warrant an entry to the CHANGELOG?

Yes
No

Dependencies

none

Requirements

If you have made any visual changes to the GUI. Make sure you have:

Tested on iOS device
Tested on Android device
Tested on small-screen device (iPod Touch)
Tested on large-screen device (tablet)

Simulator Screenshot - iPhone 15 Pro - 2025-08-13 at 12 37 57

Simulator Screenshot - iPhone 15 Pro - 2025-08-13 at 12 37 40

Simulator Screenshot - iPhone 15 Pro - 2025-08-13 at 12 28 37

Simulator Screenshot - iPhone 15 Pro - 2025-08-13 at 12 28 43

Simulator Screenshot - iPhone 15 Pro - 2025-08-13 at 12 28 46

Simulator Screenshot - iPhone 15 Pro - 2025-08-13 at 12 28 51

To see the specific tasks where the Asana app for GitHub is being used, see below:
- https://app.asana.com/0/0/1210711148808837

Jon-edge · 2025-08-15T18:46:11Z

I think there are better ways to start this flow. The UI/UX should always to the best of our ability make it obvious what to do without reading instructions on how to use the app.

There's only one thing to do in this part of the flow: to select the region. This entire flow can actually be gated by region selection. This is one aspect of our legacy flow that I liked.

If the country selection modal is dismissed, THEN we can expose a brief message on the scene:

"Select your region for personalized ways to buy crypto:" (personalized "options" sounds vague)
[Select your region]

The rest of the scenes similarly should make it obvious what to do for that particular step.

Jon-edge · 2025-08-15T18:55:30Z

The "Next" button is a moving tap target.

Anchor it to the bottom of the scene/top of the keyboard with KavButton.tsx. The initial implementation called for a full width button for KavButton, though I disagree with that design. This is a good opportunity to keep our UI unified and update it to typical button dimensions we use in the rest of our app.

Jon-edge · 2025-08-15T18:58:26Z

Is this always the exact rate? If it's a variable rate scenario, we should be sure to represent that with a "≈" sign

AGENTS.md

src/app.ts

src/actions/ExchangeRateActions.ts

docs/ramp-plugin-architecture.md

src/hooks/useExchangeRateLoader.ts

src/plugins/ramps/paybis/paybisRampPlugin.ts

src/components/scenes/TradeCreateScene.tsx

src/components/scenes/TradeOptionSelectScene.tsx

src/components/cards/PaymentOptionCard.tsx

src/components/buttons/PillButton.tsx

src/components/buttons/DropDownInputButton.tsx

src/components/icons/BestRateBadge.tsx

src/hooks/useSupportedPlugins.ts

src/actions/DeepLinkingActions.tsx

src/plugins/ramps/rampDeeplinkHandler.ts

src/plugins/ramps/paybis/paybisRampPlugin.ts

src/components/scenes/TradeCreateScene.tsx

src/components/scenes/TradeOptionSelectScene.tsx

Jon-edge · 2025-08-28T01:51:01Z

Like we discussed, use KavButton and gate the LogBox suppression under an env.json var.

samholmes · 2025-08-28T18:34:01Z

The "Next" button is a moving tap target.
Anchor it to the bottom of the scene/top of the keyboard with KavButton.tsx. The initial implementation called for a full width button for KavButton, though I disagree with that design. This is a good opportunity to keep our UI unified and update it to typical button dimensions we use in the rest of our app.

We need to use KavButton to keep the button stable on the TradeCreateScene.tsx

src/plugins/gui/providers/paybisProvider.ts

src/plugins/ramps/paybis/paybisRampPlugin.ts

src/hooks/useRampQuotes.ts

src/plugins/gui/fiatPlugin.tsx

This is an attempt to get the agent to automatically document lessons learned to the docs/ directory. This way conventions are maintained and over time as the agent is course corrected.

- Create docs/localization-guidelines.md with mandatory UI string localization rules - Create docs/component-styling-guidelines.md with styled HOC usage patterns - Update AGENTS.md with Documentation section indexing all docs/ files - Add rule requiring all docs/ markdown files to be indexed in AGENTS.md - Add localized strings for TradeRegionSelectScene to en_US.ts

This file contains run configuration such as RN_SIMULATOR and RN_PORT to be used by a rn-ios script. This is for development purposes

This is a consistent card design for the new fiat buy UI.

src/hooks/useRampQuotes.ts

- Implement TradeCreateScene and TradeOptionSelectScene for buy/sell flow - Add Paybis as first ramp plugin with full API integration - Create reusable hooks for ramp plugin management (useRampPlugins, useRampQuotes) - Add payment type icon system with comprehensive mappings - Implement quote fetching and comparison across multiple providers - Add best rate badge component for quote comparison - Create ramp plugin type definitions and store utilities - Add comprehensive documentation for migration and architecture - Include unit tests for payment types and store IDs - Update navigation and deeplink handlers for ramp flows BREAKING CHANGE: Replaces legacy FiatPluginUi with new ramp plugin system

src/hooks/useRampQuotes.ts

samholmes · 2025-09-11T21:27:20Z

Replaced by #5740

This comment was marked as outdated.

Sign in to view

samholmes force-pushed the sam/ramp-plugins branch from f3d85d5 to f59d0c0 Compare August 13, 2025 19:40

This comment was marked as outdated.

Sign in to view

samholmes force-pushed the sam/ramp-plugins branch from 1620f45 to 3844949 Compare August 14, 2025 23:43

Jon-edge requested changes Aug 18, 2025

View reviewed changes

AGENTS.md Outdated Show resolved Hide resolved

paullinator requested changes Aug 20, 2025

View reviewed changes

samholmes force-pushed the sam/ramp-plugins branch from d39e2e2 to ec70370 Compare August 22, 2025 21:57