Show number of subscribers on subscription settings page

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Added
+
+- Show number of subscribers on subscription settings page.
+
 ### Fixed
 
 - Show full date and time in post timestamp tooltip.

src/components/SubscriptionSettingsEthereum.vue

@@ -14,11 +14,14 @@
     <div class="info" v-if="subscriptionsEnabled !== null">
       <template v-if="subscriptionConfig && subscriptionOption !== null">
         <span>Subscriptions are enabled</span>
-        <div class="price">
+        <div class="info-item">
           {{ subscriptionConfig.pricePerMonth }}
           {{ subscriptionConfig.tokenSymbol }}
           per month
         </div>
+        <div class="info-item">
+          {{ ensureCurrentUser().subscribers_count }} subscribers
+        </div>
       </template>
       <template v-else>
         Subscriptions are not enabled
@@ -334,7 +337,7 @@ async function onWithdrawReceived() {
   gap: calc($block-inner-padding / 2);
   padding: $block-inner-padding;
 
-  .price {
+  .info-item {
     font-size: 16px;
     font-weight: bold;
   }

src/components/SubscriptionSettingsMonero.vue

@@ -3,9 +3,12 @@
     <div class="info" v-if="subscriptionOptionLoaded">
       <template v-if="subscriptionOption !== null">
         <span>Subscriptions are enabled</span>
-        <div class="price">
+        <div class="info-item">
           {{ getPricePerMonth(subscriptionOption.price) }} XMR per month
         </div>
+        <div class="info-item">
+          {{ ensureCurrentUser().subscribers_count }} subscribers
+        </div>
       </template>
       <template v-else>
         Subscriptions are not enabled
@@ -157,7 +160,7 @@ async function saveSubscriptionSettings() {
   gap: calc($block-inner-padding / 2);
   padding: $block-inner-padding;
 
-  .price {
+  .info-item {
     font-size: 16px;
     font-weight: bold;
   }