fix: LANDs section race condition

webapp/src/components/AssetList/AssetList.container.ts

@@ -3,7 +3,7 @@ import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors
 import { RootState } from '../../modules/reducer'
 import { FETCH_NFTS_REQUEST } from '../../modules/nft/actions'
 import { browse, clearFilters } from '../../modules/routing/actions'
-import { getBrowseAssets, getCount } from '../../modules/ui/browse/selectors'
+import { getBrowseAssets, getCount, getView } from '../../modules/ui/browse/selectors'
 import {
   getVendor,
   getPageNumber,
@@ -25,18 +25,21 @@ const mapState = (state: RootState): MapStateProps => {
   const section = getSection(state)
   const page = getPageNumber(state)
   const assetType = getAssetType(state)
+  const view = getView(state)
+  const loadingState = getLoadingNFTs(state).filter(loading => loading.payload.options.view === view)
+  const assets = getBrowseAssets(state, section, assetType)
   return {
     vendor: getVendor(state),
     assetType,
     section: getSection(state),
-    assets: getBrowseAssets(state, section, assetType),
+    assets,
     page,
     count: getCount(state),
     search: getSearch(state),
     isLoading:
       assetType === AssetType.ITEM
         ? isLoadingType(getLoadingItems(state), FETCH_ITEMS_REQUEST) || isLoadingFavoritedItems(state)
-        : isLoadingType(getLoadingNFTs(state), FETCH_NFTS_REQUEST),
+        : isLoadingType(loadingState, FETCH_NFTS_REQUEST),
     hasFiltersEnabled: hasFiltersEnabled(state),
     visitedLocations: getVisitedLocations(state)
   }

webapp/src/components/Navigation/Navigation.tsx

@@ -9,6 +9,7 @@ import * as decentraland from '../../modules/vendor/decentraland'
 import { locations } from '../../modules/routing/locations'
 import { VendorName } from '../../modules/vendor'
 import { SortBy } from '../../modules/routing/types'
+import { Section } from '../../modules/vendor/decentraland'
 import { AssetType } from '../../modules/asset/types'
 import * as events from '../../utils/events'
 import { CAMPAING_TAB_ANIMATION_ENABLED } from '../Campaign/config'
@@ -65,7 +66,7 @@ const Navigation = (props: Props) => {
           <Link to={locations.browse(browseDefaultOptions)} onClick={onClearFilters}>
             <Tabs.Tab active={activeTab === NavigationTab.COLLECTIBLES}>{t('navigation.collectibles')}</Tabs.Tab>
           </Link>
-          <Link to={locations.lands()}>
+          <Link to={locations.lands({ section: Section.LAND, assetType: AssetType.NFT })}>
             <Tabs.Tab active={activeTab === NavigationTab.LANDS}>{t('navigation.land')}</Tabs.Tab>
           </Link>
           <Link to={locations.claimName()}>

webapp/src/modules/nft/sagas.spec.ts

@@ -5,6 +5,8 @@ import * as matchers from 'redux-saga-test-plan/matchers'
 import { ChainId, NFTCategory, Order, RentalListing, RentalStatus } from '@dcl/schemas'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
 import { waitForTx } from 'decentraland-dapps/dist/modules/transaction/utils'
+import { connectWalletSuccess } from 'decentraland-dapps/dist/modules/wallet'
+import { openModal } from 'decentraland-dapps/dist/modules/modal'
 import { Vendor, VendorFactory, VendorName } from '../vendor'
 import { getWallet } from '../wallet/selectors'
 import {
@@ -31,6 +33,9 @@ import { waitUntilRentalChangesStatus } from '../rental/utils'
 import { getRentalById } from '../rental/selectors'
 import { retryParams } from '../vendor/decentraland/utils'
 import { fetchSmartWearableRequiredPermissionsRequest } from '../asset/actions'
+import { getView } from '../ui/browse/selectors'
+import { EXPIRED_LISTINGS_MODAL_KEY } from '../ui/utils'
+import { MAX_QUERY_SIZE } from '../vendor/api'
 
 jest.mock('decentraland-dapps/dist/lib/eth')
 
@@ -449,3 +454,134 @@ describe('when handling the transfer NFT request action', () => {
     })
   })
 })
+
+describe('when handling the connect wallet success action', () => {
+  const address = '0x...'
+  let wallet: Wallet
+  describe('and the message has been shown before and stored in the LocalStorage', () => {
+    beforeEach(() => {
+      wallet = { address } as Wallet
+    })
+    it('it should not fetch the wallet nfts on sale', () => {
+      return expectSaga(nftSaga, getIdentity)
+        .provide([
+          [select(getWallet), wallet],
+          [select(getView), View.MARKET],
+          [call([localStorage, 'getItem'], EXPIRED_LISTINGS_MODAL_KEY), 'true']
+        ])
+        .not.put(
+          fetchNFTsRequest({
+            view: View.MARKET,
+            vendor: VendorName.DECENTRALAND,
+            params: {
+              first: MAX_QUERY_SIZE,
+              skip: 0,
+              onlyOnSale: true,
+              address
+            }
+          })
+        )
+        .dispatch(connectWalletSuccess({ address } as Wallet))
+        .run({ silenceTimeout: true })
+    })
+  })
+})
+
+describe('when handling the connect wallet success action', () => {
+  const address = '0x...'
+  let wallet: Wallet
+  beforeEach(() => {
+    wallet = { address } as Wallet
+  })
+  describe('and the message has been shown before and stored in the LocalStorage', () => {
+    it('it should not open the ExpiredListingsModal', () => {
+      return expectSaga(nftSaga, getIdentity)
+        .provide([
+          [select(getWallet), wallet],
+          [select(getView), View.MARKET],
+          [call([localStorage, 'getItem'], EXPIRED_LISTINGS_MODAL_KEY), 'true']
+        ])
+        .not.put(openModal('ExpiredListingsModal'))
+        .dispatch(connectWalletSuccess({ address } as Wallet))
+        .run({ silenceTimeout: true })
+    })
+  })
+
+  describe('and the message has not been shown before and thus not stored in the LocalStorage', () => {
+    let view: View
+    let orders: Order[]
+    describe('and the view is not the current account', () => {
+      beforeEach(() => {
+        view = View.MARKET
+      })
+      describe('and the are some legacy orders among those NFTs and belong to the wallet connected', () => {
+        beforeEach(() => {
+          orders = [{ expiresAt: Date.now(), owner: wallet.address } as Order]
+        })
+        it('should open the ExpiresListingsModal', () => {
+          return expectSaga(nftSaga, getIdentity)
+            .provide([
+              [select(getView), view],
+              [select(getWallet), wallet],
+              [
+                matchers.call.fn(VendorFactory.build),
+                Promise.resolve({ nftService: { fetch: () => Promise.resolve([undefined, undefined, orders]) } })
+              ]
+            ])
+            .put(openModal('ExpiredListingsModal'))
+            .dispatch(connectWalletSuccess({ address } as Wallet))
+            .run({ silenceTimeout: true })
+        })
+      })
+      describe('and the are some legacy orders among those NFTs and do not belong to the wallet connected', () => {
+        beforeEach(() => {
+          orders = [{ expiresAt: Date.now(), owner: 'some other address' } as Order]
+        })
+        it('should not open the ExpiresListingsModal', () => {
+          return expectSaga(nftSaga, getIdentity)
+            .provide([
+              [select(getView), view],
+              [select(getWallet), wallet],
+              [
+                matchers.call.fn(VendorFactory.build),
+                Promise.resolve({ nftService: { fetch: () => Promise.resolve([undefined, undefined, orders]) } })
+              ]
+            ])
+            .not.put(openModal('ExpiredListingsModal'))
+            .dispatch(connectWalletSuccess({ address } as Wallet))
+            .run({ silenceTimeout: true })
+        })
+      })
+      describe('and the are no legacy orders among those NFTs', () => {
+        const orders = [{ expiresAt: Math.round(Date.now() / 1000) } as Order]
+        it('should not open the ExpiresListingsModal', () => {
+          return expectSaga(nftSaga, getIdentity)
+            .provide([
+              [select(getView), view],
+              [select(getWallet), wallet],
+              [
+                matchers.call.fn(VendorFactory.build),
+                Promise.resolve({ nftService: { fetch: () => Promise.resolve([undefined, undefined, orders]) } })
+              ]
+            ])
+            .not.put(openModal('ExpiredListingsModal'))
+            .dispatch(connectWalletSuccess({ address } as Wallet))
+            .run({ silenceTimeout: true })
+        })
+      })
+    })
+
+    describe('and the view is the current account', () => {
+      it('should not open the ExpiresListingsModal', () => {
+        return expectSaga(nftSaga, getIdentity)
+          .provide([
+            [select(getView), view],
+            [select(getWallet), wallet]
+          ])
+          .not.put(openModal('ExpiredListingsModal'))
+          .dispatch(connectWalletSuccess({ address } as Wallet))
+          .run({ silenceTimeout: true })
+      })
+    })
+  })
+})

webapp/src/modules/nft/sagas.ts

@@ -4,10 +4,13 @@ import { ErrorCode } from 'decentraland-transactions'
 import { waitForTx } from 'decentraland-dapps/dist/modules/transaction/utils'
 import { AuthIdentity } from 'decentraland-crypto-fetch'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { openModal } from 'decentraland-dapps/dist/modules/modal'
+import { CONNECT_WALLET_SUCCESS, ConnectWalletSuccessAction, Wallet } from 'decentraland-dapps/dist/modules/wallet'
 import { isErrorWithMessage } from '../../lib/error'
 import { getWallet } from '../wallet/selectors'
 import { Vendor, VendorFactory } from '../vendor/VendorFactory'
 import { getContract, getContracts } from '../contract/selectors'
+import { isLegacyOrder } from '../../lib/orders'
 import { VendorName } from '../vendor/types'
 import { AwaitFn } from '../types'
 import { getContractKey, getContractKeyFromNFT, getStubMaticCollectionContract } from '../contract/utils'
@@ -17,6 +20,10 @@ import { upsertContracts } from '../contract/actions'
 import { Contract } from '../vendor/services'
 import { retryParams } from '../vendor/decentraland/utils'
 import { fetchSmartWearableRequiredPermissionsRequest } from '../asset/actions'
+import { View } from '../ui/types'
+import { getView } from '../ui/browse/selectors'
+import { EXPIRED_LISTINGS_MODAL_KEY } from '../ui/utils'
+import { MAX_QUERY_SIZE } from '../vendor/api'
 import {
   DEFAULT_BASE_NFT_PARAMS,
   FETCH_NFTS_REQUEST,
@@ -45,6 +52,37 @@ export function* nftSaga(getIdentity: () => AuthIdentity | undefined) {
   yield takeEvery(FETCH_NFTS_REQUEST, handleFetchNFTsRequest)
   yield takeEvery(FETCH_NFT_REQUEST, handleFetchNFTRequest)
   yield takeEvery(TRANSFER_NFT_REQUEST, handleTransferNFTRequest)
+  yield takeEvery(CONNECT_WALLET_SUCCESS, handleConnectWalletSuccess)
+
+  function* handleConnectWalletSuccess(action: ConnectWalletSuccessAction) {
+    const {
+      payload: {
+        wallet: { address }
+      }
+    } = action
+    const view: View = yield select(getView)
+    const wallet: Wallet = yield select(getWallet)
+    const hasShownTheExpiredListingsModalBefore: string | null = yield call([localStorage, 'getItem'], EXPIRED_LISTINGS_MODAL_KEY)
+
+    if (hasShownTheExpiredListingsModalBefore !== 'true') {
+      const vendor: Vendor<VendorName> = yield call([VendorFactory, 'build'], VendorName.DECENTRALAND, API_OPTS)
+      const [, , orders]: AwaitFn<typeof vendor.nftService.fetch> = yield call(
+        [vendor.nftService, 'fetch'],
+        {
+          first: MAX_QUERY_SIZE,
+          skip: 0,
+          onlyOnSale: true,
+          address
+        },
+        {}
+      )
+      if (wallet && view !== View.CURRENT_ACCOUNT) {
+        if (orders.some(order => isLegacyOrder(order) && order.owner === wallet.address)) {
+          yield put(openModal('ExpiredListingsModal'))
+        }
+      }
+    }
+  }
 
   function* handleFetchNFTsRequest(action: FetchNFTsRequestAction) {
     const { options, timestamp } = action.payload