[PAY-2174] Support mobile web properly in add funds flows (#6740)

packages/common/src/models/PurchaseContent.ts

@@ -5,5 +5,5 @@ export enum PurchaseMethod {
 }
 
 export enum Vendors {
-  STRIPE = 'stripe'
+  STRIPE = 'Stripe'
 }

packages/web/src/components/action-drawer/ActionDrawer.tsx

@@ -24,6 +24,7 @@ type ActionSheetModalProps = {
   title?: string
   renderTitle?: () => ReactNode
   classes?: { actionItem?: string }
+  zIndex?: number
 }
 
 // `ActionDrawer` is a drawer that presents a list of clickable rows with text
@@ -35,13 +36,19 @@ const ActionDrawer = ({
   onClose,
   title,
   renderTitle,
-  classes = {}
+  classes = {},
+  zIndex
 }: ActionSheetModalProps) => {
   const isDark = isDarkMode()
   const headerId = id ? `${id}-header` : undefined
 
   return (
-    <Drawer onClose={onClose} isOpen={isOpen} shouldClose={!isOpen}>
+    <Drawer
+      zIndex={zIndex}
+      onClose={onClose}
+      isOpen={isOpen}
+      shouldClose={!isOpen}
+    >
       <div className={styles.container}>
         <div className={styles.content}>
           <div id={headerId}>

packages/web/src/components/add-funds/AddFunds.module.css

@@ -18,3 +18,7 @@
   flex-direction: column;
   align-items: flex-start;
 }
+
+.summaryTableRowValue {
+  width: 100%;
+}

packages/web/src/components/add-funds/AddFunds.tsx

@@ -2,6 +2,7 @@ import { ChangeEvent, useCallback, useState } from 'react'
 
 import {
   BNUSDC,
+  Vendors,
   decimalIntegerToHumanReadable,
   formatUSDCWeiToFloorCentsNumber,
   useCreateUserbankIfNeeded,
@@ -22,10 +23,12 @@ import {
 import { BN } from 'bn.js'
 import cn from 'classnames'
 
+import { MobileFilterButton } from 'components/mobile-filter-button/MobileFilterButton'
 import { SummaryTable, SummaryTableItem } from 'components/summary-table'
 import { track } from 'services/analytics'
 import { audiusBackendInstance } from 'services/audius-backend/audius-backend-instance'
 import { isMobile } from 'utils/clientUtil'
+import { zIndex } from 'utils/zIndex'
 
 import styles from './AddFunds.module.css'
 
@@ -62,11 +65,18 @@ export const AddFunds = ({
       id: 'card',
       label: messages.withCard,
       icon: IconCreditCard,
-      value: (
+      value: mobile ? (
+        <MobileFilterButton
+          onSelect={() => {}}
+          options={[{ label: Vendors.STRIPE }]}
+          zIndex={zIndex.ADD_FUNDS_VENDOR_SELECTION_DRAWER}
+        />
+      ) : (
         <FilterButton
+          onSelect={() => {}}
           initialSelectionIndex={0}
           variant={FilterButtonType.REPLACE_LABEL}
-          options={[{ label: 'Stripe' }]}
+          options={[{ label: Vendors.STRIPE }]}
         />
       )
     },
@@ -114,6 +124,7 @@ export const AddFunds = ({
             onRadioChange={handleChangeOption}
             selectedRadioOption={selectedMethod}
             rowClassName={mobile ? styles.summaryTableRow : undefined}
+            rowValueClassName={mobile ? styles.summaryTableRowValue : undefined}
           />
           <Button
             variant={ButtonType.PRIMARY}

packages/web/src/components/address-tile/AddressTile.tsx

@@ -92,7 +92,7 @@ export const AddressTile = ({
             }}
             variant='body'
           >
-            {mobile ? shortenSPLAddress(address, 20) : address}
+            {mobile ? shortenSPLAddress(address, 12) : address}
           </Text>
         </Box>
         <Flex alignItems='center' borderLeft='default' pr='l' pl='l'>

packages/web/src/components/mobile-filter-button/MobileFilterButton.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react'
+
+import { Vendors } from '@audius/common'
+import { Box, Flex, IconCaretDown, Text } from '@audius/harmony'
+
+import ActionDrawer from 'components/action-drawer/ActionDrawer'
+
+type MobileFilterButtonTypes = {
+  options: { label: string }[]
+  onClose?: () => void
+  onSelect?: (label: string) => void
+  zIndex?: number
+}
+
+export const MobileFilterButton = ({
+  options,
+  onClose,
+  onSelect,
+  zIndex
+}: MobileFilterButtonTypes) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const actions = options.map((option) => ({
+    text: option.label,
+    onClick: () => {
+      onSelect?.(option.label)
+    }
+  }))
+  return (
+    <Box>
+      <Flex
+        alignItems='center'
+        justifyContent='center'
+        border='strong'
+        borderRadius='s'
+        pt='s'
+        pb='s'
+        pl='m'
+        pr='m'
+        mt='m'
+        gap='xs'
+        onClick={() => setIsOpen((open) => !open)}
+      >
+        <Text variant='title' strength='weak' size='s'>
+          {Vendors.STRIPE}
+        </Text>
+        <IconCaretDown size='s' color='default' />
+      </Flex>
+      <ActionDrawer
+        actions={actions}
+        onClose={() => {
+          setIsOpen(false)
+          onClose?.()
+        }}
+        isOpen={isOpen}
+        zIndex={zIndex}
+      />
+    </Box>
+  )
+}

packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFields.module.css

@@ -15,3 +15,12 @@
   justify-content: center;
   width: var(--unit-4);
 }
+
+.summaryTableRow {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.summaryTableRowValue {
+  width: 100%;
+}

packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFields.tsx

@@ -20,9 +20,11 @@ import {
 import { IconCheck } from '@audius/stems'
 import BN from 'bn.js'
 import { useField } from 'formik'
+import { isMobile } from 'web3modal'
 
 import { Icon } from 'components/Icon'
-import { SummaryTable } from 'components/summary-table'
+import { MobileFilterButton } from 'components/mobile-filter-button/MobileFilterButton'
+import { SummaryTable, SummaryTableItem } from 'components/summary-table'
 import { Text } from 'components/typography'
 import { useRemoteVar } from 'hooks/useRemoteConfig'
 
@@ -55,6 +57,7 @@ export const PurchaseContentFormFields = ({
   isUnlocking
 }: PurchaseContentFormFieldsProps) => {
   const { data: balance } = useUSDCBalance()
+  const mobile = isMobile()
   const payExtraAmountPresetValues = usePayExtraPresets(useRemoteVar)
   const [{ value: purchaseMethod }, , { setValue: setPurchaseMethod }] =
     useField(PURCHASE_METHOD)
@@ -66,6 +69,7 @@ export const PurchaseContentFormFields = ({
   })
   const isExistingBalanceDisabled =
     USDC(price / 100).value + USDC((extraAmount ?? 0) / 100).value > balanceUSDC
+  const hasBalance = balanceUSDC > 0
 
   if (
     purchaseMethod === PurchaseMethod.EXISTING_BALANCE &&
@@ -95,30 +99,38 @@ export const PurchaseContentFormFields = ({
   }
 
   const options = [
-    {
-      label: messages.existingBalance,
-      id: PurchaseMethod.EXISTING_BALANCE,
-      icon: IconDonate,
-      disabled: isExistingBalanceDisabled,
-      value: (
-        <Text
-          variant='title'
-          color={
-            purchaseMethod === PurchaseMethod.EXISTING_BALANCE
-              ? 'secondary'
-              : undefined
-          }
-        >
-          {`$${USDC(balanceUSDC).toFixed(2)}`}
-        </Text>
-      )
-    },
+    hasBalance
+      ? {
+          label: messages.existingBalance,
+          id: PurchaseMethod.EXISTING_BALANCE,
+          icon: IconDonate,
+          disabled: isExistingBalanceDisabled,
+          value: (
+            <Text
+              variant='title'
+              color={
+                purchaseMethod === PurchaseMethod.EXISTING_BALANCE
+                  ? 'secondary'
+                  : undefined
+              }
+            >
+              {`$${USDC(balanceUSDC).toFixed(2)}`}
+            </Text>
+          )
+        }
+      : null,
     {
       label: messages.card,
       id: PurchaseMethod.CARD,
       icon: IconCreditCard,
-      value: (
+      value: mobile ? (
+        <MobileFilterButton
+          onSelect={() => {}}
+          options={[{ label: Vendors.STRIPE }]}
+        />
+      ) : (
         <FilterButton
+          onSelect={() => {}}
           initialSelectionIndex={0}
           variant={FilterButtonType.REPLACE_LABEL}
           options={[{ label: Vendors.STRIPE }]}
@@ -130,7 +142,7 @@ export const PurchaseContentFormFields = ({
       id: PurchaseMethod.MANUAL_TRANSFER,
       icon: IconTransaction
     }
-  ]
+  ].filter(Boolean) as SummaryTableItem[]
 
   return (
     <>
@@ -148,6 +160,8 @@ export const PurchaseContentFormFields = ({
         onRadioChange={handleChange}
         selectedRadioOption={purchaseMethod}
         items={options}
+        rowClassName={mobile ? styles.summaryTableRow : undefined}
+        rowValueClassName={mobile ? styles.summaryTableRowValue : undefined}
       />
       {isUnlocking ? null : <PayToUnlockInfo />}
     </>

packages/web/src/components/summary-table/SummaryTable.tsx

@@ -1,12 +1,6 @@
 import { ChangeEvent, ReactNode, useCallback, useState } from 'react'
 
-import {
-  Box,
-  Flex,
-  IconCaretDown,
-  IconComponent,
-  useTheme
-} from '@audius/harmony'
+import { Flex, IconCaretDown, IconComponent, useTheme } from '@audius/harmony'
 import { ColorValue, RadioButton, RadioButtonGroup } from '@audius/stems'
 import { ResizeObserver } from '@juggle/resize-observer'
 import cn from 'classnames'
@@ -63,6 +57,7 @@ export type SummaryTableProps = {
   selectedRadioOption?: string
   onRadioChange?: (e: ChangeEvent<HTMLInputElement>) => void
   rowClassName?: string
+  rowValueClassName?: string
 }
 
 export const SummaryTable = ({
@@ -76,7 +71,8 @@ export const SummaryTable = ({
   withRadioOptions,
   selectedRadioOption,
   onRadioChange,
-  rowClassName
+  rowClassName,
+  rowValueClassName
 }: SummaryTableProps) => {
   const { color } = useTheme()
   // Collapsible is collapsed by default
@@ -96,18 +92,18 @@ export const SummaryTable = ({
           className={cn(styles.row, rowClassName)}
           css={{ opacity: disabled ? 0.5 : 1 }}
         >
-          <Flex alignItems='center' gap='s'>
+          <Flex alignItems='center' justifyContent='center' gap='s'>
             {withRadioOptions ? (
               <RadioButton value={id} disabled={disabled} />
             ) : null}
             {Icon ? (
-              <Box ml='s'>
+              <Flex alignItems='center' ml='s'>
                 <Icon color='default' />
-              </Box>
+              </Flex>
             ) : null}
             <Text>{label}</Text>
           </Flex>
-          <Text>{value}</Text>
+          <Text className={rowValueClassName}>{value}</Text>
         </Flex>
       ))}
       {summaryItem !== undefined ? (

packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.tsx

@@ -60,12 +60,13 @@ export const USDCManualTransfer = ({ onClose }: { onClose: () => void }) => {
 
   return (
     <div className={styles.root}>
-      <Flex gap='l' alignItems='center'>
+      <Flex gap='l' alignItems='center' direction={mobile ? 'column' : 'row'}>
+        {mobile ? <Text>{messages.explainer}</Text> : null}
         <div className={styles.qr}>
           {USDCUserBank ? <QRCode value={USDCUserBank} /> : null}
         </div>
         <Flex direction='column' gap='xl'>
-          <Text>{messages.explainer}</Text>
+          {!mobile ? <Text>{messages.explainer}</Text> : null}
           <Hint
             text={messages.disclaimer}
             link={USDCLearnMore}

packages/web/src/utils/zIndex.ts

@@ -33,9 +33,10 @@ export enum zIndex {
   MUSIC_CONFETTI = 10000,
   WEB3_WALLET_CONNECT_MODAL = 10002,
   MODAL_OVERFLOW_MENU_POPUP = 10002,
-  USDC_MANUAL_TRANSFER_MODAL = 10002,
   ADD_FUNDS_MODAL = 10002,
   PREMIUM_CONTENT_PURCHASE_MODAL = 10002,
+  ADD_FUNDS_VENDOR_SELECTION_DRAWER = 10003,
+  USDC_MANUAL_TRANSFER_MODAL = 10003,
   ARTIST_POPOVER_POPUP = 20000,
   PLAY_BAR_POPUP_MENU = 20001,
   FEATURE_FLAG_OVERRIDE_MODAL = 30000,