[PAY-1753] Implements Withdrawals Page (#4043)

packages/common/src/api/user.ts

@@ -1,5 +1,38 @@
+import { full } from '@audius/sdk'
+
 import { createApi } from 'audius-query'
-import { ID, Kind } from 'models'
+import { ID, Kind, StringUSDC } from 'models'
+import {
+  USDCTransactionDetails,
+  USDCTransactionMethod,
+  USDCTransactionType
+} from 'models/USDCTransactions'
+import { Nullable } from 'utils/typeUtils'
+
+import { Id } from './utils'
+
+type GetUSDCTransactionListArgs = {
+  userId: Nullable<ID>
+  offset: number
+  limit: number
+  sortMethod?: full.GetUSDCTransactionsSortMethodEnum
+  sortDirection?: full.GetUSDCTransactionsSortDirectionEnum
+  type?: full.GetUSDCTransactionsTypeEnum
+  method?: full.GetUSDCTransactionsMethodEnum
+}
+
+const parseTransaction = (
+  transaction: full.TransactionDetails
+): USDCTransactionDetails => {
+  const { change, balance, transactionType, method, ...rest } = transaction
+  return {
+    ...rest,
+    transactionType: transactionType as USDCTransactionType,
+    method: method as USDCTransactionMethod,
+    change: change as StringUSDC,
+    balance: balance as StringUSDC
+  }
+}
 
 const userApi = createApi({
   reducerPath: 'userApi',
@@ -17,9 +50,68 @@ const userApi = createApi({
         kind: Kind.USERS,
         schemaKey: 'user'
       }
+    },
+    getUSDCTransactions: {
+      fetch: async (
+        {
+          offset,
+          limit,
+          userId,
+          sortDirection,
+          sortMethod,
+          type,
+          method
+        }: GetUSDCTransactionListArgs,
+        context
+      ) => {
+        const { data: encodedDataMessage, signature: encodedDataSignature } =
+          await context.audiusBackend.signDiscoveryNodeRequest()
+        const sdk = await context.audiusSdk()
+        const { data = [] } = await sdk.full.users.getUSDCTransactions({
+          limit,
+          offset,
+          sortDirection,
+          sortMethod,
+          id: Id.parse(userId!),
+          type,
+          method,
+          encodedDataMessage,
+          encodedDataSignature
+        })
+
+        return data.map(parseTransaction)
+      },
+      options: {}
+    },
+    getUSDCTransactionsCount: {
+      fetch: async (
+        {
+          userId,
+          type,
+          method
+        }: Pick<GetUSDCTransactionListArgs, 'userId' | 'type' | 'method'>,
+        { audiusSdk, audiusBackend }
+      ) => {
+        const { data: encodedDataMessage, signature: encodedDataSignature } =
+          await audiusBackend.signDiscoveryNodeRequest()
+        const sdk = await audiusSdk()
+        const { data } = await sdk.full.users.getUSDCTransactionCount({
+          id: Id.parse(userId!),
+          type,
+          method,
+          encodedDataMessage,
+          encodedDataSignature
+        })
+        return data ?? 0
+      },
+      options: {}
     }
   }
 })
 
-export const { useGetUserById } = userApi.hooks
+export const {
+  useGetUserById,
+  useGetUSDCTransactions,
+  useGetUSDCTransactionsCount
+} = userApi.hooks
 export const userApiReducer = userApi.reducer

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

@@ -272,7 +272,7 @@ const fetchData = async <Args, Data>(
     endpoint.onQueryStarted?.(fetchArgs, { dispatch })
 
     const apiData = await endpoint.fetch(fetchArgs, context)
-    if (!apiData) {
+    if (apiData == null) {
       throw new Error('Remote data not found')
     }
 

packages/common/src/models/USDCTransactions.ts

@@ -3,25 +3,14 @@ import { Nullable } from '../utils/typeUtils'
 import { StringUSDC } from './Wallet'
 
 export enum USDCTransactionType {
-  PURCHASE_USDC = 'PURCHASE_USDC',
-  PURCHASE_CONTENT = 'PURCHASE_CONTENT',
-  TRANSFER = 'TRANSFER'
+  PURCHASE_STRIPE = 'purchase_stripe',
+  PURCHASE_CONTENT = 'purchase_content',
+  TRANSFER = 'transfer'
 }
 
 export enum USDCTransactionMethod {
-  // Transfer methods
-  SEND = 'SENT',
-  RECEIVE = 'RECEIVED',
-
-  // Purchase Methods
-  STRIPE = 'STRIPE'
-}
-
-export type InAppUSDCPurchaseMetadata = {
-  discriminator: USDCTransactionType.PURCHASE_USDC
-  usd: string
-  usdc: StringUSDC
-  purchaseTransactionId: string
+  SEND = 'send',
+  RECEIVE = 'receive'
 }
 
 export enum USDCContentPurchaseType {
@@ -38,46 +27,12 @@ export type USDCPurchaseDetails = {
   createdAt: string
 }
 
-export type USDCPurchaseContentMetadata = {
-  discriminator: USDCTransactionType.PURCHASE_CONTENT
-  amount: StringUSDC
-  senderUserId: string
-  receiverUserId: string
-  purchaseType: USDCContentPurchaseType
-  contentId: number
-}
-
-export type USDCTransferMetadata = {
-  discriminator: USDCTransactionType.TRANSFER
-  amount: StringUSDC
-  destination: string
+export type USDCTransactionDetails = {
+  signature: string
+  transactionType: USDCTransactionType
+  method: USDCTransactionMethod
+  transactionDate: string
+  change: StringUSDC
+  balance: StringUSDC
+  metadata?: Nullable<object> | string
 }
-
-export type USDCTransactionDetails =
-  | {
-      signature: string
-      transactionType: USDCTransactionType.PURCHASE_USDC
-      method: USDCTransactionMethod.STRIPE
-      date: string
-      change: StringUSDC
-      balance: StringUSDC
-      metadata?: Nullable<InAppUSDCPurchaseMetadata>
-    }
-  | {
-      signature: string
-      transactionType: USDCTransactionType.PURCHASE_CONTENT
-      method: USDCTransactionMethod.SEND | USDCTransactionMethod.RECEIVE
-      date: string
-      change: StringUSDC
-      balance: StringUSDC
-      metadata?: Nullable<USDCPurchaseContentMetadata>
-    }
-  | {
-      signature: string
-      transactionType: USDCTransactionType.TRANSFER
-      method: USDCTransactionMethod.SEND | USDCTransactionMethod.RECEIVE
-      date: string
-      change: StringUSDC
-      balance: StringUSDC
-      metadata?: Nullable<USDCTransferMetadata>
-    }

packages/common/src/utils/wallet.ts

@@ -151,11 +151,13 @@ export const ceilingBNUSDCToNearestCent = (value: BNUSDC): BNUSDC => {
 /** Formats a USDC wei string (full precision) to a fixed string suitable for
 display as a dollar amount. Note: will lose precision by rounding _up_ to nearest cent */
 export const formatUSDCWeiToUSDString = (amount: StringUSDC, precision = 2) => {
+  // remove negative sign if present.
+  const amountPos = amount.replace('-', '')
   // Since we only need two digits of precision, we will multiply up by 1000
   // with BN, divide by $1 Wei, ceiling up to the nearest cent,
   //  and then convert to JS number and divide back down before formatting to
   // two decimal places.
-  const cents = formatUSDCWeiToNumber(new BN(amount) as BNUSDC)
+  const cents = formatUSDCWeiToNumber(new BN(amountPos) as BNUSDC)
   return formatNumberCommas(cents.toFixed(precision))
 }
 

packages/web/src/pages/App.js

@@ -147,7 +147,8 @@ import {
   CHAT_PAGE,
   PROFILE_PAGE_AI_ATTRIBUTED_TRACKS,
   PURCHASES_PAGE,
-  SALES_PAGE
+  SALES_PAGE,
+  WITHDRAWALS_PAGE
 } from 'utils/route'
 import { getTheme as getSystemTheme } from 'utils/theme/theme'
 
@@ -170,6 +171,7 @@ import { FbSharePage } from './fb-share-page/FbSharePage'
 import FollowersPage from './followers-page/FollowersPage'
 import FollowingPage from './following-page/FollowingPage'
 import { PurchasesPage, SalesPage } from './purchases-and-sales'
+import { WithdrawalsPage } from './purchases-and-sales/WithdrawalsPage'
 import SettingsPage from './settings-page/SettingsPage'
 import { SubPage } from './settings-page/components/mobile/SettingsPage'
 import SmartCollectionPage from './smart-collection/SmartCollectionPage'
@@ -725,6 +727,11 @@ class App extends Component {
                 />
                 <Route exact path={PURCHASES_PAGE} component={PurchasesPage} />
                 <Route exact path={SALES_PAGE} component={SalesPage} />
+                <Route
+                  exact
+                  path={WITHDRAWALS_PAGE}
+                  component={WithdrawalsPage}
+                />
                 <Route
                   exact
                   path={CHAT_PAGE}

packages/web/src/pages/artist-dashboard-page/components/USDCCard.tsx

@@ -22,7 +22,7 @@ import BN from 'bn.js'
 import { Icon } from 'components/Icon'
 import { Text } from 'components/typography'
 import { useGoToRoute } from 'hooks/useGoToRoute'
-import { SALES_PAGE } from 'utils/route'
+import { SALES_PAGE, WITHDRAWALS_PAGE } from 'utils/route'
 
 import styles from './USDCCard.module.css'
 
@@ -45,13 +45,11 @@ export const USDCCard = ({ balance }: { balance: BNUSDC }) => {
   const menuItems: PopupMenuItem[] = [
     {
       text: messages.salesSummary,
-      // TODO: link to sales page https://linear.app/audius/issue/PAY-1763/wire-up-salespurchases-pages-on-artist-dashboard
       onClick: () => goToRoute(SALES_PAGE)
     },
     {
       text: messages.withdrawalHistory,
-      // TODO: link to withdraw history page https://linear.app/audius/issue/PAY-1763/wire-up-salespurchases-pages-on-artist-dashboard
-      onClick: () => {}
+      onClick: () => goToRoute(WITHDRAWALS_PAGE)
     }
   ]
 

packages/web/src/pages/purchases-and-sales/PurchasesPage.tsx

@@ -29,7 +29,7 @@ import {
   PurchasesTableSortDirection,
   PurchasesTableSortMethod
 } from './PurchasesTable'
-import { NoPurchasesContent } from './components/NoPurchasesContent'
+import { NoTransactionsContent } from './components/NoTransactionsContent'
 
 const { getUserId } = accountSelectors
 
@@ -69,7 +69,7 @@ const NoPurchases = () => {
   }, [dispatch])
 
   return (
-    <NoPurchasesContent
+    <NoTransactionsContent
       headerText={messages.noPurchasesHeader}
       bodyText={messages.noPurchasesBody}
       ctaText={messages.findSongs}

packages/web/src/pages/purchases-and-sales/SalesPage.tsx

@@ -29,7 +29,7 @@ import {
   SalesTableSortDirection,
   SalesTableSortMethod
 } from './SalesTable'
-import { NoPurchasesContent } from './components/NoPurchasesContent'
+import { NoTransactionsContent } from './components/NoTransactionsContent'
 
 const { getUserId } = accountSelectors
 
@@ -67,7 +67,7 @@ const NoSales = () => {
     dispatch(pushRoute(UPLOAD_PAGE))
   }, [dispatch])
   return (
-    <NoPurchasesContent
+    <NoTransactionsContent
       headerText={messages.noSalesHeader}
       bodyText={messages.noSalesBody}
       ctaText={messages.upload}

packages/web/src/pages/purchases-and-sales/WithdrawalsPage.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}