WIP: kyc style

threefoldtech · Oct 22, 2024 · f03cf67 · f03cf67
1 parent 6ea1b4b
commit f03cf67
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/packages/playground/src/components/KycVerifier.vue b/packages/playground/src/components/KycVerifier.vue
@@ -6,7 +6,7 @@
     width="100%"
     class="w-100 h-100 d-flex justify-center align-center"
   >
-    <v-card v-if="loading" class="d-flex justify-center align-center h-screen">
+    <v-card v-if="loading || !token" class="d-flex justify-center align-center h-screen">
       <div class="d-flex my-6 align-center justify-center">
         <v-progress-circular indeterminate />
       </div>
@@ -15,7 +15,6 @@
 
     <iframe
       id="iframe"
-      v-if="token"
       allowfullscreen
       style="width: 100%; height: 100%; border: none"
       :src="`https://ui.idenfy.com/?authToken=${token}`"
@@ -24,10 +23,10 @@
   </v-dialog>
 </template>
 <script lang="ts">
-import { KYC } from "@threefold/grid_client";
+import { KycStatus } from "@threefold/grid_client";
 import { onMounted, ref } from "vue";
 
-import { useGrid } from "@/stores";
+import { useKYC } from "@/stores/kyc";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";
 
 export default {
@@ -40,7 +39,7 @@ export default {
   },
   emits: ["update:moduleValue"],
   setup(props, { emit }) {
-    const gridStore = useGrid();
+    const kyc = useKYC();
     const token = ref("");
     const loading = ref(false);
     const handleUpdateDialog = (event: boolean) => {
@@ -49,13 +48,15 @@ export default {
 
     const getToken = async () => {
       loading.value = true;
-      const KycVerifier = new KYC(
-        "kyc1.gent01.dev.grid.tf",
-        gridStore.client._mnemonic,
-        gridStore.client.clientOptions.keypairType,
-      );
+      await kyc.updateStatus();
+      if (kyc.status == KycStatus.verified) {
+        createCustomToast("Already verified", ToastType.info);
+        handleUpdateDialog(false);
+        return;
+      }
       try {
-        token.value = await KycVerifier.getToken();
+        if (!kyc.client) throw new Error("KYC client is not initialized");
+        token.value = await kyc.client.getToken();
       } catch (e) {
         handleUpdateDialog(false);
         const message = "Failed to get authentication token";
@@ -70,9 +71,10 @@ export default {
       handleUpdateDialog(false); // close the dialog
       if (!event.data.status) console.error("Can't check the verification status", event.data);
       const status = (event.data.status as string).toLowerCase();
-      if (status === "approved")
+      if (status === "approved") {
         createCustomToast("Verification completed, Changes may take a few minutes to reflect", ToastType.success);
-      else if (status === "failed") createCustomToast("Verification failed, Please try again", ToastType.danger);
+        kyc.updateStatus();
+      } else if (status === "failed") createCustomToast("Verification failed, Please try again", ToastType.danger);
       else if (status === "unverified") createCustomToast("Verification canceled", ToastType.info);
     };
     window.addEventListener("message", handleReceiveMessage, false);

diff --git a/packages/playground/src/components/view_layout.vue b/packages/playground/src/components/view_layout.vue
@@ -30,8 +30,14 @@
         </VAlert>
       </template>
       <template v-if="kyc !== KycStatus.verified">
-        <VAlert variant="tonal" type="error" class="mb-4">
-          {{ title }} requires a KYC verification. <v-chip color="error">verify now</v-chip>
+        <VAlert variant="tonal" type="error">
+          <template #prepend>
+            <v-icon icon="mdi-shield-remove"></v-icon>
+          </template>
+          <div class="d-flex justify-space-between align-baseline">
+            <div>{{ title }} requires a KYC verification.</div>
+            <v-btn text="Verify now" size="small" color="error" @click="kycDialog = true" />
+          </div>
         </VAlert>
       </template>
     </template>
@@ -41,6 +47,7 @@
       <slot name="list" />
     </div>
   </div>
+  <KycVerifier v-if="kycDialog" :moduleValue="kycDialog" @update:moduleValue="kycDialog = $event" />
 </template>
 
 <script lang="ts">
@@ -53,17 +60,18 @@ import { useProfileManager } from "@/stores";
 import { useKYC } from "@/stores/kyc";
 
 import AppInfo from "./app_info.vue";
+import KycVerifier from "./KycVerifier.vue";
 
 export default {
   name: "ViewLayout",
-  components: { AppInfo },
+  components: { AppInfo, KycVerifier },
   setup() {
     const route = useRoute();
     const profileManager = useProfileManager();
     const kyc = useKYC();
     const viewLayoutContainer = ref<HTMLElement>();
     const tick = ref(0);
-
+    const kycDialog = ref(false);
     function reRender(e: Event) {
       e.stopPropagation();
       tick.value++;
@@ -89,6 +97,7 @@ export default {
       viewLayoutContainer,
       DashboardRoutes,
       KycStatus,
+      kycDialog,
     };
   },
 };

diff --git a/packages/playground/src/stores/kyc.ts b/packages/playground/src/stores/kyc.ts
@@ -27,9 +27,9 @@ const useKYC = defineStore("KYC-client", {
         this.status = null;
         this.client = null;
       }
-      await this._setStatus();
+      await this.updateStatus();
     },
-    async _setStatus() {
+    async updateStatus() {
       if (this.client) {
         try {
           this.status = await this.client.status();