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,