HF 30 - NFT, auction...

golos-blockchain · May 30, 2024 · 9b1021b · 9b1021b
1 parent b6fefdf
commit 9b1021b
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 30 deletions.
diff --git a/app/components/elements/FitText.jsx b/app/components/elements/FitText.jsx
@@ -0,0 +1,56 @@
+import React from 'react'
+
+const MAX_SCALE = 6
+
+export default class FitText extends React.Component {
+    state = { scale: 0 }
+
+    constructor(props) {
+        super(props)
+        this.span = React.createRef()
+    }
+
+    onRender = () => {
+        console.timeEnd('R1')
+        const { current } = this.span
+        if (!current || this.state.scaled) return
+        const width = current.offsetWidth
+        const { maxWidth } = this.props
+        if (width > maxWidth) {
+            const { scale } = this.state
+            if (scale === MAX_SCALE) {
+                this.setState({
+                    scaled: true
+                })
+                return
+            }
+            this.setState({
+                scale: scale + 1
+            })
+        } else {
+            this.setState({
+                scaled: true
+            })
+        }
+    }
+
+    render() {
+        let { text, maxWidth, shrink, shrink2 } = this.props
+        const { scale } = this.state
+
+        let fontSize
+        if (scale === 1) {
+            fontSize = '90%'
+        } else if (scale === 2) {
+            fontSize = '85%'
+        } else if (scale >= 3) {
+            fontSize = '80%'
+            if (shrink)
+                text = text.substring(0, shrink - (5 * (scale - 3))) + '...'
+        }
+
+        return <span ref={this.span} style={{ fontSize, }}>
+        <img style={{ display: 'none' }} src={Math.random().toString()} onLoad={this.onRender} onError={this.onRender} />
+        {text}</span>
+    }
+}
diff --git a/app/components/elements/TimeExactWrapper.jsx b/app/components/elements/TimeExactWrapper.jsx
@@ -50,7 +50,7 @@ function formatTimeExact(dt, maxDepth = 2, shorter = false) {
 }
 
 export default class TimeExactWrapper extends React.Component {
-    updateState = () => {
+    updateState = (setIt = true) => {
         let { date } = this.props
         if (date && /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d$/.test(date)) {
             date = date + 'Z' // Firefox really wants this Z (Zulu)
@@ -60,7 +60,7 @@ export default class TimeExactWrapper extends React.Component {
             dt,
             ...formatTimeExact(dt, 2, this.props.shorter)
         }
-        this.setState(state)
+        if (setIt) this.setState(state)
         return state
     }
 
@@ -76,7 +76,7 @@ export default class TimeExactWrapper extends React.Component {
     render() {
         const { className, tooltipRender, contentRender } = this.props
         let state = this.state
-        state = state || this.updateState()
+        state = state || this.updateState(false)
         let { dt, result } = state
         let tooltip = dt.toLocaleString()
         tooltip = tooltipRender ? tooltipRender(tooltip) : tooltip

diff --git a/app/components/elements/nft/NFTTokenItem.jsx b/app/components/elements/nft/NFTTokenItem.jsx
@@ -6,6 +6,7 @@ import tt from 'counterpart'
 import { Asset } from 'golos-lib-js/lib/utils'
 
 import DropdownMenu from 'app/components/elements/DropdownMenu'
+import FitText from 'app/components/elements/FitText'
 import Icon from 'app/components/elements/Icon'
 import NFTTokenSellPopup from 'app/components/elements/nft/NFTTokenSellPopup'
 import PriceIcon from 'app/components/elements/nft/PriceIcon'
@@ -157,6 +158,10 @@ class NFTTokenItem extends Component {
         const isCollection = page === 'collection'
         const isMarket = page === 'market'
 
+        const preventNavigate = (e) => {
+            e.preventDefault()
+        }
+
         let myBet
         if (my_bet) {
             const pr = Asset(my_bet.price)
@@ -171,7 +176,8 @@ class NFTTokenItem extends Component {
                 })
             }
             myBet = <span className='token-owner my-bet-offer'
-                        title={tt('nft_tokens_jsx.you_bet_is') + pr.floatString}>
+                        title={tt('nft_tokens_jsx.you_bet_is') + pr.floatString}
+                        onClick={preventNavigate}>
                 <PriceIcon text={a => {
                         return pr.amountFloat
                     }} asset={pr} assets={assets} />
@@ -193,7 +199,8 @@ class NFTTokenItem extends Component {
                 })
             }
             myOffer = <span className='token-owner my-bet-offer'
-                        title={tt('nft_tokens_jsx.you_offer_is') + pr.floatString}>
+                        title={tt('nft_tokens_jsx.you_offer_is') + pr.floatString}
+                        onClick={preventNavigate}>
                 <PriceIcon text={a => {
                         return pr.amountFloat
                     }} asset={pr} assets={assets} />
@@ -257,10 +264,10 @@ class NFTTokenItem extends Component {
         let titleFont, titleTop, titleBottom, titleTitle
         const titleLen = titleShr.length
         if (titleLen > 23) {
-            titleFont = '90%'
+            titleFont = '80%'
             titleTop = titleBottom = '0.42rem'
         }
-        if (titleLen > 35) {
+        if (titleLen > 32) {
             titleShr = titleShr.substring(0, 30) + '...'
             titleTitle = data.title
         }
@@ -278,8 +285,8 @@ class NFTTokenItem extends Component {
                 {myBet}
                 {myOffer}
                 <div>
-                    <h5 className='token-title' title={titleTitle} style={{ marginTop: titleTop, marginBottom: titleBottom, fontSize: titleFont }}>
-                        {titleShr}
+                    <h5 className='token-title' title={titleTitle}>
+                        <FitText text={data.title} maxWidth={200} shrink={27} />
                     </h5>
                     <span className='token-coll secondary'>
                         <Link to={'/nft-collections/' + token.name} target='_blank' rel='noreferrer nofollow'>

diff --git a/app/components/modules/nft/NFTMyOrders.jsx b/app/components/modules/nft/NFTMyOrders.jsx
@@ -23,11 +23,11 @@ const wrapAsTable = (immData, onRender, emptyHint) => {
         res.push(onRender(item))
     }
     if (res.length) {
-        res = <table style={{marginTop: '1rem'}}><tbody>
+        res = <table style={{ marginTop: '0.75rem' }}><tbody>
             {res}
         </tbody></table>
     } else {
-        res = emptyHint
+        res = <div>{emptyHint}</div>
     }
 
     return res
@@ -37,11 +37,15 @@ class NFTMyOrders extends React.Component {
     state = {}
 
     componentDidMount() {
-        this.refetch()
+        this.refetch(true)
     }
 
-    refetch = () => {
-        this.props.fetchNftOrders()
+    refetch = (init = false) => {
+        const { isModal } = this.props
+        this.props.fetchNftOrders(isModal && 'GOLOS')
+        if (!init && isModal) {
+            this.props.fetchState() // update nft_hold_balance in wallet
+        }
     }
 
     cancelOrder = (e, owner, order_id, tokenTitle) => {
@@ -161,22 +165,63 @@ class NFTMyOrders extends React.Component {
         </tr>
     }
 
+    _renderTabs = () => {
+        const { section } = this.state
+
+        let offers = <h4>{tt('nft_my_orders_jsx.offers')}</h4>
+        let bets = <h4>{tt('nft_my_orders_jsx.bets')}</h4>
+
+        const wrapLink = (item, tab) => {
+            const switchTab = (e) => {
+                e.preventDefault()
+                this.setState({
+                    section: tab
+                })
+            }
+            return <a href='#' onClick={e => switchTab(e)}>{item}</a>
+        }
+
+        if (section === 'bets') {
+            offers = wrapLink(offers, 'offers')
+        } else {
+            bets = wrapLink(bets, 'bets')
+        }
+
+        return <div>
+            {offers}
+            <h4>&nbsp;/&nbsp;</h4>
+            {bets}
+        </div>
+    }
+
     _renderOffers = (assets) => {
-        let { my_nft_offers } = this.props
-        return wrapAsTable(my_nft_offers, no => this._renderOffer(no, assets),
+        let { my_nft_offers, isModal } = this.props
+
+        const offers = wrapAsTable(my_nft_offers, no => this._renderOffer(no, assets),
             tt('nft_my_orders_jsx.offers_empty'))
+
+        return <React.Fragment>
+            {!isModal && <h4>{tt('nft_my_orders_jsx.offers')}</h4>}
+            {offers}
+        </React.Fragment>
     }
 
     _renderBets = (assets) => {
-        let { my_nft_bets } = this.props
+        let { my_nft_bets, isModal } = this.props
 
-        return wrapAsTable(my_nft_bets, nb => this._renderBet(nb, assets),
+        const bets = wrapAsTable(my_nft_bets, nb => this._renderBet(nb, assets),
             tt('nft_my_orders_jsx.bets_empty'))
+
+        return <React.Fragment>
+            {!isModal && <h4>{tt('nft_my_orders_jsx.bets')}</h4>}
+            {bets}
+        </React.Fragment>
     }
 
     render() {
         let { my_nft_offers, my_nft_bets, nft_assets,
             current_user, account, isModal } = this.props
+        const { section } = this.state
 
         const username = session.load().currentName
         if (!isModal && (!username || !account || username !== account.name)) {
@@ -199,11 +244,10 @@ class NFTMyOrders extends React.Component {
         return (<div className="UserWallet NFTMyOrders">
             <div className="row">
                 <div className="column small-12">
-                    <h4>{tt('nft_my_orders_jsx.offers')}</h4>
-                    {this._renderOffers(assets)}
-                    <hr />
-                    <h4>{tt('nft_my_orders_jsx.bets')}</h4>
-                    {this._renderBets(assets)}
+                    {isModal && this._renderTabs()}
+                    {(!isModal || section !== 'bets') && this._renderOffers(assets)}
+                    {!isModal && <hr />}
+                    {(!isModal || section === 'bets') && this._renderBets(assets)}
                 </div>
             </div>
         </div>);
@@ -224,8 +268,12 @@ export default connect(
         }
     },
     dispatch => ({
-        fetchNftOrders: () => {
-            dispatch(g.actions.fetchNftOrders({ }))
+        fetchState: () => {
+            const pathname = window.location.pathname
+            dispatch({type: 'FETCH_STATE', payload: {pathname}})
+        },
+        fetchNftOrders: (sym = undefined) => {
+            dispatch(g.actions.fetchNftOrders({ sym }))
         },
         cancelOrder: (
             owner, order_id, tokenTitle, successCallback, errorCallback

diff --git a/app/components/modules/nft/NFTMyOrders.scss b/app/components/modules/nft/NFTMyOrders.scss
@@ -8,4 +8,13 @@
     .button {
         margin-bottom: 0px;
     }
+
+    h4 {
+        display: inline-block;
+    }
+    a {
+        h4 {
+            text-decoration: underline;
+        }
+    }
 }
diff --git a/app/components/pages/nft/NFTMarketPage.jsx b/app/components/pages/nft/NFTMarketPage.jsx
@@ -67,7 +67,7 @@ class NFTMarketPage extends React.Component {
 
             const username = currentUser && currentUser.get('username')
 
-            content = <div>
+            content = <div style={{ marginTop: '0.9rem' }}>
                 {items}
                 {next_from ? <div className='load-more' key='load_more'>
                     <center><button className='button hollow small' onClick={

diff --git a/app/components/pages/nft/NFTTokenPage.jsx b/app/components/pages/nft/NFTTokenPage.jsx
@@ -271,7 +271,7 @@ class NFTTokenPage extends Component {
                 return null
             }
         }
-        return <tr>
+        return <tr key={i}>
             <td><TimeAgoWrapper date={trx.timestamp} /></td>
             <td>{content}</td>
         </tr>

diff --git a/app/redux/FetchDataSaga.js b/app/redux/FetchDataSaga.js
@@ -864,24 +864,30 @@ export function* watchFetchNftOrders() {
     yield takeLatest('global/FETCH_NFT_ORDERS', fetchNftOrders)
 }
 
-export function* fetchNftOrders({ payload: { } }) {
+export function* fetchNftOrders({ payload: { sym } }) {
     try {
         const acc = session.load().currentName
 
         if (!acc) return
 
-        const nft_offers = yield call([api, api.getNftOrdersAsync], {
+        const symFilter = (obj) => {
+            return !sym || obj.price.endsWith(' ' + sym)
+        }
+
+        let nft_offers = yield call([api, api.getNftOrdersAsync], {
             owner: acc,
             limit: 100,
             type: 'buying',
             tokens: true,
         })
+        nft_offers = nft_offers.filter(symFilter)
 
-        const nft_bets = yield call([api, api.getNftBetsAsync], {
+        let nft_bets = yield call([api, api.getNftBetsAsync], {
             owner: acc,
             limit: 100,
             tokens: true,
         })
+        nft_bets = nft_bets.filter(symFilter)
 
         let nft_assets