Allow user to buy NFT (using test wallet)

[nrutledge]

Acceptance Criteria:

• [x] When a user clicks the "Buy" button for an NFT, the Checkout modal is displayed
• [x] Check window displays the correct details for each field (see reference below)
• [x] When "Checkout" button is clicked on the Checkout modal, the sdk.makeTransaction.buy() function is called with correct BuyParams (see reference below).

Checkout field reference:

• Title = image.title
• From = artist.name
• Balance = wallet's ADA balance (wallet context to be added as separate issue)
• Service fee percentage = TBD (use 0% for now)
• You will pay = nft price + service fee

BuyParams reference:

• nftId = id of NFT being bought
• price = the price of the NFT
• newPrice = undefined for now

Checkout window mockup:

Note: This functionality will be extended further once more details have been clarified (will be in separate issue).

[dimakrsna]

@nrutledge How can I call the sdk.makeTransaction.buy() method from where to export it is there an example?

[nrutledge]

@nrutledge How can I call the sdk.makeTransaction.buy() method from where to export it is there an example?

@dimakrsna That's from the seabug-sdk. You can check the readme in src/seabug-sdk for an example of getting an sdk instance. (For the params, you could create some environment variables / config file that stores these and just use dummy values for now as it won't matter for getting mock data).

[Firdausi1]

@dimakrsna can we add a notification toast so when a buyer clicks checkout they see either a success message if it's successful or an error message. we can use react-hot-toast npm package

[Firdausi1]

Also the modal shouldn't be in the parent div, thats why a bracket () shows on the side @dimakrsna