From 9e535a0a2317a7421f2a06cb5701ead965d4322b Mon Sep 17 00:00:00 2001
From: mul53 <mulengabowa53@gmail.com>
Date: Mon, 7 Sep 2026 14:13:10 +0200
Subject: [PATCH] fix(buy-crypto): title the amount screen "Buy USDC" and
 polish funding buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Amount screen header now reads "Buy USDC" rather than "Buy crypto". It is
  titled independently in two places — getBuyCryptoTitle for the embedded
  card-funding flow and useDepositOption for the global deposit modal — so
  both are updated, along with the test that asserts they stay aligned.
- Drop the USD-equivalent line under the amount input. The field is already
  denominated in USDC, so "$3" under "3" only restated it; its
  Intl.NumberFormat computation goes with it.
- Set the enabled "Continue to payment" label to text-black at the call site.
  The brand variant already forces black, but the label had previously come
  out white in some renders (see the note in button.tsx).
- Read the local-currency chips on "Fund your wallet" from the static
  CARD_FUND_LOCAL_PAYMENT_METHODS map via getCardFundLocalPaymentMethods,
  matching what CardFundOptions already did. This drops three-to-four TransFi
  payment-config requests on open and renders the rails on first paint
  instead of once the responses land.
- Round both payment hand-off buttons to a pill and make the secondary
  label white. button.tsx appends rounded-[30px] to brand buttons after the
  caller's className, so the green button was already a pill and the grey
  one was not.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../BuyCrypto/Transfi/TransfiAmount.tsx       |  9 +++----
 .../Transfi/TransfiPaymentHandoff.tsx         |  8 +++---
 .../DepositOption/DepositTypeSelection.tsx    | 26 ++++---------------
 hooks/useDepositOption.tsx                    |  2 +-
 lib/__tests__/buyCryptoFlow.test.ts           |  2 +-
 lib/buyCryptoFlow.ts                          |  2 +-
 6 files changed, 15 insertions(+), 34 deletions(-)

diff --git a/components/BuyCrypto/Transfi/TransfiAmount.tsx b/components/BuyCrypto/Transfi/TransfiAmount.tsx
index 4c298f9d..27715865 100644
--- a/components/BuyCrypto/Transfi/TransfiAmount.tsx
+++ b/components/BuyCrypto/Transfi/TransfiAmount.tsx
@@ -163,10 +163,6 @@ export const TransfiAmount = () => {
     !!activePaymentCode &&
     !!currency;
   const continueDisabled = !isValid || creatingOrder;
-  const usdEquivalent =
-    Number.isFinite(amountNum) && amountNum > 0
-      ? new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(amountNum)
-      : '0';
 
   // Reported once per amount that lands out of range, not per keystroke: the
   // limits being wrong for a market is the signal, not how fast someone types.
@@ -258,7 +254,6 @@ export const TransfiAmount = () => {
               className="p-0 text-3xl font-semibold text-white web:outline-none"
               style={{ fontFamily: 'MonaSans_600SemiBold' }}
             />
-            <Text className="text-base font-medium text-white/50">${usdEquivalent}</Text>
           </View>
           <View className="h-12 shrink-0 flex-row items-center gap-[7px] rounded-full bg-white/10 px-3">
             {/* Our own USDC mark, not TransFi's: theirs badges the delivery
@@ -365,7 +360,9 @@ export const TransfiAmount = () => {
           disabled={continueDisabled}
         >
           <Text
-            className={continueDisabled ? 'text-base font-bold text-white' : 'text-base font-bold'}
+            className={
+              continueDisabled ? 'text-base font-bold text-white' : 'text-base font-bold text-black'
+            }
           >
             {creatingOrder
               ? 'Creating order…'
diff --git a/components/BuyCrypto/Transfi/TransfiPaymentHandoff.tsx b/components/BuyCrypto/Transfi/TransfiPaymentHandoff.tsx
index c95e9300..ce14ddef 100644
--- a/components/BuyCrypto/Transfi/TransfiPaymentHandoff.tsx
+++ b/components/BuyCrypto/Transfi/TransfiPaymentHandoff.tsx
@@ -72,7 +72,7 @@ export const TransfiPaymentHandoff = ({
 
       <View className="mt-auto gap-3">
         <Button
-          className="h-14 rounded-2xl"
+          className="h-14 rounded-full"
           variant={blocked ? 'brand' : 'secondary'}
           onPress={onOpen}
         >
@@ -80,14 +80,14 @@ export const TransfiPaymentHandoff = ({
             className={
               blocked
                 ? 'text-base font-bold text-primary-foreground'
-                : 'text-base font-semibold text-primary'
+                : 'text-base font-semibold text-white'
             }
           >
             {blocked ? 'Open payment page' : 'Reopen payment page'}
           </Text>
         </Button>
         <Button
-          className="h-14 rounded-2xl"
+          className="h-14 rounded-full"
           variant={blocked ? 'secondary' : 'brand'}
           onPress={() => {
             track(TRACKING_EVENTS.BUY_CRYPTO_PAYMENT_CONFIRMED_BY_USER, {
@@ -100,7 +100,7 @@ export const TransfiPaymentHandoff = ({
           <Text
             className={
               blocked
-                ? 'text-base font-semibold text-primary'
+                ? 'text-base font-semibold text-white'
                 : 'text-base font-bold text-primary-foreground'
             }
           >
diff --git a/components/DepositOption/DepositTypeSelection.tsx b/components/DepositOption/DepositTypeSelection.tsx
index d42fb839..cfdbfa88 100644
--- a/components/DepositOption/DepositTypeSelection.tsx
+++ b/components/DepositOption/DepositTypeSelection.tsx
@@ -8,7 +8,10 @@ import HomeQR from '@/assets/images/home-qr';
 import CardFundGroup from '@/components/Card/CardFund/CardFundGroup';
 import CardFundRow from '@/components/Card/CardFund/CardFundRow';
 import { CARD_FUND_USD_ICON } from '@/components/Card/CardFund/constants';
-import { CARD_FUND_LOCAL_CURRENCIES } from '@/components/Card/CardFund/localCurrencies';
+import {
+  CARD_FUND_LOCAL_CURRENCIES,
+  getCardFundLocalPaymentMethods,
+} from '@/components/Card/CardFund/localCurrencies';
 import { Text } from '@/components/ui/text';
 import { DEPOSIT_MODAL } from '@/constants/modals';
 import { TRACKING_EVENTS } from '@/constants/tracking-events';
@@ -17,13 +20,11 @@ import { useCardStatus } from '@/hooks/useCardStatus';
 import { useDimension } from '@/hooks/useDimension';
 import useGeoCompliance from '@/hooks/useGeoCompliance';
 import { useOnrampAutomation } from '@/hooks/useOnrampAutomation';
-import { useTransfiPaymentMethods } from '@/hooks/useTransfi';
 import { track } from '@/lib/analytics';
 import { RainApplicationStatus } from '@/lib/types';
 import { useDepositStore } from '@/store/useDepositStore';
 import { useTransfiStore } from '@/store/useTransfiStore';
 
-import { getPaymentMethodChips } from './depositPaymentMethods';
 import VirtualAccountApplyDialog from './VirtualAccountDetails/VirtualAccountApplyDialog';
 
 const ICON_SIZE = 36;
@@ -49,23 +50,6 @@ const DepositTypeSelection = () => {
   const { isBuyCryptoAvailable } = useGeoCompliance();
   const { handleBuyCryptoPress } = useBuyCryptoEntry();
 
-  const { data: brlPaymentMethods } = useTransfiPaymentMethods('BRL');
-  const { data: bdtPaymentMethods } = useTransfiPaymentMethods('BDT');
-  const { data: phpPaymentMethods } = useTransfiPaymentMethods('PHP');
-  const { data: mxnPaymentMethods } = useTransfiPaymentMethods(
-    showAllCurrencies ? 'MXN' : undefined,
-  );
-
-  const paymentMethodChips = useMemo(
-    () => ({
-      BRL: getPaymentMethodChips(brlPaymentMethods),
-      BDT: getPaymentMethodChips(bdtPaymentMethods),
-      PHP: getPaymentMethodChips(phpPaymentMethods),
-      MXN: getPaymentMethodChips(mxnPaymentMethods),
-    }),
-    [bdtPaymentMethods, brlPaymentMethods, mxnPaymentMethods, phpPaymentMethods],
-  );
-
   const localCurrencies = useMemo(() => {
     const visibleCodes = showAllCurrencies
       ? [...FEATURED_LOCAL_CURRENCY_CODES, ...ADDITIONAL_LOCAL_CURRENCY_CODES]
@@ -159,7 +143,7 @@ const DepositTypeSelection = () => {
               className="min-h-[93px]"
               icon={currency.icon}
               title={currency.code}
-              chips={paymentMethodChips[currency.code as keyof typeof paymentMethodChips]}
+              chips={getCardFundLocalPaymentMethods(currency.code)}
               onPress={() => handleLocalCurrencyPress(currency.code)}
             />
           ))}
diff --git a/hooks/useDepositOption.tsx b/hooks/useDepositOption.tsx
index f745d251..8accaec0 100644
--- a/hooks/useDepositOption.tsx
+++ b/hooks/useDepositOption.tsx
@@ -442,7 +442,7 @@ const useDepositOption = ({
     if (isBuyCryptoOptions) return 'Buy crypto';
     if (isBuyCryptoKycConsent) return 'Verify to continue';
     if (isBuyCryptoKycPending) return 'Verifying';
-    if (isBuyCryptoAmount) return 'Buy crypto';
+    if (isBuyCryptoAmount) return 'Buy USDC';
     if (isBuyCryptoCurrency) return 'Select currency';
     if (isBuyCryptoPaymentMethod) return 'Payment method';
     if (isBuyCryptoPayment) return 'Complete payment';
diff --git a/lib/__tests__/buyCryptoFlow.test.ts b/lib/__tests__/buyCryptoFlow.test.ts
index 5d86a8a5..5d42a35b 100644
--- a/lib/__tests__/buyCryptoFlow.test.ts
+++ b/lib/__tests__/buyCryptoFlow.test.ts
@@ -36,7 +36,7 @@ describe('embedded Buy crypto navigation', () => {
   });
 
   it('keeps the embedded header titles aligned with the global flow', () => {
-    expect(getBuyCryptoTitle(DEPOSIT_MODAL.OPEN_BUY_CRYPTO_AMOUNT)).toBe('Buy crypto');
+    expect(getBuyCryptoTitle(DEPOSIT_MODAL.OPEN_BUY_CRYPTO_AMOUNT)).toBe('Buy USDC');
     expect(getBuyCryptoTitle(DEPOSIT_MODAL.OPEN_BUY_CRYPTO_CURRENCY)).toBe('Select currency');
     expect(getBuyCryptoTitle(DEPOSIT_MODAL.OPEN_BUY_CRYPTO_PAYMENT_METHOD)).toBe('Payment method');
   });
diff --git a/lib/buyCryptoFlow.ts b/lib/buyCryptoFlow.ts
index 460c33c1..86560d6d 100644
--- a/lib/buyCryptoFlow.ts
+++ b/lib/buyCryptoFlow.ts
@@ -19,7 +19,7 @@ export const getBuyCryptoTitle = (modal: DepositModal) => {
     case DEPOSIT_MODAL.OPEN_BUY_CRYPTO_KYC_PENDING.name:
       return 'Verifying';
     case DEPOSIT_MODAL.OPEN_BUY_CRYPTO_AMOUNT.name:
-      return 'Buy crypto';
+      return 'Buy USDC';
     case DEPOSIT_MODAL.OPEN_BUY_CRYPTO_CURRENCY.name:
       return 'Select currency';
     case DEPOSIT_MODAL.OPEN_BUY_CRYPTO_PAYMENT_METHOD.name: