NFT - Add market collections

app/components/elements/nft/NFTMarketCollections.jsx

@@ -4,38 +4,53 @@ import tt from 'counterpart'
 import Icon from 'app/components/elements/Icon'
 import NFTSmallIcon from 'app/components/elements/nft/NFTSmallIcon'
 import PagedDropdownMenu from 'app/components/elements/PagedDropdownMenu'
+import { NFTImageStub } from 'app/utils/NFTUtils'
 
 class NFTMarketCollections extends React.Component {
     render() {
         let { nft_market_collections, selected } = this.props
-        const nft_colls = nft_market_collections ? nft_market_collections.toJS() : []
+        const nft_colls = nft_market_collections ? nft_market_collections.toJS().data : []
 
         const colls = []
         colls.push({
             key: '_all',
             link: '/nft',
-            label: <React.Fragment>
-                <NFTSmallIcon image={null} />
-                {tt('nft_market_page_jsx.all_collections')}
-            </React.Fragment>,
-            value: tt('nft_market_page_jsx.all_collections')
+            value: tt('nft_market_collections_jsx.all_collections')
         })
+        let i = 0
         for (const nft_coll of nft_colls) {
             colls.push({
-                key: nft_coll.name,
+                key: i,
                 link: '/nft/' + nft_coll.name,
                 label: <React.Fragment>
                     <NFTSmallIcon image={nft_coll.image} />
                     {nft_coll.name}
                 </React.Fragment>,
                 value: nft_coll.name
             })
+            ++i
         }
 
-        selected = selected || tt('nft_market_page_jsx.all_collections')
+        selected = selected || tt('nft_market_collections_jsx.all_collections')
 
         return <PagedDropdownMenu className='NFTMarketCollections Witnesses__vote-list' el='div' items={colls}
-            renderItem={item => item}
+            renderItem={item => {
+                const coll = nft_colls[item.key]
+                const collImg = (coll && coll.image) || NFTImageStub()
+                const collName = coll ? coll.name : tt('nft_market_collections_jsx.all_collections')
+
+                return {
+                    ...item,
+                    label: <React.Fragment>
+                        <NFTSmallIcon image={collImg} />
+                        {collName}
+                    </React.Fragment>,
+                    addon: (coll && coll.sell_order_count) ?
+                        <span style={{ position: 'absolute', right: '10px' }} title={tt('nft_market_collections_jsx.order_count', {count: coll.sell_order_count})}>
+                            {coll.sell_order_count}
+                        </span> : null,
+                }
+            }}
             selected={selected}
             perPage={20}>
             {selected}

app/components/elements/nft/NFTMarketCollections.scss

@@ -1,4 +1,8 @@
 .NFTMarketCollections {
+    margin-top: 6px;
+    margin-left: 10px;
+    vertical-align: top;
+
     .NFTSmallIcon {
         margin-top: 0.25rem;
         margin-right: 0.25rem;

app/components/pages/nft/NFTMarketPage.jsx

@@ -4,24 +4,31 @@ import { Link } from 'react-router'
 import tt from 'counterpart'
 
 import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import NFTMarketCollections from 'app/components/elements/nft/NFTMarketCollections'
 import NFTTokenItem from 'app/components/elements/nft/NFTTokenItem'
 import g from 'app/redux/GlobalReducer'
 import session from 'app/utils/session'
 
 class NFTMarketPage extends React.Component {
     componentDidMount() {
+        this.props.fetchNftMarketCollections('')
         this.refetch()
     }
 
+    componentDidUpdate(prevProps) {
+        if (this.props.routeParams.name !== prevProps.routeParams.name) {
+            this.refetch()
+        }
+    }
+
     refetch = () => {
+        const collName = this.props.routeParams.name || ''
         const curName = session.load().currentName
-        this.props.fetchNftMarket(curName, '', 0, this.sort, this.sortReversed)
+        this.props.fetchNftMarket(curName, collName, 0, this.sort, this.sortReversed)
     }
 
     render() {
-        const { currentUser, nft_orders, own_nft_orders, nft_assets, routeParams } = this.props
-
-        const { name } = routeParams
+        const { currentUser, nft_market_collections, nft_orders, own_nft_orders, nft_assets, routeParams } = this.props
 
         let content
         const orders = nft_orders ? nft_orders.toJS().data : null
@@ -64,7 +71,7 @@ class NFTMarketPage extends React.Component {
                 {items}
                 {next_from ? <div className='load-more' key='load_more'>
                     <center><button className='button hollow small' onClick={
-                        e => this.props.fetchNftMarket(username, '', next_from, this.sort, this.sortReversed)
+                        e => this.props.fetchNftMarket(username, routeParams.name || '', next_from, this.sort, this.sortReversed)
                     }>{tt('g.load_more')}</button></center>
                 </div> : null}
                 <hr/>
@@ -73,10 +80,14 @@ class NFTMarketPage extends React.Component {
             </div>
         }
 
+        const selected = this.props.routeParams.name
+
         return <div className='row'>
             <div className='NFTMarketPage'>
                 <div style={{ marginTop: '0.25rem' }}>
                     <h4 style={{ display: 'inline-block' }}>{tt('header_jsx.nft_market')}</h4>
+                    {nft_market_collections &&
+                        <NFTMarketCollections nft_market_collections={nft_market_collections} selected={selected} />}
                     <Link to={`/all-nft`} className="button hollow float-right">
                         {tt('all_nft_page_jsx.title')}
                     </Link>
@@ -94,18 +105,23 @@ module.exports = {
             const currentUser = state.user.getIn(['current'])
             const currentAccount = currentUser && state.global.getIn(['accounts', currentUser.get('username')])
 
+            const nft_market_collections = state.global.get('nft_market_collections')
             const nft_orders = state.global.get('nft_orders')
             const own_nft_orders = state.global.get('own_nft_orders')
 
             return {
                 currentUser,
                 currentAccount,
+                nft_market_collections,
                 nft_orders,
                 own_nft_orders,
                 nft_assets: state.global.get('nft_assets')
             }
         },
         dispatch => ({
+            fetchNftMarketCollections: (start_name) => {
+                dispatch(g.actions.fetchNftMarketCollections({ start_name }))
+            },
             fetchNftMarket: (account, collectionName, start_order_id, sort, reverse_sort) => {
                 dispatch(g.actions.fetchNftMarket({ account, collectionName, start_order_id, sort, reverse_sort }))
             },

app/locales/en.json

@@ -817,6 +817,14 @@
     "no_own_orders": "You are not selling any NFT token yet.",
     "own_orders": "My orders"
   },
+  "nft_market_collections_jsx": {
+    "all_collections": "All collections",
+    "order_count": {
+      "zero": "No orders",
+      "one": "1 order",
+      "other": "%(count)s orders"
+    }
+  },
   "invites_jsx": {
     "create_invite": "Create new invite check",
     "create_invite_info": "Cheques (invite codes) are a universal tool for transferring of GOLOS tokens to other people outside the blockchain. There are two ways to redeem the code: transfer its balance to your account or register a new account using it.",

app/locales/ru-RU.json

@@ -1171,6 +1171,14 @@
     "no_own_orders": "Вы пока не продаете NFT-токенов.",
     "own_orders": "Мои ордеры"
   },
+  "nft_market_collections_jsx": {
+    "all_collections": "Все коллекции",
+    "order_count": {
+      "zero": "Нет ордеров",
+      "one": "1 ордер",
+      "other": "%(count)s ордеров"
+    }
+  },
   "invites_jsx": {
     "create_invite": "Создание чека",
     "create_invite_info": "Чеки (инвайт-коды) — инструмент для передачи токенов другим людям вне блокчейна. Использовать чек можно двумя способами: перевести его баланс на аккаунт (форма для этого ниже) или зарегистрировать с его помощью новый аккаунт.",

app/redux/FetchDataSaga.js

@@ -64,6 +64,7 @@ export function* fetchDataWatches () {
     yield fork(watchFetchNftTokens)
     yield fork(watchFetchNftCollectionTokens)
     yield fork(watchFetchNftMarket)
+    yield fork(watchFetchNftMarketCollections)
 }
 
 export function* watchGetContent() {
@@ -701,4 +702,37 @@ export function* fetchNftMarket({ payload: { account, collectionName, start_orde
     } catch (err) {
         console.error('fetchNftMarket', err)
     }
-}
+}
+
+export function* watchFetchNftMarketCollections() {
+    yield takeLatest('global/FETCH_NFT_MARKET_COLLECTIONS', fetchNftMarketCollections)
+}
+
+export function* fetchNftMarketCollections({ payload: { start_name } }) {
+    try {
+        const limit = 99
+
+        const nft_colls = yield call([api, api.getNftCollectionsAsync], {
+            start_name,
+            limit: limit + 1,
+            sort: 'by_token_count'
+        })
+
+        let next_from
+        if (nft_colls.length > limit) {
+            next_from = nft_colls.pop().name
+        }
+
+        try {
+            yield fillNftCollectionImages(nft_colls)
+        } catch (err) {
+            console.error(err)
+        }
+
+        yield put(GlobalReducer.actions.receiveNftMarketCollections({
+            nft_colls, start_name, next_from
+        }))
+    } catch (err) {
+        console.error('fetchNftMarketCollections', err)
+    }
+}

app/redux/GlobalReducer.js

@@ -51,6 +51,11 @@ const upsertOwnNftOrders = (state, own_nft_orders, start_order_id, next_from) =>
     return upsertPagedItems(state, 'own_nft_orders', own_nft_orders, start_order_id, next_from)
 }
 
+const upsertNftMarketColls = (state, nft_colls, start_name, next_from) => {
+    return upsertPagedItems(state, 'nft_market_collections', nft_colls, start_name, next_from)
+}
+
+
 export default createModule({
     name: 'global',
     initialState: Map({
@@ -266,6 +271,18 @@ export default createModule({
                 return new_state
             },
         },
+        {
+            action: 'FETCH_NFT_MARKET_COLLECTIONS',
+            reducer: state => state,
+        },
+        {
+            action: 'RECEIVE_NFT_MARKET_COLLECTIONS',
+            reducer: (state, { payload: { nft_colls, start_name, next_from, } }) => {
+                let new_state = state
+                new_state = upsertNftMarketColls(new_state, nft_colls, start_name, next_from)
+                return new_state
+            },
+        },
         {
             action: 'LINK_REPLY',
             reducer: (state, { payload: op }) => {