From b6fefdf668165003fffd5a312552e7a7dff5286b Mon Sep 17 00:00:00 2001 From: 1aerostorm Date: Thu, 30 May 2024 16:50:28 +0300 Subject: [PATCH] HF 30 - NFT, auction... --- app/components/elements/nft/NFTTokenItem.jsx | 16 ++++++++- app/components/modules/Modals.jsx | 13 +++++++ app/components/modules/UserWallet.jsx | 18 ++++++++++ app/components/modules/nft/NFTMyOrders.jsx | 36 ++++++++++++++++---- app/components/pages/UserProfile.jsx | 6 ++-- app/redux/FetchDataSaga.js | 1 - app/redux/User.js | 3 ++ 7 files changed, 82 insertions(+), 11 deletions(-) diff --git a/app/components/elements/nft/NFTTokenItem.jsx b/app/components/elements/nft/NFTTokenItem.jsx index dfbd1f8..e39a870 100644 --- a/app/components/elements/nft/NFTTokenItem.jsx +++ b/app/components/elements/nft/NFTTokenItem.jsx @@ -253,6 +253,18 @@ class NFTTokenItem extends Component { let tokenImage = image.startsWith('http') ? proxifyNFTImage(image) : image + let titleShr = data.title + let titleFont, titleTop, titleBottom, titleTitle + const titleLen = titleShr.length + if (titleLen > 23) { + titleFont = '90%' + titleTop = titleBottom = '0.42rem' + } + if (titleLen > 35) { + titleShr = titleShr.substring(0, 30) + '...' + titleTitle = data.title + } + return
@@ -266,7 +278,9 @@ class NFTTokenItem extends Component { {myBet} {myOffer}
-
{data.title}
+
+ {titleShr} +
{token.name} diff --git a/app/components/modules/Modals.jsx b/app/components/modules/Modals.jsx index 8968123..b9e9dd3 100644 --- a/app/components/modules/Modals.jsx +++ b/app/components/modules/Modals.jsx @@ -17,6 +17,7 @@ import shouldComponentUpdate from 'app/utils/shouldComponentUpdate'; import PowerCalc from 'app/components/modules/PowerCalc' import Powerdown from 'app/components/modules/Powerdown'; import OpenOrders from 'app/components/modules/OpenOrders'; +import NFTMyOrders from 'app/components/modules/nft/NFTMyOrders' let keyIndex = 0; @@ -40,6 +41,7 @@ class Modals extends React.Component { notifications: PropTypes.object, removeNotification: PropTypes.func, show_open_orders_modal: PropTypes.bool, + show_nft_orders_modal: PropTypes.bool, hideOpenOrders: PropTypes.func.isRequired, }; @@ -77,7 +79,9 @@ class Modals extends React.Component { notifications, removeNotification, show_open_orders_modal, + show_nft_orders_modal, hideOpenOrders, + hideNftOrders, } = this.props; const notifications_array = notifications ? notifications.toArray().map(n => { @@ -115,6 +119,10 @@ class Modals extends React.Component { } + {show_nft_orders_modal && + + + } {show_change_account_modal && @@ -153,6 +161,7 @@ export default connect( show_app_download_modal: state.user.get('show_app_download_modal'), notifications: state.app.get('notifications'), show_open_orders_modal: state.user.get('show_open_orders_modal'), + show_nft_orders_modal: state.user.get('show_nft_orders_modal'), } }, dispatch => ({ @@ -199,5 +208,9 @@ export default connect( if (e) e.preventDefault(); dispatch(user.actions.hideOpenOrders()) }, + hideNftOrders: e => { + if (e) e.preventDefault(); + dispatch(user.actions.hideNftOrders()) + }, }) )(Modals) diff --git a/app/components/modules/UserWallet.jsx b/app/components/modules/UserWallet.jsx index aaaebb9..e691519 100644 --- a/app/components/modules/UserWallet.jsx +++ b/app/components/modules/UserWallet.jsx @@ -241,6 +241,8 @@ class UserWallet extends React.Component { const sbdOrders = parseFloat(account.get('market_sbd_balance')); const steemOrders = parseFloat(account.get('market_balance')); + let nftHold = account.get('nft_hold_balance') + nftHold = nftHold && Asset(nftHold) /// transfer log let idx = 0 @@ -333,6 +335,11 @@ class UserWallet extends React.Component { this.props.showOpenOrders({ sym, }); }; + const showNftOrders = (e) => { + e.preventDefault() + this.props.showNftOrders() + } + const showPowerCalc = (e) => { e.preventDefault() this.props.showPowerCalc({ account: account.get('name') }) @@ -523,6 +530,14 @@ class UserWallet extends React.Component {
: null } + {(isMyAccount && nftHold && nftHold.gt(0)) + ?
+ showNftOrders(e)}> + + {nftHold.toString()} + +
+ : null + }
{isMyAccount ? { + dispatch(user.actions.showNftOrders()); + }, showPowerCalc: ({ account }) => { dispatch(user.actions.setPowerCalcDefaults({ account })) dispatch(user.actions.showPowerCalc()) diff --git a/app/components/modules/nft/NFTMyOrders.jsx b/app/components/modules/nft/NFTMyOrders.jsx index 0d4c1e9..64d3810 100644 --- a/app/components/modules/nft/NFTMyOrders.jsx +++ b/app/components/modules/nft/NFTMyOrders.jsx @@ -10,8 +10,10 @@ import LoadingIndicator from 'app/components/elements/LoadingIndicator' import NFTSmallIcon from 'app/components/elements/nft/NFTSmallIcon' import PriceIcon from 'app/components/elements/nft/PriceIcon' import TimeExactWrapper from 'app/components/elements/TimeExactWrapper' +import NotFound from 'app/components/pages/NotFound' import g from 'app/redux/GlobalReducer' import transaction from 'app/redux/Transaction' +import session from 'app/utils/session' const wrapAsTable = (immData, onRender, emptyHint) => { immData = immData.get('data').toJS() @@ -21,7 +23,7 @@ const wrapAsTable = (immData, onRender, emptyHint) => { res.push(onRender(item)) } if (res.length) { - res = + res =
{res}
} else { @@ -76,6 +78,10 @@ class NFTMyOrders extends React.Component { const title = data.title || (name + ' #' + token_id) + let titleShrinked = title.substring(0, 37) + const shrinked = titleShrinked !== title + if (shrinked) titleShrinked += '...' + const pr = Asset(price) const url = '/nft-tokens/' + token_id @@ -85,9 +91,9 @@ class NFTMyOrders extends React.Component { - + - {title} + {titleShrinked} @@ -115,6 +121,10 @@ class NFTMyOrders extends React.Component { const title = data.title || (name + ' #' + token_id) + let titleShrinked = title.substring(0, 37) + const shrinked = titleShrinked !== title + if (shrinked) titleShrinked += '...' + const pr = Asset(price) const url = '/nft-tokens/' + token_id @@ -124,9 +134,9 @@ class NFTMyOrders extends React.Component { - + - {title} + {titleShrinked} @@ -165,7 +175,16 @@ class NFTMyOrders extends React.Component { } render() { - let { my_nft_offers, my_nft_bets, nft_assets } = this.props + let { my_nft_offers, my_nft_bets, nft_assets, + current_user, account, isModal } = this.props + + const username = session.load().currentName + if (!isModal && (!username || !account || username !== account.name)) { + if (account && account.name) { + window.location.href = '/@' + account.name + } + return + } if (!my_nft_offers) { return
@@ -194,11 +213,14 @@ class NFTMyOrders extends React.Component { export default connect( // mapStateToProps (state, ownProps) => { + const {locationBeforeTransitions: {pathname}} = state.routing + const usernameFromRoute = pathname.split(`/`)[1].substring(1) return { ...ownProps, my_nft_offers: state.global.get('my_nft_offers'), my_nft_bets: state.global.get('my_nft_bets'), - nft_assets: state.global.get('nft_assets') + nft_assets: state.global.get('nft_assets'), + usernameFromRoute } }, dispatch => ({ diff --git a/app/components/pages/UserProfile.jsx b/app/components/pages/UserProfile.jsx index c993f48..1f1dfb8 100644 --- a/app/components/pages/UserProfile.jsx +++ b/app/components/pages/UserProfile.jsx @@ -393,9 +393,11 @@ export default class UserProfile extends React.Component { let nftMenu = [ {link: `/@${accountname}/nft-tokens`, label: tt('g.nft_tokens'), value: tt('g.nft_tokens'), addon: isMyAccount && }, {link: `/@${accountname}/nft-collections`, label: tt('g.nft_collections'), value: tt('g.nft_collections')}, - {link: `/@${accountname}/nft-orders`, label: tt('g.nft_orders'), value: tt('g.nft_orders'), }, - {link: `/@${accountname}/nft-history`, label: tt('g.nft_history'), value: tt('g.nft_history'), addon: isMyAccount && }, ]; + if (isMyAccount) { + nftMenu.push({link: `/@${accountname}/nft-orders`, label: tt('g.nft_orders'), value: tt('g.nft_orders'), }) + } + nftMenu.push({link: `/@${accountname}/nft-history`, label: tt('g.nft_history'), value: tt('g.nft_history'), addon: isMyAccount && }) let permissionsMenu = [ {link: `/@${accountname}/permissions`, label: tt('g.keys'), value: tt('g.keys')}, diff --git a/app/redux/FetchDataSaga.js b/app/redux/FetchDataSaga.js index 4cb1db1..d226f12 100644 --- a/app/redux/FetchDataSaga.js +++ b/app/redux/FetchDataSaga.js @@ -70,7 +70,6 @@ function* fillNftTokenOrders(select_token_ids, tokens_by_id) { if (acc) { const nft_orders = yield call([api, api.getNftOrdersAsync], { - owner: acc, select_token_ids, limit: 100, type: 'buying' diff --git a/app/redux/User.js b/app/redux/User.js index 0532e7b..b2a3d84 100644 --- a/app/redux/User.js +++ b/app/redux/User.js @@ -9,6 +9,7 @@ const defaultState = fromJS({ show_transfer_modal: false, show_convert_assets_modal: false, show_open_orders_modal: false, + show_nft_orders_modal: false, show_change_account_modal: false, show_add_account_modal: false, show_app_download_modal: false, @@ -97,6 +98,8 @@ export default createModule({ { action: 'SHOW_OPEN_ORDERS', reducer: state => state.set('show_open_orders_modal', true) }, { action: 'HIDE_OPEN_ORDERS', reducer: state => state.set('show_open_orders_modal', false) }, { action: 'SET_OPEN_ORDERS_DEFAULTS', reducer: (state, {payload}) => state.set('open_orders_defaults', fromJS(payload)) }, + { action: 'SHOW_NFT_ORDERS', reducer: state => state.set('show_nft_orders_modal', true) }, + { action: 'HIDE_NFT_ORDERS', reducer: state => state.set('show_nft_orders_modal', false) }, { action: 'SHOW_CHANGE_ACCOUNT', reducer: state => state.set('show_change_account_modal', true) }, { action: 'HIDE_CHANGE_ACCOUNT', reducer: state => state.set('show_change_account_modal', false) }, { action: 'SHOW_ADD_ACCOUNT', reducer: state => state.set('show_add_account_modal', true) },