HF 30 - NFT, auction...

golos-blockchain · May 30, 2024 · b6fefdf · b6fefdf
1 parent 65cbc9e
commit b6fefdf
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 11 deletions.
diff --git 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 <a href={link} target='_blank' rel='noopener noreferrer'>
             <div className={'NFTTokenItem ' + (isCollection && isMy ? ' collection' : '')}
                 title={(isCollection && isMy) ? tt('nft_tokens_jsx.your_token') : ''}>
@@ -266,7 +278,9 @@ class NFTTokenItem extends Component {
                 {myBet}
                 {myOffer}
                 <div>
-                    <h5 className='token-title'>{data.title}</h5>
+                    <h5 className='token-title' title={titleTitle} style={{ marginTop: titleTop, marginBottom: titleBottom, fontSize: titleFont }}>
+                        {titleShr}
+                    </h5>
                     <span className='token-coll secondary'>
                         <Link to={'/nft-collections/' + token.name} target='_blank' rel='noreferrer nofollow'>
                             {token.name}

diff --git 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 {
                     <CloseButton onClick={hideOpenOrders} />
                     <OpenOrders />
                 </Reveal>}
+                {show_nft_orders_modal && <Reveal onHide={hideNftOrders} show={show_nft_orders_modal} size="large" revealClassName="NFTOrders">
+                    <CloseButton onClick={hideNftOrders} />
+                    <NFTMyOrders isModal={true} />
+                </Reveal>}
                 {show_change_account_modal && <Reveal onHide={hideChangeAccount} show={show_change_account_modal} revealStyle={{ width: '400px' }}>
                     <CloseButton onClick={hideChangeAccount} />
                     <ChangeAccount />
@@ -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
@@ -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 {
                          </div>
                         : null
                     }
+                    {(isMyAccount && nftHold && nftHold.gt(0))
+                        ? <div style={{paddingRight: isMyAccount ? "0.85rem" : null}}>
+                            <Link to={'/@' + account.get('name') + '/nft-orders'} onClick={e => showNftOrders(e)}>
+                                <small><LiteTooltip t={tt('g.nft_orders')}>+ {nftHold.toString()}</LiteTooltip></small>
+                            </Link>
+                         </div>
+                        : null
+                    }
                     <div>{isMyAccount ? <a
                         href='/convert/YMRUB/GOLOS?buy'
                         target='_blank'
@@ -695,6 +710,9 @@ export default connect(
             dispatch(user.actions.setOpenOrdersDefaults(defaults));
             dispatch(user.actions.showOpenOrders());
         },
+        showNftOrders: () => {
+            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
@@ -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 = <table><tbody>
+        res = <table style={{marginTop: '1rem'}}><tbody>
             {res}
         </tbody></table>
     } 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 {
                 <NFTSmallIcon image={image} size='mini'
                     href={url} />
             </td>
-            <td style={{ width: '33%' }}>
+            <td style={{ width: '33%' }} title={shrinked && title}>
                 <Link to={url} target='_blank' rel='noreferrer nofollow'>
-                    {title}
+                    {titleShrinked}
                 </Link>
             </td>
             <td style={{ width: '33%' }}>
@@ -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 {
                 <NFTSmallIcon image={image} size='mini'
                     href={url} />
             </td>
-            <td style={{ width: '33%' }}>
+            <td style={{ width: '33%' }} title={shrinked && title}>
                 <Link to={url} target='_blank' rel='noreferrer nofollow'>
-                    {title}
+                    {titleShrinked}
                 </Link>
             </td>
             <td style={{ width: '16%' }}>
@@ -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 <NotFound.component />
+        }
 
         if (!my_nft_offers) {
             return <div className="UserWallet NFTMyOrders">
@@ -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
@@ -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 && <NotifiCounter fields='nft_receive' /> },
             {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 && <NotifiCounter fields='nft_token_sold,nft_buy_offer' /> },
         ];
+        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 && <NotifiCounter fields='nft_token_sold,nft_buy_offer' /> })
 
         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
@@ -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
@@ -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) },