fix: certificate card

src/assets/styles/_components.scss

@@ -1,6 +1,8 @@
+@import './components/common';
 @import './components/footer';
 @import './components/header';
+@import './components/policy';
 @import './components/sidebar';
 @import './components/swap';
 @import './components/transfer';
-@import './components/tokenSelect';
+@import './components/tokenSelect';

src/assets/styles/components/_common.scss

@@ -0,0 +1,14 @@
+.main-block {
+  padding: 54px 0 50px;
+
+  @media (max-width: $breakpoint-xs) {
+    padding: 24px 0 24px;
+  }
+
+  border-bottom: 1px solid #aabec8;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 500;
+}

src/assets/styles/components/_header.scss

@@ -71,54 +71,6 @@
 }
 
 .app-header {
-  .certificate {
-    display: flex;
-    align-items: flex-end;
-    gap: 10px;
-
-    &-text {
-      font-size: 18px;
-    }
-
-    &-loading {
-      position: relative;
-      width: 27px;
-      height: 27px;
-
-      .q-inner-loading {
-        background: none;
-      }
-    }
-
-    &-status {
-      font-size: 16px;
-
-      &__proved {
-        position: relative;
-        display: flex;
-        align-items: flex-end;
-        gap: 8px;
-
-        a {
-          width: 27px;
-          height: 27px;
-        }
-
-        svg {
-          position: absolute;
-          bottom: -10px;
-          width: 22px;
-          height: 38px;
-
-          path {
-            fill: $yellow;
-          }
-        }
-
-      }
-    }
-  }
-
   .notification {
     margin-left: auto;
     margin-right: 20px;

src/assets/styles/components/_policy.scss

@@ -0,0 +1,25 @@
+.policy-card {
+  .certificate {
+    display: flex;
+    align-items: flex-end;
+    &-status {
+      &__proved {
+        display: flex;
+        align-items: center;
+        a {
+          height: 64px;
+          display: inline-block;
+          text-align: center;
+          svg {
+            height: 64px;
+            width: 64px;
+
+            path {
+              fill: $yellow;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/assets/styles/components/_swap.scss

@@ -38,12 +38,8 @@ $swap-input-focused-color: rgba($secondary, 0.7) !important;
   overflow: hidden;
   border: 1px solid $swap-card-border-color;
   max-width: 460px;
+  width: 100%;
   box-shadow: $swap-shadow;
-  margin: 80px auto 66px;
-
-  @media (max-width: $breakpoint-xs) {
-    margin: 40px 0 56px;
-  }
 
   &__header {
     height: 48px;
@@ -296,23 +292,6 @@ $swap-input-focused-color: rgba($secondary, 0.7) !important;
     margin: 0 auto;
   }
 
-  &::before {
-    content: "";
-    height: 1px;
-    position: absolute;
-    top: -5px;
-    width: 100%;
-    background-color: #aabec8;
-
-    @media (max-width: $breakpoint-md) {
-      width: 98%;
-    }
-
-    @media (max-width: $breakpoint-xs) {
-      width: 100%;
-    }
-  }
-
   &__title {
     padding: 20px 0;
     font-weight: 600;

src/components/AppHeader.vue

@@ -1,9 +1,9 @@
 <template>
   <header class="app-header">
-    <header-certificate />
-    <header-notifications />
+    <!-- <header-certificate /> -->
+    <!-- <header-notifications /> -->
 
-    <div class="app-header__buttons">
+    <div class="app-header__buttons q-ml-auto">
       <cluster-selector />
       <connect-wallet />
     </div>

src/components/Header/HeaderCertificate.vue

@@ -50,7 +50,7 @@ const expiredAt = computed(() => {
         <a :href="ALBUS_APP_URL" target="_blank">
           <i-app-certificate />
           <q-tooltip anchor="top middle" self="center middle">
-            Your certificate has been prove. Created: {{ createdAt }}. Expired: <span v-html="expiredAt" />
+            Your certificate has been proved. Created: {{ createdAt }}. Expired: <span v-html="expiredAt" />
           </q-tooltip>
         </a>
       </div>

src/components/PolicyCard.vue

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import { useWallet } from 'solana-wallets-vue'
+import { formatDate } from '@/utils'
+import { ALBUS_APP_URL } from '@/config'
+
+const connectionStore = useConnectionStore()
+const cluster = computed(() => connectionStore.cluster)
+
+const userStore = useUserStore()
+const requiredPolicyData = computed(() => userStore.requiredPolicyData)
+const serviceLoading = computed(() => userStore.serviceLoading)
+
+const { connected } = useWallet()
+// const isProved = computed(() => !!userStore.certificate?.data.proof)
+const certificate = computed(() => userStore.certificate)
+const certificateValid = computed(() => userStore.certificateValid)
+const certificateLoading = computed(() => userStore.state.certificateLoading)
+
+const createdAt = computed(() => {
+  const date = new Date(Number(certificate.value?.data.createdAt) * 1000)
+  return formatDate(date)
+})
+
+const expiredAt = computed(() => {
+  const date = new Date(Number(certificate.value?.data.expiredAt) * 1000)
+  return Number(certificate.value?.data.expiredAt) === 0 ? '&infin;' : formatDate(date)
+})
+</script>
+
+<template>
+  <q-card class="swap-card policy-card">
+    <q-card-section class="swap-card__header">
+      Certificate
+    </q-card-section>
+    <div>
+      <q-inner-loading :showing="serviceLoading" label-class="text-teal" label-style="font-size: 1.1em" />
+      <q-card-section v-if="requiredPolicyData" class="swap-card__body swap-field__label">
+        <div class="title">
+          Required certificate
+        </div>
+        <div>Name: {{ requiredPolicyData.name }}</div>
+        <div>Rules:</div>
+        <div class="q-ml-xs">
+          <div v-for="(r, i) in requiredPolicyData.rules" :key="i">
+            - {{ r.key }}: {{ r.label }}
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-section v-if="connected" class="swap-card__body swap-field__label">
+        <q-inner-loading :showing="certificateLoading" label-class="text-teal" label-style="font-size: 1.1em" />
+        <div class="title q-mb-md">
+          Your certificate
+        </div>
+
+        <div v-if="!certificateValid" class="certificate-status__undefined">
+          <q-btn
+            :label="certificate ? 'prove' : 'create'"
+            unelevated
+            :color="certificate ? 'teal-14' : 'yellow'"
+            text-color="black"
+            :href="`${ALBUS_APP_URL}/wizard/${userStore.requiredPolicy}/${cluster}`"
+            target="_blank"
+            type="a"
+          />
+          <q-btn
+            :loading="certificateLoading"
+            class="q-ml-md"
+            label="reload"
+            unelevated
+            color="yellow"
+            text-color="black"
+            @click="userStore.getCertificates"
+          />
+        </div>
+        <div v-else class="certificate-status__proved">
+          <a :href="`${ALBUS_APP_URL}/holder`" target="_blank">
+            <i-app-certificate />
+          </a>
+          <div class="q-ml-md">
+            <div>Created: {{ createdAt }}</div>
+            <div>Expired: <span v-html="expiredAt" /></div>
+          </div>
+        </div>
+      </q-card-section>
+    </div>
+  </q-card>
+</template>

src/pages/stake.vue

@@ -1,4 +1,11 @@
 <template>
-  <stake-card />
+  <div class="main-block row">
+    <div class="row justify-center col-xs-12 col-md-6 q-px-sm q-py-md">
+      <policy-card />
+    </div>
+    <div class="row justify-center col-xs-12 col-md-6 q-px-sm q-py-md">
+      <stake-card />
+    </div>
+  </div>
   <stake-content />
 </template>

src/pages/swap.vue

@@ -1,4 +1,11 @@
 <template>
-  <swap-card />
+  <div class="main-block row">
+    <div class="row justify-center col-xs-12 col-md-6 q-px-sm q-py-md">
+      <policy-card />
+    </div>
+    <div class="row justify-center col-xs-12 col-md-6 q-px-sm q-py-md">
+      <swap-card />
+    </div>
+  </div>
   <swap-content />
 </template>

src/pages/transfer.vue

@@ -1,4 +1,11 @@
 <template>
-  <transfer-card />
+  <div class="main-block row">
+    <div class="row justify-center col-xs-12 col-md-6 q-px-sm q-py-md">
+      <policy-card />
+    </div>
+    <div class="row justify-center col-xs-12 col-md-6 q-px-sm q-py-md">
+      <transfer-card />
+    </div>
+  </div>
   <transfer-content />
 </template>

src/stores/transfer.ts

@@ -120,6 +120,7 @@ export const useTransferStore = defineStore('transfer', () => {
             onClick: () => false,
           }],
         })
+        reset()
         await getUserTokens()
       } else {
         notify({

src/stores/user.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { useWallet } from 'solana-wallets-vue'
 import type { PublicKey, PublicKeyInitData } from '@solana/web3.js'
 import { lowerCase } from 'lodash-es'
+import type { Policy, ServiceProvider } from '@mfactory-lab/albus-sdk'
 import { AlbusClient, ProofRequestStatus } from '@mfactory-lab/albus-sdk'
 import { getSolanaBalance, getTokensByOwner } from '@/utils'
 import { APP_CONFIG } from '@/config'
@@ -14,12 +15,21 @@ export enum IProofRequestStatus {
   Empty,
 }
 
+interface PolicyItem {
+  pubkey: PublicKey
+  data: Policy | null
+}
+
 export const useUserStore = defineStore('user', () => {
   const connectionStore = useConnectionStore()
   const wallet = useWallet()
   const { publicKey } = wallet
   const route = useRoute()
 
+  const client = computed(() => AlbusClient.factory(connectionStore.connection))
+  const { tokens } = useToken()
+
+  const serviceLoading = ref(false)
   const policySpec = ref('')
   // @ts-expect-error not all of clusters in config
   const appConfig = computed(() => APP_CONFIG[connectionStore.cluster])
@@ -32,16 +42,28 @@ export const useUserStore = defineStore('user', () => {
     }
     return ''
   })
-
-  watch(requiredPolicy, async () => {
-    console.log('[debug] required Policy === ', requiredPolicy.value)
-  }, { immediate: true })
+  const servicePolicy = ref<PolicyItem[]>()
+  const serviceData = ref<ServiceProvider>()
   watch(appConfig, async () => {
     console.log('[debug] service Code === ', appConfig.value.serviceCode)
+    if (appConfig.value) {
+      serviceLoading.value = true
+      servicePolicy.value = await client.value?.policy.find({ serviceCode: appConfig.value.serviceCode })
+      serviceData.value = (await client.value?.service.find({ code: appConfig.value.serviceCode }))?.[0].data ?? undefined
+      serviceLoading.value = false
+    } else {
+      servicePolicy.value = undefined
+      serviceData.value = undefined
+    }
+    console.log('[debug] required Policy pk === ', requiredPolicy.value)
+    console.log('[debug] service Policy === ', servicePolicy.value)
   }, { immediate: true })
-
-  const client = computed(() => publicKey.value ? AlbusClient.factory(connectionStore.connection, wallet as any) : null)
-  const { tokens } = useToken()
+  const requiredPolicyData = computed(() => {
+    if (requiredPolicy.value) {
+      return servicePolicy.value?.find(p => p.pubkey.toBase58() === requiredPolicy.value)?.data
+    }
+    return null
+  })
 
   const state = reactive<UserState>({
     tokens: [],
@@ -132,6 +154,8 @@ export const useUserStore = defineStore('user', () => {
   watch([client, publicKey], async () => {
     if (client.value && publicKey.value) {
       getCertificates()
+    } else {
+      state.certificates = []
     }
   }, { immediate: true })
 
@@ -147,8 +171,13 @@ export const useUserStore = defineStore('user', () => {
     state,
     certificate,
     certificateValid,
+
+    serviceLoading,
     requiredPolicy,
+    requiredPolicyData,
     policySpec,
+    serviceData,
+
     tokenBalance,
     getUserTokens,
     getCertificates,

types/components.d.ts

@@ -21,6 +21,7 @@ declare module 'vue' {
     IAppTelegram: typeof import('~icons/app/telegram')['default']
     IAppTwitter: typeof import('~icons/app/twitter')['default']
     MobileMenu: typeof import('./../src/components/Menu/MobileMenu.vue')['default']
+    PolicyCard: typeof import('./../src/components/PolicyCard.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SelectToken: typeof import('./../src/components/SelectToken.vue')['default']