[PAY-1506] USDC artist dashboard tile (#3963)

packages/common/src/utils/formatUtil.ts

@@ -34,6 +34,36 @@ export const formatCount = (count: number) => {
   }
 }
 
+/**
+ * The format any currency should be:
+ * - show 0 if 0
+ * - don't show decimal places if input is a round number
+ * - show only up to 2 decimal places if input is not a round number
+ * - round down to nearest thousand if input is greater than 10000
+ * ie.
+ * 0 => 0
+ * 8 => 8
+ * 8.01 => 8.01
+ * 8.10 => 8.10
+ * 4,210 => 4210
+ * 9,999.99 => 9999.99
+ * 56,010 => 56K
+ * 443,123 => 443K
+ */
+export const formatCurrencyBalance = (amount: number) => {
+  if (amount === 0) {
+    return '0'
+  } else if (amount >= 9999.995) {
+    const roundedAmount = Math.floor(amount / 1000)
+    return `${roundedAmount}k`
+  } else if (Number.isInteger(amount)) {
+    return amount.toString()
+  } else {
+    const decimalCount = amount > 10000 ? 0 : 2
+    return amount.toFixed(decimalCount)
+  }
+}
+
 /**
  * Formats a number of bytes into a nice looking string.
  * ie.

packages/stems/src/assets/styles/fonts.css

@@ -18,6 +18,7 @@ root {
   --font-2xl: 24px;
   --font-3xl: 32px;
   --font-4xl: 36px;
+  --font-5xl: 40px;
 
   --font-ultra-light: 100;
   --font-regular: 400;

packages/stems/src/components/Icons/index.ts

@@ -66,6 +66,7 @@ export { ReactComponent as IconIndent } from '../../assets/icons/iconIndent.svg'
 export { ReactComponent as IconInfo } from '../../assets/icons/iconInfo.svg'
 export { ReactComponent as IconInstagram } from '../../assets/icons/iconInstagram.svg'
 export { ReactComponent as IconKebabHorizontal } from '../../assets/icons/iconKebabHorizontal.svg'
+export { ReactComponent as IconQuestionCircle } from '../../assets/icons/iconQuestionCircle.svg'
 export { ReactComponent as IconKebabVertical } from '../../assets/icons/iconKebabVertical.svg'
 export { ReactComponent as IconLink } from '../../assets/icons/iconLink.svg'
 export { ReactComponent as IconListens } from '../../assets/icons/iconListens.svg'

packages/stems/src/styles/colors.ts

@@ -39,3 +39,4 @@ export type ColorValue =
   | 'accentBlue'
   | 'specialLightGreen'
   | 'darkmodeStaticWhite'
+  | 'staticWhite'

packages/web/src/components/typography/types.ts

@@ -12,7 +12,13 @@ export type FontWeight =
 
 export type TextStrength = 'weak' | 'default' | 'strong'
 
-export type TextSize = 'xLarge' | 'large' | 'medium' | 'small' | 'xSmall'
+export type TextSize =
+  | 'xxLarge'
+  | 'xLarge'
+  | 'large'
+  | 'medium'
+  | 'small'
+  | 'xSmall'
 
 export type TextVariant =
   | 'display'

packages/web/src/components/typography/typography.module.css

@@ -67,6 +67,12 @@
   font-weight: var(--font-bold);
 }
 
+/* 40 / 44 */
+.headingXxLarge {
+  font-size: var(--unit-10);
+  line-height: var(--unit-11);
+}
+
 /* 36 / 40 */
 .headingXLarge {
   font-size: var(--unit-9);

packages/web/src/pages/artist-dashboard-page/ArtistDashboardPage.module.css

@@ -159,3 +159,62 @@
   justify-content: stretch;
   margin: 12px 0px 36px;
 }
+
+.usdcContainer {
+  width: 100%;
+  flex-direction: column;
+  border-radius: var(--unit-3);
+  background: var(--static-white);
+  overflow: hidden;
+}
+
+.backgroundBlueGradient {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--unit-4);
+  padding: var(--unit-6);
+  background: linear-gradient(
+      315deg,
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(255, 255, 255, 0.1) 100%
+    ),
+    #2775ca;
+}
+
+.usdcTitleContainer {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.usdcTitle {
+  display: flex;
+  gap: var(--unit-2);
+}
+
+.usdc {
+  opacity: 0.8;
+}
+
+.usdcInfo {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.withdrawContainer {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--unit-6);
+  gap: var(--unit-6);
+}

packages/web/src/pages/artist-dashboard-page/ArtistDashboardPage.tsx

@@ -13,10 +13,24 @@ import {
   Theme,
   Track,
   User,
+  formatCurrencyBalance,
   formatCount,
-  themeSelectors
+  themeSelectors,
+  FeatureFlags
 } from '@audius/common'
-import { IconFilter, IconNote, IconHidden } from '@audius/stems'
+import {
+  IconFilter,
+  IconNote,
+  IconHidden,
+  IconKebabHorizontal,
+  IconQuestionCircle,
+  HarmonyButton,
+  HarmonyButtonType,
+  PopupMenu,
+  PopupMenuItem,
+  HarmonyPlainButton,
+  HarmonyPlainButtonType
+} from '@audius/stems'
 import cn from 'classnames'
 import { push as pushRoute } from 'connected-react-router'
 import { each } from 'lodash'
@@ -25,12 +39,15 @@ import { connect, useDispatch, useSelector } from 'react-redux'
 import { withRouter, RouteComponentProps } from 'react-router-dom'
 import { Dispatch } from 'redux'
 
+import { Icon } from 'components/Icon'
 import Header from 'components/header/desktop/Header'
 import { Input } from 'components/input'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Page from 'components/page/Page'
 import { TracksTable, TracksTableColumn } from 'components/tracks-table'
+import { Text } from 'components/typography'
 import useTabs, { useTabRecalculator } from 'hooks/useTabs/useTabs'
+import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 import { AppState } from 'store/types'
 import lazyWithPreload from 'utils/lazyWithPreload'
 import { profilePage, TRENDING_PAGE } from 'utils/route'
@@ -86,7 +103,13 @@ export const messages = {
   publicTracksTabTitle: 'PUBLIC TRACKS',
   unlistedTracksTabTitle: 'HIDDEN TRACKS',
   filterInputPlacehoder: 'Filter Tracks',
-  thisYear: 'This Year'
+  thisYear: 'This Year',
+  usdc: 'USDC',
+  earn: 'Earn USDC by selling your music',
+  learnMore: 'Learn More',
+  withdraw: 'Withdraw Funds',
+  salesSummary: 'Sales Summary',
+  withdrawalHistory: 'Withdrawal History'
 }
 
 const tableColumns: TracksTableColumn[] = [
@@ -231,6 +254,89 @@ const TracksTableContainer = ({
   )
 }
 
+const USDCSection = ({ account }: { account: User }) => {
+  if (!account) return null
+
+  // TODO: wire up balance https://linear.app/audius/issue/PAY-1761/wire-up-usdc-balance-in-artist-dashboard
+  const balance = 10.29
+
+  const menuItems: PopupMenuItem[] = [
+    {
+      text: messages.salesSummary,
+      // TODO: link to sales page https://linear.app/audius/issue/PAY-1763/wire-up-salespurchases-pages-on-artist-dashboard
+      onClick: () => {}
+    },
+    {
+      text: messages.withdrawalHistory,
+      // TODO: link to withdraw history page https://linear.app/audius/issue/PAY-1763/wire-up-salespurchases-pages-on-artist-dashboard
+      onClick: () => {}
+    }
+  ]
+
+  return (
+    <div className={styles.usdcContainer}>
+      <div className={styles.backgroundBlueGradient}>
+        <div className={styles.usdcTitleContainer}>
+          <div className={styles.usdcTitle}>
+            {/* TODO: update icon https://linear.app/audius/issue/PAY-1764/update-icons-in-usdc-tile */}
+            <Icon icon={IconNote} size='xxxLarge' color='staticWhite' />
+            <div className={styles.usdc}>
+              <Text
+                variant='heading'
+                size='xxLarge'
+                color='staticWhite'
+                strength='strong'
+              >
+                {messages.usdc}
+              </Text>
+            </div>
+          </div>
+          <Text
+            variant='heading'
+            color='staticWhite'
+            strength='strong'
+            size='xxLarge'
+          >
+            ${formatCurrencyBalance(balance)}
+          </Text>
+        </div>
+        <div className={styles.usdcInfo}>
+          <Text color='staticWhite'>{messages.earn}</Text>
+          <HarmonyPlainButton
+            // TODO: wire up learn more link https://linear.app/audius/issue/PAY-1762/wire-up-learn-more-link
+            onClick={() => {}}
+            iconLeft={IconQuestionCircle}
+            variant={HarmonyPlainButtonType.INVERTED}
+            text={messages.learnMore}
+          />
+        </div>
+      </div>
+      <div className={styles.withdrawContainer}>
+        <HarmonyButton
+          variant={HarmonyButtonType.SECONDARY}
+          text={messages.withdraw}
+          // TODO: update leftIcon and wire up withdraw modal https://linear.app/audius/issue/PAY-1754/usdc-withdrawal-flow-ui
+          iconLeft={() => <Icon icon={IconNote} size='medium' />}
+          onClick={() => {}}
+        />
+        <PopupMenu
+          transformOrigin={{ horizontal: 'center', vertical: 'top' }}
+          anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
+          items={menuItems}
+          renderTrigger={(anchorRef, triggerPopup) => (
+            <HarmonyButton
+              ref={anchorRef}
+              variant={HarmonyButtonType.SECONDARY}
+              iconLeft={IconKebabHorizontal}
+              onClick={triggerPopup}
+            />
+          )}
+        />
+      </div>
+    </div>
+  )
+}
+
 type ArtistDashboardPageProps = ReturnType<typeof mapDispatchToProps> &
   ReturnType<ReturnType<typeof makeMapStateToProps>> &
   RouteComponentProps
@@ -383,6 +489,7 @@ export class ArtistDashboardPage extends Component<
   render() {
     const { account, status } = this.props
     const header = <Header primary='Dashboard' />
+    const isUSDCEnabled = getFeatureEnabled(FeatureFlags.USDC_PURCHASES)
 
     return (
       <Page
@@ -396,6 +503,7 @@ export class ArtistDashboardPage extends Component<
         ) : (
           <>
             {this.renderProfileSection()}
+            {isUSDCEnabled ? <USDCSection account={account} /> : null}
             {this.renderCreatorContent()}
           </>
         )}