From b4710b1acfa8feda3f691b5c985040eac6cfe43d Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Fri, 10 Nov 2023 15:32:00 -0500 Subject: [PATCH 1/2] [PAY-2151] Create Pay & Earn Page --- .../components/nav/desktop/NavPopupMenu.tsx | 10 +++- packages/web/src/pages/App.jsx | 10 +++- .../pages/dashboard-page/DashboardPage.tsx | 8 +-- .../PayAndEarnPage.module.css | 13 +++++ .../pay-and-earn-page/PayAndEarnPage.tsx | 44 ++++++++++++++ .../components/USDCCard.module.css | 0 .../components/USDCCard.tsx | 58 +++---------------- packages/web/src/utils/route.ts | 3 + 8 files changed, 88 insertions(+), 58 deletions(-) create mode 100644 packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.module.css create mode 100644 packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.tsx rename packages/web/src/pages/{dashboard-page => pay-and-earn-page}/components/USDCCard.module.css (100%) rename packages/web/src/pages/{dashboard-page => pay-and-earn-page}/components/USDCCard.tsx (72%) diff --git a/packages/web/src/components/nav/desktop/NavPopupMenu.tsx b/packages/web/src/components/nav/desktop/NavPopupMenu.tsx index 451d2c7c169..b4b41eec2fc 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 @@ -27,6 +28,7 @@ import { AUDIO_PAGE, CHATS_PAGE, DASHBOARD_PAGE, + PAY_AND_EARN_PAGE, SETTINGS_PAGE } from 'utils/route' import zIndex from 'utils/zIndex' @@ -35,7 +37,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' } @@ -73,6 +76,11 @@ const NavPopupMenu = () => { icon: , iconClassName: styles.menuItemIcon }, + { + text: messages.payAndEarn, + onClick: () => navigate(PAY_AND_EARN_PAGE), + icon: + }, { 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, From 238ab3a635cc44aaa8845ca888b8769c1e9d61f6 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Mon, 13 Nov 2023 13:57:05 -0500 Subject: [PATCH 2/2] feature flag --- .../src/components/nav/desktop/NavPopupMenu.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/web/src/components/nav/desktop/NavPopupMenu.tsx b/packages/web/src/components/nav/desktop/NavPopupMenu.tsx index b4b41eec2fc..3a8260f5b39 100644 --- a/packages/web/src/components/nav/desktop/NavPopupMenu.tsx +++ b/packages/web/src/components/nav/desktop/NavPopupMenu.tsx @@ -21,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' @@ -48,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 ? (
@@ -76,11 +78,13 @@ const NavPopupMenu = () => { icon: , iconClassName: styles.menuItemIcon }, - { - text: messages.payAndEarn, - onClick: () => navigate(PAY_AND_EARN_PAGE), - icon: - }, + isUSDCEnabled + ? { + text: messages.payAndEarn, + onClick: () => navigate(PAY_AND_EARN_PAGE), + icon: + } + : null, { text: messages.audio, className: styles.rewardsMenuItem,