Skip to content

Commit

Permalink
HF 30 - NFT, auction...
Browse files Browse the repository at this point in the history
  • Loading branch information
@1aerostorm
1aerostorm committed May 31, 2024
1 parent 63fc102 commit 2e9c1d2
Show file tree
Hide file tree
Showing 6 changed files with 163 additions and 36 deletions.
6 changes: 4 additions & 2 deletions app/components/elements/FitText.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,14 @@ export default class FitText extends React.Component {
width = tryIt(text, fontSize)
if (width > maxWidth) {
fontSize = '80%'
for (let i = 0; i < 10; ++i) {
for (let i = 0; i < 5; ++i) {
width = tryIt(text, fontSize)
if (width > maxWidth) {
if (shrink) {
text = this.props.text
text = text.substring(0, text.length - (2 * i)) + '...'
const step = 2 * i
const stepBig = 5 * i
text = text.substring(0, Math.min(shrink - stepBig, text.length - step)) + '...'
shrinked = true
}
} else {
Expand Down
16 changes: 14 additions & 2 deletions app/components/elements/nft/NFTMarketCollections.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ class NFTMarketCollections extends React.Component {
++i
}

if (colls.length === 1) {
return null
}

selected = selected || tt('nft_market_collections_jsx.all_collections')

return <PagedDropdownMenu className='NFTMarketCollections Witnesses__vote-list' el='div' items={colls}
Expand All @@ -39,15 +43,23 @@ class NFTMarketCollections extends React.Component {
const collImg = (coll && coll.image) || NFTImageStub()
const collName = coll ? coll.name : tt('nft_market_collections_jsx.all_collections')

let sellCount
if (coll) {
sellCount = parseInt(coll.sell_order_count)
if (coll.auction_count) {
sellCount += parseInt(coll.auction_count)
}
}

return {
...item,
label: <React.Fragment>
<NFTSmallIcon image={collImg} />
{collName}
</React.Fragment>,
addon: (coll && coll.sell_order_count) ?
addon: sellCount ?
<span style={{ position: 'absolute', right: '10px' }} title={tt('nft_market_collections_jsx.order_count', {count: coll.sell_order_count})}>
{coll.sell_order_count}
{sellCount}
</span> : null,
}
}}
Expand Down
28 changes: 14 additions & 14 deletions app/components/elements/nft/NFTTokenItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class NFTTokenItem extends Component {
this.sellPopupRef = React.createRef()
}

cancelOrder = async (e, tokenIdx) => {
cancelOrder = async (e) => {
e.preventDefault()
const { currentUser } = this.props
const order = this.getOrder()
Expand All @@ -38,7 +38,7 @@ class NFTTokenItem extends Component {
})
}

cancelAuction = async (e, tokenIdx) => {
cancelAuction = async (e) => {
e.preventDefault()
const { token, currentUser } = this.props
const { token_id } = token
Expand All @@ -51,7 +51,7 @@ class NFTTokenItem extends Component {
})
}

buyToken = async (e, tokenIdx) => {
buyToken = async (e) => {
e.preventDefault()
const { token, currentUser } = this.props
const { token_id, json_metadata } = token
Expand All @@ -78,7 +78,7 @@ class NFTTokenItem extends Component {
})
}

burnIt = async (e, tokenIdx) => {
burnIt = async (e) => {
e.preventDefault()
const { token, currentUser } = this.props
const { token_id } = token
Expand Down Expand Up @@ -139,7 +139,7 @@ class NFTTokenItem extends Component {

if (isMy && !selling) {
kebabItems.unshift({ link: '#', onClick: e => {
this.burnIt(e, tokenIdx)
this.burnIt(e)
}, value: tt('g.burn') })
}

Expand All @@ -149,15 +149,15 @@ class NFTTokenItem extends Component {
}, value: tt('g.transfer') })
}

const isCollection = page === 'collection'
const isMarket = page === 'market'

if (!is_auction && !isMy && !my_offer) {
kebabItems.unshift({ link: '#', onClick: e => {
this.props.showPlaceOfferBet(e, tokenIdx)
this.props.showPlaceOfferBet(e, isMarket ? token : tokenIdx)
}, value: tt('nft_tokens_jsx.place_offer') })
}

const isCollection = page === 'collection'
const isMarket = page === 'market'

const preventNavigate = (e) => {
e.preventDefault()
}
Expand Down Expand Up @@ -217,10 +217,10 @@ class NFTTokenItem extends Component {
</DropdownMenu> : null}
{isMy && !selling && <button className='button slim float-right' onClick={e => this.props.showSell(e, tokenIdx)}>{tt('g.sell')}</button>}
{isMy && selling && <button className='button slim alert hollow noborder float-right' title={tt('nft_tokens_jsx.cancel_hint')}
onClick={e => this.cancelOrder(e, tokenIdx)}>
onClick={e => this.cancelOrder(e)}>
{tt('g.cancel')}</button>}
{!isMy && selling && <button className='button slim float-right' title={tt('nft_tokens_jsx.buy2') + price.floatString}
onClick={e => this.buyToken(e, tokenIdx)}>
onClick={e => this.buyToken(e)}>
{tt('nft_tokens_jsx.buy')}</button>}
</div>
} else if (is_auction) {
Expand All @@ -236,10 +236,10 @@ class NFTTokenItem extends Component {
/>
</span>
{isMy && <button className='button slim alert hollow noborder float-right' title={tt('nft_tokens_jsx.stop_auction')}
onClick={e => this.cancelAuction(e, tokenIdx)}>
onClick={e => this.cancelAuction(e)}>
{tt('g.cancel')}</button>}
{!isMy && !myBet && <button className='button slim float-right' title={tt('nft_tokens_jsx.min_price') + ' ' + auction_min_price.floatString}
onClick={e => this.props.showPlaceOfferBet(e, tokenIdx, auction_min_price)}>
onClick={e => this.props.showPlaceOfferBet(e, isMarket ? token : tokenIdx, auction_min_price)}>
{tt('nft_tokens_jsx.place_bet2')}</button>}
</div>
} else {
Expand Down Expand Up @@ -274,7 +274,7 @@ class NFTTokenItem extends Component {
{myOffer}
<div>
<h5 className='token-title'>
<FitText text={data.title} maxWidth={200} shrink={27} />
<FitText text={data.title} maxWidth={200} shrink={40} />
</h5>
<span className='token-coll secondary'>
<Link to={'/nft-collections/' + token.name} target='_blank' rel='noreferrer nofollow'>
Expand Down
65 changes: 60 additions & 5 deletions app/components/pages/nft/NFTMarketPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,18 @@ import React from 'react'
import { connect, } from 'react-redux'
import { Link } from 'react-router'
import tt from 'counterpart'
import Reveal from 'react-foundation-components/lib/global/reveal'

import LoadingIndicator from 'app/components/elements/LoadingIndicator'
import NFTMarketCollections from 'app/components/elements/nft/NFTMarketCollections'
import NFTTokenItem from 'app/components/elements/nft/NFTTokenItem'
import NFTPlaceOfferBet from 'app/components/modules/nft/NFTPlaceOfferBet'
import g from 'app/redux/GlobalReducer'
import session from 'app/utils/session'

class NFTMarketPage extends React.Component {
state = {}

componentDidMount() {
this.props.fetchNftMarketCollections('')
this.refetch()
Expand All @@ -27,48 +31,82 @@ class NFTMarketPage extends React.Component {
this.props.fetchNftMarket(curName, collName, 0, this.sort, this.sortReversed)
}

showPlaceOfferBet = (e, token, minPrice) => {
e.preventDefault()
this.setState({
showPlaceOfferBet: true,
token,
minPrice
})
}

hidePlaceOfferBet = () => {
this.setState({
showPlaceOfferBet: false,
})
}

render() {
const { currentUser, nft_market_collections, nft_orders, own_nft_orders, nft_assets, routeParams } = this.props
const { currentUser, nft_market_collections, nft_orders, own_nft_orders,
nft_tokens, own_nft_tokens, nft_assets, routeParams } = this.props

let content
const orders = nft_orders ? nft_orders.toJS().data : null
const own_orders = own_nft_orders ? own_nft_orders.toJS().data : null
const tokens = nft_tokens ? nft_tokens.toJS().data : null
const own_tokens = own_nft_tokens ? own_nft_tokens.toJS().data : null
const assets = nft_assets ? nft_assets.toJS() : {}

const next_from = nft_orders && nft_orders.get('next_from')

if (!orders || !own_orders) {
if (!orders || !own_orders || !tokens || !own_tokens) {
content = <LoadingIndicator type='circle' />
} else {
let items = []
if (!orders.length) {
if (!orders.length && !tokens.length) {
items = tt('nft_market_page_jsx.no_orders')
} else {
for (let i = 0; i < tokens.length; ++i) {
const token = tokens[i]
items.push(<NFTTokenItem key={i} token={token} tokenIdx={i}
assets={assets}
showPlaceOfferBet={this.showPlaceOfferBet}
refetch={this.refetch}
page='market' />)
}
for (let i = 0; i < orders.length; ++i) {
const order = orders[i]
items.push(<NFTTokenItem key={i} token={order.token} tokenOrder={order} tokenIdx={i}
assets={assets}
showPlaceOfferBet={this.showPlaceOfferBet}
refetch={this.refetch}
page='market' />)
}
}

let ownItems = []
if (!own_orders.length) {
if (!own_orders.length && !own_tokens.length) {
ownItems = tt('nft_market_page_jsx.no_own_orders')
} else {
for (let i = 0; i < own_tokens.length; ++i) {
const token = own_tokens[i]
ownItems.push(<NFTTokenItem key={i} token={token} tokenIdx={i}
assets={assets}
showPlaceOfferBet={this.showPlaceOfferBet}
refetch={this.refetch} />)
}
for (let i = 0; i < own_orders.length; ++i) {
const order = own_orders[i]
ownItems.push(<NFTTokenItem key={i} token={order.token} tokenOrder={order} tokenIdx={i}
assets={assets}
showPlaceOfferBet={this.showPlaceOfferBet}
refetch={this.refetch} />)
}
}

const username = currentUser && currentUser.get('username')

content = <div style={{ marginTop: '0.9rem' }}>
<h5>AvaSlon21veka</h5>
{items}
{next_from ? <div className='load-more' key='load_more'>
<center><button className='button hollow small' onClick={
Expand All @@ -83,6 +121,8 @@ class NFTMarketPage extends React.Component {

const selected = this.props.routeParams.name

const { showPlaceOfferBet, tokenIdx } = this.state

return <div className='row'>
<div className='NFTMarketPage'>
<div style={{ marginTop: '0.25rem' }}>
Expand All @@ -95,6 +135,16 @@ class NFTMarketPage extends React.Component {
</div>
{content}
</div>

<Reveal show={showPlaceOfferBet} onHide={this.hidePlaceOfferBet} revealStyle={{ width: '450px' }}>
<NFTPlaceOfferBet
currentUser={currentUser}
onClose={this.hidePlaceOfferBet}
token={this.state.token}
refetch={this.refetch}
minPrice={this.state.minPrice}
/>
</Reveal>
</div>
}
}
Expand All @@ -109,13 +159,18 @@ module.exports = {
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')
// auctions
const nft_tokens = state.global.get('nft_tokens')
const own_nft_tokens = state.global.get('own_nft_tokens')

return {
currentUser,
currentAccount,
nft_market_collections,
nft_orders,
own_nft_orders,
nft_tokens,
own_nft_tokens,
nft_assets: state.global.get('nft_assets')
}
},
Expand Down
Loading

0 comments on commit 2e9c1d2

Please sign in to comment.