(Bug) - #1503 Fix collectibles groups is not removed when the last item from it is sent (#1511)

* Remove default export with const

* Filter collectibles group with user's available nftAsset

* Improves filter

* Fix duplicated assets

src/logic/collectibles/store/actions/fetchCollectibles.ts

@@ -4,7 +4,7 @@ import { Dispatch } from 'redux'
 import { getConfiguredSource } from 'src/logic/collectibles/sources'
 import { addNftAssets, addNftTokens } from 'src/logic/collectibles/store/actions/addCollectibles'
 
-const fetchCollectibles = (safeAddress: string) => async (dispatch: Dispatch): Promise<void> => {
+export const fetchCollectibles = (safeAddress: string) => async (dispatch: Dispatch): Promise<void> => {
   try {
     const source = getConfiguredSource()
     const collectibles = await source.fetchCollectibles(safeAddress)
@@ -17,5 +17,3 @@ const fetchCollectibles = (safeAddress: string) => async (dispatch: Dispatch): P
     console.log('Error fetching collectibles:', error)
   }
 }
-
-export default fetchCollectibles

src/logic/collectibles/store/selectors/index.ts

@@ -16,11 +16,18 @@ export const nftAssetsListSelector = createSelector(nftAssets, (assets): NFTAsse
   return assets ? Object.values(assets) : []
 })
 
+export const availableNftAssetsAddresses = createSelector(nftTokensSelector, (userNftTokens): string[] => {
+  return Array.from(new Set(userNftTokens.map((nftToken) => nftToken.assetAddress)))
+})
+
 export const activeNftAssetsListSelector = createSelector(
   nftAssetsListSelector,
   safeActiveAssetsSelector,
-  (assets, activeAssetsList): NFTAsset[] => {
+  availableNftAssetsAddresses,
-    return assets.filter(({ address }) => activeAssetsList.has(address))
+  (assets, activeAssetsList, availableNftAssetsAddresses): NFTAsset[] => {
+    return assets
+      .filter(({ address }) => activeAssetsList.has(address))
+      .filter(({ address }) => availableNftAssetsAddresses.includes(address))
   },
 )
 

src/logic/safe/hooks/useFetchTokens.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { batch, useDispatch } from 'react-redux'
 import { useLocation } from 'react-router-dom'
 
-import fetchCollectibles from 'src/logic/collectibles/store/actions/fetchCollectibles'
+import { fetchCollectibles } from 'src/logic/collectibles/store/actions/fetchCollectibles'
 import { fetchSelectedCurrency } from 'src/logic/currencyValues/store/actions/fetchSelectedCurrency'
 import activateAssetsByBalance from 'src/logic/tokens/store/actions/activateAssetsByBalance'
 import fetchSafeTokens from 'src/logic/tokens/store/actions/fetchSafeTokens'

src/logic/safe/hooks/useSafeScheduledUpdates.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { batch, useDispatch } from 'react-redux'
 
-import fetchCollectibles from 'src/logic/collectibles/store/actions/fetchCollectibles'
+import { fetchCollectibles } from 'src/logic/collectibles/store/actions/fetchCollectibles'
 import fetchSafeTokens from 'src/logic/tokens/store/actions/fetchSafeTokens'
 import fetchEtherBalance from 'src/logic/safe/store/actions/fetchEtherBalance'
 import { checkAndUpdateSafe } from 'src/logic/safe/store/actions/fetchSafe'