[PAY-2352][PAY-2396] Fix transactions table state after withdrawal

packages/common/src/api/user.ts

@@ -7,7 +7,6 @@ import {
  USDCTransactionMethod,
  USDCTransactionType
 } from '~/models/USDCTransactions'
-import { getRootSolanaAccount } from '~/services/audius-backend/solana'
 import { Nullable } from '~/utils/typeUtils'
 
 import { Id } from './utils'
@@ -25,27 +24,15 @@ type GetUSDCTransactionListArgs = {
 /**
  * Parser to reformat transactions as they come back from the API.
  * @param transaction the transaction to parse
- * @param rootSolanaAccount? Optionally a root solana account can be passed
- * to reformat the metadata field to include specific contextual information.
- * In the case of withdrawals, this is useful in recognizing a "self-send",
- * which is a cash transfer out.
  */
 const parseTransaction = ({
- transaction,
- rootSolanaAccount
+ transaction
 }: {
  transaction: full.TransactionDetails
- rootSolanaAccount?: string
 }): USDCTransactionDetails => {
- const { change, balance, transactionType, method, metadata, ...rest } =
- transaction
+ const { change, balance, transactionType, method, ...rest } = transaction
  return {
  ...rest,
- metadata: !rootSolanaAccount
- ? metadata
- : rootSolanaAccount === metadata.toString()
- ? 'Cash'
- : metadata,
  transactionType: transactionType as USDCTransactionType,
  method: method as USDCTransactionMethod,
  change: change as StringUSDC,
@@ -149,18 +136,7 @@ const userApi = createApi({
  encodedDataSignature
  })
 
- let rootSolanaAccount: string
- if (
- type === full.GetUSDCTransactionsTypeEnum.Transfer &&
- method === full.GetUSDCTransactionCountMethodEnum.Send
- ) {
- rootSolanaAccount = (
- await getRootSolanaAccount(context.audiusBackend)
- ).publicKey.toString()
- }
- return data.map((transaction) =>
- parseTransaction({ transaction, rootSolanaAccount })
- )
+ return data.map((transaction) => parseTransaction({ transaction }))
  },
  options: { retry: true }
  },
@@ -201,3 +177,4 @@ export const {
 export const userApiReducer = userApi.reducer
 export const userApiFetch = userApi.fetch
 export const userApiActions = userApi.actions
+export const userApiUtils = userApi.util

packages/common/src/audius-query/createApi.ts

@@ -118,7 +118,14 @@ export const createApi = <
  if (updateAction) {
  dispatch(updateAction({ fetchArgs, nonNormalizedData: newState }))
  }
+ },
+ reset: (endpointName) => (dispatch: Dispatch) => {
+ const resetAction =
+ slice.actions[`reset${capitalize(endpointName as string)}`]
+ if (resetAction) {
+ dispatch(resetAction())
  }
+ }
  }
 
  return api

packages/common/src/audius-query/hooks/usePaginatedQuery.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { isEqual } from 'lodash'
 import { useCustomCompareEffect } from 'react-use'
@@ -57,19 +57,18 @@ export const useAllPaginatedQuery = <
 ) => {
  const [loadingMore, setLoadingMore] = useState(false)
  const { pageSize, ...queryHookOptions } = options
+ const [forceLoad, setForceLoad] = useState(false)
  const [page, setPage] = useState(0)
  const [status, setStatus] = useState<Status>(Status.IDLE)
  const [allData, setAllData] = useState<Data[]>([])
 
- useCustomCompareEffect(
- () => {
- setAllData([])
- setPage(0)
- setLoadingMore(false)
- },
- [baseArgs],
- isEqual
- )
+ const reset = useCallback(() => {
+ setAllData([])
+ setPage(0)
+ setLoadingMore(false)
+ }, [])
+
+ useCustomCompareEffect(reset, [baseArgs], isEqual)
 
  const args = {
  ...baseArgs,
@@ -78,6 +77,13 @@ export const useAllPaginatedQuery = <
  } as ArgsType
  const result = useQueryHook(args, queryHookOptions)
 
+ useEffect(() => {
+ if (forceLoad) {
+ result.forceRefresh()
+ setForceLoad(false)
+ }
+ }, [result, forceLoad])
+
  useCustomCompareEffect(
  () => {
  setStatus(result.status)
@@ -113,12 +119,14 @@ export const useAllPaginatedQuery = <
  setLoadingMore(true)
  setPage(page + 1)
  }, [stillLoadingCurrentPage, page])
+
  return {
  ...result,
  // TODO: add another status for reloading
  status: allData?.length > 0 ? Status.SUCCESS : status,
  data: allData,
  isLoadingMore: stillLoadingCurrentPage,
+ reset,
  loadMore,
  hasMore
  }

packages/common/src/audius-query/types.ts

@@ -47,6 +47,9 @@ export type Api<EndpointDefinitions extends DefaultEndpointDefinitions> = {
  >
  ) => void
  ) => ThunkAction<any, any, any, any>
+ reset: <EndpointName extends keyof EndpointDefinitions>(
+ endpointName: EndpointName
+ ) => ThunkAction<any, any, any, any>
  }
  /**
  * Allows for pre-fetching of related data into the cache. Does not return the data.

packages/common/src/models/USDCTransactions.ts

@@ -5,7 +5,8 @@ import { StringUSDC } from './Wallet'
 export enum USDCTransactionType {
  PURCHASE_STRIPE = 'purchase_stripe',
  PURCHASE_CONTENT = 'purchase_content',
- TRANSFER = 'transfer'
+ TRANSFER = 'transfer',
+ WITHDRAWAL = 'withdrawal'
 }
 
 export enum USDCTransactionMethod {

packages/common/src/store/ui/withdraw-usdc/selectors.ts

@@ -27,3 +27,7 @@ export const getCoinflowState = (state: CommonState) => {
 export const getWithdrawTransaction = (state: CommonState) => {
  return state.withdrawUSDC.withdrawTransaction
 }
+
+export const getLastCompletedTransactionSignature = (state: CommonState) => {
+ return state.withdrawUSDC.lastCompletedTransactionSignature
+}

packages/common/src/store/ui/withdraw-usdc/slice.ts

@@ -14,6 +14,7 @@ type WithdrawUSDCState = {
  withdrawTransaction?: string
  destinationError?: Error
  amountError?: Error
+ lastCompletedTransactionSignature?: string
 }
 
 const initialState: WithdrawUSDCState = {
@@ -61,6 +62,7 @@ const slice = createSlice({
  state.withdrawTransaction = action.payload.transaction
  state.withdrawError = undefined
  state.withdrawStatus = Status.SUCCESS
+ state.lastCompletedTransactionSignature = action.payload.transaction
  },
  withdrawUSDCFailed: (state, action: PayloadAction<{ error: Error }>) => {
  state.withdrawStatus = Status.ERROR

packages/mobile/src/screens/track-screen/DownloadSection.tsx

@@ -47,7 +47,8 @@ const messages = {
  unlockAll: (price: string) => `Unlock All $${price}`,
  purchased: 'purchased',
  followToDownload: 'Must follow artist to download.',
- purchaseableIsOwner: (price: string) => `Fans can unlock & download these files for a one time purchase of $${price}`
+ purchaseableIsOwner: (price: string) =>
+ `Fans can unlock & download these files for a one time purchase of $${price}`
 }
 
 export const DownloadSection = ({ trackId }: { trackId: ID }) => {
@@ -68,11 +69,13 @@ export const DownloadSection = ({ trackId }: { trackId: ID }) => {
  shouldDisplayDownloadFollowGated,
  shouldDisplayOwnerPremiumDownloads
  } = useDownloadableContentAccess({ trackId })
- const formattedPrice = price ? USDC(price / 100).toLocaleString('en-us', {
- roundingMode: 'floor',
- minimumFractionDigits: 2,
- maximumFractionDigits: 2
- }) : undefined
+ const formattedPrice = price
+ ? USDC(price / 100).toLocaleString('en-us', {
+ roundingMode: 'floor',
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2
+ })
+ : undefined
  const track = useSelector((state: CommonState) =>
  getTrack(state, { id: trackId })
  )
@@ -122,74 +125,73 @@ export const DownloadSection = ({ trackId }: { trackId: ID }) => {
  const renderHeader = () => {
  return (
  <>
- <Flex
- p='l'
- direction='row'
- justifyContent='space-between'
- alignItems='center'
- >
- <Flex gap='m'>
- <Flex direction='row' alignItems='center' gap='s'>
- <IconReceive color='default' />
- <Text variant='label' size='l' strength='strong'>
- {messages.title}
- </Text>
- </Flex>
- {shouldDisplayPremiumDownloadLocked && formattedPrice !== undefined ? (
- <Button
- variant='primary'
- size='small'
- color='lightGreen'
- onPress={handlePurchasePress}
- >
- {messages.unlockAll(
- formattedPrice
- )}
- </Button>
- ) : null}
- {shouldDisplayPremiumDownloadUnlocked ? (
- <>
- <Flex
- gap='s'
- direction='row'
- alignItems='center'
- style={css({
- backgroundColor: color.special.blue
- })}
+ <Flex
+ p='l'
+ direction='row'
+ justifyContent='space-between'
+ alignItems='center'
+ >
+ <Flex gap='m'>
+ <Flex direction='row' alignItems='center' gap='s'>
+ <IconReceive color='default' />
+ <Text variant='label' size='l' strength='strong'>
+ {messages.title}
+ </Text>
+ </Flex>
+ {shouldDisplayPremiumDownloadLocked &&
+ formattedPrice !== undefined ? (
+ <Button
+ variant='primary'
+ size='small'
+ color='lightGreen'
+ onPress={handlePurchasePress}
  >
+ {messages.unlockAll(formattedPrice)}
+ </Button>
+ ) : null}
+ {shouldDisplayPremiumDownloadUnlocked ? (
+ <>
  <Flex
- borderRadius='3xl'
- ph='s'
+ gap='s'
+ direction='row'
+ alignItems='center'
  style={css({
- backgroundColor: color.special.lightGreen,
- paddingTop: 1,
- paddingBottom: 1
+ backgroundColor: color.special.blue
  })}
  >
- <IconLockUnlocked color='staticWhite' size='xs' />
+ <Flex
+ borderRadius='3xl'
+ ph='s'
+ style={css({
+ backgroundColor: color.special.lightGreen,
+ paddingTop: 1,
+ paddingBottom: 1
+ })}
+ >
+ <IconLockUnlocked color='staticWhite' size='xs' />
+ </Flex>
+ <Text
+ variant='label'
+ // TODO: size other than m causes misalignment C-3709
+ size='l'
+ strength='strong'
+ color='subdued'
+ >
+ {messages.purchased}
+ </Text>
  </Flex>
- <Text
- variant='label'
- // TODO: size other than m causes misalignment C-3709
- size='l'
- strength='strong'
- color='subdued'
- >
- {messages.purchased}
- </Text>
- </Flex>
- </>
- ) : null}
- </Flex>
- <ExpandableArrowIcon expanded={isExpanded} />
- </Flex>
- {shouldDisplayOwnerPremiumDownloads && formattedPrice ? (
- <Flex pl='l' pr='l' pb='l'>
- <Text variant='body' size='m' strength='strong'>
- {messages.purchaseableIsOwner(formattedPrice)}
- </Text>
+ </>
+ ) : null}
+ </Flex>
+ <ExpandableArrowIcon expanded={isExpanded} />
  </Flex>
- ) : null}
+ {shouldDisplayOwnerPremiumDownloads && formattedPrice ? (
+ <Flex pl='l' pr='l' pb='l'>
+ <Text variant='body' size='m' strength='strong'>
+ {messages.purchaseableIsOwner(formattedPrice)}
+ </Text>
+ </Flex>
+ ) : null}
  </>
  )
  }

packages/web/src/components/track/DownloadSection.tsx

@@ -56,7 +56,8 @@ const messages = {
  unlockAll: (price: string) => `Unlock All $${price}`,
  purchased: 'purchased',
  followToDownload: 'Must follow artist to download.',
- purchaseableIsOwner: (price: string) => `Fans can unlock & download these files for a one time purchase of $${price}`
+ purchaseableIsOwner: (price: string) =>
+ `Fans can unlock & download these files for a one time purchase of $${price}`
 }
 
 type DownloadSectionProps = {
@@ -81,11 +82,13 @@ export const DownloadSection = ({ trackId }: DownloadSectionProps) => {
  } = useDownloadableContentAccess({ trackId })
  const shouldHideDownload =
  !track?.access.download && !shouldDisplayDownloadFollowGated
- const formattedPrice = price ? USDC(price / 100).toLocaleString('en-us', {
- roundingMode: 'floor',
- minimumFractionDigits: 2,
- maximumFractionDigits: 2
- }) : undefined
+ const formattedPrice = price
+ ? USDC(price / 100).toLocaleString('en-us', {
+ roundingMode: 'floor',
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2
+ })
+ : undefined
  const [quality, setQuality] = useState(DownloadQuality.MP3)
  const [expanded, setExpanded] = useState(false)
  const [lockedContentModalVisibility, setLockedContentModalVisibility] =
@@ -191,16 +194,15 @@ export const DownloadSection = ({ trackId }: DownloadSectionProps) => {
  </Text>
  </Flex>
  <Flex gap='l' alignItems='center'>
- {shouldDisplayPremiumDownloadLocked && formattedPrice !== undefined ? (
+ {shouldDisplayPremiumDownloadLocked &&
+ formattedPrice !== undefined ? (
  <Button
  variant='primary'
  size='small'
  color='lightGreen'
  onClick={handlePurchaseClick}
  >
- {messages.unlockAll(
- formattedPrice
- )}
+ {messages.unlockAll(formattedPrice)}
  </Button>
  ) : null}
  {shouldDisplayPremiumDownloadUnlocked ? (