From 481f33b5263d7c459ff506b3da9259e61cb1a3c4 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Wed, 20 Dec 2023 17:45:59 +0100
Subject: [PATCH] 5933 my certificates (#1114)

* feat(marketplace): Enable typed custom_data access from Logto

* feat(marketplace): Use walletAddress for email-users as well
---
 .../src/components/CertificateTabContent.vue  | 116 ++++++++++--------
 .../marketplace/src/components/NavBar.vue     |   8 +-
 frontend/marketplace/src/main.ts              |   2 +-
 frontend/marketplace/src/stores/auth.ts       |  65 +++++++---
 frontend/marketplace/src/utils/notifyer.ts    |   6 +-
 .../marketplace/src/utils/wallet-utils.ts     |   6 +
 6 files changed, 123 insertions(+), 80 deletions(-)

diff --git a/frontend/marketplace/src/components/CertificateTabContent.vue b/frontend/marketplace/src/components/CertificateTabContent.vue
index 7636fcc75..0960cf7e2 100644
--- a/frontend/marketplace/src/components/CertificateTabContent.vue
+++ b/frontend/marketplace/src/components/CertificateTabContent.vue
@@ -1,90 +1,104 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import CustomSearchBar from "@/components/CustomSearchBar.vue";
+import { onMounted, ref, computed, watch, onUnmounted } from "vue";
 import CustomPagination from "@/components/CustomPagination.vue";
 import CertificateCard from "@/components/CertificateCard.vue";
-import { CHAIN_ID } from "@/config/config";
-import { toast } from "vue3-toastify";
+import { useNotifyer } from "@/utils/notifyer";
 import { useQuery } from "@vue/apollo-composable";
 import CustomSpinner from "@/components/CustomSpinner.vue";
 import gql from "graphql-tag";
 import CustomAlert from "@/components/CustomAlert.vue";
-import { walletConnected, getWallet } from "@/utils/wallet-utils";
-import { useRouter } from "@/router";
+import { useAuth } from "@/stores/auth";
+import { useWallet } from "@/stores/wallet";
 
 const pageNumber = ref(1);
 const itemsPerPage = ref(5);
 const searchTerm = ref("");
 const data = ref();
 const showSpinner = ref(true);
-const router = useRouter();
-
+const { notifyer } = useNotifyer();
+const auth = useAuth();
+const wallet = useWallet();
 const viewCertificate = (certificateId: string) => {
   const url = `${window.location.origin}/certificate/${certificateId}`;
-  window.open(url, '_blank');
+  window.open(url, "_blank");
 };
 
-
+const hasEmailAddressOrWalletConnectedAddress = computed(() => {
+  // We need to use address values instead of the booleans because they are set after the "isAuthenticated" booleans.
+  // The auth logic should be moved out of the NavBar
+  return !!auth.walletAddress.value || !!wallet.address.value;
+});
 
 const handlePageChange = () => {
   getCertificatesData();
 };
-const handleSearch = () => {
-  pageNumber.value = 1;
-  getCertificatesData();
-};
 
 const getCertificatesData = async () => {
+  let walletAddress: string | undefined;
+  if (auth.walletAddress.value) {
+    walletAddress = auth.walletAddress.value;
+  } else if (wallet.address.value) {
+    walletAddress = wallet.address.value;
+  }
+  if (!walletAddress) {
+    notifyer.error("Please login to see your certificates");
+    return;
+  }
+
   try {
-    const wallet = getWallet();
-    const account = await wallet.getKey(CHAIN_ID);
-    const walletAddress = account.bech32Address;
-    if (walletAddress) {
-      const query = `query {
-    creditOffsetCertificates(
-    first:${itemsPerPage.value},offset:${
+    const query = `query {
+      creditOffsetCertificates(
+      first:${itemsPerPage.value},offset:${
         (pageNumber.value - 1) * itemsPerPage.value
       }
-    filter: {
-      wallet: {
-        address: { equalTo: "${walletAddress}" }
+      filter: {
+        wallet: {
+          address: { equalTo: "${walletAddress}" }
+        }
+          ${searchTerm.value && `denom: { equalTo: "${searchTerm.value}" }`}
+        }
+      ) {
+        totalCount
+        nodes {
+          amount
+          denom
+          id
+        }
       }
-      ${searchTerm.value && `denom: { equalTo: "${searchTerm.value}" }`}
-    }
-  ) {
-    totalCount
-    nodes {
-      amount
-      denom
-      id
-    }
-  }
-  }
-`;
-      loadQueryData(query);
     }
+    `;
+    loadQueryData(query);
   } catch (error) {
-    toast.error("Please connect to wallet");
+    notifyer.error("Error fetching your certificates, error has been logged");
+    throw new Error("Error fetching certificates: " + error);
   }
 };
 
 const loadQueryData = (query: string) => {
   showSpinner.value = true;
-  const { result, loading, error } = useQuery(
-    gql`
-      ${query}
-    `
-  );
+  const { result, loading, error } = useQuery(gql`
+    ${query}
+  `);
   data.value = { result, loading, error };
   showSpinner.value = false;
 };
 
+let stopWatch: () => void;
+
 onMounted(() => {
-  if (walletConnected()) {
-    getCertificatesData();
-  } else {
-    toast.error("Please connect to wallet");
-  }
+  stopWatch = watch(
+    hasEmailAddressOrWalletConnectedAddress,
+    () => {
+      if (hasEmailAddressOrWalletConnectedAddress.value) {
+        getCertificatesData();
+      }
+    },
+    { immediate: true },
+  );
+});
+
+onUnmounted(() => {
+  stopWatch();
 });
 </script>
 <template>
@@ -103,10 +117,14 @@ onMounted(() => {
         v-for="certificate in data?.result?.creditOffsetCertificates?.nodes"
         :key="certificate.id"
       >
-        <CertificateCard :card-data="certificate" @viewCertificate="viewCertificate" />
+        <CertificateCard
+          :card-data="certificate"
+          @viewCertificate="viewCertificate"
+        />
       </div>
       <div class="flex justify-center md:justify-end my-10">
         <CustomPagination
+          v-if="data?.result?.creditOffsetCertificates?.totalCount > 0"
           :total="data?.result?.creditOffsetCertificates?.totalCount"
           :item-per-page="itemsPerPage"
           v-model:current-page="pageNumber"
diff --git a/frontend/marketplace/src/components/NavBar.vue b/frontend/marketplace/src/components/NavBar.vue
index dd24dc3ed..2f1afb25c 100644
--- a/frontend/marketplace/src/components/NavBar.vue
+++ b/frontend/marketplace/src/components/NavBar.vue
@@ -4,7 +4,7 @@ import { onMounted, ref } from "vue";
 import { toast } from "vue3-toastify";
 import { useRoute } from "@/router";
 import SellectWalletModal from "@/components/SellectWalletModal.vue";
-import { getWalletFromType } from "@/utils/wallet-utils";
+import { getWalletFromType, disconnectWallet } from "@/utils/wallet-utils";
 import { useAuth } from "@/stores/auth";
 import { useWallet } from "@/stores/wallet";
 
@@ -66,12 +66,6 @@ const handleSelectWallet = async (walletType: string) => {
   closeSelectWalletModal();
 };
 
-const disconnectWallet = () => {
-  localStorage.removeItem("address");
-  localStorage.removeItem("wallet");
-  location.reload();
-};
-
 const copyAddress = async () => {
   await navigator.clipboard.writeText(address.value ?? "");
   toast.success("Address copied to clipboard");
diff --git a/frontend/marketplace/src/main.ts b/frontend/marketplace/src/main.ts
index 0169ef2e5..f472bd507 100644
--- a/frontend/marketplace/src/main.ts
+++ b/frontend/marketplace/src/main.ts
@@ -37,7 +37,7 @@ const app = createApp(App);
 const logtoConfig: LogtoConfig = {
   endpoint: LOGTO_ENDPOINT,
   appId: LOGTO_APP_ID,
-  scopes: ["email"],
+  scopes: ["email", "custom_data"],
   resources: [PC_BACKEND_ENDPOINT],
 };
 
diff --git a/frontend/marketplace/src/stores/auth.ts b/frontend/marketplace/src/stores/auth.ts
index bd504331d..81549a46a 100644
--- a/frontend/marketplace/src/stores/auth.ts
+++ b/frontend/marketplace/src/stores/auth.ts
@@ -1,38 +1,62 @@
-import { ref, watch, type Ref } from "vue";
+import { type Ref, ref, watch, computed } from "vue";
 import { WEB_ENDPOINT } from "@/config/config";
-import { useLogto, type UserInfoResponse } from "@logto/vue";
+import { type UserInfoResponse, useLogto } from "@logto/vue";
 import { useRedirectAfterLoginUrl } from "@/utils/redirectAfterLoginUrl";
 
+interface AuthCustomData {
+  walletAddress: string;
+}
+
+interface CustomUserInfoResponse extends UserInfoResponse {
+  custom_data: AuthCustomData;
+}
+
+type Logto = ReturnType<typeof useLogto>;
+interface CustomLogto extends Logto {
+  fetchUserInfo: () => Promise<CustomUserInfoResponse | undefined>;
+}
+
 export interface Auth {
-  user: Ref<UserInfoResponse | undefined>;
+  user: Ref<CustomUserInfoResponse | undefined>;
   error: Ref<Error | undefined>;
   isAuthenticated: Ref<boolean>;
   handleSignIn: () => void;
   handleSignOut: () => void;
-  fetchUser: () => Promise<UserInfoResponse | undefined>;
+  fetchUser: () => Promise<CustomUserInfoResponse | undefined>;
   getAccessToken: (resource?: string) => Promise<string | undefined>;
+  walletAddress: Ref<string | undefined>;
 }
 
 export const useAuth = (): Auth => {
   const {
-    signIn: logToSignIn,
-    signOut: logToSignOut,
-    isAuthenticated: logToIsAuthenticated,
-    fetchUserInfo: logToFetchUserInfo,
-    error: logToError,
-    getAccessToken: logToGetAccessToken,
-  } = useLogto();
+    signIn: logtoSignIn,
+    signOut: logtoSignOut,
+    isAuthenticated: logtoIsAuthenticated,
+    fetchUserInfo: logtoFetchUserInfo,
+    error: logtoError,
+    getAccessToken: logtoGetAccessToken,
+  } = useLogto() as CustomLogto;
 
-  const error = ref<Ref<Error | undefined>>(logToError);
-  const user = ref<UserInfoResponse | undefined>(undefined);
-  const isAuthenticated = ref(logToIsAuthenticated);
-  const getAccessToken = logToGetAccessToken;
+  const error = ref<Ref<Error | undefined>>(logtoError);
+  const user = ref<CustomUserInfoResponse | undefined>(undefined);
+  const isAuthenticated = ref(logtoIsAuthenticated);
+  const getAccessToken = logtoGetAccessToken;
+  const walletAddress = computed<string | undefined>(() => {
+    if (user.value) {
+      try {
+        return user.value.custom_data.walletAddress;
+      } catch (error) {
+        throw new Error("User does not have wallet address");
+      }
+    }
+    return undefined;
+  });
 
   watch(
     isAuthenticated,
     async (newValue) => {
       if (newValue) {
-        user.value = await logToFetchUserInfo();
+        user.value = await logtoFetchUserInfo();
       } else {
         user.value = undefined;
       }
@@ -42,15 +66,15 @@ export const useAuth = (): Auth => {
 
   const handleSignIn = () => {
     useRedirectAfterLoginUrl().set();
-    logToSignIn(`${WEB_ENDPOINT}/callback`);
+    logtoSignIn(`${WEB_ENDPOINT}/callback`);
   };
 
   const handleSignOut = () => {
-    logToSignOut(WEB_ENDPOINT);
+    logtoSignOut(WEB_ENDPOINT);
   };
 
-  const fetchUser = async (): Promise<UserInfoResponse | undefined> => {
-    return await logToFetchUserInfo();
+  const fetchUser = async (): Promise<CustomUserInfoResponse | undefined> => {
+    return await logtoFetchUserInfo();
   };
 
   return {
@@ -61,5 +85,6 @@ export const useAuth = (): Auth => {
     handleSignOut,
     fetchUser,
     getAccessToken,
+    walletAddress,
   };
 };
diff --git a/frontend/marketplace/src/utils/notifyer.ts b/frontend/marketplace/src/utils/notifyer.ts
index 19745982b..26e4193a1 100644
--- a/frontend/marketplace/src/utils/notifyer.ts
+++ b/frontend/marketplace/src/utils/notifyer.ts
@@ -1,9 +1,9 @@
-import { toast } from 'vue3-toastify';
+import { toast } from "vue3-toastify";
 
 export const useNotifyer = () => {
   const notifyer = toast;
 
   return {
     notifyer,
-  }
-}
+  };
+};
diff --git a/frontend/marketplace/src/utils/wallet-utils.ts b/frontend/marketplace/src/utils/wallet-utils.ts
index 26cda1db3..33a4bb869 100644
--- a/frontend/marketplace/src/utils/wallet-utils.ts
+++ b/frontend/marketplace/src/utils/wallet-utils.ts
@@ -56,3 +56,9 @@ export async function formatDenom(denom: string): Promise<string> {
   denom = denom.slice(1);
   return denom.toUpperCase();
 }
+
+export const disconnectWallet = () => {
+  localStorage.removeItem("address");
+  localStorage.removeItem("wallet");
+  location.reload();
+};