feat(marketplace): Use walletAddress for email-users as well

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"

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");

frontend/marketplace/src/stores/auth.ts

@@ -1,6 +1,6 @@
-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 {
@@ -24,6 +24,7 @@ export interface Auth {
   handleSignOut: () => void;
   fetchUser: () => Promise<CustomUserInfoResponse | undefined>;
   getAccessToken: (resource?: string) => Promise<string | undefined>;
+  walletAddress: Ref<string | undefined>;
 }
 
 export const useAuth = (): Auth => {
@@ -40,6 +41,16 @@ export const useAuth = (): Auth => {
   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,
@@ -74,5 +85,6 @@ export const useAuth = (): Auth => {
     handleSignOut,
     fetchUser,
     getAccessToken,
+    walletAddress,
   };
 };

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,
-  }
-}
+  };
+};

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();
+};