Got token cards to display on NFT page

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 = (
+        <TokenCard
+          appData={appData}
+          token={thisToken}
+          key={`${thisToken.tokenId}`}
+        />
+      )
+      tokenCards.push(thisTokenCard)
+    }
+
+    return tokenCards
+  }
+
   return (
     <Container>
       <Row>
@@ -105,6 +130,10 @@ function NftsForSale (props) {
           </Button>
         </Col>
       </Row>
+
+      <Row>
+        {generateCards()}
+      </Row>
     </Container>
   )
 }

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 (
+    <>
+      <Col xs={12} sm={6} lg={4} style={{ padding: '25px' }}>
+        <Card>
+          <Card.Body style={{ textAlign: 'center' }}>
+            <a href={imageLink} target='_blank' rel='noreferrer'>
+              {props.token.icon}
+            </a>
+            <Card.Title style={{ textAlign: 'center' }}>
+              <h4>{props.token.ticker}</h4>
+            </Card.Title>
+
+            <Container>
+              <Row>
+                <Col>
+                  {props.token.tokenData ? props.token.tokenData.tokenStats.name : null}
+                </Col>
+              </Row>
+              <br />
+
+              <Row>
+                <Col>Price:</Col>
+                <Col>{props.token.usdPrice}</Col>
+              </Row>
+              <br />
+
+              <Row>
+                
+              </Row>
+
+            </Container>
+          </Card.Body>
+        </Card>
+      </Col>
+    </>
+  )
+}
+
+{/* <Col>
+                  <InfoButton token={props.token} />
+                </Col>
+
+                <Col>
+                  <FlagButton appData={props.appData} offer={props.token} />
+                </Col>
+
+                <Col>
+                  <BuyNftButton appData={props.appData} offer={props.token} />
+                </Col> */}
+
+export default TokenCard