mirror of
https://github.com/hanzoai/etherplate.git
synced 2026-10-30 18:37:10 +00:00
Charles Bergeron
d50b5a7d08
* added 'Ownable' concept for contract (the address who deploys the contract is the owner * clean up the getToken() info by collapsing the data from 2 calls into 1, which means only 1 call to the contract instead of 2 for each piece of data (would be huge if there were say 12 pieces of data, 1 `view` call instead of 12 to the contract
101 lines
2.3 KiB
React
101 lines
2.3 KiB
React
import React, {
|
|
Component
|
|
} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
import Loading from '@/components/loading'
|
|
import { Address } from '@/components/address'
|
|
import nfTokenTypeImageUrl from '@/services/nfToken-type-image-url'
|
|
import getToken from '@/services/get-token'
|
|
|
|
import PlaceholderImg from '@/../images/placeholder.png'
|
|
|
|
const TokenListItem = class extends Component {
|
|
constructor (props) {
|
|
super(props)
|
|
this.state = {
|
|
type: null,
|
|
title: ''
|
|
}
|
|
}
|
|
|
|
componentDidMount () {
|
|
if (typeof this.props.token.args !== 'undefined')
|
|
this.getTokenFromBlockchain();
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
if (
|
|
prevState.type === null
|
|
&& typeof prevProps.token.args === 'undefined'
|
|
&& typeof this.props.token.args !== 'undefined'
|
|
)
|
|
this.getTokenFromBlockchain();
|
|
}
|
|
|
|
getTokenFromBlockchain() {
|
|
let tokenId = this.props.token.args.tokenId.toNumber()
|
|
getToken(tokenId, window.web3).then((values) => {
|
|
this.setState({
|
|
type: values[0],
|
|
title: values[1]
|
|
})
|
|
}).catch((error) => {
|
|
console.error(error)
|
|
})
|
|
}
|
|
|
|
render () {
|
|
var tokenHtml
|
|
var image
|
|
var title
|
|
|
|
if (typeof this.props.token.args === 'undefined') {
|
|
image = <Loading />
|
|
title = 'Confirming ...'
|
|
} else if (this.state.type !== null) {
|
|
image =
|
|
<figure className="image is-square">
|
|
<Link to={`/tokens/${this.props.token.args.tokenId}`}>
|
|
<img src={nfTokenTypeImageUrl(this.state.type)} />
|
|
</Link>
|
|
</figure>
|
|
title =
|
|
<Link to={`/tokens/${this.props.token.args.tokenId}`}>
|
|
{this.state.title}
|
|
</Link>
|
|
} else {
|
|
image =
|
|
<figure className="image is-square">
|
|
<img src={`/${PlaceholderImg}`} />
|
|
</figure>
|
|
title = '...'
|
|
}
|
|
|
|
return (
|
|
<div className="card">
|
|
<div className="card-image">
|
|
{image}
|
|
</div>
|
|
|
|
<div className="card-content">
|
|
<div className="media">
|
|
<div className="media-content">
|
|
<p className="title is-4">
|
|
{title}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
TokenListItem.propTypes = {
|
|
token: PropTypes.object.isRequired
|
|
}
|
|
|
|
export default TokenListItem;
|