Adding a selling page to the web application
-
Stop the web application if it is running.
-
Generate the TypeScript classes and start the server:
taq generate types ./app/src cd ./app yarn dev -
Open the sale page in the
./src/OffersPage.tsxfile and replace it with this code:import { InfoOutlined } from "@mui/icons-material"; import SellIcon from "@mui/icons-material/Sell"; import * as api from "@tzkt/sdk-api"; import { Box, Button, Card, CardActions, CardContent, CardHeader, CardMedia, ImageList, InputAdornment, Pagination, TextField, Tooltip, Typography, useMediaQuery, } from "@mui/material"; import Paper from "@mui/material/Paper"; import BigNumber from "bignumber.js"; import { useFormik } from "formik"; import { useSnackbar } from "notistack"; import React, { Fragment, useEffect, useState } from "react"; import * as yup from "yup"; import { UserContext, UserContextType } from "./App"; import ConnectButton from "./ConnectWallet"; import { TransactionInvalidBeaconError } from "./TransactionInvalidBeaconError"; import { address, nat } from "./type-aliases"; const itemPerPage: number = 6; const validationSchema = yup.object({ price: yup .number() .required("Price is required") .positive("ERROR: The number must be greater than 0!"), }); type Offer = { owner: address; price: nat; }; export default function OffersPage() { api.defaults.baseUrl = "https://api.ghostnet.tzkt.io"; const [selectedTokenId, setSelectedTokenId] = React.useState<number>(0); const [currentPageIndex, setCurrentPageIndex] = useState<number>(1); let [offersTokenIDMap, setOffersTokenIDMap] = React.useState< Map<string, Offer> >(new Map()); let [ownerTokenIds, setOwnerTokenIds] = React.useState<Set<string>>( new Set() ); const { nftContrat, nftContratTokenMetadataMap, userAddress, storage, refreshUserContextOnPageReload, Tezos, setUserAddress, setUserBalance, wallet, } = React.useContext(UserContext) as UserContextType; const { enqueueSnackbar } = useSnackbar(); const formik = useFormik({ initialValues: { price: 0, }, validationSchema: validationSchema, onSubmit: (values) => { console.log("onSubmit: (values)", values, selectedTokenId); sell(selectedTokenId, values.price); }, }); const initPage = async () => { if (storage) { console.log("context is not empty, init page now"); ownerTokenIds = new Set(); offersTokenIDMap = new Map(); const token_metadataBigMapId = ( storage.token_metadata as unknown as { id: BigNumber } ).id.toNumber(); const token_ids = await api.bigMapsGetKeys(token_metadataBigMapId, { micheline: "Json", active: true, }); await Promise.all( token_ids.map(async (token_idKey) => { const token_idNat = new BigNumber(token_idKey.key) as nat; let owner = await storage.ledger.get(token_idNat); if (owner === userAddress) { ownerTokenIds.add(token_idKey.key); const ownerOffers = await storage.offers.get(token_idNat); if (ownerOffers) offersTokenIDMap.set(token_idKey.key, ownerOffers); console.log( "found for " + owner + " on token_id " + token_idKey.key + " with balance " + 1 ); } else { console.log("skip to next token id"); } }) ); setOwnerTokenIds(new Set(ownerTokenIds)); //force refresh setOffersTokenIDMap(new Map(offersTokenIDMap)); //force refresh } else { console.log("context is empty, wait for parent and retry ..."); } }; useEffect(() => { (async () => { console.log("after a storage changed"); await initPage(); })(); }, [storage]); useEffect(() => { (async () => { console.log("on Page init"); await initPage(); })(); }, []); const sell = async (token_id: number, price: number) => { try { const op = await nftContrat?.methods .sell( BigNumber(token_id) as nat, BigNumber(price * 1000000) as nat //to mutez ) .send(); await op?.confirmation(2); enqueueSnackbar( "Wine collection (token_id=" + token_id + ") offer for " + 1 + " units at price of " + price + " XTZ", { variant: "success" } ); refreshUserContextOnPageReload(); //force all app to refresh the context } catch (error) { console.table(`Error: ${JSON.stringify(error, null, 2)}`); let tibe: TransactionInvalidBeaconError = new TransactionInvalidBeaconError(error); enqueueSnackbar(tibe.data_message, { variant: "error", autoHideDuration: 10000, }); } }; const isDesktop = useMediaQuery("(min-width:1100px)"); const isTablet = useMediaQuery("(min-width:600px)"); return ( <Paper> <Typography style={{ paddingBottom: "10px" }} variant="h5"> Sell my bottles </Typography> {ownerTokenIds && ownerTokenIds.size != 0 ? ( <Fragment> <Pagination page={currentPageIndex} onChange={(_, value) => setCurrentPageIndex(value)} count={Math.ceil( Array.from(ownerTokenIds.entries()).length / itemPerPage )} showFirstButton showLastButton /> <ImageList cols={ isDesktop ? itemPerPage / 2 : isTablet ? itemPerPage / 3 : 1 } > {Array.from(ownerTokenIds.entries()) .filter((_, index) => index >= currentPageIndex * itemPerPage - itemPerPage && index < currentPageIndex * itemPerPage ? true : false ) .map(([token_id]) => ( <Card key={token_id + "-" + token_id.toString()}> <CardHeader avatar={ <Tooltip title={ <Box> <Typography> {" "} {"ID : " + token_id.toString()}{" "} </Typography> <Typography> {"Description : " + nftContratTokenMetadataMap.get(token_id) ?.description} </Typography> </Box> } > <InfoOutlined /> </Tooltip> } title={nftContratTokenMetadataMap.get(token_id)?.name} /> <CardMedia sx={{ width: "auto", marginLeft: "33%" }} component="img" height="100px" image={nftContratTokenMetadataMap .get(token_id) ?.thumbnailUri?.replace( "ipfs://", "https://gateway.pinata.cloud/ipfs/" )} /> <CardContent> <Box> <Typography variant="body2"> {offersTokenIDMap.get(token_id) ? "Traded : " + 1 + " (price : " + offersTokenIDMap .get(token_id) ?.price.dividedBy(1000000) + " Tz)" : ""} </Typography> </Box> </CardContent> <CardActions> {!userAddress ? ( <Box marginLeft="5vw"> <ConnectButton Tezos={Tezos} nftContratTokenMetadataMap={ nftContratTokenMetadataMap } setUserAddress={setUserAddress} setUserBalance={setUserBalance} wallet={wallet} /> </Box> ) : ( <form style={{ width: "100%" }} onSubmit={(values) => { setSelectedTokenId(Number(token_id)); formik.handleSubmit(values); }} > <span> <TextField type="number" name="price" label="price" placeholder="Enter a price" variant="filled" value={formik.values.price} onChange={formik.handleChange} error={ formik.touched.price && Boolean(formik.errors.price) } helperText={ formik.touched.price && formik.errors.price } InputProps={{ endAdornment: ( <InputAdornment position="end"> <Button type="submit" aria-label="add to favorites" > <SellIcon /> Sell </Button> </InputAdornment> ), }} /> </span> </form> )} </CardActions> </Card> ))}{" "} </ImageList> </Fragment> ) : ( <Typography sx={{ py: "2em" }} variant="h4"> Sorry, you don't own any bottles, buy or mint some first </Typography> )} </Paper> ); }This page shows the bottles that the connected account owns and allows the user to select bottles for sale. When the user selects bottles and adds a sale price, the page calls the
sellentrypoint with this code:nftContrat?.methods .sell(BigNumber(token_id) as nat, BigNumber(price * 1000000) as nat) .send();This code multiplies the price by 1,000,000 because the UI shows prices in tez but the contract records prices in mutez. Then the contract creates an offer for the selected token.
-
As you did in the previous part, connect an administrator's wallet to the application and create at least one NFT. The new contract that you deployed in this section has no NFTs to start with.
-
Offer a bottle for sale:
-
Open the application and click Trading > Sell bottles. The sale page opens and shows the bottles that you own, as in this picture:
-
Set the price for a bottle and then click Sell.
-
Approve the transaction in your wallet and wait for the page to refresh.
When the page refreshes, the bottle updates to show "Traded" and the offer price, as in this picture:
-
