diff --git a/packages/web/src/components/nav/desktop/NavPopupMenu.tsx b/packages/web/src/components/nav/desktop/NavPopupMenu.tsx
index 451d2c7c169..3a8260f5b39 100644
--- a/packages/web/src/components/nav/desktop/NavPopupMenu.tsx
+++ b/packages/web/src/components/nav/desktop/NavPopupMenu.tsx
@@ -9,6 +9,7 @@ import {
IconDashboard,
IconMessage,
IconSettings,
+ IconDonate,
PopupMenu,
PopupMenuItem,
PopupPosition
@@ -20,6 +21,7 @@ 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'
@@ -27,6 +29,7 @@ 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 ? (
@@ -73,6 +78,13 @@ const NavPopupMenu = () => {
icon: ,
iconClassName: styles.menuItemIcon
},
+ isUSDCEnabled
+ ? {
+ text: messages.payAndEarn,
+ onClick: () => navigate(PAY_AND_EARN_PAGE),
+ icon:
+ }
+ : null,
{
text: messages.audio,
className: styles.rewardsMenuItem,
diff --git a/packages/web/src/pages/App.jsx b/packages/web/src/pages/App.jsx
index a74f6d9ace3..b9c159804df 100644
--- a/packages/web/src/pages/App.jsx
+++ b/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}
/>
+
{
statuses.push(balanceStatus)
}
const status = combineStatuses(statuses)
- const isUSDCEnabled = useIsUSDCEnabled()
const header =
@@ -210,9 +207,6 @@ export const DashboardPage = () => {
handle={account.handle}
name={account.name}
/>
- {isUSDCEnabled ? (
- 0} />
- ) : null}
{renderChart()}
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
new file mode 100644
index 00000000000..95fe4a6f6f4
--- /dev/null
+++ b/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;
+}
diff --git a/packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.tsx b/packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.tsx
new file mode 100644
index 00000000000..b6f1b522896
--- /dev/null
+++ b/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 =
+
+ return (
+
+ {balance === null || status === Status.LOADING ? (
+
+ ) : (
+ <>
+
+ >
+ )}
+
+ )
+}
diff --git a/packages/web/src/pages/dashboard-page/components/USDCCard.module.css b/packages/web/src/pages/pay-and-earn-page/components/USDCCard.module.css
similarity index 100%
rename from packages/web/src/pages/dashboard-page/components/USDCCard.module.css
rename to packages/web/src/pages/pay-and-earn-page/components/USDCCard.module.css
diff --git a/packages/web/src/pages/dashboard-page/components/USDCCard.tsx b/packages/web/src/pages/pay-and-earn-page/components/USDCCard.tsx
similarity index 72%
rename from packages/web/src/pages/dashboard-page/components/USDCCard.tsx
rename to packages/web/src/pages/pay-and-earn-page/components/USDCCard.tsx
index 3236fc10123..9791558997f 100644
--- a/packages/web/src/pages/dashboard-page/components/USDCCard.tsx
+++ b/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 = ({
-
- {isArtist ? messages.earn : messages.buyAndSell}
-
+
{messages.buyAndSell}
-
+
-
+
-
(
-
)
diff --git a/packages/web/src/utils/route.ts b/packages/web/src/utils/route.ts
index 040532af7d3..2cef62c98a6 100644
--- a/packages/web/src/utils/route.ts
+++ b/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 = '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/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,