[PAY-1506] USDC artist dashboard tile

packages/common/src/utils/formatUtil.ts

@@ -34,6 +34,36 @@ export const formatCount = (count: number) => {
   }
 }
 
+/**
+ * The format for USDC 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 formatUSDC = (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/Icon/Icon.module.css

@@ -27,3 +27,6 @@
 .xxLarge {
   --icon-size: var(--unit-8);
 }
+.xxxLarge {
+  --icon-size: var(--unit-10);
+}

packages/web/src/components/Icon/Icon.tsx

@@ -13,6 +13,7 @@ type IconSize =
   | 'large' // 24
   | 'xLarge' // 30
   | 'xxLarge' // 32
+  | 'xxxLarge' // 40
 
 type IconProps = {
   color?: ColorValue
@@ -29,6 +30,7 @@ type IconProps = {
  * - large: 24
  * - xLarge: 30
  * - xxLarge: 32
+ * - xxxLarge: 40
  */
 export const Icon = (props: IconProps) => {
   const {

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,74 @@
   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;
+  text-transform: uppercase;
+  font-weight: 900;
+  font-size: var(--font-5xl);
+  color: var(--static-white);
+}
+
+.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;
+  color: var(--static-white);
+  font-size: var(--font-m);
+  font-weight: var(--font-medium);
+  line-height: var(--unit-5); /* 125% */
+}
+
+.withdrawContainer {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--unit-6);
+  gap: var(--unit-6);
+}
+
+.learnMoreContainer {
+  color: var(--static-white);
+}

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

@@ -13,10 +13,24 @@ import {
   Theme,
   Track,
   User,
+  formatUSDC,
   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',
+  withdrawHistory: 'Withdraw History'
 }
 
 const tableColumns: TracksTableColumn[] = [
@@ -380,9 +403,87 @@ export class ArtistDashboardPage extends Component<
     )
   }
 
+  renderUSDCSection() {
+    const { account } = this.props
+    if (!account) return null
+
+    // TODO: wire up balance
+    const balance = 10.29
+
+    const menuItems: PopupMenuItem[] = [
+      {
+        text: messages.salesSummary,
+        // TODO: link to sales page
+        onClick: () => {}
+      },
+      {
+        text: messages.withdrawHistory,
+        // TODO: link to withdraw history page
+        onClick: () => {}
+      }
+    ]
+
+    return (
+      <div className={styles.usdcContainer}>
+        <div className={styles.backgroundBlueGradient}>
+          <div className={styles.usdcTitleContainer}>
+            <div className={styles.usdcTitle}>
+              {/* TODO: update icon */}
+              <Icon icon={IconNote} size='xxxLarge' />
+              <div className={styles.usdc}>
+                <Text
+                  variant='heading'
+                  size='xxLarge'
+                  color='staticWhite'
+                  strength='strong'
+                >
+                  {messages.usdc}
+                </Text>
+              </div>
+            </div>
+            <div className={styles.usdcBalance}>${formatUSDC(balance)}</div>
+          </div>
+          <div className={styles.usdcInfo}>
+            <Text color='staticWhite'>{messages.earn}</Text>
+            <HarmonyPlainButton
+              // TODO: 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 page
+            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>
+    )
+  }
+
   render() {
     const { account, status } = this.props
     const header = <Header primary='Dashboard' />
+    const isUSDCEnabled = getFeatureEnabled(FeatureFlags.USDC_PURCHASES)
 
     return (
       <Page
@@ -396,6 +497,7 @@ export class ArtistDashboardPage extends Component<
         ) : (
           <>
             {this.renderProfileSection()}
+            {isUSDCEnabled ? this.renderUSDCSection() : null}
             {this.renderCreatorContent()}
           </>
         )}