[PAY-3324] Add copy notice around network take rate

packages/web/src/components/table/Table.tsx

@@ -707,7 +707,9 @@ export const Table = ({
  className={cn(styles.table, tableClassName)}
  {...getTableProps()}
  >
- <thead className={styles.tableHead}>{renderHeaders()}</thead>
+ <thead className={cn(styles.tableHead, tableHeaderClassName)}>
+ {renderHeaders()}
+ </thead>
  <tbody>{loading ? <TableLoadingSpinner /> : null}</tbody>
  </table>
  <div
@@ -766,7 +768,8 @@ export const Table = ({
  scrollRef,
  tableClassName,
  totalRowCount,
- wrapperClassName
+ wrapperClassName,
+ tableHeaderClassName
  ])
 
  return isVirtualized ? renderVirtualizedContent() : renderContent()

packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.module.css

@@ -56,3 +56,7 @@
  box-shadow: 'none';
  background-color: 'red';
 }
+
+.tableHeaderSmallPadding {
+ padding-top: var(--harmony-spacing-s);
+}

packages/web/src/pages/pay-and-earn-page/components/SalesTab.tsx

@@ -2,21 +2,25 @@ import { useCallback, useState } from 'react'
 
 import { useGetSales, useGetSalesCount, Id } from '@audius/common/api'
 import { useAllPaginatedQuery } from '@audius/common/audius-query'
+import { useFeatureFlag } from '@audius/common/hooks'
 import {
  Status,
  statusIsNotFinalized,
  combineStatuses,
  USDCPurchaseDetails
 } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
 import {
  accountSelectors,
  useUSDCPurchaseDetailsModal
 } from '@audius/common/store'
 import { route } from '@audius/common/utils'
+import { Flex, IconMoneyBracket, Text, useTheme } from '@audius/harmony'
 import { full } from '@audius/sdk'
 import { push as pushRoute } from 'connected-react-router'
 import { useDispatch } from 'react-redux'
 
+import { ExternalTextLink } from 'components/link'
 import { useErrorPageOnFailedStatus } from 'hooks/useErrorPageOnFailedStatus'
 import { useIsMobile } from 'hooks/useIsMobile'
 import { useMainContentRef } from 'pages/MainContentContext'
@@ -44,7 +48,10 @@ const messages = {
  noSalesBody: 'Once you make a sale, it will show up here.',
  upload: 'Upload Track',
  headerText: 'Your Sales',
- downloadCSV: 'Download CSV'
+ downloadCSV: 'Download CSV',
+ networkSplitExplainer:
+ 'You will instantly receive 90% of the retail price for every transaction.',
+ learnMore: 'Learn more.'
 }
 
 const TRANSACTIONS_BATCH_SIZE = 50
@@ -176,13 +183,30 @@ export const SalesTab = ({
 }: Omit<ReturnType<typeof useSales>, 'downloadCSV'>) => {
  const isMobile = useIsMobile()
  const mainContentRef = useMainContentRef()
+ const { color } = useTheme()
+ const { isEnabled: isNetworkCutEnabled } = useFeatureFlag(
+ FeatureFlags.NETWORK_CUT_ENABLED
+ )
 
  const columns = isMobile
  ? (['contentName', 'date', 'value'] as SalesTableColumn[])
  : undefined
 
  return (
  <div className={styles.container}>
+ {isNetworkCutEnabled ? (
+ <Flex gap='s' ph='l' pt='xl' alignItems='center'>
+ <IconMoneyBracket width={16} height={16} fill={color.neutral.n800} />
+ <Text variant='body' size='s' textAlign='left'>
+ {messages.networkSplitExplainer + ' '}
+ <ExternalTextLink to='' variant='visible'>
+ <Text variant='body' size='s' textAlign='left'>
+ {messages.learnMore}
+ </Text>
+ </ExternalTextLink>
+ </Text>
+ </Flex>
+ ) : null}
  {isEmpty ? (
  <NoSales />
  ) : (

packages/web/src/pages/pay-and-earn-page/components/SalesTable.tsx

@@ -1,6 +1,8 @@
 import { MouseEvent, useCallback, useMemo } from 'react'
 
+import { useFeatureFlag } from '@audius/common/hooks'
 import { USDCPurchaseDetails } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
 import { formatUSDCWeiToUSDString } from '@audius/common/utils'
 import { BN } from 'bn.js'
 import moment from 'moment'
@@ -139,6 +141,10 @@ export const SalesTable = ({
  scrollRef,
  fetchBatchSize
 }: SalesTableProps) => {
+ const { isEnabled: isNetworkCutEnabled } = useFeatureFlag(
+ FeatureFlags.NETWORK_CUT_ENABLED
+ )
+
  const tableColumns = useMemo(
  () => columns.map((id) => tableColumnMap[id]),
  [columns]
@@ -169,6 +175,9 @@ export const SalesTable = ({
  scrollRef={scrollRef}
  fetchBatchSize={fetchBatchSize}
  wrapperClassName={styles.tableWrapper}
+ tableHeaderClassName={
+ isNetworkCutEnabled ? styles.tableHeaderSmallPadding : undefined
+ }
  />
  )
 }