+ return (
+ {options}
+ )
+ }
+}
+
+export default AmountAssetField
diff --git a/app/components/elements/forms/AmountField.jsx b/app/components/elements/forms/AmountField.jsx
index 8aeda2f..f9b5ef2 100644
--- a/app/components/elements/forms/AmountField.jsx
+++ b/app/components/elements/forms/AmountField.jsx
@@ -3,26 +3,33 @@ import { Field, ErrorMessage, } from 'formik'
import { AssetEditor } from 'golos-lib-js/lib/utils'
class AmountField extends React.Component {
+ static defaultProps = {
+ name: 'amount',
+ }
+
_renderInput = ({ field, form }) => {
- const { value, ...rest } = field
+ // TODO: is it right to pass all props to input
+ const { placeholder, name, ...rest } = this.props
+ const { value, } = field
const { values, setFieldValue } = form
- return this.onChange(e, values, setFieldValue)}
/>
}
onChange = (e, values, setFieldValue) => {
- const newAmount = values.amount.withChange(e.target.value)
+ const { name } = this.props
+ const newAmount = values[name].withChange(e.target.value)
if (newAmount.hasChange && newAmount.asset.amount >= 0) {
- setFieldValue('amount', newAmount)
+ setFieldValue(name, newAmount)
}
}
render() {
- const { placeholder, } = this.props
- return (
+ autoComplete='off' autoCorrect='off' spellCheck='false' {...rest}>
{this._renderInput}
)
}
diff --git a/app/components/elements/nft/NFTMarketCollections.jsx b/app/components/elements/nft/NFTMarketCollections.jsx
new file mode 100644
index 0000000..0da0f8c
--- /dev/null
+++ b/app/components/elements/nft/NFTMarketCollections.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import tt from 'counterpart'
+
+import Icon from 'app/components/elements/Icon'
+import NFTSmallIcon from 'app/components/elements/nft/NFTSmallIcon'
+import PagedDropdownMenu from 'app/components/elements/PagedDropdownMenu'
+
+class NFTMarketCollections extends React.Component {
+ render() {
+ let { nft_market_collections, selected } = this.props
+ const nft_colls = nft_market_collections ? nft_market_collections.toJS() : []
+
+ const colls = []
+ colls.push({
+ key: '_all',
+ link: '/nft',
+ label:
+ ,
+ value: tt('nft_market_page_jsx.all_collections')
+ })
+ for (const nft_coll of nft_colls) {
+ colls.push({
+ key: nft_coll.name,
+ link: '/nft/' + nft_coll.name,
+ label:
+ ,
+ value: nft_coll.name
+ })
+ }
+
+ selected = selected || tt('nft_market_page_jsx.all_collections')
+
+ return item}
+ selected={selected}
+ perPage={20}>
+ {selected}
+
+ }
+}
+
+export default NFTMarketCollections
diff --git a/app/components/elements/nft/NFTMarketCollections.scss b/app/components/elements/nft/NFTMarketCollections.scss
new file mode 100644
index 0000000..7a0b01a
--- /dev/null
+++ b/app/components/elements/nft/NFTMarketCollections.scss
@@ -0,0 +1,9 @@
+.NFTMarketCollections {
+ .NFTSmallIcon {
+ margin-top: 0.25rem;
+ margin-right: 0.25rem;
+ margin-bottom: 0.25rem;
+ width: 2rem;
+ height: 2rem;
+ }
+}
diff --git a/app/components/elements/nft/NFTSmallIcon.jsx b/app/components/elements/nft/NFTSmallIcon.jsx
new file mode 100644
index 0000000..c3dba89
--- /dev/null
+++ b/app/components/elements/nft/NFTSmallIcon.jsx
@@ -0,0 +1,12 @@
+import React, { Component, } from 'react'
+
+class NFTSmallIcon extends Component {
+ render() {
+ const { image, ...rest } = this.props
+
+ return
+ }
+}
+
+export default NFTSmallIcon
diff --git a/app/components/elements/nft/NFTSmallIcon.scss b/app/components/elements/nft/NFTSmallIcon.scss
new file mode 100644
index 0000000..0ee5941
--- /dev/null
+++ b/app/components/elements/nft/NFTSmallIcon.scss
@@ -0,0 +1,11 @@
+.NFTSmallIcon {
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ border-radius: 50%;
+
+ width: 3rem;
+ height: 3rem;
+ display: inline-block;
+ vertical-align: top;
+}
diff --git a/app/components/elements/nft/NFTTokenItem.jsx b/app/components/elements/nft/NFTTokenItem.jsx
new file mode 100644
index 0000000..9033f88
--- /dev/null
+++ b/app/components/elements/nft/NFTTokenItem.jsx
@@ -0,0 +1,248 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import { Link } from 'react-router'
+import tt from 'counterpart'
+import { Asset } from 'golos-lib-js/lib/utils'
+
+import DropdownMenu from 'app/components/elements/DropdownMenu'
+import Icon from 'app/components/elements/Icon'
+import g from 'app/redux/GlobalReducer'
+import user from 'app/redux/User'
+import transaction from 'app/redux/Transaction'
+import { getAssetMeta } from 'app/utils/market/utils'
+
+class NFTTokenItem extends Component {
+ state = {}
+
+ constructor() {
+ super()
+ }
+
+ cancelOrder = async (e, tokenIdx) => {
+ e.preventDefault()
+ const { currentUser } = this.props
+ const order = this.getOrder()
+ await this.props.cancelOrder(order.order_id, currentUser, () => {
+ this.props.refetch()
+ }, (err) => {
+ if (!err || err.toString() === 'Canceled') return
+ console.error(err)
+ alert(err.toString())
+ })
+ }
+
+ buyToken = async (e, tokenIdx) => {
+ e.preventDefault()
+ const { token, currentUser } = this.props
+ const { token_id, json_metadata } = token
+ const order = this.getOrder()
+ let tokenTitle
+ try {
+ tokenTitle = JSON.parse(json_metadata).title.substring(0, 100)
+ } catch (err) {
+ console.error(err)
+ tokenTitle = '#' + token_id
+ }
+ const price = Asset(order.price).floatString
+
+ if (!currentUser) {
+ this.props.login()
+ return
+ }
+ await this.props.buyToken(token_id, order.order_id, tokenTitle, price, currentUser, () => {
+ this.props.refetch()
+ }, (err) => {
+ if (!err || err.toString() === 'Canceled') return
+ console.error(err)
+ alert(err.toString())
+ })
+ }
+
+ burnIt = async (e, tokenIdx) => {
+ e.preventDefault()
+ const { token, currentUser } = this.props
+ const { token_id } = token
+ await this.props.burnToken(token_id, currentUser, () => {
+ this.props.refetch()
+ }, (err) => {
+ if (!err || err.toString() === 'Canceled') return
+ console.error(err)
+ alert(err.toString())
+ })
+ }
+
+ getOrder = () => {
+ const { tokenOrder } = this.props
+ if (tokenOrder) return tokenOrder
+ return this.props.token.order
+ }
+
+ render() {
+ const { token, tokenIdx, currentUser, page, assets } = this.props
+
+ const { json_metadata, image, selling } = token
+
+ let data
+ if (json_metadata) {
+ data = JSON.parse(json_metadata)
+ }
+ data = data || {} // node allows to use '', null, object, or array
+
+ let last_price
+ const price = token.selling && Asset(this.getOrder().price)
+ if (price) {
+ const asset = assets[price.symbol]
+ let imageUrl
+ if (asset) {
+ imageUrl = getAssetMeta(asset).image_url
+ }
+ last_price =
+ {imageUrl && 
}
+ {price.amountFloat}
+
+ }
+
+ const link = '/nft-tokens/' + token.token_id
+
+ const kebabItems = [
+ { link, target: '_blank', value: tt('g.more_hint') },
+ ]
+
+ const isMy = currentUser && currentUser.get('username') === token.owner
+
+ if (isMy && !selling) {
+ kebabItems.unshift({ link: '#', onClick: e => {
+ this.burnIt(e, tokenIdx)
+ }, value: tt('g.burn') })
+ }
+
+ if (last_price && !selling && isMy) {
+ kebabItems.unshift({ link: '#', onClick: e => {
+ this.props.showTransfer(e, tokenIdx)
+ }, value: tt('g.transfer') })
+ }
+
+ const isCollection = page === 'collection'
+ const isMarket = page === 'market'
+
+ let buttons
+ if (last_price) {
+ buttons =
+
+
+
+
+ {name}
+
+
+
+ {tt('nft_tokens_jsx.token_count', { count: token_count })}
+ {isMyAccount ? : null}
+
+
+
+
+ {isMyAccount ? : null}
+
+ )
+
+ ++count
+ }
+
+ items =
+ {items}
+
+ }
+
+ const { showCreate, showIssue, issueName, issueNum } = this.state
+
+ return (
;
- }
- else if( section === 'curation-rewards' ) {
+ } else if( section === 'nft-collections' ) {
+ nftClass = 'active'
+ tab_content = {title}
diff --git a/app/components/elements/Memo.jsx b/app/components/elements/Memo.jsx index cc2a380..db8d34e 100644 --- a/app/components/elements/Memo.jsx +++ b/app/components/elements/Memo.jsx @@ -4,10 +4,12 @@ import { connect, } from 'react-redux'; import tt from 'counterpart'; import { memo, } from 'golos-lib-js'; import { Link, } from 'react-router'; -import links from 'app/utils/Links'; + +import links from 'app/utils/Links' import shouldComponentUpdate from 'app/utils/shouldComponentUpdate' import { validate_account_name, } from 'app/utils/ChainValidation' -import user from 'app/redux/User'; +import user from 'app/redux/User' +import { blogsUrl } from 'app/utils/blogsUtils' class Memo extends React.Component { static propTypes = { @@ -36,6 +38,17 @@ class Memo extends React.Component { const sections = [] let idx = 0 if (!text || (typeof text.split !== 'function')) return + const isNftPost = text.startsWith('Post: ') + const isNftComment = !isNftPost && text.startsWith('Comment: ') + if (isNftPost || isNftComment) { + sections.push((isNftPost ? tt('g.for_the_post') : tt('g.for_the_comment')) + ': ') + const link = text.split(' ')[1] + let linkText = link + const truncateText = isNftPost ? 50 : 40 + if (linkText.length > truncateText) linkText = linkText.substr(0, truncateText) + '...' + sections.push({linkText} ) + return sections + } for (let section of text.split(' ')) { if (section.trim().length === 0) continue const matchUserName = section.match(/(^|\s)(@[a-z][-\.a-z\d]+[a-z\d])/i) diff --git a/app/components/elements/forms/AmountAssetField.jsx b/app/components/elements/forms/AmountAssetField.jsx new file mode 100644 index 0000000..4eb5782 --- /dev/null +++ b/app/components/elements/forms/AmountAssetField.jsx @@ -0,0 +1,50 @@ +import React from 'react' +import { Field, } from 'formik' +import { Asset, AssetEditor, } from 'golos-lib-js/lib/utils' + +class AmountAssetField extends React.Component { + static defaultProps = { + amountField: 'amount', + } + + onChange = (e) => { + const { amountField, values, setFieldValue, assets } = this.props + const value = e.target.value + const asset = assets[value] + if (asset) { + const { supply } = asset + const oldValue = values[amountField].asset + setFieldValue(amountField, AssetEditor(oldValue.amount, + supply.precision, supply.symbol)) + + if (!values.author) { // if not edit mode + if (asset.allow_override_transfer || value === 'GBG') { + if (values.tip_cost) + setFieldValue('tip_cost', false) + setFieldValue('disable_tip', true) + } else { + setFieldValue('disable_tip', false) + } + } + } + } + + render() { + const { name, assets, values, amountField } = this.props + + const options = [] + for (const [ sym, asset ] of Object.entries(assets)) { + options.push() + } + + const { asset } = values[amountField] + + return (
+ {last_price}
+ {kebabItems.length > 1 ?
+ : null}
+ {isMy && !selling && }
+ {isMy && selling && }
+ {!isMy && selling && }
+
+ } else {
+ buttons =
+ {!isMy && }
+ {isMy && }
+ {isMy && }
+ {kebabItems.length > 1 ?
+ : null}
+
+ }
+
+ return
+
+ 
+ {!isMy &&
+ {'@' + token.owner}
+ }
+
+
+ }
+}
+
+export default connect(
+ (state, ownProps) => {
+ const {locationBeforeTransitions: {pathname}} = state.routing;
+ let currentUser = ownProps.currentUser || state.user.getIn(['current'])
+ return { ...ownProps, currentUser }
+ },
+ dispatch => ({
+ burnToken: (
+ token_id, currentUser, successCallback, errorCallback
+ ) => {
+ const username = currentUser.get('username')
+ const operation = {
+ from: username,
+ to: 'null',
+ token_id,
+ memo: ''
+ }
+
+ dispatch(transaction.actions.broadcastOperation({
+ type: 'nft_transfer',
+ confirm: tt('g.are_you_sure'),
+ username,
+ operation,
+ successCallback,
+ errorCallback
+ }))
+ },
+ cancelOrder: (
+ order_id, currentUser, successCallback, errorCallback
+ ) => {
+ const username = currentUser.get('username')
+ const operation = {
+ owner: username,
+ order_id,
+ }
+
+ dispatch(transaction.actions.broadcastOperation({
+ type: 'nft_cancel_order',
+ confirm: tt('g.are_you_sure'),
+ username,
+ operation,
+ successCallback,
+ errorCallback
+ }))
+ },
+ buyToken: (
+ token_id, order_id, tokenTitle, price, currentUser, successCallback, errorCallback
+ ) => {
+ const username = currentUser.get('username')
+ const operation = {
+ buyer: username,
+ name: '',
+ token_id,
+ order_id,
+ price: '0.000 GOLOS'
+ }
+
+ dispatch(transaction.actions.broadcastOperation({
+ type: 'nft_buy',
+ confirm: tt('nft_tokens_jsx.buy_confirm') + tokenTitle + tt('nft_tokens_jsx.buy_confirm2') + price + '?',
+ username,
+ operation,
+ successCallback,
+ errorCallback
+ }))
+ },
+ login: () => {
+ dispatch(user.actions.showLogin({
+ loginDefault: { unclosable: false }
+ }));
+ },
+ })
+)(NFTTokenItem)
diff --git a/app/components/elements/nft/NFTTokenItem.scss b/app/components/elements/nft/NFTTokenItem.scss
new file mode 100644
index 0000000..0782900
--- /dev/null
+++ b/app/components/elements/nft/NFTTokenItem.scss
@@ -0,0 +1,69 @@
+.NFTTokenItem {
+ display: inline-block;
+ border: 1px solid rgba(128,128,128,0.45);
+ border-radius: 5px;
+ margin-right: 1rem;
+ margin-bottom: 1em;
+ padding: 0.5rem;
+ cursor: pointer;
+ position: relative;
+
+ .token-owner {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ background-color: white;
+ border: 1px solid rgba(128,128,128,0.45);
+ border-radius: 8px;
+ padding-left: 5px;
+ padding-right: 5px;
+ font-size: 90%;
+ }
+
+ &.collection {
+ background-color: rgb(226, 247, 223);
+ }
+
+ .token-image {
+ width: 200px;
+ height: 200px;
+ object-fit: cover;
+ }
+ .price-icon {
+ width: 20px;
+ height: 20px;
+ margin-right: 0.25rem;
+ }
+
+ .token-title {
+ margin-top: 0.25rem;
+ margin-bottom: 0.1rem;
+ }
+ .token-coll {
+ display: inline-block;
+ margin-bottom: 0.35rem;
+ }
+
+ .button {
+ margin: 0px !important;
+ margin-right: 5px !important;
+ }
+ .button:hover {
+ background-color: #016aad !important;
+ }
+ .button.hollow {
+ border: 0px;
+ }
+ .button.hollow:hover {
+ background-color: transparent !important;
+ }
+}
+
+.NFTTokenItem:hover {
+ background-color: rgba(208,208,208,0.45);
+ border: 1px solid rgba(128,128,128,0.45);
+
+ &.collection {
+ background-color: rgb(206, 247, 203);
+ }
+}
diff --git a/app/components/modules/Header.jsx b/app/components/modules/Header.jsx
index 12bfd41..42e8fd4 100644
--- a/app/components/modules/Header.jsx
+++ b/app/components/modules/Header.jsx
@@ -91,23 +91,31 @@ class Header extends React.Component {
const name = acct_meta ? normalizeProfile(acct_meta.toJS()).name : null;
const user_title = name ? `${name} (@${user_name})` : user_name;
page_title = user_title;
- if(route.params[1] === "curation-rewards"){
+ if (route.params[1] === "curation-rewards"){
page_title = tt('header_jsx.curation_rewards_by') + " " + user_title;
- }
- if(route.params[1] === "author-rewards"){
+ } else if (route.params[1] === "author-rewards"){
page_title = tt('header_jsx.author_rewards_by') + " " + user_title;
- }
- if(route.params[1] === "donates-from"){
+ } else if (route.params[1] === "donates-from"){
page_title = tt('header_jsx.donates_from') + " " + user_title;
- }
- if(route.params[1] === "donates-to"){
+ } else if (route.params[1] === "donates-to"){
page_title = tt('header_jsx.donates_to') + " " + user_title;
- }
- if(route.params[1] === "recent-replies"){
+ } else if (route.params[1] === "recent-replies"){
page_title = tt('header_jsx.replies_to') + " " + user_title;
+ } else if (route.params[1] === "nft-tokens"){
+ page_title = tt('header_jsx.nft_tokens') + " " + user_title
+ } else if (route.params[1] === "nft-collections"){
+ page_title = tt('header_jsx.nft_collections') + " " + user_title
+ } else if (route.params[1] === "nft-history"){
+ page_title = tt('g.nft_history') + " " + user_title
}
} else if (route.page === 'ConvertAssetsPage') {
page_title = tt('g.convert_assets')
+ } else if (route.page === `NFTCollectionPage`){
+ page_title = tt('header_jsx.nft_collection')
+ } else if (route.page === `NFTTokenPage`){
+ page_title = tt('header_jsx.nft_token')
+ } else if (route.page === `NFTMarketPage`){
+ page_title = tt('header_jsx.nft_market')
} else {
page_name = ''; //page_title = route.page.replace( /([a-z])([A-Z])/g, '$1 $2' ).toLowerCase();
}
diff --git a/app/components/modules/TopRightMenu.jsx b/app/components/modules/TopRightMenu.jsx
index 4e020b0..e460924 100644
--- a/app/components/modules/TopRightMenu.jsx
+++ b/app/components/modules/TopRightMenu.jsx
@@ -150,7 +150,7 @@ function TopRightMenu({account, savings_withdraws, price_per_golos, globalprops,
if (loggedIn) { // change back to if(username) after bug fix: Clicking on Login does not cause drop-down to close #TEMP!
let user_menu = [
- {link: walletLink, icon: 'new/wallet', value: tt('g.wallet'), addon:
+
+ {data.title}
+ + + {token.name} + + + {buttons} +
+
+ {({
+ handleSubmit, isValid, values, errors, touched, setFieldValue, handleChange,
+ }) => {
+ return (
+
+ )}}
+
)
+ }
+}
+
+export default connect(
+ // mapStateToProps
+ (state, ownProps) => {
+ const {locationBeforeTransitions: {pathname}} = state.routing;
+ let currentUser = ownProps.currentUser || state.user.getIn(['current'])
+ if (!currentUser) {
+ const currentUserNameFromRoute = pathname.split(`/`)[1].substring(1);
+ currentUser = Map({username: currentUserNameFromRoute});
+ }
+ const currentAccount = currentUser && state.global.getIn(['accounts', currentUser.get('username')]);
+ return { ...ownProps, currentUser, currentAccount, };
+ },
+
+ dispatch => ({
+ createCollection: (
+ name, json_metadata, max_token_count, currentUser, successCallback, errorCallback
+ ) => {
+ const username = currentUser.get('username')
+ let json = JSON.parse(json_metadata)
+ json = JSON.stringify(json)
+ const operation = {
+ creator: username,
+ name,
+ json_metadata: json,
+ max_token_count: parseInt(max_token_count)
+ }
+
+ dispatch(transaction.actions.broadcastOperation({
+ type: 'nft_collection',
+ username,
+ operation,
+ successCallback,
+ errorCallback
+ }))
+ }
+ })
+)(CreateNFTCollection)
diff --git a/app/components/modules/nft/CreateNFTCollection.scss b/app/components/modules/nft/CreateNFTCollection.scss
new file mode 100644
index 0000000..3db9e28
--- /dev/null
+++ b/app/components/modules/nft/CreateNFTCollection.scss
@@ -0,0 +1,34 @@
+.CreateNFTCollection {
+ .column {
+ padding-left: 0rem;
+ padding-right: 0rem;
+ }
+ .padding-left {
+ padding-left: 0.75rem;
+ }
+ .image-preview {
+ max-width: 150px;
+ height: 40px;
+ margin-left: 0.75rem;
+ border: none;
+ }
+ .json_metadata {
+ min-width: 100%;
+ min-height: 120px;
+ font-family: monospace;
+ }
+ .json-error {
+ margin-bottom: 0px;
+ }
+ .Expandable {
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ width: 100%;
+ .Expander {
+ margin-bottom: 0px;
+ h5 {
+ font-size: 1rem;
+ }
+ }
+ }
+}
diff --git a/app/components/modules/nft/IssueNFTToken.jsx b/app/components/modules/nft/IssueNFTToken.jsx
new file mode 100644
index 0000000..df971b6
--- /dev/null
+++ b/app/components/modules/nft/IssueNFTToken.jsx
@@ -0,0 +1,361 @@
+import React, { Component, } from 'react'
+import tt from 'counterpart'
+import { connect, } from 'react-redux'
+import CloseButton from 'react-foundation-components/lib/global/close-button'
+import { Formik, Form, Field, ErrorMessage, } from 'formik'
+import { Asset, validateAccountName } from 'golos-lib-js/lib/utils'
+
+import Expandable from 'app/components/elements/Expandable'
+import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import transaction from 'app/redux/Transaction'
+
+class IssueNFTToken extends Component {
+ state = {
+ token: {
+ name: '',
+ to: '',
+ title: '',
+ json_metadata: '{}',
+ }
+ }
+
+ initTo = (currentUser) => {
+ if (!currentUser) return
+ const username = currentUser.get('username')
+ this.setState({
+ token: {
+ ...this.state.token,
+ to: username
+ }
+ })
+ }
+
+ componentDidMount() {
+ this.initTo(this.props.currentUser)
+ }
+
+ componentDidUpdate(prevProps) {
+ const { currentUser } = this.props
+ if (currentUser && !prevProps.currentUser) {
+ this.initTo(currentUser)
+ }
+ }
+
+ validate = (values) => {
+ const errors = {}
+ const { title, to } = values
+ if (!title.length) {
+ errors.title = tt('g.required')
+ }
+ const accNameError = validateAccountName(values.to)
+ if (accNameError.error) {
+ errors.to = tt('account_name.' + accNameError.error)
+ }
+ let meta = values.json_metadata
+ try {
+ meta = JSON.parse(meta)
+ if (Array.isArray(meta)) throw new Error('JSON is array')
+ } catch (err) {
+ console.error('json_metadata', err)
+ errors.json_metadata = tt('create_nft_collection_jsx.json_wrong')
+ meta = null
+ }
+ if (meta) {
+ const noFields = []
+ if (!('title' in meta)) noFields.push('title')
+ if (values.image && !('image' in meta)) noFields.push('image')
+ if (values.description && !('description' in meta)) noFields.push('description')
+ if (noFields.length) {
+ errors.json_metadata = tt('create_nft_collection_jsx.json_no_fields')
+ errors.json_metadata += noFields.join(', ') + '. '
+ }
+ }
+ return errors
+ }
+
+ setSubmitting = (submitting) => {
+ this.setState({ submitting })
+ }
+
+ _onSubmit = async (values) => {
+ this.setSubmitting(true)
+ this.setState({
+ errorMessage: ''
+ })
+ const { currentUser, issueName } = this.props
+ const username = currentUser.get('username')
+ await this.props.issueToken(issueName, values.to, values.json_metadata, currentUser, () => {
+ this.props.fetchState()
+ this.props.onClose()
+ this.setSubmitting(false)
+ }, (err) => {
+ console.error(err)
+ this.setSubmitting(false)
+ this.setState({
+ errorMessage: err.toString()
+ })
+ })
+ }
+
+ _renderSubmittingIndicator = () => {
+ const { submitting } = this.state
+
+ return submitting ?
+ + {tt('create_nft_collection_jsx.title')} +
+
+
+ {({
+ handleSubmit, isValid, values, errors, touched, setFieldValue, handleChange,
+ }) => {
+ let cost = null
+ if (cprops) {
+ let issueCost = Asset(cprops.get('nft_issue_cost'))
+ const multiplier = Math.floor(values.json_metadata.length / 1024)
+ issueCost = issueCost.plus(issueCost.mul(multiplier))
+ cost =
+
)
+ }
+}
+
+export default connect(
+ // mapStateToProps
+ (state, ownProps) => {
+ const {locationBeforeTransitions: {pathname}} = state.routing;
+ let currentUser = ownProps.currentUser || state.user.getIn(['current'])
+ if (!currentUser) {
+ const currentUserNameFromRoute = pathname.split(`/`)[1].substring(1);
+ currentUser = Map({username: currentUserNameFromRoute});
+ }
+ const currentAccount = currentUser && state.global.getIn(['accounts', currentUser.get('username')]);
+ const cprops = state.global.get('cprops')
+ return { ...ownProps, currentUser, currentAccount, cprops, }
+ },
+
+ dispatch => ({
+ issueToken: (
+ name, to, json_metadata, currentUser, successCallback, errorCallback
+ ) => {
+ const username = currentUser.get('username')
+ let json = JSON.parse(json_metadata)
+ json = JSON.stringify(json)
+ const operation = {
+ creator: username,
+ name,
+ to,
+ json_metadata: json,
+ }
+
+ dispatch(transaction.actions.broadcastOperation({
+ type: 'nft_issue',
+ username,
+ operation,
+ successCallback,
+ errorCallback
+ }))
+ }
+ })
+)(IssueNFTToken)
diff --git a/app/components/modules/nft/IssueNFTToken.scss b/app/components/modules/nft/IssueNFTToken.scss
new file mode 100644
index 0000000..ff33515
--- /dev/null
+++ b/app/components/modules/nft/IssueNFTToken.scss
@@ -0,0 +1,31 @@
+.IssueNFTToken {
+ .column {
+ padding-left: 0rem;
+ padding-right: 0rem;
+ }
+ .image-preview {
+ max-width: 150px;
+ height: 40px;
+ margin-left: 0.75rem;
+ border: none;
+ }
+ .json_metadata {
+ min-width: 100%;
+ min-height: 120px;
+ font-family: monospace;
+ }
+ .json-error {
+ margin-bottom: 0px;
+ }
+ .Expandable {
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ width: 100%;
+ .Expander {
+ margin-bottom: 0px;
+ h5 {
+ font-size: 1rem;
+ }
+ }
+ }
+}
diff --git a/app/components/modules/nft/NFTCollections.jsx b/app/components/modules/nft/NFTCollections.jsx
new file mode 100644
index 0000000..bdcedbe
--- /dev/null
+++ b/app/components/modules/nft/NFTCollections.jsx
@@ -0,0 +1,210 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux';
+import { Link } from 'react-router';
+import tt from 'counterpart';
+import { Asset } from 'golos-lib-js/lib/utils';
+import Reveal from 'react-foundation-components/lib/global/reveal';
+
+import Icon from 'app/components/elements/Icon';
+import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import NFTSmallIcon from 'app/components/elements/nft/NFTSmallIcon'
+import CreateNFTCollection from 'app/components/modules/nft/CreateNFTCollection'
+import IssueNFTToken from 'app/components/modules/nft/IssueNFTToken'
+import g from 'app/redux/GlobalReducer'
+import user from 'app/redux/User'
+import transaction from 'app/redux/Transaction'
+import { getAssetMeta } from 'app/utils/market/utils'
+
+class NFTCollections extends Component {
+ state = {}
+
+ constructor() {
+ super()
+ }
+
+ showCreate = (e) => {
+ e.preventDefault()
+ this.setState({
+ showCreate: true,
+ })
+ }
+
+ hideCreate = () => {
+ this.setState({
+ showCreate: false,
+ })
+ }
+
+ showIssue = (e) => {
+ e.preventDefault()
+ this.setState({
+ showIssue: true,
+ })
+ }
+
+ hideIssue = () => {
+ this.setState({
+ showIssue: false,
+ })
+ }
+
+ render() {
+ const { account, isMyAccount, nft_collections, nft_assets, fetchState } = this.props
+ const accountName = account.get('name')
+
+ const collections = nft_collections ? nft_collections.toJS() : null
+ const assets = nft_assets ? nft_assets.toJS() : null
+
+ let items
+ if (!collections) {
+ items = + {tt('issue_nft_token_jsx.title') + ' (' + issueName + ', #' + issueNum + ')'} +
+
+ {tt('issue_nft_token_jsx.issue_cost')}
+ {issueCost.floatString}
+ .
+
+ }
+
+ return (
+
+ )}}
+ {tt('rating_jsx.volume') + ' ' + parseFloat(market_volume).toFixed(3)}
+
+
+ {imageUrl && }
+ {price.amountFloat}
+
+
+
+
+
+
+
+
)
+ }
+}
+
+export default connect(
+ (state, ownProps) => {
+ return {...ownProps,
+ nft_collections: state.global.get('nft_collections'),
+ nft_assets: state.global.get('nft_assets')
+ }
+ },
+ dispatch => ({
+ fetchState: () => {
+ const pathname = window.location.pathname
+ dispatch({type: 'FETCH_STATE', payload: {pathname}})
+ },
+ deleteCollection: (
+ name, username, successCallback, errorCallback
+ ) => {
+ const operation = {
+ creator: username,
+ name,
+ }
+
+ dispatch(transaction.actions.broadcastOperation({
+ type: 'nft_collection_delete',
+ username,
+ operation,
+ successCallback,
+ errorCallback
+ }))
+ }
+ })
+)(NFTCollections)
diff --git a/app/components/modules/nft/NFTCollections.scss b/app/components/modules/nft/NFTCollections.scss
new file mode 100644
index 0000000..0074e6c
--- /dev/null
+++ b/app/components/modules/nft/NFTCollections.scss
@@ -0,0 +1,20 @@
+.NFTCollections {
+ .market-stats {
+ font-size: 90%;
+ }
+ .price-icon {
+ width: 20px;
+ height: 20px;
+ margin-right: 0.25rem;
+ }
+ .price-val {
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ .button {
+ margin-left: 0.5rem;
+ margin-right: 0rem;
+ margin-bottom: 0rem;
+ }
+}
diff --git a/app/components/modules/nft/NFTHistory.jsx b/app/components/modules/nft/NFTHistory.jsx
new file mode 100644
index 0000000..d89483e
--- /dev/null
+++ b/app/components/modules/nft/NFTHistory.jsx
@@ -0,0 +1,85 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import {connect} from 'react-redux'
+import tt from 'counterpart'
+
+import TransferHistoryRow from 'app/components/cards/TransferHistoryRow'
+
+class NFTHistory extends React.Component {
+ state = { historyIndex: 0 }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ if (!this.props.account.nft_history) return true;
+ if (!nextProps.account.nft_history) return true;
+ return (
+ nextProps.account.nft_history.length !== this.props.account.nft_history.length ||
+ nextState.historyIndex !== this.state.historyIndex);
+ }
+
+ _setHistoryPage(back) {
+ const newIndex = this.state.historyIndex + (back ? 10 : -10);
+ this.setState({historyIndex: Math.max(0, newIndex)});
+ }
+
+ render() {
+ const {state: {historyIndex}} = this
+ const {account, incoming} = this.props;
+
+ const nft_history = account.nft_history || [];
+
+ /// nft log
+ let idx = 0
+ let nftLog = nft_history.map((item, index) => {
+ return
+
+
+
+ {tt('g.nft_collections')}
+ {isMyAccount && + {tt('nft_collections_jsx.create')} + } +
+
+
+
+ {items}
+
+
+
);
+ }
+}
+
+export default connect(
+ // mapStateToProps
+ (state, ownProps) => {
+ return {
+ state,
+ ...ownProps
+ }
+ }
+)(NFTHistory)
diff --git a/app/components/modules/nft/NFTTokenSell.jsx b/app/components/modules/nft/NFTTokenSell.jsx
new file mode 100644
index 0000000..9fd9e6b
--- /dev/null
+++ b/app/components/modules/nft/NFTTokenSell.jsx
@@ -0,0 +1,215 @@
+import React, { Component, } from 'react'
+import tt from 'counterpart'
+import { connect, } from 'react-redux'
+import CloseButton from 'react-foundation-components/lib/global/close-button'
+import { Formik, Form, Field, ErrorMessage, } from 'formik'
+import { Asset, AssetEditor } from 'golos-lib-js/lib/utils'
+
+import AmountField from 'app/components/elements/forms/AmountField'
+import AmountAssetField from 'app/components/elements/forms/AmountAssetField'
+import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import NFTSmallIcon from 'app/components/elements/nft/NFTSmallIcon'
+import transaction from 'app/redux/Transaction'
+import { generateOrderID } from 'app/utils/market/utils'
+
+class NFTTokenSell extends Component {
+ state = {
+ order: {
+ price: AssetEditor('0.000 GOLOS')
+ }
+ }
+
+ validate = (values) => {
+ const errors = {}
+ const { price } = values
+ if (values.price.asset.eq(0)) {
+ errors.price = tt('nft_token_sell_jsx.fill_price')
+ }
+ return errors
+ }
+
+ setSubmitting = (submitting) => {
+ this.setState({ submitting })
+ }
+
+ getToken = () => {
+ const { nft_tokens, tokenIdx } = this.props
+ if (tokenIdx !== undefined) {
+ return nft_tokens.toJS().data[tokenIdx]
+ }
+ return this.props.token
+ }
+
+ _onSubmit = async (values) => {
+ this.setSubmitting(true)
+ this.setState({
+ errorMessage: ''
+ })
+
+ const { currentUser, onClose, } = this.props
+ const token = this.getToken()
+ const { token_id } = token
+
+ const username = currentUser.get('username')
+
+ await this.props.sellToken(token_id, values.price, currentUser, () => {
+ this.props.onClose()
+ this.setSubmitting(false)
+ this.doNotRender = true
+ this.props.refetch()
+ }, (err) => {
+ console.error(err)
+ this.setSubmitting(false)
+ this.setState({
+ errorMessage: err.toString()
+ })
+ })
+ }
+
+ onCancelMouseDown = (e) => {
+ e.preventDefault()
+ this.setState({
+ cancelMouseDown: true
+ })
+ }
+
+ onCancelMouseUp = (e) => {
+ e.preventDefault()
+ if (this.state.cancelMouseDown) {
+ this.props.onClose()
+ this.setState({
+ cancelMouseDown: false
+ })
+ }
+ }
+
+ onMouseUp = (e) => {
+ e.preventDefault()
+ if (this.state.cancelMouseDown) {
+ this.props.onClose()
+ }
+ }
+
+ _renderSubmittingIndicator = () => {
+ const { submitting } = this.state
+
+ return submitting ?
+
+
+
+
+
+ {nftLog}
+
+
+ {navButtons}
+
+ {tt('g.nft_history')}
+ {navButtons} +
+
+ {({
+ handleSubmit, isValid, values, errors, touched, setFieldValue, handleChange,
+ }) => {
+ return (
+
+ )}}
+
+ }
+}
+
+export default connect(
+ // mapStateToProps
+ (state, ownProps) => {
+ return { ...ownProps,
+ nft_tokens: state.global.get('nft_tokens'),
+ assets: state.global.get('assets')
+ }
+ },
+
+ dispatch => ({
+ sellToken: (
+ token_id, price, currentUser, successCallback, errorCallback
+ ) => {
+ const username = currentUser.get('username')
+ const operation = {
+ seller: username,
+ token_id,
+ buyer: '',
+ order_id: generateOrderID(),
+ price: price.asset.toString()
+ }
+
+ dispatch(transaction.actions.broadcastOperation({
+ type: 'nft_sell',
+ username,
+ operation,
+ successCallback,
+ errorCallback
+ }))
+ }
+ })
+)(NFTTokenSell)
diff --git a/app/components/modules/nft/NFTTokenSell.scss b/app/components/modules/nft/NFTTokenSell.scss
new file mode 100644
index 0000000..cfe7ea3
--- /dev/null
+++ b/app/components/modules/nft/NFTTokenSell.scss
@@ -0,0 +1,9 @@
+.NFTTokenSell {
+ .column {
+ padding-left: 0rem;
+ padding-right: 0rem;
+ }
+ .error {
+ margin-bottom: 0px;
+ }
+}
diff --git a/app/components/modules/nft/NFTTokenTransfer.jsx b/app/components/modules/nft/NFTTokenTransfer.jsx
new file mode 100644
index 0000000..6a3a150
--- /dev/null
+++ b/app/components/modules/nft/NFTTokenTransfer.jsx
@@ -0,0 +1,200 @@
+import React, { Component, } from 'react'
+import tt from 'counterpart'
+import { connect, } from 'react-redux'
+import CloseButton from 'react-foundation-components/lib/global/close-button'
+import { Formik, Form, Field, ErrorMessage, } from 'formik'
+import { validateAccountName } from 'golos-lib-js/lib/utils'
+
+import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import NFTSmallIcon from 'app/components/elements/nft/NFTSmallIcon'
+import transaction from 'app/redux/Transaction'
+
+class NFTTokenTransfer extends Component {
+ state = {
+ token: {
+ to: ''
+ }
+ }
+
+ validate = (values) => {
+ const errors = {}
+ const { to } = values
+ const accNameError = validateAccountName(values.to)
+ if (accNameError.error) {
+ errors.to = tt('account_name.' + accNameError.error)
+ }
+ return errors
+ }
+
+ setSubmitting = (submitting) => {
+ this.setState({ submitting })
+ }
+
+ getToken = () => {
+ const { nft_tokens, tokenIdx } = this.props
+ if (tokenIdx !== undefined) {
+ return nft_tokens.toJS().data[tokenIdx]
+ }
+ return this.props.token
+ }
+
+ _onSubmit = async (values) => {
+ this.setSubmitting(true)
+ this.setState({
+ errorMessage: ''
+ })
+
+ const { currentUser, onClose, } = this.props
+ const token = this.getToken()
+ const { token_id } = token
+
+ const username = currentUser.get('username')
+
+ await this.props.transferToken(token_id, values.to, currentUser, () => {
+ this.props.onClose()
+ this.setSubmitting(false)
+ this.doNotRender = true
+ this.props.refetch()
+ }, (err) => {
+ console.error(err)
+ this.setSubmitting(false)
+ this.setState({
+ errorMessage: err.toString()
+ })
+ })
+ }
+
+ onCancelMouseDown = (e) => {
+ e.preventDefault()
+ this.setState({
+ cancelMouseDown: true
+ })
+ }
+
+ onCancelMouseUp = (e) => {
+ e.preventDefault()
+ if (this.state.cancelMouseDown) {
+ this.props.onClose()
+ this.setState({
+ cancelMouseDown: false
+ })
+ }
+ }
+
+ onMouseUp = (e) => {
+ e.preventDefault()
+ if (this.state.cancelMouseDown) {
+ this.props.onClose()
+ }
+ }
+
+ _renderSubmittingIndicator = () => {
+ const { submitting } = this.state
+
+ return submitting ?
+ {tt('g.sell')}
+
+
+
+
+ {({
+ handleSubmit, isValid, values, errors, touched, setFieldValue, handleChange,
+ }) => {
+ return (
+
+ )}}
+
+ }
+}
+
+export default connect(
+ // mapStateToProps
+ (state, ownProps) => {
+ return { ...ownProps,
+ nft_tokens: state.global.get('nft_tokens'),
+ }
+ },
+
+ dispatch => ({
+ transferToken: (
+ token_id, to, currentUser, successCallback, errorCallback
+ ) => {
+ const username = currentUser.get('username')
+ const operation = {
+ from: username,
+ to,
+ token_id,
+ memo: ''
+ }
+
+ dispatch(transaction.actions.broadcastOperation({
+ type: 'nft_transfer',
+ username,
+ operation,
+ successCallback,
+ errorCallback
+ }))
+ }
+ })
+)(NFTTokenTransfer)
diff --git a/app/components/modules/nft/NFTTokenTransfer.scss b/app/components/modules/nft/NFTTokenTransfer.scss
new file mode 100644
index 0000000..f371653
--- /dev/null
+++ b/app/components/modules/nft/NFTTokenTransfer.scss
@@ -0,0 +1,9 @@
+.NFTTokenTransfer {
+ .column {
+ padding-left: 0rem;
+ padding-right: 0rem;
+ }
+ .error {
+ margin-bottom: 0px;
+ }
+}
diff --git a/app/components/modules/nft/NFTTokens.jsx b/app/components/modules/nft/NFTTokens.jsx
new file mode 100644
index 0000000..0186c7c
--- /dev/null
+++ b/app/components/modules/nft/NFTTokens.jsx
@@ -0,0 +1,195 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import { Link } from 'react-router'
+import tt from 'counterpart'
+import { Map } from 'immutable'
+import Reveal from 'react-foundation-components/lib/global/reveal'
+
+import DropdownMenu from 'app/components/elements/DropdownMenu'
+import Icon from 'app/components/elements/Icon'
+import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import NFTTokenItem from 'app/components/elements/nft/NFTTokenItem'
+import NFTTokenTransfer from 'app/components/modules/nft/NFTTokenTransfer'
+import NFTTokenSell from 'app/components/modules/nft/NFTTokenSell'
+import g from 'app/redux/GlobalReducer'
+
+class NFTTokens extends Component {
+ state = {}
+
+ constructor() {
+ super()
+ }
+
+ componentDidMount() {
+ if (!this.props.nft_tokens) {
+ this.refetch()
+ }
+ }
+
+ refetch = () => {
+ this.props.fetchNFTTokens(this.props.account, 0, this.sort, this.sortReversed)
+ }
+
+ showTransfer = (e, tokenIdx) => {
+ e.preventDefault()
+ this.setState({
+ showTransfer: true,
+ tokenIdx,
+ })
+ }
+
+ hideTransfer = () => {
+ this.setState({
+ showTransfer: false,
+ })
+ }
+
+ showSell = (e, tokenIdx) => {
+ e.preventDefault()
+ this.setState({
+ showSell: true,
+ tokenIdx,
+ })
+ }
+
+ hideSell = () => {
+ this.setState({
+ showSell: false,
+ })
+ }
+
+ sortOrder = (e, sort, sortReversed) => {
+ e.preventDefault()
+ this.sort = sort
+ this.sortReversed = sortReversed
+ this.refetch()
+ }
+
+ render() {
+ const { currentUser, account, isMyAccount, nft_tokens, nft_assets, } = this.props
+ const accountName = account.get('name')
+
+ const tokens = nft_tokens ? nft_tokens.toJS().data : null
+ const assets = nft_assets ? nft_assets.toJS() : {}
+
+ const next_from = nft_tokens && nft_tokens.get('next_from')
+
+ let items = []
+ if (!tokens) {
+ items = {tt('g.transfer')}
+
+
+
+
+
+
+
+
+
)
+ }
+}
+
+export default connect(
+ (state, ownProps) => {
+ const {locationBeforeTransitions: {pathname}} = state.routing;
+ let currentUser = ownProps.currentUser || state.user.getIn(['current'])
+ if (!currentUser) {
+ const currentUserNameFromRoute = pathname.split(`/`)[1].substring(1);
+ currentUser = Map({username: currentUserNameFromRoute});
+ }
+ return {...ownProps, currentUser,
+ nft_tokens: state.global.get('nft_tokens'),
+ nft_assets: state.global.get('nft_assets')
+ }
+ },
+ dispatch => ({
+ fetchNFTTokens: (account, start_token_id, sort, sortReversed) => {
+ if (!account) return
+ dispatch(g.actions.fetchNftTokens({ account: account.get('name'), start_token_id, sort, reverse_sort: sortReversed }))
+ },
+ })
+)(NFTTokens)
diff --git a/app/components/modules/nft/NFTTokens.scss b/app/components/modules/nft/NFTTokens.scss
new file mode 100644
index 0000000..6e85ea3
--- /dev/null
+++ b/app/components/modules/nft/NFTTokens.scss
@@ -0,0 +1,2 @@
+.NFTTokens {
+}
diff --git a/app/components/pages/UserProfile.jsx b/app/components/pages/UserProfile.jsx
index 14c99c1..ca9898b 100644
--- a/app/components/pages/UserProfile.jsx
+++ b/app/components/pages/UserProfile.jsx
@@ -14,6 +14,8 @@ import CreateAsset from 'app/components/modules/uia/CreateAsset';
import Assets from 'app/components/modules/uia/Assets';
import UpdateAsset from 'app/components/modules/uia/UpdateAsset';
import TransferAsset from 'app/components/modules/uia/TransferAsset';
+import NFTCollections from 'app/components/modules/nft/NFTCollections'
+import NFTTokens from 'app/components/modules/nft/NFTTokens'
import Invites from 'app/components/elements/Invites';
import PasswordReset from 'app/components/elements/PasswordReset';
import UserWallet from 'app/components/modules/UserWallet';
@@ -24,6 +26,7 @@ import DonatesTo from 'app/components/modules/DonatesTo';
import CurationRewards from 'app/components/modules/CurationRewards';
import AuthorRewards from 'app/components/modules/AuthorRewards';
import FilledOrders from 'app/components/modules/FilledOrders'
+import NFTHistory from 'app/components/modules/nft/NFTHistory'
import LoadingIndicator from 'app/components/elements/LoadingIndicator';
import { authUrl, } from 'app/utils/AuthApiClient'
import { getGameLevel } from 'app/utils/GameUtils'
@@ -213,7 +216,7 @@ export default class UserProfile extends React.Component {
// const global_status = this.props.global.get('status');
- let rewardsClass = '', walletClass = '', permissionsClass = '';
+ let rewardsClass = '', walletClass = '', permissionsClass = '', nftClass = ''
if (!section || section === 'transfers') {
// transfers, check if url has query params
const { location: { query } } = this.props;
@@ -246,8 +249,18 @@ export default class UserProfile extends React.Component {
+
+
+
+
+ {currentSort}
+
+
+ {tt('g.nft_tokens')}
+ + {tt('g.buy')} + + +
+
+
+
+ {items}
+ {next_from ?
+
+
: null}
+
+
+ } else if( section === 'nft-tokens' ) {
+ nftClass = 'active'
+ tab_content =
+
+ } else if( section === 'curation-rewards' ) {
rewardsClass = 'active';
tab_content =
+
+ }
else if( section === 'donates-from' ) {
rewardsClass = 'active';
tab_content =
+
{isMyAccount ?
{tt('navigation.market2')}
+
+ }
+
+ const coll = nft_collection.toJS()
+
+ if (!coll.name) {
+ return
+
+
+
+
+
+
+
+
+
+
+
+ }
+}
+
+module.exports = {
+ path: '/nft-collections(/:name)',
+ component: connect(
+ // mapStateToProps
+ (state, ownProps) => {
+ const currentUser = state.user.getIn(['current'])
+
+ return { ...ownProps,
+ currentUser,
+ nft_collection: state.global.get('nft_collection'),
+ nft_collection_loaded: state.global.get('nft_collection_loaded'),
+ nft_tokens: state.global.get('nft_tokens'),
+ nft_assets: state.global.get('nft_assets')
+ }
+ },
+
+ dispatch => ({
+ fetchNftCollectionTokens: (collectionName, start_token_id, sort, sortReversed) => {
+ dispatch(g.actions.fetchNftCollectionTokens({ collectionName, start_token_id, sort, reverse_sort: sortReversed }))
+ },
+ deleteCollection: (
+ name, currentUser, successCallback, errorCallback
+ ) => {
+ const username = currentUser.get('username')
+ const operation = {
+ creator: username,
+ name,
+ }
+
+ dispatch(transaction.actions.broadcastOperation({
+ type: 'nft_collection_delete',
+ username,
+ operation,
+ successCallback,
+ errorCallback
+ }))
+ },
+ burnToken: (
+ token_id, currentUser, successCallback, errorCallback
+ ) => {
+ const username = currentUser.get('username')
+ const operation = {
+ from: username,
+ to: 'null',
+ token_id,
+ memo: ''
+ }
+
+ dispatch(transaction.actions.broadcastOperation({
+ type: 'nft_transfer',
+ confirm: tt('g.are_you_sure'),
+ username,
+ operation,
+ successCallback,
+ errorCallback
+ }))
+ }
+ })
+ )(NFTCollectionPage)
+}
+
diff --git a/app/components/pages/nft/NFTCollectionPage.scss b/app/components/pages/nft/NFTCollectionPage.scss
new file mode 100644
index 0000000..83d7d55
--- /dev/null
+++ b/app/components/pages/nft/NFTCollectionPage.scss
@@ -0,0 +1,8 @@
+.NFTCollectionPage {
+ padding: 1rem;
+ flex: 1;
+
+ .button {
+ margin-bottom: 0px;
+ }
+}
diff --git a/app/components/pages/nft/NFTMarketPage.jsx b/app/components/pages/nft/NFTMarketPage.jsx
new file mode 100644
index 0000000..fa47824
--- /dev/null
+++ b/app/components/pages/nft/NFTMarketPage.jsx
@@ -0,0 +1,100 @@
+import React from 'react'
+import { connect, } from 'react-redux'
+import tt from 'counterpart'
+
+import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import NFTTokenItem from 'app/components/elements/nft/NFTTokenItem'
+import g from 'app/redux/GlobalReducer'
+
+class NFTMarketPage extends React.Component {
+ componentDidMount() {
+ setTimeout(() => {
+ this.refetch()
+ }, 500)
+ }
+
+ refetch() {
+ const { currentUser } = this.props
+ const username = currentUser && currentUser.get('username')
+ this.props.fetchNftMarket(username, '', 0, this.sort, this.sortReversed)
+ }
+
+ render() {
+ const { currentAccount, nft_orders, own_nft_orders, nft_assets, routeParams } = this.props
+
+ const { name } = routeParams
+
+ let content
+ const orders = nft_orders ? nft_orders.toJS().data : null
+ const own_orders = own_nft_orders ? own_nft_orders.toJS().data : null
+ const assets = nft_assets ? nft_assets.toJS() : {}
+
+ if (!orders || !own_orders) {
+ content =
+
+
+
+
+ {data.title || coll.name}
+
+
+ {tt('nft_collection_page_jsx.owner_is')}
+
+
+ @{coll.creator}
+ {isMy ?
+
+
+ : null}
+
+
+
+ {items}
+
+
+ {items}
+
+ }
+
+ return {tt('nft_market_page_jsx.own_orders')}
+ {ownItems} +
+
+ }
+}
+
+module.exports = {
+ path: '/nft(/:name)',
+ component: connect(
+ (state, ownProps) => {
+ const currentUser = state.user.getIn(['current'])
+ const currentAccount = currentUser && state.global.getIn(['accounts', currentUser.get('username')])
+
+ const nft_orders = state.global.get('nft_orders')
+ const own_nft_orders = state.global.get('own_nft_orders')
+
+ return {
+ currentUser,
+ currentAccount,
+ nft_orders,
+ own_nft_orders,
+ nft_assets: state.global.get('nft_assets')
+ }
+ },
+ dispatch => ({
+ fetchNftMarket: (account, collectionName, start_order_id, sort, reverse_sort) => {
+ dispatch(g.actions.fetchNftMarket({ account, collectionName, start_order_id, sort, reverse_sort }))
+ },
+ })
+ )(NFTMarketPage),
+}
diff --git a/app/components/pages/nft/NFTMarketPage.scss b/app/components/pages/nft/NFTMarketPage.scss
new file mode 100644
index 0000000..7be7f25
--- /dev/null
+++ b/app/components/pages/nft/NFTMarketPage.scss
@@ -0,0 +1,4 @@
+.NFTMarketPage {
+ padding: 1rem;
+ flex: 1;
+}
diff --git a/app/components/pages/nft/NFTTokenPage.jsx b/app/components/pages/nft/NFTTokenPage.jsx
new file mode 100644
index 0000000..cd986c1
--- /dev/null
+++ b/app/components/pages/nft/NFTTokenPage.jsx
@@ -0,0 +1,431 @@
+import React, { Component, } from 'react'
+import tt from 'counterpart'
+import { connect, } from 'react-redux'
+import { Link } from 'react-router'
+import { api } from 'golos-lib-js'
+import { Asset } from 'golos-lib-js/lib/utils'
+import Reveal from 'react-foundation-components/lib/global/reveal'
+
+import Expandable from 'app/components/elements/Expandable'
+import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import TimeAgoWrapper from 'app/components/elements/TimeAgoWrapper'
+import NFTTokenTransfer from 'app/components/modules/nft/NFTTokenTransfer'
+import NFTTokenSell from 'app/components/modules/nft/NFTTokenSell'
+import NotFound from 'app/components/pages/NotFound'
+import { msgsHost, msgsLink } from 'app/utils/ExtLinkUtils'
+import { getAssetMeta } from 'app/utils/market/utils'
+import transaction from 'app/redux/Transaction'
+
+class NFTTokenPage extends Component {
+ state = {
+ }
+
+ cancelOrder = async (e) => {
+ e.preventDefault()
+ const { nft_token, currentUser, } = this.props
+ const token = nft_token.toJS()
+ const { order } = token
+ await this.props.cancelOrder(order.order_id, currentUser, () => {
+ this.props.fetchState()
+ }, (err) => {
+ if (!err || err.toString() === 'Canceled') return
+ console.error(err)
+ alert(err.toString())
+ })
+ }
+
+ buyToken = async (e) => {
+ e.preventDefault()
+ const { nft_token, currentUser, } = this.props
+ const token = nft_token.toJS()
+ const { token_id, order, json_metadata } = token
+ let tokenTitle
+ try {
+ tokenTitle = JSON.parse(json_metadata).title.substring(0, 100)
+ } catch (err) {
+ console.error(err)
+ tokenTitle = '#' + token_id
+ }
+ const price = Asset(order.price).floatString
+
+ await this.props.buyToken(token_id, order.order_id, tokenTitle, price, currentUser, () => {
+ this.props.fetchState()
+ }, (err) => {
+ if (!err || err.toString() === 'Canceled') return
+ console.error(err)
+ alert(err.toString())
+ })
+ }
+
+ onBurnClick = async (e) => {
+ const { nft_token, currentUser, } = this.props
+ const token = nft_token.toJS()
+ const { token_id } = token
+ await this.props.burnToken(token_id, currentUser, () => {
+ this.props.fetchState()
+ }, (err) => {
+ if (!err || err.toString() === 'Canceled') return
+ console.error(err)
+ alert(err.toString())
+ })
+ }
+
+ async loadOps() {
+ const { nft_token, } = this.props
+ const token = nft_token.toJS()
+ const { token_id } = token
+ const ops = await api.getNftTokenOps({
+ token_ids: [ token_id ],
+ from: 0,
+ limit: 500
+ })
+ this.setState({
+ ops: ops[token_id]
+ })
+ }
+
+ async componentDidMount() {
+ if (this.props.nft_token) {
+ await this.loadOps()
+ }
+ }
+
+ async componentDidUpdate(prevProps) {
+ if (this.props.nft_token && !prevProps.nft_token) {
+ await this.loadOps()
+ }
+ }
+
+ showTransfer = (e) => {
+ e.preventDefault()
+ this.setState({
+ showTransfer: true,
+ })
+ }
+
+ hideTransfer = () => {
+ this.setState({
+ showTransfer: false,
+ })
+ }
+
+ showSell = (e) => {
+ e.preventDefault()
+ this.setState({
+ showSell: true,
+ })
+ }
+
+ hideSell = () => {
+ this.setState({
+ showSell: false,
+ })
+ }
+
+ _renderOp = (trx, i) => {
+ const [ opType, op ] = trx.op
+
+ const accLink = (acc) => {
+ let title = acc
+ if (title.length > 16) {
+ title = title.substr(0, 13) + '...'
+ }
+ return {title}
+ }
+
+ let content
+ if (opType === 'nft_token') {
+ content =
+
+ {tt('header_jsx.nft_market')}
+ {content} +
+ {accLink(op.creator)}
+ {tt('nft_token_page_jsx.issued')}
+ {op.creator !== op.to ?
+ {tt('nft_token_page_jsx.issued_for') + ' '}
+ {accLink(op.to)}
+ : null}
+
+ } else if (opType === 'nft_transfer') {
+ content =
+ {accLink(op.from)}
+ {tt('nft_token_page_jsx.transfered') + ' '}
+ {accLink(op.to)}
+
+ } else if (opType === 'nft_sell') {
+ const price = Asset(op.price)
+ if (op.buyer) {
+ content =
+ {accLink(op.seller)}
+ {tt('nft_token_page_jsx.selled2')}
+ {accLink(op.buyer)}
+ {!price.eq(0) ? (tt('nft_token_page_jsx.selled2m') + price.floatString) : ''}
+
+ } else {
+ content =
+ {accLink(op.seller)}
+ {tt('nft_token_page_jsx.selled')}
+ {price.floatString}
+
+ }
+ } else if (opType === 'nft_buy') {
+ const price = Asset(op.price)
+ if (!op.name) {
+ content =
+ {accLink(op.buyer)}
+ {tt('nft_token_page_jsx.bought')}
+ {!price.eq(0) ? (tt('nft_token_page_jsx.selled2m') + price.floatString) : ''}
+
+ }
+ }
+ return