diff --git a/src/components/app-body/nfts-for-sale/index.js b/src/components/app-body/nfts-for-sale/index.js index 6c8b648..5ca1175 100644 --- a/src/components/app-body/nfts-for-sale/index.js +++ b/src/components/app-body/nfts-for-sale/index.js @@ -13,7 +13,7 @@ import { faRedo } from '@fortawesome/free-solid-svg-icons' // Local libraries import config from '../../../config' - +import TokenCard from './token-card' // Global variables and constants const SERVER = config.dexServer @@ -92,6 +92,31 @@ function NftsForSale (props) { asyncStartup() }, [offers]) + // This function generates a Token Card for each token in the wallet. + function generateCards () { + // console.log('generateCards() offerData: ', offerData) + + const tokens = offers + + const tokenCards = [] + + for (let i = 0; i < tokens.length; i++) { + const thisToken = tokens[i] + // console.log(`thisToken: ${JSON.stringify(thisToken, null, 2)}`) + + const thisTokenCard = ( + + ) + tokenCards.push(thisTokenCard) + } + + return tokenCards + } + return ( @@ -105,6 +130,10 @@ function NftsForSale (props) { + + + {generateCards()} + ) } diff --git a/src/components/app-body/nfts-for-sale/token-card.js b/src/components/app-body/nfts-for-sale/token-card.js new file mode 100644 index 0000000..2acbc03 --- /dev/null +++ b/src/components/app-body/nfts-for-sale/token-card.js @@ -0,0 +1,77 @@ +/* + This Card component summarizes an SLP token. +*/ + +// Global npm libraries +import React from 'react' +import { Container, Row, Col, Card } from 'react-bootstrap' +// import BuyNftButton from './buy-button' +// import InfoButton from './info-button' +// import FlagButton from './flag-button' + +// Local libraries +// import InfoButton from './info-button' +// import SendTokenButton from './send-token-button' +// import SellButton from './sell-button' + +function TokenCard (props) { + let imageLink = '' + if (props.token.mutableData) { + imageLink = props.token.mutableData.tokenIcon + + if (props.token.mutableData.fullSizedUrl && props.token.mutableData.fullSizedUrl.includes('http')) { + imageLink = props.token.mutableData.fullSizedUrl + } + } + + return ( + <> + + + + + {props.token.icon} + + +

{props.token.ticker}

+
+ + + + + {props.token.tokenData ? props.token.tokenData.tokenStats.name : null} + + +
+ + + Price: + {props.token.usdPrice} + +
+ + + + + +
+
+
+ + + ) +} + +{/* + + + + + + + + + + */} + +export default TokenCard