From 7dc3969dcffea2754f1261017c44c79db19e1cb4 Mon Sep 17 00:00:00 2001
From: Marcus Pasell <3690498+rickyrombo@users.noreply.github.com>
Date: Thu, 4 Jan 2024 17:06:14 -0600
Subject: [PATCH] Make Stripe the default PurchaseVendor for AddFunds on mobile
 (#7085)

---
 .../src/components/add-funds-drawer/AddFundsDrawer.tsx |  3 ++-
 .../src/components/payment-method/PaymentMethod.tsx    |  4 +++-
 .../src/screens/pay-and-earn-screen/USDCCard.tsx       | 10 +++++-----
 packages/mobile/src/store/purchase-vendor/slice.ts     |  6 +++---
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/mobile/src/components/add-funds-drawer/AddFundsDrawer.tsx b/packages/mobile/src/components/add-funds-drawer/AddFundsDrawer.tsx
index ce3ea06c774..c0ebb100b6a 100644
--- a/packages/mobile/src/components/add-funds-drawer/AddFundsDrawer.tsx
+++ b/packages/mobile/src/components/add-funds-drawer/AddFundsDrawer.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react'
 
 import {
+  PurchaseVendor,
   useAddFundsModal,
   useUSDCManualTransferModal,
   buyUSDCActions,
@@ -52,7 +53,7 @@ export const AddFundsDrawer = () => {
   const openCardFlow = useCallback(() => {
     dispatch(
       buyUSDCActions.onrampOpened({
-        vendor: purchaseVendorState,
+        vendor: purchaseVendorState ?? PurchaseVendor.STRIPE,
         purchaseInfo: {
           desiredAmount: DEFAULT_PURCHASE_AMOUNT_CENTS
         }
diff --git a/packages/mobile/src/components/payment-method/PaymentMethod.tsx b/packages/mobile/src/components/payment-method/PaymentMethod.tsx
index 11369153df1..8f0bd306c86 100644
--- a/packages/mobile/src/components/payment-method/PaymentMethod.tsx
+++ b/packages/mobile/src/components/payment-method/PaymentMethod.tsx
@@ -110,7 +110,9 @@ export const PaymentMethod = ({
       icon: IconCreditCard,
       content:
         vendorOptions.length > 1 ? (
-          <CardSelectionButton selectedVendor={purchaseVendor} />
+          <CardSelectionButton
+            selectedVendor={purchaseVendor ?? vendorOptions[0]}
+          />
         ) : null
     },
     {
diff --git a/packages/mobile/src/screens/pay-and-earn-screen/USDCCard.tsx b/packages/mobile/src/screens/pay-and-earn-screen/USDCCard.tsx
index b7371f71f55..d1ec08120b3 100644
--- a/packages/mobile/src/screens/pay-and-earn-screen/USDCCard.tsx
+++ b/packages/mobile/src/screens/pay-and-earn-screen/USDCCard.tsx
@@ -51,19 +51,19 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   usdc: {
     fontSize: spacing(5),
     fontWeight: '900',
-    color: palette.white,
+    color: palette.staticWhite,
     opacity: 0.8
   },
   balance: {
     fontSize: spacing(10.5),
     fontWeight: '900',
-    color: palette.white,
+    color: palette.staticWhite,
     lineHeight: spacing(13)
   },
   buyAndSell: {
     fontSize: spacing(4),
     fontWeight: '500',
-    color: palette.white,
+    color: palette.staticWhite,
     marginTop: spacing(2)
   },
   learnMore: {
@@ -84,7 +84,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
 
 export const USDCCard = () => {
   const styles = useStyles()
-  const white = useColor('white')
+  const white = useColor('staticWhite')
   const { data: balance } = useUSDCBalance()
   const balanceCents = formatUSDCWeiToFloorCentsNumber(
     (balance ?? new BN(0)) as BNUSDC
@@ -123,7 +123,7 @@ export const USDCCard = () => {
             width={spacing(4)}
             fill={white}
           />
-          <Text fontSize='small' weight='bold' color='white'>
+          <Text fontSize='small' weight='bold' color='staticWhite'>
             {messages.learnMore}
           </Text>
         </TouchableOpacity>
diff --git a/packages/mobile/src/store/purchase-vendor/slice.ts b/packages/mobile/src/store/purchase-vendor/slice.ts
index b5aa8235167..888add127dd 100644
--- a/packages/mobile/src/store/purchase-vendor/slice.ts
+++ b/packages/mobile/src/store/purchase-vendor/slice.ts
@@ -1,13 +1,13 @@
-import { PurchaseVendor } from '@audius/common'
+import type { PurchaseVendor } from '@audius/common'
 import type { PayloadAction } from '@reduxjs/toolkit'
 import { createSlice } from '@reduxjs/toolkit'
 
 export type PurchaseVendorState = {
-  card: PurchaseVendor
+  card?: PurchaseVendor
 }
 
 const initialState: PurchaseVendorState = {
-  card: PurchaseVendor.COINFLOW
+  card: undefined
 }
 
 const slice = createSlice({