From 91127d05f1b9cc14b3dc8a6e7369b9a890521950 Mon Sep 17 00:00:00 2001 From: 1aerostorm Date: Fri, 10 Nov 2023 07:02:51 +0000 Subject: [PATCH] NFT - Add market collections --- .../elements/nft/NFTMarketCollections.jsx | 33 ++++++++++++----- .../elements/nft/NFTMarketCollections.scss | 4 +++ app/components/pages/nft/NFTMarketPage.jsx | 26 +++++++++++--- app/locales/en.json | 8 +++++ app/locales/ru-RU.json | 8 +++++ app/redux/FetchDataSaga.js | 36 ++++++++++++++++++- app/redux/GlobalReducer.js | 17 +++++++++ 7 files changed, 117 insertions(+), 15 deletions(-) diff --git a/app/components/elements/nft/NFTMarketCollections.jsx b/app/components/elements/nft/NFTMarketCollections.jsx index 0da0f8c..2941c77 100644 --- a/app/components/elements/nft/NFTMarketCollections.jsx +++ b/app/components/elements/nft/NFTMarketCollections.jsx @@ -4,25 +4,23 @@ 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: - - {tt('nft_market_page_jsx.all_collections')} - , - 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: @@ -30,12 +28,29 @@ class NFTMarketCollections extends React.Component { , value: nft_coll.name }) + ++i } - selected = selected || tt('nft_market_page_jsx.all_collections') + selected = selected || tt('nft_market_collections_jsx.all_collections') return 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: + + {collName} + , + addon: (coll && coll.sell_order_count) ? + + {coll.sell_order_count} + : null, + } + }} selected={selected} perPage={20}> {selected} diff --git a/app/components/elements/nft/NFTMarketCollections.scss b/app/components/elements/nft/NFTMarketCollections.scss index 7a0b01a..5e3bbd6 100644 --- a/app/components/elements/nft/NFTMarketCollections.scss +++ b/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; diff --git a/app/components/pages/nft/NFTMarketPage.jsx b/app/components/pages/nft/NFTMarketPage.jsx index 0d89537..70b13b3 100644 --- a/app/components/pages/nft/NFTMarketPage.jsx +++ b/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 ?
: null}
@@ -73,10 +80,14 @@ class NFTMarketPage extends React.Component { } + const selected = this.props.routeParams.name + return

{tt('header_jsx.nft_market')}

+ {nft_market_collections && + } {tt('all_nft_page_jsx.title')} @@ -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 })) }, diff --git a/app/locales/en.json b/app/locales/en.json index 869692e..924efce 100644 --- a/app/locales/en.json +++ b/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.", diff --git a/app/locales/ru-RU.json b/app/locales/ru-RU.json index 3de3310..9d9dcd7 100644 --- a/app/locales/ru-RU.json +++ b/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": "Чеки (инвайт-коды) — инструмент для передачи токенов другим людям вне блокчейна. Использовать чек можно двумя способами: перевести его баланс на аккаунт (форма для этого ниже) или зарегистрировать с его помощью новый аккаунт.", diff --git a/app/redux/FetchDataSaga.js b/app/redux/FetchDataSaga.js index f106594..59403b7 100644 --- a/app/redux/FetchDataSaga.js +++ b/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) } -} \ No newline at end of file +} + +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) + } +} diff --git a/app/redux/GlobalReducer.js b/app/redux/GlobalReducer.js index ae8a45c..e37e2fa 100644 --- a/app/redux/GlobalReducer.js +++ b/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 }) => {