Finalize fan clubs

packages/common/src/messages/coinDetailsMessages.ts

@@ -29,6 +29,7 @@ export const coinDetailsMessages = {
     openDiscord: 'Open The Discord',
     refreshDiscordRole: 'Refresh Discord Role',
     browseRewards: 'Browse Rewards',
+    uploadExclusiveTrack: 'Upload Exclusive Track',
     rewardTiers: 'Reward Tiers',
     discordDisabledTooltip: (coinTicker: string = '') =>
       `Buy $${coinTicker} to access the members-only Discord`
@@ -120,6 +121,7 @@ export const coinDetailsMessages = {
     title: 'Fan Club Details',
     details: 'Details',
     coinAddress: 'Coin Address',
+    rewardsPoolAddress: 'Rewards Pool Address',
     onChainDescription: 'On-Chain Description',
     totalSupply: 'Total Supply',
     marketCap: 'Market Cap',

packages/common/src/messages/walletMessages.ts

@@ -152,6 +152,7 @@ export const walletMessages = {
     fanClubLabel: 'Fan Club',
     members: 'Members',
     price: 'Price',
+    marketCap: 'Market Cap',
     sortTitle: 'SORT',
     sortAscending: 'Ascending',
     sortDescending: 'Descending',

packages/harmony/src/components/modal/Modal.module.css

@@ -145,10 +145,15 @@
   fill: var(--harmony-n-400);
 }
 
+/* Fixed dialog widths (see Modal `size` prop) */
 .sizeSmall {
   width: 488px;
 }
 
+.sizeLarge {
+  width: 600px;
+}
+
 .sizeMedium {
   width: 720px;
 }

packages/harmony/src/components/modal/types.ts

@@ -122,8 +122,8 @@ export type ModalProps = {
    */
   'aria-labelledby'?: string
   /**
-   * If provided, conform to standard modal widths
-   * (only small currently implemented)
+   * If provided, sets a fixed modal body width (see Modal.module.css):
+   * small 488px, large 600px, medium 720px
    */
   size?: 'small' | 'medium' | 'large'
   className?: string

packages/web/src/app/web-player/WebPlayer.tsx

@@ -99,25 +99,27 @@ const CashPage = lazy(() =>
   import('pages/cash-page').then((m) => ({ default: m.CashPage }))
 )
 const ChatPage = lazy(() => import('pages/chat-page'))
-const CoinDetailPage = lazy(() =>
-  import('pages/coin-detail-page/CoinDetailPage').then((m) => ({
-    default: m.CoinDetailPage
+const FanClubDetailPage = lazy(() =>
+  import('pages/fan-club-detail-page/FanClubDetailPage').then((m) => ({
+    default: m.FanClubDetailPage
   }))
 )
 const ExclusiveTracksPage = lazy(() =>
-  import('pages/coin-detail-page/components/ExclusiveTracksPage').then((m) => ({
-    default: m.ExclusiveTracksPage
-  }))
-)
-const ArtistCoinDetailsPage = lazy(() =>
-  import('pages/coin-detail-page/components/mobile/ArtistCoinDetailsPage').then(
-    (m) => ({ default: m.ArtistCoinDetailsPage })
+  import('pages/fan-club-detail-page/components/ExclusiveTracksPage').then(
+    (m) => ({
+      default: m.ExclusiveTracksPage
+    })
   )
 )
+const ArtistFanClubDetailsPage = lazy(() =>
+  import(
+    'pages/fan-club-detail-page/components/mobile/ArtistFanClubDetailsPage'
+  ).then((m) => ({ default: m.ArtistFanClubDetailsPage }))
+)
 const MobileExclusiveTracksPage = lazy(() =>
-  import('pages/coin-detail-page/components/mobile/ExclusiveTracksPage').then(
-    (m) => ({ default: m.ExclusiveTracksPage })
-  )
+  import(
+    'pages/fan-club-detail-page/components/mobile/ExclusiveTracksPage'
+  ).then((m) => ({ default: m.ExclusiveTracksPage }))
 )
 const CoinRedeemPage = lazy(() =>
   import('pages/coin-redeem-page/CoinRedeemPage').then((m) => ({
@@ -380,11 +382,13 @@ const SearchPageRoute = ({ validSearchCategories }: SearchPageRouteProps) => {
   return <ExplorePage />
 }
 
-type CoinDetailPageRouteProps = {
+type FanClubDetailPageRouteProps = {
   mainContentRef: React.RefObject<HTMLDivElement>
 }
 
-const CoinDetailPageRoute = ({ mainContentRef }: CoinDetailPageRouteProps) => {
+const FanClubDetailPageRoute = ({
+  mainContentRef
+}: FanClubDetailPageRouteProps) => {
   const params = useParams<{ ticker?: string }>()
   const location = useLocation()
   const { ticker } = params
@@ -401,7 +405,7 @@ const CoinDetailPageRoute = ({ mainContentRef }: CoinDetailPageRouteProps) => {
       />
     )
   }
-  return <CoinDetailPage />
+  return <FanClubDetailPage />
 }
 
 const CoinExclusiveTracksMobileRoute = () => {
@@ -936,13 +940,13 @@ const WebPlayer = (props: WebPlayerProps) => {
                 <Route
                   path={COIN_DETAIL_PAGE}
                   element={
-                    <CoinDetailPageRoute mainContentRef={mainContentRef} />
+                    <FanClubDetailPageRoute mainContentRef={mainContentRef} />
                   }
                 />
                 <Route
                   path={COIN_DETAIL_BUY_PAGE}
                   element={
-                    <CoinDetailPageRoute mainContentRef={mainContentRef} />
+                    <FanClubDetailPageRoute mainContentRef={mainContentRef} />
                   }
                 />
                 <Route path={COIN_REDEEM_PAGE} element={<CoinRedeemPage />} />
@@ -1179,7 +1183,7 @@ const WebPlayer = (props: WebPlayerProps) => {
                     />
                     <Route
                       path={COIN_DETAIL_MOBILE_WEB_ROUTE}
-                      element={<ArtistCoinDetailsPage />}
+                      element={<ArtistFanClubDetailsPage />}
                     />
                     <Route path={EMPTY_PAGE} element={<EmptyPage />} />
                   </>
@@ -1346,13 +1350,13 @@ const WebPlayer = (props: WebPlayerProps) => {
                 <Route
                   path={COIN_DETAIL_PAGE}
                   element={
-                    <CoinDetailPageRoute mainContentRef={mainContentRef} />
+                    <FanClubDetailPageRoute mainContentRef={mainContentRef} />
                   }
                 />
                 <Route
                   path={COIN_DETAIL_BUY_PAGE}
                   element={
-                    <CoinDetailPageRoute mainContentRef={mainContentRef} />
+                    <FanClubDetailPageRoute mainContentRef={mainContentRef} />
                   }
                 />
                 <Route path={COIN_REDEEM_PAGE} element={<CoinRedeemPage />} />

packages/web/src/components/modal/ResponsiveModal.tsx

@@ -85,7 +85,7 @@ const ResponsiveModal = ({
       case 'l':
         return 'large'
       case 'xl':
-        return 'large' // Map xl to large since Modal doesn't support xl
+        return 'large'
       default:
         return 'medium'
     }

packages/web/src/components/skeleton/Skeleton.tsx

@@ -2,27 +2,53 @@ import cn from 'classnames'
 
 import styles from './Skeleton.module.css'
 
-type SkeletonProps = {
+type CssLength = string | number
+
+const toCssSize = (value: CssLength | undefined) => {
+  if (value === undefined) return undefined
+  return typeof value === 'number' ? `${value}px` : value
+}
+
+export type SkeletonProps = {
   // Width (css string) of the skeleton to display. Default 100%.
   width?: string
   // Height (css string) of the skeleton to display. Default 100%.
   height?: string
+  /** Shorthand for `width`; ignored when `width` is set. Numbers become px. */
+  w?: CssLength
+  /** Shorthand for `height`; ignored when `height` is set. Numbers become px. */
+  h?: CssLength
+  /** Maps to CSS `border-radius`. Use `'circle'` for a round avatar (50%). */
+  borderRadius?: string
   // Optional class name to pass in and override styles with
   className?: string
   // Whether to disable the shimmer animation
   noShimmer?: boolean
 }
 
-const Skeleton = ({ width, height, className, noShimmer }: SkeletonProps) => {
+const Skeleton = ({
+  width,
+  height,
+  w,
+  h,
+  borderRadius,
+  className,
+  noShimmer
+}: SkeletonProps) => {
+  const resolvedWidth = width ?? toCssSize(w)
+  const resolvedHeight = height ?? toCssSize(h)
+  const resolvedBorderRadius = borderRadius === 'circle' ? '50%' : borderRadius
+
   return (
     <div
       className={cn(styles.skeleton, className, {
         [styles.noShimmer]: noShimmer
       })}
       aria-busy
       style={{
-        width,
-        height
+        width: resolvedWidth,
+        height: resolvedHeight,
+        ...(resolvedBorderRadius ? { borderRadius: resolvedBorderRadius } : {})
       }}
     />
   )