From e00630fe0b65c854b5477e98b936454eb976f692 Mon Sep 17 00:00:00 2001
From: Marcus Pasell <3690498+rickyrombo@users.noreply.github.com>
Date: Fri, 30 Aug 2024 23:16:55 -0700
Subject: [PATCH 1/2] Add network cut notice

---
 packages/web/src/components/table/Table.tsx   |  7 +++--
 .../PayAndEarnPage.module.css                 |  4 +++
 .../pay-and-earn-page/components/SalesTab.tsx | 27 ++++++++++++++++++-
 .../components/SalesTable.tsx                 |  9 +++++++
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/table/Table.tsx b/packages/web/src/components/table/Table.tsx
index f72c0bf9916..381d7ac97c7 100644
--- a/packages/web/src/components/table/Table.tsx
+++ b/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()
diff --git a/packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.module.css b/packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.module.css
index 0233edf21b7..c9c65d51d10 100644
--- a/packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.module.css
+++ b/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);
+}
diff --git a/packages/web/src/pages/pay-and-earn-page/components/SalesTab.tsx b/packages/web/src/pages/pay-and-earn-page/components/SalesTab.tsx
index 4b7ade3374c..63fa8830d15 100644
--- a/packages/web/src/pages/pay-and-earn-page/components/SalesTab.tsx
+++ b/packages/web/src/pages/pay-and-earn-page/components/SalesTab.tsx
@@ -2,21 +2,26 @@ 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 FeatureFlag from 'components/feature-flag/FeatureFlag'
+import { ExternalTextLink } from 'components/link'
 import { useErrorPageOnFailedStatus } from 'hooks/useErrorPageOnFailedStatus'
 import { useIsMobile } from 'hooks/useIsMobile'
 import { useMainContentRef } from 'pages/MainContentContext'
@@ -44,7 +49,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,6 +184,10 @@ 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[])
@@ -183,6 +195,19 @@ export const SalesTab = ({
 
   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 />
       ) : (
diff --git a/packages/web/src/pages/pay-and-earn-page/components/SalesTable.tsx b/packages/web/src/pages/pay-and-earn-page/components/SalesTable.tsx
index 15c4c0294bd..cf449a1223e 100644
--- a/packages/web/src/pages/pay-and-earn-page/components/SalesTable.tsx
+++ b/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
+      }
     />
   )
 }

From 224f6a77385762a4bf1fc20697229bd13b265b86 Mon Sep 17 00:00:00 2001
From: Marcus Pasell <3690498+rickyrombo@users.noreply.github.com>
Date: Tue, 3 Sep 2024 09:10:07 -0700
Subject: [PATCH 2/2] Remove unused

---
 packages/web/src/pages/pay-and-earn-page/components/SalesTab.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/src/pages/pay-and-earn-page/components/SalesTab.tsx b/packages/web/src/pages/pay-and-earn-page/components/SalesTab.tsx
index 63fa8830d15..cb7c4207a0d 100644
--- a/packages/web/src/pages/pay-and-earn-page/components/SalesTab.tsx
+++ b/packages/web/src/pages/pay-and-earn-page/components/SalesTab.tsx
@@ -20,7 +20,6 @@ import { full } from '@audius/sdk'
 import { push as pushRoute } from 'connected-react-router'
 import { useDispatch } from 'react-redux'
 
-import FeatureFlag from 'components/feature-flag/FeatureFlag'
 import { ExternalTextLink } from 'components/link'
 import { useErrorPageOnFailedStatus } from 'hooks/useErrorPageOnFailedStatus'
 import { useIsMobile } from 'hooks/useIsMobile'