[PLA-2021] track fix

[zlayine]

PR Type

enhancement, bug fix

---

Description

• Enhanced the sidebar navigation to display the transaction count, improving user awareness of pending transactions.
• Improved the collection tracking system by integrating account management, allowing for better tracking of user-specific collections.
• Simplified the wallet configuration display in the settings page, removing unnecessary logic.
• Enhanced the daemon wallet setup process with transitions and added API token management features for better user experience.
• Refactored transaction fetching to use a dynamic parameter, allowing for more flexible data retrieval.
• Removed redundant account tracking logic from the collection factory, streamlining the codebase.
• Added a new method to count pending transactions, providing more detailed transaction insights.
• Updated GraphQL queries to include owner account information, enhancing data retrieval capabilities.
• Improved account management in the connection store, supporting multiple providers and ensuring accurate account data.
• Updated navigation and collection fetching logic to incorporate transaction counts and trackable account filtering.

---

Changes walkthrough 📝

	Relevant files
Enhancement	9 files SideNavbar.vue Display transaction count in sidebar navigation                    resources/js/components/SideNavbar.vue Added transaction count display in the sidebar. Introduced loadTransactions function to fetch transactions. Utilized onMounted lifecycle hook to load transactions on component mount. +21/-2    Collections.vue Enhance collection tracking with account management            resources/js/components/pages/Collections.vue Integrated connection store to manage accounts. Added logic to set trackable collections. Updated collection fetching to include trackable collections. +30/-0    SettingsWalletDaemon.vue Improve daemon wallet setup and API token management          resources/js/components/pages/SettingsWalletDaemon.vue Enhanced daemon wallet setup flow with transitions. Added API token creation and management UI. Improved user feedback during wallet account refresh. +176/-78 transaction.ts Use dynamic parameter for transaction fetching                      resources/js/api/transaction.ts Modified transaction fetching to use dynamic first parameter. +1/-1      collection.ts Simplify collection factory by removing tracking logic      resources/js/factory/collection.ts Removed account tracking logic from collection factory. +0/-32    transaction.ts Add method to count pending transactions                                  resources/js/factory/transaction.ts Added method to count pending transactions. +7/-0      GetCollectionIds.ts Include owner account in collection query                                resources/js/graphql/query/GetCollectionIds.ts Added owner account public key to collection query. +5/-0      connection.ts Enhance account management in connection store                      resources/js/store/connection.ts Added method to get trackable accounts. Improved account fetching logic for different providers. +23/-2    index.ts Update navigation and collection fetching logic                    resources/js/store/index.ts Updated navigation to include transaction count. Enhanced collection fetching with trackable account filtering. +15/-2
Bug fix	1 files Settings.vue Simplify wallet configuration display logic                            resources/js/components/pages/Settings.vue Removed showInitialSetup logic. Simplified wallet configuration display. +1/-6

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Data Fetching The method loadTransactions fetches a large number of transactions (500) on component mount which might cause performance issues or rate limiting on the API server. Consider implementing pagination or reducing the number of transactions fetched initially. Async Data Handling The method setTrackableCollections uses await inside a map function without proper handling of concurrent execution, which might lead to race conditions or unhandled promises. Complex Conditional Rendering The component contains deeply nested conditional rendering logic which makes the template hard to read and maintain. Consider breaking down the component into smaller sub-components. Redundant Code The method getTrackableAccounts duplicates the logic for account management which is spread across multiple components and stores, suggesting a need for centralizing account management logic.

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Best practice	Ensure cleanup of the IntersectionObserver to prevent memory leaks Avoid potential memory leaks by cleaning up the IntersectionObserver instance in loadMoreCollectionsWithObserver by calling observer.disconnect() when the component is unmounted or when it is no longer needed. resources/js/components/pages/SettingsWalletDaemon.vue [380-394] const observer = new IntersectionObserver( async (entries) => { if (entries[0].isIntersecting) { if (!enablePagination.value) return; try { if (!collections.value.cursor || isPaginationLoading.value) return; isPaginationLoading.value = true; 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) { isPaginationLoading.value = false; } } } ); +onUnmounted(() => { + observer.disconnect(); +}); Suggestion importance[1-10]: 9 Why: This suggestion is important for preventing memory leaks by ensuring that the IntersectionObserver is properly disconnected, which is a best practice in managing resources.	9
Possible bug	Modify the collection mapping to handle asynchronous operations correctly Ensure that the setTrackableCollections function handles asynchronous operations correctly when mapping over collections.value.items. Currently, it uses map which does not await asynchronous operations, potentially leading to race conditions or unhandled promises. resources/js/components/pages/Collections.vue [487-493] -collections.value.items.map((collection) => { - collection.tracked = checkCollectionOwnership(collection, uniqueAccounts); - return collection; -}); +for (const collection of collections.value.items) { + collection.tracked = await checkCollectionOwnership(collection, uniqueAccounts); +} Suggestion importance[1-10]: 8 Why: The suggestion addresses a potential bug by ensuring asynchronous operations are handled correctly, preventing race conditions and unhandled promises, which is crucial for maintaining data integrity.	8
Enhancement	Add error handling for account retrieval in the setTrackableCollections function Consider adding error handling for the getAccounts and getTrackableAccounts calls within the setTrackableCollections function to manage potential failures or exceptions from these asynchronous operations. resources/js/components/pages/Collections.vue [487-489] -await connectionStore.getAccounts(); -const uniqueAccounts = connectionStore.getTrackableAccounts(); +try { + await connectionStore.getAccounts(); + const uniqueAccounts = connectionStore.getTrackableAccounts(); +} catch (error) { + console.error('Failed to get accounts:', error); +} Suggestion importance[1-10]: 7 Why: Adding error handling improves the robustness of the code by managing potential failures in asynchronous operations, which enhances the application's reliability.	7
Performance	Optimize the ownership check in setTrackableCollections using a Set for faster lookups Refactor the setTrackableCollections function to use a more efficient method for checking collection ownership, such as using a Set for uniqueAccounts to improve lookup performance. resources/js/components/pages/Collections.vue [487-493] +const accountSet = new Set(uniqueAccounts); collections.value.items.map((collection) => { - collection.tracked = checkCollectionOwnership(collection, uniqueAccounts); + collection.tracked = !accountSet.has(collection.owner); return collection; }); Suggestion importance[1-10]: 6 Why: Using a Set for ownership checks can improve performance by providing faster lookups, which is beneficial for handling large datasets efficiently.	6