Created buy button without any logic

package-lock.json

@@ -34,6 +34,7 @@
         "vm-browserify": "1.1.2"
       },
       "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "minimal-slp-wallet": "5.13.1",
         "react-app-rewired": "2.2.1",
         "standard": "17.0.0",
@@ -596,8 +597,18 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
+      "version": "7.21.11",
+      "resolved": "http://94.130.170.209:4873/@babel%2fplugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -1751,6 +1762,18 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "http://94.130.170.209:4873/@babel%2fplugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "license": "ISC",

package.json

@@ -52,6 +52,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "minimal-slp-wallet": "5.13.1",
     "react-app-rewired": "2.2.1",
     "standard": "17.0.0",

src/components/app-body/nfts-for-sale/buy-button.js

@@ -7,9 +7,13 @@
 import React, { useState } from 'react'
 import { Button, Modal, Container, Row, Col } from 'react-bootstrap'
 
-function InfoButton (props) {
+function BuyButton (props) {
   const [show, setShow] = useState(false)
 
+  const handleBuy = () => {
+    console.log('handleBuy()')
+  }
+
   const handleClose = () => {
     console.log('handleClose()')
     setShow(false)
@@ -25,14 +29,14 @@ function InfoButton (props) {
   if (!props.token.tokenData) {
     return (
       <>
-        <Button variant='info'>Info</Button>
+        <Button variant='success'>Buy</Button>
       </>
     )
   }
 
   return (
     <>
-      <Button variant='info' disabled={props.disabled} onClick={handleOpen}>Info</Button>
+      <Button variant='success' disabled={props.disabled} onClick={handleBuy}>Buy</Button>
       <Modal show={show} onHide={handleClose}>
         <Modal.Header closeButton>
           <Modal.Title>Token Information</Modal.Title>
@@ -76,4 +80,4 @@ function InfoButton (props) {
   )
 }
 
-export default InfoButton
+export default BuyButton

src/components/app-body/nfts-for-sale/token-card.js

@@ -5,9 +5,12 @@
 // Global npm libraries
 import React, { useState, useEffect } from 'react'
 import { Container, Row, Col, Card } from 'react-bootstrap'
-import InfoButton from './info-button'
 import Jdenticon from '@chris.troutner/react-jdenticon'
 
+// Local libraries
+import InfoButton from './info-button'
+import BuyButton from './buy-button'
+
 function TokenCard (props) {
   const { token, appData } = props
   const [icon, setIcon] = useState(token.icon)
@@ -68,7 +71,9 @@ function TokenCard (props) {
 
                 <Col />
 
-                <Col />
+                <Col>
+                  <BuyButton token={token} disabled={!token.tokenData} />
+                </Col>
               </Row>
 
             </Container>