[PAY-1685] Wire up stripe UI for USDC purchase in mobile (#3837)

Author: dharit-tan

packages/common/package-lock.json

@@ -28,7 +28,7 @@
     "url": "https://github.com/AudiusProject/audius-client/issues"
   },
   "dependencies": {
-    "@audius/sdk": "3.0.3-beta.99",
+    "@audius/sdk": "3.0.3-beta.104",
     "@fingerprintjs/fingerprintjs-pro": "3.5.6",
     "@metaplex-foundation/mpl-token-metadata": "2.5.2",
     "@optimizely/optimizely-sdk": "4.0.0",

packages/common/package.json

@@ -34,7 +34,7 @@
     "webpack-cli": "4.5.0"
   },
   "dependencies": {
-    "@audius/sdk": "3.0.3-beta.99",
+    "@audius/sdk": "3.0.3-beta.104",
     "@audius/stems": "1.5.35",
     "amplitude-js": "8.11.1",
     "axios": "0.19.2",

packages/embed/package-lock.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@amplitude/react-native": "2.6.0",
     "@audius/common": "1.5.35",
-    "@audius/sdk": "3.0.3-beta.99",
+    "@audius/sdk": "3.0.3-beta.104",
     "@fingerprintjs/fingerprintjs-pro-react-native": "2.0.0-test.2",
     "@gorhom/portal": "1.0.9",
     "@hcaptcha/react-native-hcaptcha": "1.3.4",

packages/embed/package.json

@@ -1,11 +1,12 @@
 import { useCallback } from 'react'
 
 import { accountSelectors } from '@audius/common'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 
 import { Button } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { createStripeSession, getUSDCUserBank } from 'app/services/buyCrypto'
+import { setVisibility } from 'app/store/drawers/slice'
 import { useThemeColors } from 'app/utils/theme'
 
 const { getAccountERCWallet } = accountSelectors
@@ -21,6 +22,7 @@ type StripePurchaseConfirmationButtonProps = {
 export const StripePurchaseConfirmationButton = ({
   price
 }: StripePurchaseConfirmationButtonProps) => {
+  const dispatch = useDispatch()
   const navigation = useNavigation()
   const { specialLightGreen1 } = useThemeColors()
   const ethWallet = useSelector(getAccountERCWallet)
@@ -38,20 +40,27 @@ export const StripePurchaseConfirmationButton = ({
       }
       const res = await createStripeSession({
         amount: price,
-        destinationWallet: usdcUserBank.toString()
+        destinationWallet: usdcUserBank.toString(),
+        destinationCurrency: 'usdc'
       })
       if (res === undefined || res.client_secret === undefined) {
         throw new Error(
           'Stripe session creation failed: could not get client secret'
         )
       }
+      dispatch(
+        setVisibility({
+          drawer: 'PremiumTrackPurchase',
+          visible: false
+        })
+      )
       navigation.navigate('StripeOnrampEmbed', {
         clientSecret: res.client_secret
       })
     } catch (e) {
       console.error(e)
     }
-  }, [ethWallet, navigation, price])
+  }, [dispatch, ethWallet, navigation, price])
 
   return (
     <Button

packages/mobile/package-lock.json

@@ -10,14 +10,17 @@ export const getUSDCUserBank = async (ethWallet: string) => {
 
 export const createStripeSession = async ({
   destinationWallet,
-  amount
+  amount,
+  destinationCurrency
 }: {
   destinationWallet: string
   amount: string
+  destinationCurrency: 'sol' | 'usdc'
 }) => {
   await waitForLibsInit()
   return await audiusLibs?.identityService?.createStripeSession({
     destinationWallet,
-    amount
+    amount,
+    destinationCurrency
   })
 }