[PAY-2151] Create Pay & Earn Page

packages/web/src/components/nav/desktop/NavPopupMenu.tsx

@@ -9,6 +9,7 @@ import {
   IconDashboard,
   IconMessage,
   IconSettings,
+  IconDonate,
   PopupMenu,
   PopupMenuItem,
   PopupPosition
@@ -20,13 +21,15 @@ import IconKebabHorizontal from 'assets/img/iconKebabHorizontalAlt.svg'
 import { make } from 'common/store/analytics/actions'
 import { Icon } from 'components/Icon'
 import { NotificationDot } from 'components/notification-dot'
+import { useIsUSDCEnabled } from 'hooks/useIsUSDCEnabled'
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
 import { useFlag } from 'hooks/useRemoteConfig'
 import { useSelector } from 'utils/reducer'
 import {
   AUDIO_PAGE,
   CHATS_PAGE,
   DASHBOARD_PAGE,
+  PAY_AND_EARN_PAGE,
   SETTINGS_PAGE
 } from 'utils/route'
 import zIndex from 'utils/zIndex'
@@ -35,7 +38,8 @@ import styles from './NavPopupMenu.module.css'
 
 const messages = {
   settings: 'Settings',
-  dashboard: 'Dashboard & Payments',
+  dashboard: 'Artist Dashboard',
+  payAndEarn: 'Pay & Earn',
   audio: '$AUDIO & Rewards',
   messages: 'Messages'
 }
@@ -45,6 +49,7 @@ const NavPopupMenu = () => {
   const navigate = useNavigateToPage()
   const hasUnreadMessages = useSelector(chatSelectors.getHasUnreadMessages)
   const { isEnabled: isChatEnabled } = useFlag(FeatureFlags.CHAT_ENABLED)
+  const isUSDCEnabled = useIsUSDCEnabled()
 
   const messagesItemText = hasUnreadMessages ? (
     <div className={styles.popupItemText}>
@@ -73,6 +78,13 @@ const NavPopupMenu = () => {
       icon: <IconDashboard />,
       iconClassName: styles.menuItemIcon
     },
+    isUSDCEnabled
+      ? {
+          text: messages.payAndEarn,
+          onClick: () => navigate(PAY_AND_EARN_PAGE),
+          icon: <Icon icon={IconDonate} />
+        }
+      : null,
     {
       text: messages.audio,
       className: styles.rewardsMenuItem,

packages/web/src/pages/App.jsx

@@ -152,7 +152,8 @@ import {
   SALES_PAGE,
   WITHDRAWALS_PAGE,
   EXPLORE_PREMIUM_TRACKS_PAGE,
-  SIGN_UP_START_PAGE
+  SIGN_UP_START_PAGE,
+  PAY_AND_EARN_PAGE
 } from 'utils/route'
 import { getTheme as getSystemTheme } from 'utils/theme/theme'
 
@@ -175,6 +176,7 @@ import ExploreCollectionsPage from './explore-page/ExploreCollectionsPage'
 import { FbSharePage } from './fb-share-page/FbSharePage'
 import FollowersPage from './followers-page/FollowersPage'
 import FollowingPage from './following-page/FollowingPage'
+import { PayAndEarnPage } from './pay-and-earn-page/PayAndEarnPage'
 import { PremiumTracksPage } from './premium-tracks-page/PremiumTracksPage'
 import { PurchasesPage, SalesPage } from './purchases-and-sales'
 import { WithdrawalsPage } from './purchases-and-sales/WithdrawalsPage'
@@ -739,6 +741,12 @@ class App extends Component {
                   isMobile={isMobileClient}
                   component={DashboardPage}
                 />
+                <Route
+                  exact
+                  path={PAY_AND_EARN_PAGE}
+                  isMobile={isMobileClient}
+                  component={PayAndEarnPage}
+                />
                 <Route
                   exact
                   path={AUDIO_PAGE}

packages/web/src/pages/dashboard-page/DashboardPage.tsx

@@ -17,7 +17,6 @@ import Header from 'components/header/desktop/Header'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Page from 'components/page/Page'
 import { useGoToRoute } from 'hooks/useGoToRoute'
-import { useIsUSDCEnabled } from 'hooks/useIsUSDCEnabled'
 import lazyWithPreload from 'utils/lazyWithPreload'
 
 import styles from './DashboardPage.module.css'
@@ -27,7 +26,6 @@ import {
   DataSourceTrack,
   tablePageSize
 } from './components/TracksTableContainer'
-import { USDCCard } from './components/USDCCard'
 import {
   getDashboardListenData,
   getDashboardStatus,
@@ -42,7 +40,7 @@ const TotalPlaysChart = lazyWithPreload(
 )
 
 export const messages = {
-  title: 'Dashboard & Payments',
+  title: 'Artist Dashboard',
   description: 'View important stats like plays, reposts, and more.',
   thisYear: 'This Year'
 }
@@ -88,7 +86,6 @@ export const DashboardPage = () => {
     statuses.push(balanceStatus)
   }
   const status = combineStatuses(statuses)
-  const isUSDCEnabled = useIsUSDCEnabled()
 
   const header = <Header primary={messages.title} />
 
@@ -210,9 +207,6 @@ export const DashboardPage = () => {
               handle={account.handle}
               name={account.name}
             />
-            {isUSDCEnabled ? (
-              <USDCCard balance={balance} isArtist={account.track_count > 0} />
-            ) : null}
           </div>
           <div className={styles.sectionContainer}>
             {renderChart()}

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

@@ -0,0 +1,13 @@
+.pageContainer {
+  user-select: none;
+}
+
+.spinner {
+  height: 40px;
+  width: 40px;
+  margin: 0 auto;
+}
+
+.spinner g path {
+  stroke: var(--secondary) !important;
+}

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

@@ -0,0 +1,44 @@
+import { Status, combineStatuses, useUSDCBalance } from '@audius/common'
+
+import Header from 'components/header/desktop/Header'
+import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
+import Page from 'components/page/Page'
+
+import styles from './PayAndEarnPage.module.css'
+import { USDCCard } from './components/USDCCard'
+
+export const messages = {
+  title: 'Pay & Earn',
+  description: 'Pay & earn with Audius'
+}
+
+export const PayAndEarnPage = () => {
+  const statuses = []
+  const { data: balance, balanceStatus } = useUSDCBalance({
+    isPolling: true,
+    pollingInterval: 3000
+  })
+  if (balance === null) {
+    statuses.push(balanceStatus)
+  }
+  const status = combineStatuses(statuses)
+
+  const header = <Header primary={messages.title} />
+
+  return (
+    <Page
+      title={messages.title}
+      description={messages.description}
+      contentClassName={styles.pageContainer}
+      header={header}
+    >
+      {balance === null || status === Status.LOADING ? (
+        <LoadingSpinner className={styles.spinner} />
+      ) : (
+        <>
+          <USDCCard balance={balance} />
+        </>
+      )}
+    </Page>
+  )
+}

packages/web/src/pages/dashboard-page/components/USDCCard.tsx → packages/web/src/pages/pay-and-earn-page/components/USDCCard.tsx

@@ -12,20 +12,16 @@ import {
 import {
   Button,
   ButtonType,
-  IconWithdraw,
-  IconKebabHorizontal,
   PlainButton,
   IconQuestionCircle,
   PlainButtonType
 } from '@audius/harmony'
-import { PopupMenu, PopupMenuItem, LogoUSDC } from '@audius/stems'
+import { LogoUSDC } from '@audius/stems'
 import BN from 'bn.js'
 
 import { Icon } from 'components/Icon'
 import { Text } from 'components/typography'
-import { useGoToRoute } from 'hooks/useGoToRoute'
 import { make, track } from 'services/analytics'
-import { SALES_PAGE, WITHDRAWALS_PAGE } from 'utils/route'
 
 import styles from './USDCCard.module.css'
 
@@ -43,14 +39,7 @@ const messages = {
   withdrawalHistory: 'Withdrawal History'
 }
 
-export const USDCCard = ({
-  balance,
-  isArtist
-}: {
-  balance: BNUSDC
-  isArtist: boolean
-}) => {
-  const goToRoute = useGoToRoute()
+export const USDCCard = ({ balance }: { balance: BNUSDC }) => {
   const { onOpen: openWithdrawUSDCModal } = useWithdrawUSDCModal()
   const { onOpen: openUsdcManualTransferModal } = useUSDCManualTransferModal()
 
@@ -63,19 +52,6 @@ export const USDCCard = ({
     window.open(LEARN_MORE_LINK, '_blank')
   }, [])
 
-  const menuItems = [
-    isArtist
-      ? {
-          text: messages.salesSummary,
-          onClick: () => goToRoute(SALES_PAGE)
-        }
-      : null,
-    {
-      text: messages.withdrawalHistory,
-      onClick: () => goToRoute(WITHDRAWALS_PAGE)
-    }
-  ].filter(Boolean) as PopupMenuItem[]
-
   const handleWithdraw = () => {
     openWithdrawUSDCModal({
       page: WithdrawUSDCModalPages.ENTER_TRANSFER_DETAILS
@@ -124,9 +100,7 @@ export const USDCCard = ({
           </Text>
         </div>
         <div className={styles.usdcInfo}>
-          <Text color='staticWhite'>
-            {isArtist ? messages.earn : messages.buyAndSell}
-          </Text>
+          <Text color='staticWhite'>{messages.buyAndSell}</Text>
           <PlainButton
             onClick={handleLearnMore}
             iconLeft={IconQuestionCircle}
@@ -137,38 +111,24 @@ export const USDCCard = ({
         </div>
       </div>
       <div className={styles.withdrawContainer}>
-        <div className={styles.withdrawButton}>
+        <div className={styles.addFundsButton}>
           <Button
             variant={ButtonType.SECONDARY}
             fullWidth
-            iconLeft={IconWithdraw}
-            onClick={handleWithdraw}
+            onClick={handleAddFunds}
           >
-            {messages.withdraw}
+            {messages.addFunds}
           </Button>
         </div>
-        <div className={styles.addFundsButton}>
+        <div className={styles.withdrawButton}>
           <Button
             variant={ButtonType.SECONDARY}
             fullWidth
-            onClick={handleAddFunds}
+            onClick={handleWithdraw}
           >
-            {messages.addFunds}
+            {messages.withdraw}
           </Button>
         </div>
-        <PopupMenu
-          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-          items={menuItems}
-          renderTrigger={(anchorRef, triggerPopup) => (
-            <Button
-              ref={anchorRef}
-              variant={ButtonType.SECONDARY}
-              iconLeft={IconKebabHorizontal}
-              onClick={() => triggerPopup()}
-            />
-          )}
-        />
       </div>
     </div>
   )

packages/web/src/utils/route.ts

@@ -58,6 +58,7 @@ export const FAVORITES_PAGE = '/favorites'
 export const LIBRARY_PAGE = '/library'
 export const HISTORY_PAGE = '/history'
 export const DASHBOARD_PAGE = '/dashboard'
+export const PAY_AND_EARN_PAGE = '/payandearn'
 export const AUDIO_PAGE = '/audio'
 export const AUDIO_TRANSACTIONS_PAGE = '/audio/transactions'
 export const UPLOAD_PAGE = '/upload'
@@ -228,6 +229,7 @@ export const orderedRoutes = [
   LIBRARY_PAGE,
   HISTORY_PAGE,
   DASHBOARD_PAGE,
+  PAY_AND_EARN_PAGE,
   AUDIO_PAGE,
   AUDIO_TRANSACTIONS_PAGE,
   SETTINGS_PAGE,
@@ -262,6 +264,7 @@ export const staticRoutes = new Set([
   FAVORITES_PAGE,
   HISTORY_PAGE,
   DASHBOARD_PAGE,
+  PAY_AND_EARN_PAGE,
   AUDIO_PAGE,
   AUDIO_TRANSACTIONS_PAGE,
   UPLOAD_PAGE,