feat(subscriptions): Basic frontend working with Hold subscriptions

.env.example

@@ -1,2 +1,5 @@
 # Use the testnet in development
 # ALEPH_API_URL=https://api.twentysix.testnet.network
+
+# APIs
+LTAI_SUBSCRIPTIONS_API_URL=http://localhost:8000

quasar.config.js

@@ -30,7 +30,7 @@ module.exports = configure(function (ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['utils', 'wagmi'],
+    boot: ['axios', 'utils', 'wagmi'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ['app.scss', 'tailwind.css'],

src/apis/subscriptions/services.gen.ts

@@ -1,10 +1,18 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
 import { createClient, createConfig, type Options } from '@hey-api/client-axios';
-import type { SubscribeHoldSubscriptionPostData, SubscribeHoldSubscriptionPostError, SubscribeHoldSubscriptionPostResponse, UnsubscribeHoldSubscriptionDeleteData, UnsubscribeHoldSubscriptionDeleteError, UnsubscribeHoldSubscriptionDeleteResponse, RefreshActiveHoldSubscriptionsHoldRefreshPostError, RefreshActiveHoldSubscriptionsHoldRefreshPostResponse, HoldSubscriptionMessagesHoldMessageGetData, HoldSubscriptionMessagesHoldMessageGetError, HoldSubscriptionMessagesHoldMessageGetResponse, RefreshSubsRefreshPostError, RefreshSubsRefreshPostResponse, GetUserSubscriptionsSubscriptionsGetData, GetUserSubscriptionsSubscriptionsGetError, GetUserSubscriptionsSubscriptionsGetResponse } from './types.gen';
+import type { GetUserSubscriptionsSubscriptionsGetData, GetUserSubscriptionsSubscriptionsGetError, GetUserSubscriptionsSubscriptionsGetResponse, SubscribeHoldSubscriptionPostData, SubscribeHoldSubscriptionPostError, SubscribeHoldSubscriptionPostResponse, UnsubscribeHoldSubscriptionDeleteData, UnsubscribeHoldSubscriptionDeleteError, UnsubscribeHoldSubscriptionDeleteResponse, RefreshActiveHoldSubscriptionsHoldRefreshPostError, RefreshActiveHoldSubscriptionsHoldRefreshPostResponse, HoldSubscriptionMessagesHoldMessageGetData, HoldSubscriptionMessagesHoldMessageGetError, HoldSubscriptionMessagesHoldMessageGetResponse, RefreshSubsRefreshPostError, RefreshSubsRefreshPostResponse } from './types.gen';
 
 export const client = createClient(createConfig());
 
+/**
+ * Get User Subscriptions
+ */
+export const getUserSubscriptionsSubscriptionsGet = <ThrowOnError extends boolean = false>(options: Options<GetUserSubscriptionsSubscriptionsGetData, ThrowOnError>) => { return (options?.client ?? client).get<GetUserSubscriptionsSubscriptionsGetResponse, GetUserSubscriptionsSubscriptionsGetError, ThrowOnError>({
+    ...options,
+    url: '/subscriptions'
+}); };
+
 /**
  * Subscribe
  */
@@ -45,12 +53,4 @@ export const holdSubscriptionMessagesHoldMessageGet = <ThrowOnError extends bool
 export const refreshSubsRefreshPost = <ThrowOnError extends boolean = false>(options?: Options<unknown, ThrowOnError>) => { return (options?.client ?? client).post<RefreshSubsRefreshPostResponse, RefreshSubsRefreshPostError, ThrowOnError>({
     ...options,
     url: '/subs/refresh'
-}); };
-
-/**
- * Get User Subscriptions
- */
-export const getUserSubscriptionsSubscriptionsGet = <ThrowOnError extends boolean = false>(options: Options<GetUserSubscriptionsSubscriptionsGetData, ThrowOnError>) => { return (options?.client ?? client).get<GetUserSubscriptionsSubscriptionsGetResponse, GetUserSubscriptionsSubscriptionsGetError, ThrowOnError>({
-    ...options,
-    url: '/subscriptions'
 }); };

src/apis/subscriptions/types.gen.ts

@@ -79,6 +79,16 @@ export type ValidationError = {
     type: string;
 };
 
+export type GetUserSubscriptionsSubscriptionsGetData = {
+    query: {
+        address: string;
+    };
+};
+
+export type GetUserSubscriptionsSubscriptionsGetResponse = (GetUserSubscriptionsResponse);
+
+export type GetUserSubscriptionsSubscriptionsGetError = (HTTPValidationError);
+
 export type SubscribeHoldSubscriptionPostData = {
     body: HoldPostSubscriptionBody;
 };
@@ -111,14 +121,4 @@ export type HoldSubscriptionMessagesHoldMessageGetError = (HTTPValidationError);
 
 export type RefreshSubsRefreshPostResponse = (SubsPostRefreshSubscriptionsResponse);
 
-export type RefreshSubsRefreshPostError = unknown;
-
-export type GetUserSubscriptionsSubscriptionsGetData = {
-    query: {
-        address: string;
-    };
-};
-
-export type GetUserSubscriptionsSubscriptionsGetResponse = (GetUserSubscriptionsResponse);
-
-export type GetUserSubscriptionsSubscriptionsGetError = (HTTPValidationError);
+export type RefreshSubsRefreshPostError = unknown;

src/boot/axios.ts

@@ -0,0 +1,8 @@
+import { boot } from 'quasar/wrappers';
+import { client } from 'src/apis/subscriptions/services.gen';
+
+export default boot(() => {
+  client.setConfig({
+    baseURL: process.env.LTAI_SUBSCRIPTIONS_API_URL,
+  });
+});

src/pages/Subscriptions.vue

@@ -0,0 +1,42 @@
+<template>
+  <section class="max-sm:tw-mx-4 sm:tw-mx-10 tw-my-5">
+    <q-linear-progress v-if="!subscriptionsStore.isLoaded" indeterminate />
+    <p v-else-if="subscriptionsStore.subscriptions.length === 0">No subscriptions</p>
+    <div v-for="subscription of subscriptionsStore.subscriptions" v-else :key="subscription.id">
+      <p>{{ subscription.type }} {{ subscription.provider }}</p>
+    </div>
+
+    <q-btn
+      class="border-primary-highlight"
+      no-caps
+      rounded
+      text-color="dark-mode-text"
+      unelevated
+      @click="subscriptionsStore.holdSubscribe('standard')"
+    >
+      New standard hold subscription
+    </q-btn>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { useAccount } from '@wagmi/vue';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+import { useSubscriptionStore } from 'stores/subscription';
+
+const $q = useQuasar();
+const router = useRouter();
+const account = useAccount();
+
+const subscriptionsStore = useSubscriptionStore();
+
+onMounted(async () => {
+  if (!account.isConnected.value) {
+    $q.notify({ message: 'Account not connected', color: 'negative' });
+    await router.push({ path: '/' });
+    return;
+  }
+});
+</script>

src/router/routes.ts

@@ -32,6 +32,10 @@ const routes = [
         path: 'persona-management',
         component: () => import('pages/PersonaManagement.vue'),
       },
+      {
+        path: 'subscriptions',
+        component: () => import('pages/Subscriptions.vue'),
+      },
     ],
   },
 

src/stores/account.ts

@@ -6,6 +6,7 @@ import { config } from 'src/config/wagmi';
 import { base } from '@wagmi/vue/chains';
 import { useTokensStore } from 'stores/tokens';
 import { useKnowledgeStore } from 'stores/knowledge';
+import { useSubscriptionStore } from 'stores/subscription';
 
 const LTAI_BASE_ADDRESS = '0xF8B1b47AA748F5C7b5D0e80C726a843913EB573a';
 
@@ -23,12 +24,13 @@ export const useAccountStore = defineStore('account', {
     async onAccountChange() {
       const tokensStore = useTokensStore();
       const knowledgeStore = useKnowledgeStore();
+      const subscriptionsStore = useSubscriptionStore();
 
       this.ltaiBalance = await this.getLTAIBalance();
 
       await this.initAlephStorage();
-      await tokensStore.update();
-      await knowledgeStore.load();
+
+      await Promise.all([tokensStore.update(), knowledgeStore.load(), subscriptionsStore.load()]);
     },
 
     async initAlephStorage() {

src/stores/settings.ts

@@ -61,7 +61,7 @@ export const useSettingsStore = defineStore('settings', {
     },
 
     async persistOnAleph(settings: SettingsPersistedOnAleph) {
-      const account: any = useAccountStore();
+      const account = useAccountStore();
 
       if (account.alephStorage !== null) {
         await account.alephStorage.saveSettings(settings);

src/stores/subscription.ts

@@ -0,0 +1,68 @@
+import { defineStore } from 'pinia';
+import {
+  BaseSubscription,
+  getUserSubscriptionsSubscriptionsGet,
+  holdSubscriptionMessagesHoldMessageGet,
+  subscribeHoldSubscriptionPost,
+  SubscriptionType,
+} from 'src/apis/subscriptions';
+import { getAccount, signMessage } from '@wagmi/core';
+import { config } from 'src/config/wagmi';
+
+type SubscriptionState = {
+  subscriptions: BaseSubscription[];
+  isLoaded: boolean;
+};
+
+export const useSubscriptionStore = defineStore('subscriptions', {
+  state: (): SubscriptionState => ({
+    subscriptions: [],
+    isLoaded: false,
+  }),
+  actions: {
+    async load() {
+      const account = getAccount(config);
+      const address = account.address;
+
+      if (address === undefined) {
+        return;
+      }
+
+      const response = await getUserSubscriptionsSubscriptionsGet({ query: { address } });
+
+      this.subscriptions = response.data?.subscriptions ?? [];
+      this.isLoaded = true;
+    },
+
+    async holdSubscribe(subscriptionType: SubscriptionType) {
+      const account = getAccount(config);
+      const address = account.address;
+
+      if (address === undefined) {
+        return;
+      }
+
+      const messagesResponse = await holdSubscriptionMessagesHoldMessageGet({
+        query: { subscription_type: subscriptionType },
+      });
+
+      if (messagesResponse.data === undefined) {
+        throw new Error(
+          messagesResponse.error.detail?.toString() ?? 'Unable to fetch the message to sign to subscribe',
+        );
+      }
+
+      const messageToSign = messagesResponse.data.subscribe_message;
+      const hash = await signMessage(config, { message: messageToSign });
+
+      const subscriptionResponse = await subscribeHoldSubscriptionPost({
+        body: {
+          signature: hash,
+          type: 'standard',
+          account: { chain: 'base', address },
+        },
+      });
+      // TODO: handle errors and success
+    },
+  },
+});

src/utils/aleph-persistent-storage.ts

@@ -34,7 +34,7 @@ export class AlephPersistentStorage {
     private encryptionPrivateKey: PrivateKey,
   ) {}
 
-  static async signBaseMessage() {
+  static signBaseMessage() {
     return signMessage(config, { message: MESSAGE });
   }