fix(buy-crypto): title the amount screen "Buy USDC" and polish fundin…

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…'

components/BuyCrypto/Transfi/TransfiPaymentHandoff.tsx

@@ -72,22 +72,22 @@ 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}
         >
           <Text
             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'
             }
           >

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)}
             />
           ))}

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';

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');
   });

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: