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

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

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

Jon-edge · 2025-08-15T18:23:31Z

AGENTS.md

@@ -1,5 +1,16 @@
 # Edge React GUI - Agent Guidelines

+> **⚠️ IMPORTANT: Learning and Documentation**
+>
+> **ALWAYS search for relevant documentation first** before starting any task that lacks sufficient context:


"before starting any task that lacks sufficient context:"

This will likely be a noop. Agents (at least in my experience) can rarely tell whether they have sufficient information. This sentence just adds extra thinking time.

I see two distinct sections here that make this a cleaner thinking process

# Initialization **ALWAYS ensure `docs/` is in context before beginning a task. If not, **Use `find docs/ -name "*.md" -type f`** to recursively list all `.md` files in `docs/` folder to get an index of available documentation, then **Read relevant docs** to understand existing conventions, patterns, and business logic. # Workflow ...rest of the items

src/app.ts

paullinator · 2025-08-18T23:36:39Z

src/actions/ExchangeRateActions.ts

@@ -359,3 +359,117 @@ export const closestRateForTimestamp = (
  }
  return bestRate
 }
+


Just do a single call to getHistoricalRate but using the current date. This removes all this code

docs/ramp-plugin-architecture.md

src/hooks/useExchangeRateLoader.ts

src/plugins/ramps/paybis/paybisRampPlugin.ts

paullinator · 2025-08-20T22:27:11Z

src/plugins/ramps/paybis/paybisRampPlugin.ts

+  const checkAssetSupport = (
+    direction: FiatDirection,
+    fiatCurrencyCode: string,
+    cryptoPluginId: string,


Just access an EdgeAsset instead of separate pluginId,tokenId

paullinator · 2025-08-20T22:27:59Z

src/plugins/ramps/paybis/paybisRampPlugin.ts

+    // Check if crypto is supported
+    const paybisCc =
+      EDGE_TO_PAYBIS_CURRENCY_MAP[`${cryptoPluginId}_${tokenId ?? ''}`]
+    if (!paybisCc) {


did ai write this? need explicit null check

paullinator · 2025-08-20T22:28:30Z

src/plugins/ramps/paybis/paybisRampPlugin.ts

+      request: RampQuoteRequest
+    ): Promise<RampQuoteResult[]> => {
+      await ensureStateInitialized()
+      if (!state) throw new Error('Plugin state not initialized')


did AI write this? need explicit null check

src/plugins/ramps/paybis/paybisRampPlugin.ts

Jon-edge · 2025-08-28T01:03:06Z

src/components/scenes/TradeCreateScene.tsx

+      amountType: lastUsedInput,
+      direction: 'buy',
+      regionCode: {
+        countryCode: countryCode || 'US',


countryCode ?? US

Jon-edge · 2025-08-28T01:03:42Z

src/components/scenes/TradeCreateScene.tsx

+
+  // Calculate exchange rate from best quote
+  const quoteExchangeRate = React.useMemo(() => {
+    if (!bestQuote?.cryptoAmount || !bestQuote.fiatAmount) return 0


if (bestQuote?.cryptoAmount == null || bestQuote.fiatAmount == null)

Jon-edge · 2025-08-28T01:04:04Z

src/components/scenes/TradeCreateScene.tsx

+        headerTitle={lstrings.buy_crypto}
+        headerTitleChildren={
+          <PillButton
+            icon={() =>


icon={renderRegionIcon}

Jon-edge · 2025-08-28T01:04:11Z

src/components/scenes/TradeCreateScene.tsx

+
+interface Props extends BuyTabSceneProps<'pluginListBuy'> {}
+
+export const TradeCreateScene = (props: Props): React.ReactElement => {


export const TradeCreateScene: React.FC<Props> = (props: Props) => {

Jon-edge · 2025-08-28T01:04:16Z

src/components/scenes/TradeOptionSelectScene.tsx

+        displayName: selectedQuote.pluginDisplayName,
+        icon: { uri: selectedQuote.partnerIcon }
+      }}
+      renderRight={isBestRate ? () => <BestRateBadge /> : undefined}


renderRight={renderBestRate}

Jon-edge · 2025-08-28T01:04:23Z

src/components/scenes/TradeOptionSelectScene.tsx

+        icon: { uri: selectedQuote.partnerIcon }
+      }}
+      renderRight={isBestRate ? () => <BestRateBadge /> : undefined}
+      onPress={async () => {


onPress={handlePress}

Jon-edge · 2025-08-28T01:04:34Z

src/components/scenes/TradeOptionSelectScene.tsx

+
+interface Props extends BuyTabSceneProps<'rampSelectOption'> {}
+
+export const TradeOptionSelectScene = (props: Props): React.JSX.Element => {


export const TradeOptionSelectScene: React.FC<Props> = (props: Props) => {

Jon-edge · 2025-08-28T01:04:49Z

src/components/cards/PaymentOptionCard.tsx

+  onProviderPress: () => Promise<void> | void
+}
+
+export const PaymentOptionCard = (props: Props): React.JSX.Element => {


export const PaymentOptionCard: React.FC<Props> = (props: Props) => {

Jon-edge · 2025-08-28T01:04:56Z

src/components/buttons/PillButton.tsx

+  disabled?: boolean
+}
+
+export const PillButton = (props: PillButtonProps): React.ReactElement => {


export const PillButton: React.FC<PillButtonProps> = (props: PillButtonProps) => {

Jon-edge · 2025-08-28T01:05:07Z

src/components/buttons/DropDownInputButton.tsx

+  testID?: string
+}
+
+export const DropDownInputButton = (


export const DropDownInputButton: React.FC<DropDownInputButtonProps> = (props: DropDownInputButtonProps) => {

Jon-edge · 2025-08-28T01:05:12Z

src/components/icons/BestRateBadge.tsx

+import { EdgeText } from '../themed/EdgeText'
+
+// TODO: Render a badge icon
+export const BestRateBadge = () => {


export const BestRateBadge: React.FC = () => {

Jon-edge · 2025-08-28T01:05:19Z

src/hooks/useSupportedPlugins.ts

+        .filter(check => check.supported)
+        .map(check => check.plugin)
+    },
+    enabled: Boolean(


enabled: (selectedWallet != null && selectedCrypto != null && selectedFiatCurrencyCode != null && regionCode != null),

Jon-edge · 2025-08-28T01:33:52Z

src/actions/DeepLinkingActions.tsx

-      fiatProviderDeeplinkHandler(link)
+      // Try ramp deeplink handler first
+      try {
+        rampDeeplinkManager.handleDeeplink(link)


const handled = rampDeeplinkManager.handleDeeplink(link) if (!handled) fiatProviderDeeplinkHandler(link)

Jon-edge · 2025-08-28T01:33:53Z

src/plugins/ramps/rampDeeplinkHandler.ts

+    this.listener = null
+  }
+
+  handleDeeplink(link: FiatProviderLink): void {


handleDeeplink(link: FiatProviderLink): boolean { if (this.listener == null) return false const { direction, providerId, deeplinkHandler } = this.listener if (link.providerId !== providerId) return false if (link.direction !== direction) return false if (Platform.OS === 'ios') SafariView.dismiss() this.unregister() deeplinkHandler(link) return true }

Jon-edge · 2025-08-28T01:33:54Z

src/plugins/ramps/paybis/paybisRampPlugin.ts

+                }
+              }
+
+              const privateKey = atob(state!.privateKeyB64)


const privateKey = Buffer.from(state!.privateKeyB64, 'base64').toString('binary')

Jon-edge · 2025-08-28T01:34:05Z

src/components/scenes/TradeCreateScene.tsx

+
+          {/* Bottom Input (Crypto by design) */}
+          <InputRow>
+            <DropDownInputButton onPress={handleCryptDropdown}>


Avoid empty uri image source.
{selectedCrypto == null || selectedWallet == null ? null : ( <CryptoIcon sizeRem={1.5} pluginId={selectedWallet.currencyInfo.pluginId} tokenId={selectedCrypto.tokenId} /> )}

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.

- 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

fixup! Add learning technique to AGENTS.md Restructure into Initialization and Workflow sections for clarity

Jon-edge · 2025-09-01T22:23:31Z

docs/ramp-plugin-migration-guide.md

+**Before:**
+```typescript
+const assets = await provider.getSupportedAssets({
+  direction: 'buy',
+  paymentTypes: ['credit', 'bank'],
+  regionCode: { countryCode: 'US', stateCode: 'CA' }
+})
+```
+
+**After:**
+```typescript
+const assets = await plugin.getSupportedAssets({
+  direction: 'buy',
+  paymentTypes: ['credit', 'bank'],
+  regionCode: { countryCode: 'US', stateCode: 'CA' }
+})
+```
+
+The API remains the same, maintaining compatibility with existing code. Note that the method returns the asset map for the first supported payment type from the provided array.
+
+## Removing getSupportedAssets
+
+The ramp plugin architecture has been simplified by removing the separate `getSupportedAssets` method. All support checking is now done within the `fetchQuote` method.


This seems like conflicting information around getSupportedAssets

Jon-edge · 2025-09-01T22:24:45Z

src/hooks/useSupportedPlugins.ts

+}: UseSupportedPluginsParams): UseSupportedPluginsResult => {
+  // Build region code
+  const regionCode: FiatPluginRegionCode | undefined = React.useMemo(() => {
+    if (!countryCode) return undefined


countryCode == null

Jon-edge · 2025-09-01T22:25:44Z

src/hooks/useSupportedPlugins.ts

+
+  return {
+    supportedPlugins,
+    isLoading,


We don't seem to be doing anything with isLoading? Should be true while we're loading

It's used in the TradeCreateScene

Jon-edge · 2025-09-01T22:27:12Z

src/hooks/useRampQuotes.ts

+      const rateA = parseFloat(a.fiatAmount) / parseFloat(a.cryptoAmount)
+      const rateB = parseFloat(b.fiatAmount) / parseFloat(b.cryptoAmount)


No guards against 0.

Not addressed

Jon-edge · 2025-09-01T22:48:09Z

"Fix all non deprecation lint warnings in all changed files"

Useful rule:
"After completing code changes, run yarn tsc and fix any errors. Once those are addressed, run files=($(git diff HEAD --name-only -- '*.ts' '*.tsx')); if (( ${#files} )); then ./node_modules/.bin/eslint --fix "${files[@]}"; else echo "No TS/TSX changes since HEAD."; fi, and manually fix any non-deprecation warnings that cannot be automatically fixed, if necessary. It is not necessary to fix any lint warnings/errors on files that you did not modify yourself."

Jon-edge · 2025-09-01T22:57:26Z

src/components/scenes/TradeCreateScene.tsx

+
+    try {
+      return (
+        parseFloat(bestQuote.fiatAmount) / parseFloat(bestQuote.cryptoAmount)


No guard for div by 0

Remove silent-but-deadly try-catch errors.

Improve rampDeeplinkManager

Add URLs to paybis config

Fix KavButton usage

This was a legit bug for both the ramp plugin and the paybis provider. The failure callback URL includes the param set to "fail" not "failure".

cursor · 2025-09-03T01:19:12Z

src/hooks/useRampQuotes.ts

+      const rateA = parseFloat(a.fiatAmount) / parseFloat(a.cryptoAmount)
+      const rateB = parseFloat(b.fiatAmount) / parseFloat(b.cryptoAmount)
+      return rateA - rateB
+    })


Bug: Zero Crypto Amount Causes Quote Sorting Failure

The quote sorting logic in useRampQuotes and TradeOptionSelectScene divides by cryptoAmount without handling cases where it's zero or invalid. This can produce NaN or Infinity rates, breaking the sort comparison and leading to incorrect quote ordering.

Additional Locations (1)

src/components/scenes/TradeOptionSelectScene.tsx#L121-L127

Not addressed here and src/components/scenes/TradeOptionSelectScene.tsx#L121-L127

Jon-edge

Not all divide by 0 comments are addressed

Jon-edge · 2025-09-03T19:52:39Z

src/hooks/useRampQuotes.ts

+      const rateA = parseFloat(a.fiatAmount) / parseFloat(a.cryptoAmount)
+      const rateB = parseFloat(b.fiatAmount) / parseFloat(b.cryptoAmount)


Not addressed

samholmes added 4 commits August 5, 2025 14:56

Add learning technique to AGENTS.md

c15694f

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.

Add opencode.json

16e8524

Document Edge scene architecture patterns and header management rules

dad7251

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

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

Jon-edge reviewed Aug 28, 2025

View reviewed changes

samholmes added 13 commits August 28, 2025 14:49

Added .run.env to .gitignore

661e02d

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

Factor out PillButton component from SwapInput

9f1610e

Redesign payment option cards

7624bce

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

Add DEBUG_LOGBOX to ENV

fec2301

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

b05e634

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

fb54b62

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

8597f09

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

a838c6d

fixup! Add learning technique to AGENTS.md

1a3e72c

fixup! Add learning technique to AGENTS.md Restructure into Initialization and Workflow sections for clarity

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

7d5e309

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

15f0fe5

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

c177303

samholmes force-pushed the sam/ramp-plugins branch from ec70370 to c177303 Compare August 28, 2025 22:02

Jon-edge reviewed Sep 1, 2025

View reviewed changes

samholmes added 8 commits September 1, 2025 17:07

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

465f31a

Remove silent-but-deadly try-catch errors.

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

c7823ff

Improve rampDeeplinkManager

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

e7f958d

Add URLs to paybis config

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

4e1684b

Fix KavButton usage

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

60a1e24

This was a legit bug for both the ramp plugin and the paybis provider. The failure callback URL includes the param set to "fail" not "failure".

fixup! Add DEBUG_LOGBOX to ENV

7fda1a7

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

fa7bb75

fixup! feat(ramp): add new plugin architecture for fiat on/off ramps

41dd0f8

cursor bot reviewed Sep 3, 2025

View reviewed changes

Jon-edge requested changes Sep 3, 2025

View reviewed changes


		interface Props extends BuyTabSceneProps<'pluginListBuy'> {}

		export const TradeCreateScene = (props: Props): React.ReactElement => {


		interface Props extends BuyTabSceneProps<'rampSelectOption'> {}

		export const TradeOptionSelectScene = (props: Props): React.JSX.Element => {

		const rateA = parseFloat(a.fiatAmount) / parseFloat(a.cryptoAmount)
		const rateB = parseFloat(b.fiatAmount) / parseFloat(b.cryptoAmount)

Sam/ramp plugins #5691

Are you sure you want to change the base?

Sam/ramp plugins #5691

Conversation

samholmes commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CHANGELOG

Dependencies

Requirements

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Jon-edge commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Jon-edge commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Jon-edge commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Jon-edge Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jon-edge Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jon-edge Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jon-edge Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jon-edge Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jon-edge Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jon-edge Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jon-edge Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jon-edge Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jon-edge Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jon-edge Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

samholmes commented Aug 13, 2025 •

edited

Loading

Jon-edge commented Aug 15, 2025 •

edited

Loading

Jon-edge commented Aug 15, 2025 •

edited

Loading

Jon-edge commented Aug 15, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Aug 28, 2025 •

edited

Loading

Jon-edge Sep 1, 2025 •

edited

Loading

Jon-edge commented Sep 1, 2025 •

edited

Loading

Jon-edge Sep 3, 2025 •

edited

Loading