[PAY-2090] Manual USDC Transfer Mobile UI

packages/common/src/hooks/useUSDCBalance.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 
 import BN from 'bn.js'
 import { useDispatch, useSelector } from 'react-redux'
+import { useInterval } from 'react-use'
 
 import { Status } from 'models/Status'
 import { BNUSDC, StringUSDC } from 'models/Wallet'
@@ -19,7 +20,13 @@ import { setUSDCBalance } from 'store/wallet/slice'
  * stale balance. If absolute latest balance value is needed, defer use until
  * Status.SUCCESS.
  */
-export const useUSDCBalance = () => {
+export const useUSDCBalance = ({
+  isPolling,
+  pollingInterval = 1000
+}: {
+  isPolling?: boolean
+  pollingInterval?: number
+} = {}) => {
   const { audiusBackend } = useAppContext()
   const dispatch = useDispatch()
 
@@ -51,5 +58,11 @@ export const useUSDCBalance = () => {
     refresh()
   }, [refresh])
 
+  useInterval(() => {
+    if (isPolling) {
+      refresh()
+    }
+  }, pollingInterval)
+
   return { balanceStatus, recoveryStatus, data, refresh }
 }

packages/mobile/src/app/Drawers.tsx

@@ -37,6 +37,7 @@ import { StripeOnrampDrawer } from 'app/components/stripe-onramp-drawer'
 import { SupportersInfoDrawer } from 'app/components/supporters-info-drawer'
 import { TransferAudioMobileDrawer } from 'app/components/transfer-audio-mobile-drawer'
 import { TrendingRewardsDrawer } from 'app/components/trending-rewards-drawer'
+import { USDCManualTransferDrawer } from 'app/components/usdc-manual-transfer-drawer'
 import { TrendingFilterDrawer } from 'app/screens/trending-screen'
 
 import { useDrawerState } from '../components/drawer'
@@ -134,7 +135,8 @@ const nativeDrawersMap: { [DrawerName in Drawer]?: ComponentType } = {
   BlockMessages: BlockMessagesDrawer,
   DeleteChat: DeleteChatDrawer,
   SupportersInfo: SupportersInfoDrawer,
-  PremiumTrackPurchase: PremiumTrackPurchaseDrawer
+  PremiumTrackPurchase: PremiumTrackPurchaseDrawer,
+  USDCManualTransfer: USDCManualTransferDrawer
 }
 
 const commonDrawers = Object.entries(commonDrawersMap) as [

packages/mobile/src/components/core/AddressTile.tsx

@@ -0,0 +1,81 @@
+import { useCallback, type ReactNode } from 'react'
+
+import Clipboard from '@react-native-clipboard/clipboard'
+import { View } from 'react-native'
+import { TouchableOpacity } from 'react-native-gesture-handler'
+
+import IconCopy2 from 'app/assets/images/iconCopy2.svg'
+import { Text } from 'app/components/core'
+import { useToast } from 'app/hooks/useToast'
+import { flexRowCentered, makeStyles } from 'app/styles'
+import { spacing } from 'app/styles/spacing'
+import { useColor } from 'app/utils/theme'
+
+const messages = {
+  copied: 'Copied to Clipboard!'
+}
+
+const useStyles = makeStyles(({ spacing, palette, typography }) => ({
+  addressContainer: {
+    ...flexRowCentered(),
+    borderWidth: 1,
+    borderColor: palette.borderDefault,
+    borderRadius: spacing(1),
+    backgroundColor: palette.backgroundSurface
+  },
+  rightContainer: {
+    paddingVertical: spacing(4),
+    paddingHorizontal: spacing(6)
+  },
+  middleContainer: {
+    paddingHorizontal: spacing(6),
+    paddingVertical: spacing(4),
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderColor: palette.borderDefault,
+    flexShrink: 1
+  },
+  leftContainer: {
+    paddingVertical: spacing(4),
+    paddingHorizontal: spacing(6)
+  }
+}))
+
+type AddressTileProps = {
+  address: string
+  left?: ReactNode
+  right?: ReactNode
+}
+
+export const AddressTile = ({ address, left, right }: AddressTileProps) => {
+  const styles = useStyles()
+  const { toast } = useToast()
+  const textSubdued = useColor('textIconSubdued')
+
+  const handleCopyPress = useCallback(() => {
+    Clipboard.setString(address)
+    toast({ content: messages.copied, type: 'info' })
+  }, [address, toast])
+
+  return (
+    <View style={styles.addressContainer}>
+      <View style={styles.leftContainer}>{left}</View>
+      <View style={styles.middleContainer}>
+        <Text numberOfLines={1} ellipsizeMode='middle'>
+          {address}
+        </Text>
+      </View>
+      <View style={styles.rightContainer}>
+        {right ?? (
+          <TouchableOpacity onPress={handleCopyPress}>
+            <IconCopy2
+              fill={textSubdued}
+              width={spacing(4)}
+              height={spacing(4)}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  )
+}

packages/mobile/src/components/drawer/NativeDrawer.tsx

@@ -17,7 +17,12 @@ type NativeDrawerProps = SetOptional<DrawerProps, 'isOpen' | 'onClose'> & {
  * opening and closing.
  */
 export const NativeDrawer = (props: NativeDrawerProps) => {
-  const { drawerName, onClose: onCloseProp, ...other } = props
+  const {
+    drawerName,
+    onClose: onCloseProp,
+    onClosed: onClosedProp,
+    ...other
+  } = props
 
   const { isOpen, onClose, onClosed, visibleState } = useDrawer(drawerName)
 
@@ -26,13 +31,18 @@ export const NativeDrawer = (props: NativeDrawerProps) => {
     onClose()
   }, [onCloseProp, onClose])
 
+  const handleClosed = useCallback(() => {
+    onClosedProp?.()
+    onClosed()
+  }, [onClosed, onClosedProp])
+
   if (visibleState === false) return null
 
   return (
     <Drawer
       isOpen={isOpen}
       onClose={handleClose}
-      onClosed={onClosed}
+      onClosed={handleClosed}
       {...other}
     />
   )

packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx

@@ -40,6 +40,7 @@ import { useIsUSDCEnabled } from 'app/hooks/useIsUSDCEnabled'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useFeatureFlag, useRemoteVar } from 'app/hooks/useRemoteConfig'
 import { make, track as trackEvent } from 'app/services/analytics'
+import { setVisibility } from 'app/store/drawers/slice'
 import { flexRowCentered, makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
@@ -80,7 +81,8 @@ const messages = {
       }
     </>
   ),
-  termsOfUse: 'Terms of Use.'
+  termsOfUse: 'Terms of Use.',
+  manualTransfer: '(Advanced) Manual Crypto Transfer'
 }
 
 const useStyles = makeStyles(({ spacing, typography, palette }) => ({
@@ -145,7 +147,13 @@ const useStyles = makeStyles(({ spacing, typography, palette }) => ({
     ...flexRowCentered()
   },
   disclaimer: {
-    lineHeight: 20
+    lineHeight: typography.fontSize.medium * 1.25
+  },
+  bottomSection: {
+    gap: spacing(2)
+  },
+  manualTransfer: {
+    lineHeight: typography.fontSize.medium * 1.25
   }
 }))
 
@@ -206,9 +214,10 @@ const getButtonText = (isUnlocking: boolean, amountDue: number) =>
 // to the FormikContext, which can only be used in a component which is a descendant
 // of the `<Formik />` component
 const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
+  const dispatch = useDispatch()
   const navigation = useNavigation()
   const styles = useStyles()
-  const { specialLightGreen, secondary } = useThemeColors()
+  const { specialLightGreen, primary } = useThemeColors()
   const presetValues = usePayExtraPresets(useRemoteVar)
   const { isEnabled: isIOSUSDCPurchaseEnabled } = useFeatureFlag(
     FeatureFlags.IOS_USDC_PURCHASE_ENABLED
@@ -245,6 +254,10 @@ const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
     trackEvent(make({ eventName: Name.PURCHASE_CONTENT_TOS_CLICKED }))
   }, [])
 
+  const handleManualTransferPress = useCallback(() => {
+    dispatch(setVisibility({ drawer: 'USDCManualTransfer', visible: true }))
+  }, [dispatch])
+
   return (
     <>
       <ScrollView contentContainerStyle={styles.formContentContainer}>
@@ -261,10 +274,22 @@ const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
               disabled={isInProgress}
             />
           )}
-          <PurchaseSummaryTable
-            {...purchaseSummaryValues}
-            isPurchaseSuccessful={isPurchaseSuccessful}
-          />
+          <View style={styles.bottomSection}>
+            <PurchaseSummaryTable
+              {...purchaseSummaryValues}
+              isPurchaseSuccessful={isPurchaseSuccessful}
+            />
+            {isIOSDisabled ? null : (
+              <Text
+                color='primary'
+                fontSize='small'
+                onPress={handleManualTransferPress}
+                style={styles.manualTransfer}
+              >
+                {messages.manualTransfer}
+              </Text>
+            )}
+          </View>
           {isIOSDisabled ? (
             <PurchaseUnavailable />
           ) : isPurchaseSuccessful ? (
@@ -279,7 +304,7 @@ const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
               </View>
               <Text style={styles.disclaimer}>
                 {messages.disclaimer(
-                  <Text colorValue={secondary} onPress={handleTermsPress}>
+                  <Text colorValue={primary} onPress={handleTermsPress}>
                     {messages.termsOfUse}
                   </Text>
                 )}

packages/mobile/src/components/premium-track-purchase-drawer/hooks/usePurchaseContentFormState.ts

@@ -17,7 +17,11 @@ export const usePurchaseContentFormState = ({ price }: { price: number }) => {
   const error = useSelector(getPurchaseContentError)
   const isUnlocking = !error && isContentPurchaseInProgress(stage)
 
-  const { data: currentBalance, recoveryStatus, refresh } = useUSDCBalance()
+  const {
+    data: currentBalance,
+    recoveryStatus,
+    refresh
+  } = useUSDCBalance({ isPolling: true })
 
   // Refresh balance on successful recovery
   useEffect(() => {