List subscribers on subscription setup page

src/api/subscriptions.ts

@@ -7,7 +7,7 @@ import { ethereumAddressMatch, EthereumSignature } from "@/utils/ethereum"
 import { floatToBigNumber, roundBigNumber } from "@/utils/numbers"
 import { http } from "./common"
 import { Contracts, getContract } from "./contracts"
-import { User } from "./users"
+import { Profile, User } from "./users"
 
 const SECONDS_IN_DAY = 3600 * 24
 const SECONDS_IN_MONTH = SECONDS_IN_DAY * 30
@@ -227,6 +227,22 @@ export async function cancelSubscription(
   return transaction
 }
 
+export interface Subscription {
+  id: number,
+  sender: Profile,
+  sender_address: string,
+}
+
+export async function getSubscribers(
+  authToken: string,
+  accountId: string,
+): Promise<Subscription[]> {
+  const url = `${BACKEND_URL}/api/v1/accounts/${accountId}/subscribers`
+  const response = await http(url, { authToken })
+  const data = await response.json()
+  return data
+}
+
 export async function withdrawReceived(
   contractAddress: string,
   signer: Signer,

src/components/ProfileListItem.vue

@@ -1,11 +1,11 @@
 <template>
-  <router-link class="profile" :to="{ name: 'profile', params: { profileId: profile.id }}">
+  <div class="profile">
     <avatar :profile="profile"></avatar>
     <div class="name">
       <div class="display-name">{{ profile.display_name || profile.username }}</div>
       <div class="actor-address">@{{ getActorAddress(profile) }}</div>
     </div>
-  </router-link>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -32,19 +32,29 @@ defineProps<{
   display: flex;
   flex-direction: row;
   padding: $block-inner-padding;
+  text-align: left;
 
   .avatar {
     height: $avatar-size;
     margin-right: $block-inner-padding;
+    min-width: $avatar-size;
     width: $avatar-size;
   }
 
+  .name {
+    min-width: 0;
+  }
+
   .display-name {
     color: $text-color;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .actor-address {
     color: $secondary-text-color;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 </style>

src/components/SubscriptionSetup.vue

@@ -34,9 +34,19 @@
       </button>
     </form>
     <form class="withdraw" v-if="subscriptionConfig !== null">
+      <h2>Subscribers</h2>
+      <div
+        v-for="subscription in subscribers"
+        class="subscriber"
+        :key="subscription.id"
+        @click="onSubscriberSelected(subscription)"
+      >
+        <profile-list-item :profile="subscription.sender"></profile-list-item>
+      </div>
       <input v-model="subscriberAddress" placeholder="Subscriber address">
       <button
         class="btn"
+        :disabled="!subscriberAddress"
         @click.prevent="onCheckSubsciptionState()"
       >
         Check
@@ -63,17 +73,20 @@ import { Profile, ProfileWrapper } from "@/api/users"
 import {
   configureSubscriptions,
   getPricePerSec,
+  getSubscribers,
   getSubscriptionAuthorization,
   getSubscriptionConfig,
   getSubscriptionState,
   getSubscriptionToken,
   onSubscriptionsEnabled,
   withdrawReceived,
+  Subscription,
   SubscriptionConfig,
   SubscriptionState,
   SubscriptionToken,
 } from "@/api/subscriptions"
 import Loader from "@/components/Loader.vue"
+import ProfileListItem from "@/components/ProfileListItem.vue"
 import { useWallet } from "@/composables/wallet"
 import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
@@ -96,6 +109,7 @@ let subscriptionToken = $ref<SubscriptionToken | null>(null)
 let subscriptionsEnabled = $ref<boolean | null>(null)
 let subscriptionConfig = $ref<SubscriptionConfig | null>(null)
 let subscriptionState = $ref<SubscriptionState | null>(null)
+let subscribers = $ref<Subscription[]>([])
 let subscriberAddress = $ref<string | null>(null)
 
 onMounted(() => {
@@ -161,6 +175,10 @@ async function checkSubscription() {
     subscriptionsEnabled = true
     // Ensure server is aware of subscription configuration
     await onSubscriptionsEnabled(ensureAuthToken())
+    subscribers = await getSubscribers(
+      ensureAuthToken(),
+      profile.id,
+    )
   } else {
     subscriptionsEnabled = false
     subscriptionToken = await getSubscriptionToken(
@@ -179,7 +197,6 @@ function canEnableSubscriptions(): boolean {
   )
 }
 
-// enableSubscriptions
 async function onEnableSubscriptions() {
   if (
     profileEthereumAddress === null ||
@@ -224,6 +241,11 @@ async function onEnableSubscriptions() {
   isLoading = false
 }
 
+function onSubscriberSelected(subscription: Subscription) {
+  subscriberAddress = subscription.sender_address
+  subscriptionState = null
+}
+
 async function onCheckSubsciptionState() {
   if (
     !profileEthereumAddress ||
@@ -321,6 +343,11 @@ async function onWithdrawReceived() {
   flex-direction: column;
   gap: $block-inner-padding;
 
+  h2 {
+    font-size: 20px;
+  }
+
+  .subscriber,
   input {
     width: 400px;
   }

src/views/NotificationList.vue

@@ -162,6 +162,10 @@ async function loadNextPage() {
 
   .floating-avatar {
     @include floating-avatar;
+
+    @media screen and (min-width: $screen-breakpoint-medium + 1) {
+      margin-right: -$block-inner-padding / 2;
+    }
   }
 
   .display-name {

src/views/Profile.vue

@@ -174,11 +174,13 @@
         @load-next-page="loadNextPage"
       ></post-list>
       <template v-if="tabName === 'followers' || tabName === 'following'">
-        <profile-list-item
+        <router-link
           v-for="profile in followList"
-          :profile="profile"
           :key="profile.id"
-        ></profile-list-item>
+          :to="{ name: 'profile', params: { profileId: profile.id } }"
+        >
+          <profile-list-item :profile="profile"></profile-list-item>
+        </router-link>
         <button
           v-if="followListNextPageUrl"
           class="btn secondary next-btn"

src/views/SearchResultList.vue

@@ -9,9 +9,14 @@
         <template v-else>No results</template>
       </div>
       <div v-if="!isLoading" class="search-result-list">
-        <div class="search-result" v-for="profile in profiles" :key="profile.id">
+        <router-link
+          class="search-result"
+          v-for="profile in profiles"
+          :key="profile.id"
+          :to="{ name: 'profile', params: { profileId: profile.id } }"
+        >
           <profile-list-item :profile="profile"></profile-list-item>
-        </div>
+        </router-link>
         <post
           v-for="post in posts"
           :post="post"
@@ -93,6 +98,7 @@ onMounted(async () => {
 
 .search-result {
   border-bottom: 1px solid $separator-color;
+  display: block;
 
   &:last-child {
     border-bottom: none;