[PLA-2021] track fix (#163)

resources/js/api/transaction.ts

@@ -27,7 +27,7 @@ export class TransactionApi {
                 results: getTransactionsData.results,
                 accounts: getTransactionsData.accounts,
                 after: getTransactionsData.after,
-                first: 20,
+                first: getTransactionsData.first ?? 20,
             },
         };
 

resources/js/components/SideNavbar.vue

@@ -19,7 +19,13 @@
                         :to="item.to"
                         class="text-light-content dark:text-dark-content hover:bg-light-surface-background hover:dark:bg-dark-surface-background hover:text-light-content-selected hover:dark:text-dark-content-selected group flex items-center px-4 py-3 font-medium transition-all"
                     >
-                        <span class="flex-1">{{ item.name }}</span>
+                        <span class="">{{ item.name }}</span>
+                        <span
+                            v-if="item.count && transactionsCount > 0"
+                            class="text-xs font-normal ml-4 rounded-full text-light-content-brand dark:text-dark-content-brand bg-light-surface-brand-alpha p-1 w-6 h-6 flex items-center justify-center animate-fade-in"
+                        >
+                            {{ transactionsCount }}
+                        </span>
                     </RouterLink>
                 </nav>
             </div>
@@ -92,15 +98,24 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useAppStore } from '~/store';
 import EnjinLogo from '~/components/EnjinLogo.vue';
 import CanaryEnjinLogo from '~/components/CanaryEnjinLogo.vue';
+import { TransactionApi } from '~/api/transaction';
+import { DTOTransactionFactory as DTOFactory } from '~/factory/transaction';
 
 const navigations = computed(() => useAppStore().navigations);
 
 const canaryHost = computed(() => useAppStore().config.network === 'canary');
 
+const transactionsCount = ref(0);
+
+const loadTransactions = async () => {
+    const res = await TransactionApi.getTransactions({ first: 500 });
+    transactionsCount.value = DTOFactory.getPendingTransactionsCount(res.data);
+};
+
 const pageTitle = () => {
     if (window.bootstrap?.name) {
         return window.bootstrap.name;
@@ -112,6 +127,10 @@ const pageTitle = () => {
         return 'Platform';
     }
 };
+
+onMounted(() => {
+    loadTransactions();
+});
 </script>
 
 <style lang="scss" scoped>

resources/js/components/pages/Collections.vue

@@ -182,6 +182,7 @@ import { ApiService } from '~/api';
 import TrackCollectionModal from '../TrackCollectionModal.vue';
 import ConfirmModal from '../ConfirmModal.vue';
 import Chip from '../Chip.vue';
+import { useConnectionStore } from '~/store/connection';
 
 const isLoading = ref(true);
 const isPaginationLoading = ref(false);
@@ -211,6 +212,7 @@ const collectionNames = ref<{ [key: string]: string }[]>([]);
 const loadingAction = ref<string | null>(null);
 
 const appStore = useAppStore();
+const connectionStore = useConnectionStore();
 
 const enablePagination = computed(() => searchInput.value === '');
 
@@ -309,6 +311,8 @@ const getCollection = async () => {
     try {
         const res = await CollectionApi.getCollection(searchInput.value);
         collections.value = DTOFactory.forCollection(res);
+        setTrackableCollections();
+        setCollectionNames();
     } catch (e) {
         collections.value.items = [];
     } finally {
@@ -320,6 +324,7 @@ const getCollections = async () => {
     try {
         const res = await CollectionApi.getCollections();
         collections.value = DTOFactory.forCollections(res);
+        setTrackableCollections();
         setCollectionNames();
     } catch (e) {
         collections.value.items = [];
@@ -382,6 +387,7 @@ const loadMoreCollectionsWithObserver = () => {
                     const res = await CollectionApi.getCollections(collections.value.cursor);
                     const data = DTOFactory.forCollections(res);
                     collections.value = { items: [...collections.value.items, ...data.items], cursor: data.cursor };
+                    setTrackableCollections();
                     setCollectionNames();
                     isPaginationLoading.value = false;
                 } catch (error) {
@@ -473,6 +479,20 @@ const untrackCollection = async () => {
     }
 };
 
+const checkCollectionOwnership = (collection, accounts) => {
+    return !accounts.find((account) => account === collection.owner);
+};
+
+const setTrackableCollections = async () => {
+    await connectionStore.getAccounts();
+    const uniqueAccounts = connectionStore.getTrackableAccounts();
+    collections.value.items.map((collection) => {
+        collection.tracked = checkCollectionOwnership(collection, uniqueAccounts);
+
+        return collection;
+    });
+};
+
 (async () => {
     await getCollections();
 })();
@@ -483,6 +503,16 @@ onMounted(() => {
 });
 
 watch(() => collections.value, setCollectionIds);
+
+watch(
+    () => connectionStore.wallet,
+    async () => {
+        if (connectionStore.wallet) {
+            await connectionStore.getAccounts();
+            setTrackableCollections();
+        }
+    }
+);
 </script>
 
 <style lang="scss" scoped>

resources/js/components/pages/Settings.vue

@@ -3,10 +3,7 @@
         <div class="mt-4 flow-root">
             <LoadingCircle v-if="loading" class="mt-40" :size="44" />
             <template v-else>
-                <div
-                    v-if="!showInitialSetup"
-                    class="flex flex-col mb-6 w-full transition-all rounded-md bg-[#0284c7] p-3 text-white"
-                >
+                <div class="flex flex-col mb-6 w-full transition-all rounded-md bg-[#0284c7] p-3 text-white">
                     <p class="font-bold">Configuring Your Wallet</p>
                     <p>
                         To interact with the Enjin Platform, you need a wallet to sign your transactions. You can do
@@ -104,8 +101,6 @@ const loading = ref(appStore.user || !appStore.hasMultiTenantPackage ? false : t
 const confirmModal = ref(false);
 const verifyPasswordModal = ref(false);
 
-const tokens = computed(() => appStore.user?.apiTokens);
-const showInitialSetup = computed(() => !appStore.hasValidConfig && isMultiTenant.value && !tokens.value?.length);
 const isMultiTenant = computed(() => appStore.isMultiTenant);
 
 const logout = async () => {