feat: re-add MakersPlace and refactor ui state (decentraland#212)

* feat: re-add MakersPlace and refactor ui state

* fix: envs

webapp/.ci/.env.dev

@@ -1,17 +1,30 @@
-# ALL
+# Network
 REACT_APP_NETWORK=ropsten
-REACT_APP_BUY_MANA_URL=https://google.com
-REACT_APP_MARKETPLACE_ADAPTER_FEE_PER_MILLION=25000
-REACT_APP_MAX_PRICE_INCREASE_PERCENTAGE=15
+
+# Settings
+REACT_APP_BUY_MANA_URL=https://kyberswap.com/swap/eth-mana
+
 # ROPSTEN
+
 # APIs
 REACT_APP_MARKETPLACE_URL=https://api.thegraph.com/subgraphs/name/decentraland/marketplace-ropsten
 REACT_APP_LAND_URL=https://api.decentraland.zone/v1
 REACT_APP_COINGECKO_API_URL=https://api.coingecko.com/api/v3
+
 REACT_APP_SUPER_RARE_API_URL=https://dev.pixura.io/sr-json/v0
 REACT_APP_SUPER_RARE_API_KEY=eyJhbGciOiJIUzUxMiJ9.eyJkYXQiOiJEQ0wifQ.UADwL-MaLbS4NmMIGc87iztzGIttxQ0rVCRCRYBHYMs4CKySywpb0esh68lgcHxb6hODxLHEJjNxgwdPATLkfg
+
 REACT_APP_MAKERS_PLACE_API_URL=https://makersplace.com/api
+
+# Market
+REACT_APP_MARKETPLACE_ADAPTER_FEE_PER_MILLION=25000
+REACT_APP_MAX_PRICE_INCREASE_PERCENTAGE=15
+
 # Tokens
 REACT_APP_MANA_ADDRESS=0x2a8fd99c19271f4f04b1b7b9c4f7cf264b626edb
 REACT_APP_CONVERTER_ADDRESS=0x2782eb28Dcb1eF4E7632273cd4e347e130Ce4646
-REACT_APP_CONVERTER_EXCHANGE=uniswap
+REACT_APP_CONVERTER_EXCHANGE=uniswap
+
+# Third party
+REACT_APP_INTERCOM_APP_ID=
+REACT_APP_SEGMENT_API_KEY=

webapp/.ci/.env.prd

@@ -1,21 +1,31 @@
- Network
+# Network
 REACT_APP_NETWORK=mainnet
+
 # Settings
 REACT_APP_BUY_MANA_URL=https://kyberswap.com/swap/eth-mana
+
+# MAINNET
+
 # APIs
 REACT_APP_MARKETPLACE_URL=https://api.thegraph.com/subgraphs/name/decentraland/marketplace
 REACT_APP_LAND_URL=https://api.decentraland.org/v1
 REACT_APP_COINGECKO_API_URL=https://api.coingecko.com/api/v3
+
 REACT_APP_SUPER_RARE_API_URL=https://superrare.co/sr-json/v0
 REACT_APP_SUPER_RARE_API_KEY=eyJhbGciOiJIUzUxMiJ9.eyJkYXQiOiJEQ0wifQ.UADwL-MaLbS4NmMIGc87iztzGIttxQ0rVCRCRYBHYMs4CKySywpb0esh68lgcHxb6hODxLHEJjNxgwdPATLkfg
+
 REACT_APP_MAKERS_PLACE_API_URL=https://makersplace.com/api
-REACT_APP_CONVERTER_EXCHANGE=kyber_network
+
 # Market
 REACT_APP_MARKETPLACE_ADAPTER_FEE_PER_MILLION=25000
 REACT_APP_MAX_PRICE_INCREASE_PERCENTAGE=15
+
 # Tokens
 REACT_APP_MANA_ADDRESS=0x0f5d2fb29fb7d3cfee444a200298f468908cc942
 REACT_APP_CONVERTER_ADDRESS=0x2859581da59bd4e16a866dd06b461b76d8e489a4
+REACT_APP_CONVERTER_EXCHANGE=kyber_network
+
 # Third party
 REACT_APP_INTERCOM_APP_ID=z0h94kay
-REACT_APP_SEGMENT_API_KEY=HiNNHH80CETcqzfPBY4jJgJJlFAWbzNp
+REACT_APP_SEGMENT_API_KEY=HiNNHH80CETcqzfPBY4jJgJJlFAWbzNp
+

webapp/.ci/.env.stg

@@ -1,21 +1,31 @@
- Network
+# Network
 REACT_APP_NETWORK=mainnet
+
 # Settings
 REACT_APP_BUY_MANA_URL=https://kyberswap.com/swap/eth-mana
+
+# MAINNET
+
 # APIs
 REACT_APP_MARKETPLACE_URL=https://api.thegraph.com/subgraphs/name/decentraland/marketplace
 REACT_APP_LAND_URL=https://api.decentraland.org/v1
 REACT_APP_COINGECKO_API_URL=https://api.coingecko.com/api/v3
+
 REACT_APP_SUPER_RARE_API_URL=https://superrare.co/sr-json/v0
 REACT_APP_SUPER_RARE_API_KEY=eyJhbGciOiJIUzUxMiJ9.eyJkYXQiOiJEQ0wifQ.UADwL-MaLbS4NmMIGc87iztzGIttxQ0rVCRCRYBHYMs4CKySywpb0esh68lgcHxb6hODxLHEJjNxgwdPATLkfg
+
 REACT_APP_MAKERS_PLACE_API_URL=https://makersplace.com/api
-REACT_APP_CONVERTER_EXCHANGE=kyber_network
+
 # Market
 REACT_APP_MARKETPLACE_ADAPTER_FEE_PER_MILLION=25000
 REACT_APP_MAX_PRICE_INCREASE_PERCENTAGE=15
+
 # Tokens
 REACT_APP_MANA_ADDRESS=0x0f5d2fb29fb7d3cfee444a200298f468908cc942
 REACT_APP_CONVERTER_ADDRESS=0x2859581da59bd4e16a866dd06b461b76d8e489a4
+REACT_APP_CONVERTER_EXCHANGE=kyber_network
+
 # Third party
-REACT_APP_SEGMENT_API_KEY=
-REACT_APP_INTERCOM_APP_ID=
+REACT_APP_INTERCOM_APP_ID=z0h94kay
+REACT_APP_SEGMENT_API_KEY=HiNNHH80CETcqzfPBY4jJgJJlFAWbzNp
+

webapp/src/components/Bid/Bid.container.ts

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
 import { push } from 'connected-react-router'
 import { RootState } from '../../modules/reducer'
-import { getArchivedBidIds } from '../../modules/ui/selectors'
+import { getArchivedBidIds } from '../../modules/ui/nft/bid/selectors'
 import { locations } from '../../modules/routing/locations'
 import {
   cancelBidRequest,

webapp/src/components/HomePage/HomePage.container.ts

@@ -3,23 +3,15 @@ import { push } from 'connected-react-router'
 import { RootState } from '../../modules/reducer'
 import { fetchNFTsFromRoute } from '../../modules/routing/actions'
 import {
-  getHomepageWearables,
-  getHomepageLand,
-  getHomepageENS,
-  isHomepageWearablesLoading,
-  isHomepageENSLoading,
-  isHomepageLandLoading
-} from '../../modules/ui/selectors'
+  getHomepage,
+  getHomepageLoading
+} from '../../modules/ui/nft/homepage/selectors'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './HomePage.types'
 import HomePage from './HomePage'
 
 const mapState = (state: RootState): MapStateProps => ({
-  wearables: getHomepageWearables(state),
-  land: getHomepageLand(state),
-  ens: getHomepageENS(state),
-  isWearablesLoading: isHomepageWearablesLoading(state),
-  isENSLoading: isHomepageENSLoading(state),
-  isLandLoading: isHomepageLandLoading(state)
+  homepage: getHomepage(state),
+  homepageLoading: getHomepageLoading(state)
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({

webapp/src/components/HomePage/HomePage.tsx

@@ -3,9 +3,10 @@ import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { isMobile } from 'decentraland-dapps/dist/lib/utils'
 import { Page, Hero, Button } from 'decentraland-ui'
 import { locations } from '../../modules/routing/locations'
-import { View } from '../../modules/ui/types'
 import { Vendors } from '../../modules/vendor/types'
 import { SortBy } from '../../modules/routing/types'
+import { View } from '../../modules/ui/types'
+import { HomepageView } from '../../modules/ui/nft/homepage/types'
 import { Section } from '../../modules/vendor/decentraland/routing/types'
 import { Navbar } from '../Navbar'
 import { Footer } from '../Footer'
@@ -14,64 +15,42 @@ import { Props } from './HomePage.types'
 import './HomePage.css'
 
 const HomePage = (props: Props) => {
-  const {
-    wearables,
-    ens,
-    land,
-    isWearablesLoading,
-    isENSLoading,
-    isLandLoading,
-    onNavigate,
-    onFetchNFTsFromRoute
-  } = props
+  const { homepage, homepageLoading, onNavigate, onFetchNFTsFromRoute } = props
+
+  const sections = {
+    [View.HOME_WEARABLES]: Section.WEARABLES,
+    [View.HOME_LAND]: Section.LAND,
+    [View.HOME_ENS]: Section.ENS
+  }
 
   const handleGetStarted = useCallback(() => onNavigate(locations.browse()), [
     onNavigate
   ])
 
-  const handleViewWearables = useCallback(
-    () => onNavigate(locations.browse({ section: Section.WEARABLES })),
-    [onNavigate]
-  )
-
-  const handleViewLand = useCallback(
-    () => onNavigate(locations.browse({ section: Section.LAND })),
-    [onNavigate]
-  )
-
-  const handleViewEns = useCallback(
-    () => onNavigate(locations.browse({ section: Section.ENS })),
+  const handleViewAll = useCallback(
+    (section: Section) => onNavigate(locations.browse({ section })),
     [onNavigate]
   )
 
   const vendor = Vendors.DECENTRALAND
 
   useEffect(() => {
-    onFetchNFTsFromRoute({
-      vendor,
-      section: Section.WEARABLES,
-      view: View.HOME_WEARABLES,
-      sortBy: SortBy.RECENTLY_LISTED,
-      page: 1,
-      onlyOnSale: true
-    })
-    onFetchNFTsFromRoute({
-      vendor,
-      section: Section.LAND,
-      view: View.HOME_LAND,
-      sortBy: SortBy.RECENTLY_LISTED,
-      page: 1,
-      onlyOnSale: true
-    })
-    onFetchNFTsFromRoute({
-      vendor,
-      section: Section.ENS,
-      view: View.HOME_ENS,
-      sortBy: SortBy.RECENTLY_LISTED,
-      page: 1,
-      onlyOnSale: true
-    })
-  }, [vendor, onFetchNFTsFromRoute])
+    let view: HomepageView
+    for (view in homepage) {
+      const section = sections[view]
+      onFetchNFTsFromRoute({
+        vendor,
+        section,
+        view,
+        sortBy: SortBy.RECENTLY_LISTED,
+        page: 1,
+        onlyOnSale: true
+      })
+    }
+    // eslint-disable-next-line
+  }, [onFetchNFTsFromRoute])
+
+  const views = Object.keys(homepage) as HomepageView[]
 
   return (
     <>
@@ -89,24 +68,15 @@ const HomePage = (props: Props) => {
         </Hero.Actions>
       </Hero>
       <Page className="HomePage">
-        <Slideshow
-          title={t('home_page.wearables')}
-          nfts={wearables}
-          isLoading={isWearablesLoading}
-          onViewAll={handleViewWearables}
-        />
-        <Slideshow
-          title={t('home_page.land')}
-          nfts={land}
-          isLoading={isENSLoading}
-          onViewAll={handleViewLand}
-        />
-        <Slideshow
-          title={t('home_page.ens')}
-          nfts={ens}
-          isLoading={isLandLoading}
-          onViewAll={handleViewEns}
-        />
+        {views.map(view => (
+          <Slideshow
+            key={view}
+            title={t(`home_page.${view}`)}
+            nfts={homepage[view]}
+            isLoading={homepageLoading[view]}
+            onViewAll={() => handleViewAll(sections[view])}
+          />
+        ))}
       </Page>
       <Footer />
     </>

webapp/src/components/HomePage/HomePage.types.ts

@@ -1,31 +1,22 @@
 import { Dispatch } from 'redux'
-import { NFT } from '../../modules/nft/types'
 import { CallHistoryMethodAction } from 'connected-react-router'
+import {
+  getHomepage,
+  getHomepageLoading
+} from '../../modules/ui/nft/homepage/selectors'
 import {
   fetchNFTsFromRoute,
   FetchNFTsFromRouteAction
 } from '../../modules/routing/actions'
 
 export type Props = {
-  wearables: NFT[]
-  land: NFT[]
-  ens: NFT[]
-  isWearablesLoading: boolean
-  isENSLoading: boolean
-  isLandLoading: boolean
+  homepage: ReturnType<typeof getHomepage>
+  homepageLoading: ReturnType<typeof getHomepageLoading>
   onNavigate: (path: string) => void
   onFetchNFTsFromRoute: typeof fetchNFTsFromRoute
 }
 
-export type MapStateProps = Pick<
-  Props,
-  | 'wearables'
-  | 'land'
-  | 'ens'
-  | 'isWearablesLoading'
-  | 'isENSLoading'
-  | 'isLandLoading'
->
+export type MapStateProps = Pick<Props, 'homepage' | 'homepageLoading'>
 export type MapDispatchProps = Pick<
   Props,
   'onFetchNFTsFromRoute' | 'onNavigate'

webapp/src/components/MyBidsPage/MyBidsPage.container.ts

@@ -7,7 +7,7 @@ import {
   getBidderBids,
   getSellerBids,
   getArchivedBidIds
-} from '../../modules/ui/selectors'
+} from '../../modules/ui/nft/bid/selectors'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { getLoading } from '../../modules/bid/selectors'
 import {

webapp/src/components/NFTBrowse/NFTBrowse.tsx

@@ -20,7 +20,6 @@ const NFTBrowse = (props: Props) => {
     view,
     isMap,
     address,
-    // isLoading,
     onSetView,
     onFetchNFTsFromRoute
   } = props
@@ -31,14 +30,12 @@ const NFTBrowse = (props: Props) => {
   useEffect(() => {
     onSetView(view)
 
-    // if (!isLoading) {
     onFetchNFTsFromRoute({
       vendor,
       view,
       address,
       onlyOnSale
     })
-    // }
     // eslint-disable-next-line
   }, [vendor, onFetchNFTsFromRoute])
 

webapp/src/components/NFTList/NFTList.container.ts

@@ -4,7 +4,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 } from '../../modules/routing/actions'
-import { getNFTs, getAssetsCount } from '../../modules/ui/selectors'
+import { getNFTs, getAssetsCount } from '../../modules/ui/nft/browse/selectors'
 import { getVendor, getPage } from '../../modules/routing/selectors'
 import { getLoading } from '../../modules/nft/selectors'
 import { MapStateProps, MapDispatch, MapDispatchProps } from './NFTList.types'

webapp/src/components/NFTPage/Actions/Actions.tsx

@@ -37,7 +37,7 @@ const Actions = (props: Props) => {
               {t('nft_page.cancel_sale')}
             </Button>
           </>
-        ) : (
+        ) : !isOwner ? (
           <>
             <Button
               as={Link}
@@ -52,6 +52,10 @@ const Actions = (props: Props) => {
               </Button>
             ) : null}
           </>
+        ) : (
+          <Button onClick={() => setShowLeavingSiteModal(true)} primary>
+            {t('nft_page.see_listing')}
+          </Button>
         )
       ) : isOwner && canSell ? (
         <Button as={Link} to={locations.sell(contractAddress, tokenId)} primary>

webapp/src/components/NFTPage/Bids/Bids.container.ts

@@ -1,6 +1,6 @@
 import { MapStateProps, MapDispatchProps, MapDispatch } from './Bids.types'
 import { RootState } from '../../../modules/reducer'
-import { getNFTBids } from '../../../modules/ui/selectors'
+import { getNFTBids } from '../../../modules/ui/nft/bid/selectors'
 import { fetchBidsByNFTRequest } from '../../../modules/bid/actions'
 import { connect } from 'react-redux'
 import Bids from './Bids'