[PLA-1911] improve collection tracking check (#150)

resources/js/components/App.vue

@@ -57,11 +57,11 @@ const initialTheme = () => {
 
 onMounted(() => {
     setTimeout(async () => {
-        if (appStore.loggedIn && useConnectionStore().wallet) {
+        if (appStore.loggedIn && useConnectionStore().provider) {
             await useConnectionStore().loadWallet();
             await useConnectionStore().getAccounts();
         }
-    }, 1000);
+    }, 500);
 });
 
 watch(

resources/js/components/DropdownMenu.vue

@@ -22,7 +22,7 @@
                                     : 'text-light-content dark:text-dark-content ',
                                 'flex justify-between px-4 py-2 text-sm transition-all',
                             ]"
-                            @click="emitAction(action.component)"
+                            @click="emitAction(action)"
                         >
                             <span>{{ action.name }}</span>
                         </div>
@@ -41,13 +41,19 @@ import ScaleTransition from '~/components/ScaleTransition.vue';
 defineProps<{
     actions: {
         name: string;
-        component: string;
+        component?: string;
+        action?: Function;
     }[];
 }>();
 
-const emit = defineEmits(['clicked']);
+const emit = defineEmits(['clicked', 'loading']);
 
-const emitAction = (type: string) => {
-    emit('clicked', type);
+const emitAction = (action) => {
+    if (action.component) {
+        emit('clicked', action.component);
+    } else if (action.action) {
+        emit('loading');
+        action.action();
+    }
 };
 </script>

resources/js/components/TransactionResultChip.vue

@@ -1,23 +1,26 @@
 <template>
-    <Chip :text="text" :closable="false" :class="getChipColor(text)" />
+    <Chip :text="computedText" :closable="false" :class="getChipColor(text)" />
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import Chip from '~/components/Chip.vue';
 import { TransactionResultType } from '~/types/types.enums';
 
-defineProps<{
+const props = defineProps<{
     text: string;
 }>();
 
+const computedText = computed(() => props.text.replace('EXTRINSIC_', '').replace('TRANSACTION_', ''));
+
 const getChipColor = (type: string) => {
     switch (type) {
         case TransactionResultType.TRANSACTION_SUCCESS:
         case TransactionResultType.EXTRINSIC_SUCCESS:
             return '!bg-green-200 !text-green-600';
         case TransactionResultType.TRANSACTION_FAILED:
         case TransactionResultType.EXTRINSIC_FAILED:
-            return '!bg-red-200';
+            return '!bg-red-400';
         default:
             return '';
     }

resources/js/components/pages/Collections.vue

@@ -122,18 +122,22 @@
                                 <td
                                     class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3 flex justify-end"
                                 >
+                                    <Chip
+                                        v-if="collection.tracked"
+                                        text="Tracked"
+                                        :closable="false"
+                                        class="!bg-blue-400 !bg-opacity-80 !text-white"
+                                    />
+                                    <LoadingCircle
+                                        class="mx-3 h-5 w-5"
+                                        v-if="loadingAction === collection.collectionId"
+                                    />
                                     <DropdownMenu
-                                        v-if="!collection.tracked"
-                                        :actions="actions"
+                                        v-else
+                                        :actions="actions(collection)"
                                         @clicked="($event) => openModalSlide($event, collection)"
+                                        @loading="loadingAction = collection.collectionId"
                                     />
-                                    <Btn
-                                        v-else
-                                        dusk="untrackCollectionBtn"
-                                        @click="untrackCollection(collection.collectionId)"
-                                    >
-                                        Untrack
-                                    </Btn>
                                 </td>
                             </tr>
                         </tbody>
@@ -146,6 +150,14 @@
         </div>
         <Slideover :open="modalSlide" @close="closeModalSlide" :item="slideComponent" />
         <TrackCollectionModal :is-open="trackModal" @confirm="trackCollection" @closed="trackModal = false" />
+        <ConfirmModal
+            key="cancel"
+            :is-open="untrackModal"
+            title="Untrack Collection"
+            description="Are you sure you want to untrack this collection? it will be removed from your collections list and you will have to add it again"
+            @closed="closeUntrackModal"
+            @confirm="untrackCollection"
+        />
     </div>
 </template>
 
@@ -169,6 +181,8 @@ import { TransactionState } from '~/types/types.enums';
 import { useRoute, useRouter } from 'vue-router';
 import { ApiService } from '~/api';
 import TrackCollectionModal from '../TrackCollectionModal.vue';
+import ConfirmModal from '../ConfirmModal.vue';
+import Chip from '../Chip.vue';
 
 const isLoading = ref(true);
 const isPaginationLoading = ref(false);
@@ -190,58 +204,79 @@ const collections: Ref<{
 });
 const paginatorRef = ref();
 const modalSlide = ref(false);
+const untrackModal = ref(false);
 const trackModal = ref(false);
 const slideComponent = ref();
 const searchInput = ref('');
 const collectionNames = ref<{ [key: string]: string }[]>([]);
+const loadingAction = ref<string | null>(null);
 
 const route = useRoute();
 const router = useRouter();
 
 const enablePagination = computed(() => searchInput.value === '');
 
-const actions = [
-    {
-        key: 'details',
-        name: 'Details',
-        component: 'DetailsCollectionSlideover',
-    },
-    {
-        key: 'approve',
-        name: 'Approve',
-        component: 'ApproveCollectionSlideover',
-    },
-    {
-        key: 'unapprove',
-        name: 'Unapprove',
-        component: 'UnapproveCollectionSlideover',
-    },
-    {
-        key: 'freeze',
-        name: 'Freeze',
-        component: 'FreezeSlideover',
-    },
-    {
-        key: 'thaw',
-        name: 'Thaw',
-        component: 'ThawSlideover',
-    },
-    {
-        key: 'mutate',
-        name: 'Mutate',
-        component: 'MutateCollectionSlideover',
-    },
-    {
-        key: 'attributes',
-        name: 'Attributes',
-        component: 'AttributesCollectionSlideover',
-    },
-    {
-        key: 'destroy',
-        name: 'Destroy',
-        component: 'DestroyCollectionSlideover',
-    },
-];
+const actions = (collection) => {
+    if (collection.tracked) {
+        return [
+            {
+                key: 'details',
+                name: 'Details',
+                component: 'DetailsCollectionSlideover',
+            },
+            {
+                key: 'untrack',
+                name: 'Untrack',
+                action: () => {
+                    untrackModal.value = true;
+                },
+            },
+        ];
+    }
+
+    return [
+        {
+            key: 'details',
+            name: 'Details',
+            component: 'DetailsCollectionSlideover',
+        },
+        {
+            key: 'approve',
+            name: 'Approve',
+            component: 'ApproveCollectionSlideover',
+        },
+        {
+            key: 'unapprove',
+            name: 'Unapprove',
+            component: 'UnapproveCollectionSlideover',
+        },
+        {
+            key: 'freeze',
+            name: 'Freeze',
+            component: 'FreezeSlideover',
+        },
+        {
+            key: 'thaw',
+            name: 'Thaw',
+            component: 'ThawSlideover',
+        },
+        {
+            key: 'mutate',
+            name: 'Mutate',
+            component: 'MutateCollectionSlideover',
+        },
+        {
+            key: 'attributes',
+            name: 'Attributes',
+            component: 'AttributesCollectionSlideover',
+        },
+        {
+            key: 'destroy',
+            name: 'Destroy',
+            component: 'DestroyCollectionSlideover',
+        },
+    ];
+};
 
 const debouncedSearch = debounce(async () => {
     if (searchInput.value) {
@@ -375,6 +410,11 @@ const closeModalSlide = () => {
     }, 500);
 };
 
+const closeUntrackModal = () => {
+    untrackModal.value = false;
+    loadingAction.value = null;
+};
+
 const openTransactionSlide = async (transactionId: string) => {
     if (modalSlide.value) closeModalSlide();
 
@@ -384,13 +424,38 @@ const openTransactionSlide = async (transactionId: string) => {
 };
 
 const trackCollection = async (collectionId: string) => {
-    await CollectionApi.trackCollection(collectionId);
-    await getCollections();
+    try {
+        await CollectionApi.trackCollection(collectionId);
+        await getCollections();
+    } catch {
+        snackbar.info({
+            title: 'Tracking',
+            text: 'Tracking the collection failed',
+        });
+    }
 };
 
-const untrackCollection = async (collectionId: string) => {
-    await CollectionApi.untrackCollection(collectionId);
-    await getCollections();
+const untrackCollection = async () => {
+    try {
+        untrackModal.value = false;
+        const res = await CollectionApi.untrackCollection(loadingAction.value!);
+        if (!res.data.RemoveFromTracked) {
+            snackbar.info({
+                title: 'Untracking',
+                text: 'Untracking the collection failed',
+            });
+            return;
+        } else {
+            await getCollections();
+        }
+    } catch {
+        snackbar.info({
+            title: 'Untracking',
+            text: 'Untracking the collection failed',
+        });
+    } finally {
+        loadingAction.value = null;
+    }
 };
 
 (async () => {

resources/js/factory/collection.ts

@@ -8,21 +8,27 @@ export class DTOCollectionFactory {
         const appStore = useAppStore();
         const connectionStore = useConnectionStore();
 
-        const accounts: string[] = appStore.user?.walletAccounts ?? [];
-        let tracked = false;
+        const accounts: string[] = [];
+        if (appStore.user?.account) {
+            accounts.push(publicKeyToAddress(appStore.user?.account));
+        }
+
+        if (appStore.config.daemon) {
+            accounts.push(publicKeyToAddress(appStore.config.daemon));
+        }
 
-        if (accounts.length && appStore.isMultiTenant) {
-            tracked = !accounts.find((account) => account === publicKeyToAddress(collection.owner.account.publicKey));
-            if (!tracked) {
-                tracked =
-                    publicKeyToAddress(appStore.user?.account) ===
-                    publicKeyToAddress(collection.owner.account.publicKey);
-            }
-        } else if (appStore.config.daemon) {
-            tracked = !(appStore.config.daemon === publicKeyToAddress(collection.owner.account.publicKey));
-        } else if (connectionStore.accounts?.length) {
-            const accounts = connectionStore.accounts.map((account) => publicKeyToAddress(account.address));
-            tracked = !accounts.find((account) => account === publicKeyToAddress(collection.owner.account.publicKey));
+        if (connectionStore.accounts?.length) {
+            const walletAccounts = connectionStore.accounts.map((account) => publicKeyToAddress(account.address));
+            accounts.push(...walletAccounts);
+        } else if (appStore.user?.walletAccounts?.lengths) {
+            const walletAccounts = appStore.user?.walletAccounts?.map((account) => publicKeyToAddress(account));
+            accounts.push(...walletAccounts);
+        }
+
+        const uniqueAccounts = [...new Set(accounts)];
+        let tracked = false;
+        if (uniqueAccounts.length) {
+            tracked = !uniqueAccounts.find((account) => account === publicKeyToAddress(collection.owner.account.publicKey));
         }
 
         return {