Fix several USDC purchase related bugs (#6222)

AudiusProject · Oct 4, 2023 · 889a911 · 889a911
1 parent df75ad9
commit 889a911
Show file tree

Hide file tree

Showing 16 changed files with 115 additions and 89 deletions.
diff --git a/packages/common/src/store/purchase-content/slice.ts b/packages/common/src/store/purchase-content/slice.ts
@@ -87,7 +87,8 @@ export const {
   purchaseSucceeded,
   purchaseConfirmed,
   purchaseCanceled,
-  purchaseContentFlowFailed
+  purchaseContentFlowFailed,
+  cleanup
 } = slice.actions
 
 export default slice.reducer

diff --git a/packages/mobile/src/components/core/ErrorText.tsx b/packages/mobile/src/components/core/ErrorText.tsx
@@ -4,5 +4,16 @@ import { Text } from 'app/components/core'
 type ErrorTextProps = TextProps
 
 export const ErrorText = (props: ErrorTextProps) => {
-  return <Text fontSize='medium' weight='demiBold' color='error' {...props} />
+  return (
+    <Text
+      fontSize='medium'
+      weight='demiBold'
+      color='error'
+      style={{
+        // Ensure that word wrapping occurs
+        flexShrink: 1
+      }}
+      {...props}
+    />
+  )
 }
diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx b/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx
@@ -63,19 +63,18 @@ const messages = {
 }
 
 const useStyles = makeStyles(({ spacing, typography, palette }) => ({
-  drawer: {
-    paddingHorizontal: spacing(4)
-  },
   formContainer: {
     flex: 1
   },
   formContentContainer: {
+    paddingHorizontal: spacing(4),
     paddingVertical: spacing(6),
     gap: spacing(4)
   },
   formActions: {
     flex: 0,
     paddingTop: spacing(4),
+    paddingHorizontal: spacing(4),
     paddingBottom: spacing(6),
     columnGap: spacing(4)
   },
@@ -85,7 +84,7 @@ const useStyles = makeStyles(({ spacing, typography, palette }) => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    paddingVertical: spacing(4)
+    padding: spacing(4)
   },
   titleContainer: {
     ...flexRowCentered(),
@@ -269,7 +268,6 @@ export const PremiumTrackPurchaseDrawer = () => {
 
   return (
     <NativeDrawer
-      drawerStyle={styles.drawer}
       drawerHeader={PremiumTrackPurchaseDrawerHeader}
       drawerName={PREMIUM_TRACK_PURCHASE_MODAL_NAME}
       onClosed={handleClosed}

diff --git a/packages/mobile/src/components/stripe-onramp-drawer/StripeOnrampDrawer.tsx b/packages/mobile/src/components/stripe-onramp-drawer/StripeOnrampDrawer.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { modalsActions } from '@audius/common'
+import { modalsActions, purchaseContentActions } from '@audius/common'
 import { View } from 'react-native'
 import { useDispatch } from 'react-redux'
 
@@ -15,6 +15,7 @@ import { AppDrawer } from '../drawer/AppDrawer'
 import { StripeOnrampEmbed } from './StripeOnrampEmbed'
 
 const { setVisibility } = modalsActions
+const { cleanup } = purchaseContentActions
 
 export const MODAL_NAME = 'StripeOnRamp'
 
@@ -36,6 +37,7 @@ export const StripeOnrampDrawer = () => {
 
   const handleClose = useCallback(() => {
     dispatch(setVisibility({ modal: MODAL_NAME, visible: 'closing' }))
+    dispatch(cleanup())
   }, [dispatch])
 
   return (

diff --git a/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx b/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx
@@ -93,58 +93,60 @@ export const EditTrackForm = (props: EditTrackFormProps) => {
   }, [dirty, navigation, dispatch])
 
   return (
-    <FormScreen
-      title={title}
-      icon={IconUpload}
-      topbarLeft={
-        <TopBarIconButton
-          icon={IconCaretLeft}
-          style={styles.backButton}
-          onPress={handlePressBack}
-        />
-      }
-      bottomSection={
-        <>
-          {hasErrors ? (
-            <InputErrorMessage
-              message={messages.fixErrors}
-              style={styles.errorText}
-            />
-          ) : null}
-          <Button
-            variant='primary'
-            size='large'
-            icon={IconArrow}
-            fullWidth
-            title={doneText}
-            onPress={() => {
-              handleSubmit()
-            }}
-            disabled={isSubmitting || hasErrors}
+    <>
+      <FormScreen
+        title={title}
+        icon={IconUpload}
+        topbarLeft={
+          <TopBarIconButton
+            icon={IconCaretLeft}
+            style={styles.backButton}
+            onPress={handlePressBack}
           />
+        }
+        bottomSection={
+          <>
+            {hasErrors ? (
+              <InputErrorMessage
+                message={messages.fixErrors}
+                style={styles.errorText}
+              />
+            ) : null}
+            <Button
+              variant='primary'
+              size='large'
+              icon={IconArrow}
+              fullWidth
+              title={doneText}
+              onPress={() => {
+                handleSubmit()
+              }}
+              disabled={isSubmitting || hasErrors}
+            />
+          </>
+        }
+      >
+        <>
+          <KeyboardAwareScrollView>
+            <Tile style={styles.tile}>
+              <PickArtworkField name='artwork' />
+              <TextField name='title' label={messages.trackName} required />
+              <SubmenuList>
+                <SelectGenreField />
+                <SelectMoodField />
+              </SubmenuList>
+              <TagField />
+              <DescriptionField />
+              <SubmenuList removeBottomDivider>
+                <AccessAndSaleField />
+                <RemixSettingsField />
+                <AdvancedOptionsField />
+              </SubmenuList>
+            </Tile>
+          </KeyboardAwareScrollView>
         </>
-      }
-    >
-      <>
-        <KeyboardAwareScrollView>
-          <Tile style={styles.tile}>
-            <PickArtworkField name='artwork' />
-            <TextField name='title' label={messages.trackName} required />
-            <SubmenuList>
-              <SelectGenreField />
-              <SelectMoodField />
-            </SubmenuList>
-            <TagField />
-            <DescriptionField />
-            <SubmenuList removeBottomDivider>
-              <AccessAndSaleField />
-              <RemixSettingsField />
-              <AdvancedOptionsField />
-            </SubmenuList>
-          </Tile>
-        </KeyboardAwareScrollView>
-        <CancelEditTrackDrawer />
-      </>
-    </FormScreen>
+      </FormScreen>
+      <CancelEditTrackDrawer />
+    </>
   )
 }
diff --git a/.../screens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/BoxedTextField.tsx b/.../screens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/BoxedTextField.tsx
@@ -4,7 +4,7 @@ import { Text } from 'app/components/core'
 import { TextField, type TextFieldProps } from 'app/components/fields'
 import { makeStyles } from 'app/styles'
 
-const useStyles = makeStyles(({ spacing, palette, typography }) => ({
+const useStyles = makeStyles(({ spacing, palette }) => ({
   root: {
     padding: spacing(4),
     gap: spacing(4),
@@ -19,18 +19,6 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   },
   textInput: {
     backgroundColor: palette.white
-  },
-  test: {
-    flex: 1,
-    color: palette.neutral,
-    minWidth: 40,
-    flexGrow: 1,
-    // Needed for android
-    paddingTop: 0,
-    paddingBottom: 0,
-    fontSize: typography.fontSize.large,
-    fontFamily: typography.fontByWeight.demiBold,
-    lineHeight: 20
   }
 }))
 

diff --git a/...reens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/TrackPreviewField.tsx b/...reens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/TrackPreviewField.tsx
@@ -25,7 +25,11 @@ export const TrackPreviewField = () => {
       value={String(value)}
       keyboardType='number-pad'
       label={messages.label}
-      endAdornment={<Text>{messages.seconds}</Text>}
+      endAdornment={
+        <Text color='neutralLight2' weight='bold'>
+          {messages.seconds}
+        </Text>
+      }
     />
   )
 }
diff --git a/...screens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/TrackPriceField.tsx b/...screens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/TrackPriceField.tsx
@@ -25,7 +25,7 @@ export const TrackPriceField = () => {
       description={messages.description}
       name={TRACK_PRICE}
       value={String(value)}
-      keyboardType='number-pad'
+      keyboardType='numeric'
       label={messages.label}
       placeholder={messages.placeholder}
       startAdornment={

diff --git a/packages/mobile/src/screens/edit-track-screen/screens/AccessAndSaleScreen.tsx b/packages/mobile/src/screens/edit-track-screen/screens/AccessAndSaleScreen.tsx
@@ -157,7 +157,7 @@ export const AccessAndSaleScreen = () => {
       ? {
           label: premiumAvailability,
           value: premiumAvailability,
-          disabled: true
+          disabled: !isUsdcUploadEnabled
         }
       : null,
     {
@@ -173,7 +173,7 @@ export const AccessAndSaleScreen = () => {
     {
       label: hiddenAvailability,
       value: hiddenAvailability,
-      disabled: !isUsdcUploadEnabled
+      disabled: noHidden
     }
   ].filter(removeNullable)
 

diff --git a/packages/web/src/components/track/desktop/TrackTile.tsx b/packages/web/src/components/track/desktop/TrackTile.tsx
@@ -172,7 +172,7 @@ const TrackTile = ({
   )
 
   const getDurationText = () => {
-    if (!duration) {
+    if (duration === null || duration === undefined) {
       return ''
     } else if (
       isLongFormContent &&
@@ -354,7 +354,7 @@ const TrackTile = ({
                 {messages.hiddenTrack}
               </div>
             ) : null}
-            {!isLoading && duration ? (
+            {!isLoading && duration !== null && duration !== undefined ? (
               <div className={styles.duration}>{getDurationText()}</div>
             ) : null}
           </div>

diff --git a/packages/web/src/components/withdraw-usdc-modal/WithdrawUSDCModal.tsx b/packages/web/src/components/withdraw-usdc-modal/WithdrawUSDCModal.tsx
@@ -51,11 +51,14 @@ export const ADDRESS = 'address'
 export const CONFIRM = 'confirm'
 
 const WithdrawUSDCFormSchema = (userBalance: number) => {
+  let amount = z.number().lte(userBalance, messages.errors.insufficientBalance)
+  if (userBalance !== 0) {
+    // If user has no balance, don't validate minimum, the form will just be disabled
+    amount = amount.gte(1, messages.errors.amountTooLow)
+  }
+
   return z.object({
-    [AMOUNT]: z
-      .number()
-      .lte(userBalance, messages.errors.insufficientBalance)
-      .gte(1, messages.errors.amountTooLow),
+    [AMOUNT]: amount,
     [ADDRESS]: z
       .string()
       .refine(

diff --git a/packages/web/src/components/withdraw-usdc-modal/components/ConfirmTransferDetails.tsx b/packages/web/src/components/withdraw-usdc-modal/components/ConfirmTransferDetails.tsx
@@ -3,7 +3,11 @@ import { useCallback, useState } from 'react'
 import {
   WithdrawUSDCModalPages,
   decimalIntegerToHumanReadable,
-  useWithdrawUSDCModal
+  useWithdrawUSDCModal,
+  useUSDCBalance,
+  formatUSDCWeiToFloorDollarNumber,
+  BNUSDC,
+  formatCurrencyBalance
 } from '@audius/common'
 import {
   HarmonyButton,
@@ -12,6 +16,7 @@ import {
   IconQuestionCircle,
   Switch
 } from '@audius/stems'
+import BN from 'bn.js'
 import { useField, useFormikContext } from 'formik'
 
 import { ReactComponent as IconCaretLeft } from 'assets/img/iconCaretLeft.svg'
@@ -29,6 +34,7 @@ import { Hint } from './Hint'
 import { TextRow } from './TextRow'
 
 const messages = {
+  currentBalance: 'Current Balance',
   amountToWithdraw: 'Amount to Withdraw',
   destinationAddress: 'Destination Address',
   review: 'Review Details Carefully',
@@ -49,6 +55,12 @@ export const ConfirmTransferDetails = () => {
   const [{ value: addressValue }] = useField(ADDRESS)
   const [confirmField, { error: confirmError }] = useField(CONFIRM)
 
+  const { data: balance } = useUSDCBalance()
+  const balanceNumber = formatUSDCWeiToFloorDollarNumber(
+    (balance ?? new BN(0)) as BNUSDC
+  )
+  const balanceFormatted = formatCurrencyBalance(balanceNumber)
+
   const handleGoBack = useCallback(() => {
     setData({ page: WithdrawUSDCModalPages.ENTER_TRANSFER_DETAILS })
   }, [setData])
@@ -64,6 +76,8 @@ export const ConfirmTransferDetails = () => {
 
   return (
     <div className={styles.root}>
+      <TextRow left={messages.currentBalance} right={`$${balanceFormatted}`} />
+      <Divider style={{ margin: 0 }} />
       <div className={styles.amount}>
         <TextRow
           left={messages.amountToWithdraw}

diff --git a/packages/web/src/components/withdraw-usdc-modal/components/EnterTransferDetails.tsx b/packages/web/src/components/withdraw-usdc-modal/components/EnterTransferDetails.tsx
@@ -135,7 +135,7 @@ export const EnterTransferDetails = () => {
         size={HarmonyButtonSize.DEFAULT}
         fullWidth
         text={messages.continue}
-        disabled={amountError || addressError || !address}
+        disabled={amountError || addressError || !address || balance?.isZero()}
         onClick={handleContinue}
       />
       <Hint

diff --git a/packages/web/src/pages/artist-dashboard-page/ArtistDashboardPage.module.css b/packages/web/src/pages/artist-dashboard-page/ArtistDashboardPage.module.css
@@ -77,4 +77,5 @@
 
 .tracksTableWrapper {
   margin-top: 50px;
+  min-height: 518px;
 }
diff --git a/packages/web/src/pages/artist-dashboard-page/components/TracksTableContainer.tsx b/packages/web/src/pages/artist-dashboard-page/components/TracksTableContainer.tsx
@@ -232,10 +232,12 @@ export const TracksTableContainer = ({
             placeholder={messages.filterInputPlacehoder}
             prefix={<IconSearch />}
             suffix={
-              <IconClose
-                className={styles.close}
-                onClick={() => setFilterText('')}
-              />
+              filterText ? (
+                <IconClose
+                  className={styles.close}
+                  onClick={() => setFilterText('')}
+                />
+              ) : null
             }
             size='default'
             onChange={handleFilterChange}

diff --git a/packages/web/src/pages/purchases-and-sales/SalesPage.tsx b/packages/web/src/pages/purchases-and-sales/SalesPage.tsx
@@ -49,7 +49,7 @@ const messages = {
   pageDescription: 'View your sales history',
   noSalesHeader: `You haven't sold anything yet.`,
   noSalesBody: 'Once you make a sale, it will show up here.',
-  upload: 'Upload',
+  upload: 'Upload Track',
   headerText: 'Your Sales',
   downloadCSV: 'Download CSV'
 }