forked from avral/golos-ui
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
23c9050
commit 438d2f7
Showing
15 changed files
with
296 additions
and
29 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React, { Component, } from 'react' | ||
|
||
class NFTSmallIcon extends Component { | ||
render() { | ||
const { image, ...rest } = this.props | ||
|
||
return <a className='NFTSmallIcon' | ||
style={{ backgroundImage: `url(${image})` }} href={image} target='_blank' rel='nofollow noreferrer' {...rest}></a> | ||
} | ||
} | ||
|
||
export default NFTSmallIcon |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
import React from 'react' | ||
import { connect } from 'react-redux' | ||
import { Map } from 'immutable' | ||
import tt from 'counterpart' | ||
import { Asset } from 'golos-lib-js/lib/utils' | ||
|
||
import NFTSmallIcon from 'app/components/elements/nft/NFTSmallIcon' | ||
import LoadingIndicator from 'app/components/elements/LoadingIndicator' | ||
import g from 'app/redux/GlobalReducer' | ||
import transaction from 'app/redux/Transaction' | ||
import { getAssetMeta } from 'app/utils/market/utils' | ||
|
||
class GiftNFT extends React.Component { | ||
constructor(props) { | ||
super(props) | ||
this.state = { | ||
} | ||
} | ||
|
||
componentDidMount() { | ||
if (!this.props.nft_tokens) { | ||
this.props.fetchNFTTokens(this.props.currentUser) | ||
} | ||
} | ||
|
||
render() { | ||
const { nft_tokens, nft_assets } = this.props | ||
|
||
const tokens = nft_tokens ? nft_tokens.toJS() : [] | ||
const assets = nft_assets ? nft_assets.toJS() : null | ||
|
||
let items = [] | ||
let count = 0 | ||
for (const token of tokens) { | ||
const { json_metadata, image } = 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 last_buy_price = Asset(token.last_buy_price) | ||
if (last_buy_price.amount > 0) { | ||
const asset = assets[last_buy_price.symbol] | ||
let imageUrl | ||
if (asset) { | ||
imageUrl = getAssetMeta(asset).image_url | ||
} | ||
last_price = <span title={last_buy_price.floatString}> | ||
{imageUrl && <img className='price-icon' src={imageUrl} alt={''} />} | ||
{last_buy_price.amountFloat} | ||
</span> | ||
} | ||
|
||
items.push(<tr key={count} className={count % 2 == 0 ? '' : 'zebra'}> | ||
<td title={data.title}> | ||
<NFTSmallIcon image={image} /> | ||
</td> | ||
<td title={data.title}> | ||
{data.title} | ||
</td> | ||
<td> | ||
{last_price} | ||
</td> | ||
</tr>) | ||
|
||
++count | ||
} | ||
|
||
if (!items.length) { | ||
items = <LoadingIndicator type='circle' /> | ||
} else { | ||
items = <table><tbody> | ||
{items} | ||
</tbody></table> | ||
} | ||
|
||
return <div> | ||
<div className='row'> | ||
<h3>{tt('transfer_jsx.gift_nft')}</h3> | ||
</div> | ||
{items} | ||
</div> | ||
} | ||
} | ||
|
||
export default connect( | ||
(state, ownProps) => { | ||
const opts = state.user.get('donate_defaults', Map()).toJS() | ||
|
||
const currentUser = state.user.getIn(['current']) | ||
const currentAccount = currentUser && state.global.getIn(['accounts', currentUser.get('username')]) | ||
|
||
|
||
return { ...ownProps, | ||
currentUser, | ||
currentAccount, | ||
nft_tokens: state.global.get('nft_tokens'), | ||
nft_assets: state.global.get('nft_assets'), | ||
} | ||
}, | ||
dispatch => ({ | ||
fetchNFTTokens: (currentUser) => { | ||
if (!currentUser) return | ||
const account = currentUser.get('username') | ||
dispatch(g.actions.fetchNftTokens({ account })) | ||
}, | ||
}) | ||
)(GiftNFT) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
|
||
export function parseNFTImage(json_metadata) { | ||
if (json_metadata) { | ||
const meta = JSON.parse(json_metadata) | ||
if (meta) return meta.image | ||
} | ||
return null | ||
} | ||
|
||
export function NFTImageStub() { | ||
return require('app/assets/images/nft.png') | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.