Skip to main content

Part 4: Handling multi-asset tokens

Because a wine store can have many bottles of many different types, the appropriate template to use is the multi-asset template. With this template, you can create as many token types as you need and set a different quantity for each type.

You can continue from your code from part 3 or start from the completed version here: https://github.com/marigold-dev/training-nft-3/tree/main/solution.

If you start from the completed version, run these commands to install dependencies for the web application:

npm i
cd ./app
yarn install
cd ..

Updating the smart contract

To use the multi-asset template, you must change the code that your smart contract imports from the NFT template to the multi-asset template:

  1. In the nft.jsligo file, change the first line to this code:

     #import "@ligo/fa/lib/fa2/asset/extendable_multi_asset.impl.jsligo" "FA2Impl"
  2. In the storage, change the offers value to map<[address, nat], offer>. The storage type looks like this:

     export type Extension = {
    administrators: set<address>,
    offers: map<[address, nat], offer>, //user sells an offer for a token_id
    };

Now the offers map is indexed on the address of the seller and the ID of the token for sale.

  1. Replace the mint entrypoint with this code:

       @entry
    const mint = (
    [token_id, quantity, name, description, symbol, ipfsUrl]: [
    nat,
    nat,
    bytes,
    bytes,
    bytes,
    bytes
    ],
    s: storage
    ): ret => {
    if (quantity <= (0 as nat)) return failwith("0");
    if (! Set.mem(Tezos.get_sender(), s.extension.administrators)) return failwith(
    "1"
    );
    const token_info: map<string, bytes> =
    Map.literal(
    list(
    [
    ["name", name],
    ["description", description],
    ["interfaces", (bytes `["TZIP-12"]`)],
    ["artifactUri", ipfsUrl],
    ["displayUri", ipfsUrl],
    ["thumbnailUri", ipfsUrl],
    ["symbol", symbol],
    ["decimals", (bytes `0`)]
    ]
    )
    ) as map<string, bytes>;
    return [
    list([]) as list<operation>,
    {
    ...s,
    ledger: Big_map.add(
    [Tezos.get_sender(), token_id],
    quantity as nat,
    s.ledger
    ) as FA2Impl.ledger,
    token_metadata: Big_map.add(
    token_id,
    { token_id: token_id, token_info: token_info },
    s.token_metadata
    ),
    operators: Big_map.empty as FA2Impl.operators
    }
    ]
    };

    This updated mint entrypoint accepts both a token ID and a quantity and mints the specified number of that token.

  2. Replace the sell entrypoint with this code:

       @entry
    const sell = ([token_id, quantity, price]: [nat, nat, nat], s: storage): ret => {
    //check balance of seller
    const sellerBalance =
    FA2Impl.get_for_user([s.ledger, Tezos.get_source(), token_id]);
    if (quantity > sellerBalance) return failwith("2");
    //need to allow the contract itself to be an operator on behalf of the seller
    const newOperators =
    FA2Impl.add_operator(
    [s.operators, Tezos.get_source(), Tezos.get_self_address(), token_id]
    );
    //DECISION CHOICE: if offer already exists, we just override it
    return [
    list([]) as list<operation>,
    {
    ...s,
    extension: {
    ...s.extension,
    offers: Map.add(
    [Tezos.get_source(), token_id],
    { quantity: quantity, price: price },
    s.extension.offers
    )
    },
    operators: newOperators
    }
    ]
    };

    Like the mint entrypoint, this entrypoint now accepts a token ID and quantity as parameters.

  3. Replace the buy entrypoint with this code:

    @entry
    const buy = ([token_id, quantity, seller]: [nat, nat, address], s: storage): ret => {
    //search for the offer
    return match(Map.find_opt([seller, token_id], s.extension.offers)) {
    when (None()):
    failwith("3")
    when (Some(offer)):
    do {
    //check if amount have been paid enough
    if (Tezos.get_amount() < offer.price * (1 as mutez)) return failwith(
    "5"
    );
    // prepare transfer of XTZ to seller
    const op =
    Tezos.transaction(
    unit,
    offer.price * (1 as mutez),
    Tezos.get_contract_with_error(seller, "6")
    );
    //transfer tokens from seller to buyer
    let ledger =
    FA2Impl.decrease_token_amount_for_user(
    [s.ledger, seller, token_id, quantity]
    );
    ledger
    = FA2Impl.increase_token_amount_for_user(
    [ledger, Tezos.get_source(), token_id, quantity]
    );
    //update new offer
    const newOffer = { ...offer, quantity: abs(offer.quantity - quantity) };
    return [
    list([op]) as list<operation>,
    {
    ...s,
    extension: {
    ...s.extension,
    offers: Map.update(
    [seller, token_id],
    Some(newOffer),
    s.extension.offers
    )
    },
    ledger: ledger
    }
    ]
    }
    }
    };
  4. Update the nft.storageList.jsligo with this code:

    #import "nft.jsligo" "Contract"

    #import "@ligo/fa/lib/fa2/asset/extendable_multi_asset.impl.jsligo" "FA2Impl"

    const default_storage: Contract.storage = {
    extension: {
    administrators: Set.literal(
    list(["tz1VSUr8wwNhLAzempoch5d6hLRiTh8Cjcjb" as address])
    ) as set<address>,
    offers: Map.empty as map<[address, nat], Contract.offer>
    },
    ledger: Big_map.empty as FA2Impl.ledger,
    metadata: Big_map.literal(
    list(
    [
    ["", bytes `tezos-storage:data`],
    [
    "data",
    bytes
    `{
    "name":"FA2 NFT Marketplace",
    "description":"Example of FA2 implementation",
    "version":"0.0.1",
    "license":{"name":"MIT"},
    "authors":["Marigold<contact@marigold.dev>"],
    "homepage":"https://marigold.dev",
    "source":{
    "tools":["Ligo"],
    "location":"https://github.com/ligolang/contract-catalogue/tree/main/lib/fa2"},
    "interfaces":["TZIP-012"],
    "errors": [],
    "views": []
    }`
    ]
    ]
    )
    ) as FA2Impl.TZIP16.metadata,
    token_metadata: Big_map.empty as FA2Impl.TZIP12.tokenMetadata,
    operators: Big_map.empty as FA2Impl.operators,
    };

  5. As in the previous parts, update the administrators to include addresses that you have access to.

  6. Compile and deploy the new contract:

    TAQ_LIGO_IMAGE=ligolang/ligo:1.6.0 taq compile nft.jsligo
    taq deploy nft.tz -e "testing"

Updating the frontend

Now that the contract handles both token IDs and quantities, you must update the frontend in the same way:

  1. Generate the TypeScript classes and start the server:

    taq generate types ./app/src
    cd ./app
    yarn dev
  2. In the file src/App.tsx, replace the function refreshUserContextOnPageReload with this code:

    const refreshUserContextOnPageReload = async () => {
    console.log('refreshUserContext');
    //CONTRACT
    try {
    let c = await Tezos.contract.at(nftContractAddress, tzip12);
    console.log('nftContractAddress', nftContractAddress);

    let nftContrat: NftWalletType = await Tezos.wallet.at<NftWalletType>(
    nftContractAddress
    );
    const storage = (await nftContrat.storage()) as Storage;

    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 key: string = token_idKey.key;

    let tokenMetadata: TZIP21TokenMetadata = (await c
    .tzip12()
    .getTokenMetadata(Number(key))) as TZIP21TokenMetadata;
    nftContratTokenMetadataMap.set(key, tokenMetadata);
    })
    );
    setNftContratTokenMetadataMap(new Map(nftContratTokenMetadataMap)); //new Map to force refresh
    setNftContrat(nftContrat);
    setStorage(storage);
    } catch (error) {
    console.log('error refreshing nft contract: ', error);
    }

    //USER
    const activeAccount = await wallet.client.getActiveAccount();
    if (activeAccount) {
    setUserAddress(activeAccount.address);
    const balance = await Tezos.tz.getBalance(activeAccount.address);
    setUserBalance(balance.toNumber());
    }

    console.log('refreshUserContext ended.');
    };

    This function now retrieves all of the tokens in the contract.

  3. Replace the content of the src/MintPage.tsx file with this code:

    import {
    AddCircleOutlined,
    Close,
    KeyboardArrowLeft,
    KeyboardArrowRight,
    } from '@mui/icons-material';
    import OpenWithIcon from '@mui/icons-material/OpenWith';
    import {
    Box,
    Button,
    CardHeader,
    CardMedia,
    MobileStepper,
    Stack,
    SwipeableDrawer,
    TextField,
    Toolbar,
    useMediaQuery,
    } from '@mui/material';
    import Card from '@mui/material/Card';
    import CardContent from '@mui/material/CardContent';
    import Paper from '@mui/material/Paper';
    import Typography from '@mui/material/Typography';
    import { char2Bytes } from '@taquito/utils';
    import { BigNumber } from 'bignumber.js';
    import { useFormik } from 'formik';
    import { useSnackbar } from 'notistack';
    import React, { useEffect, useState } from 'react';
    import SwipeableViews from 'react-swipeable-views';
    import * as yup from 'yup';
    import { TZIP21TokenMetadata, UserContext, UserContextType } from './App';
    import { TransactionInvalidBeaconError } from './TransactionInvalidBeaconError';
    import { address, bytes, nat } from './type-aliases';

    export default function MintPage() {
    const {
    userAddress,
    nftContrat,
    refreshUserContextOnPageReload,
    nftContratTokenMetadataMap,
    storage,
    } = React.useContext(UserContext) as UserContextType;
    const { enqueueSnackbar } = useSnackbar();
    const [pictureUrl, setPictureUrl] = useState<string>('');
    const [file, setFile] = useState<File | null>(null);

    const [activeStep, setActiveStep] = React.useState(0);

    const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };

    const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    const handleStepChange = (step: number) => {
    setActiveStep(step);
    };

    const validationSchema = yup.object({
    name: yup.string().required('Name is required'),
    description: yup.string().required('Description is required'),
    symbol: yup.string().required('Symbol is required'),
    quantity: yup
    .number()
    .required('Quantity is required')
    .positive('ERROR: The number must be greater than 0!'),
    });

    const formik = useFormik({
    initialValues: {
    name: '',
    description: '',
    token_id: 0,
    symbol: 'WINE',
    quantity: 1,
    } as TZIP21TokenMetadata & { quantity: number },
    validationSchema: validationSchema,
    onSubmit: (values) => {
    mint(values);
    },
    });

    //open mint drawer if admin
    useEffect(() => {
    if (
    storage &&
    storage!.extension.administrators.indexOf(userAddress! as address) < 0
    )
    setFormOpen(false);
    else setFormOpen(true);
    }, [userAddress]);

    useEffect(() => {
    (async () => {
    if (
    nftContratTokenMetadataMap &&
    nftContratTokenMetadataMap.size > 0
    ) {
    formik.setFieldValue('token_id', nftContratTokenMetadataMap.size);
    }
    })();
    }, [nftContratTokenMetadataMap?.size]);

    const mint = async (
    newTokenDefinition: TZIP21TokenMetadata & { quantity: number }
    ) => {
    try {
    //IPFS
    if (file) {
    const formData = new FormData();
    formData.append('file', file);

    const requestHeaders: HeadersInit = new Headers();
    requestHeaders.set(
    'pinata_api_key',
    `${import.meta.env.VITE_PINATA_API_KEY}`
    );
    requestHeaders.set(
    'pinata_secret_api_key',
    `${import.meta.env.VITE_PINATA_API_SECRET}`
    );

    const resFile = await fetch(
    'https://api.pinata.cloud/pinning/pinFileToIPFS',
    {
    method: 'post',
    body: formData,
    headers: requestHeaders,
    }
    );

    const responseJson = await resFile.json();
    console.log('responseJson', responseJson);

    const thumbnailUri = `ipfs://${responseJson.IpfsHash}`;
    setPictureUrl(
    `https://gateway.pinata.cloud/ipfs/${responseJson.IpfsHash}`
    );

    const op = await nftContrat!.methods
    .mint(
    new BigNumber(newTokenDefinition.token_id) as nat,
    new BigNumber(newTokenDefinition.quantity) as nat,
    char2Bytes(newTokenDefinition.name!) as bytes,
    char2Bytes(newTokenDefinition.description!) as bytes,
    char2Bytes(newTokenDefinition.symbol!) as bytes,
    char2Bytes(thumbnailUri) as bytes
    )
    .send();

    //close directly the form
    setFormOpen(false);
    enqueueSnackbar(
    'Wine collection is minting ... it will be ready on next block, wait for the confirmation message before minting another collection',
    { variant: 'info' }
    );

    await op.confirmation(2);

    enqueueSnackbar('Wine collection minted', { 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 [formOpen, setFormOpen] = useState<boolean>(false);

    const toggleDrawer =
    (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
    if (
    event.type === 'keydown' &&
    ((event as React.KeyboardEvent).key === 'Tab' ||
    (event as React.KeyboardEvent).key === 'Shift')
    ) {
    return;
    }
    setFormOpen(open);
    };

    const isTablet = useMediaQuery('(min-width:600px)');

    return (
    <Paper>
    {storage ? (
    <Button
    disabled={
    storage.extension.administrators.indexOf(
    userAddress! as address
    ) < 0
    }
    sx={{
    p: 1,
    position: 'absolute',
    right: '0',
    display: formOpen ? 'none' : 'block',
    zIndex: 1,
    }}
    onClick={toggleDrawer(!formOpen)}
    >
    {' Mint Form ' +
    (storage!.extension.administrators.indexOf(
    userAddress! as address
    ) < 0
    ? ' (You are not admin)'
    : '')}
    <OpenWithIcon />
    </Button>
    ) : (
    ''
    )}

    <SwipeableDrawer
    onClose={toggleDrawer(false)}
    onOpen={toggleDrawer(true)}
    anchor="right"
    open={formOpen}
    variant="temporary"
    >
    <Toolbar
    sx={
    isTablet
    ? { marginTop: '0', marginRight: '0' }
    : { marginTop: '35px', marginRight: '125px' }
    }
    />
    <Box
    sx={{
    width: isTablet ? '40vw' : '60vw',
    borderColor: 'text.secondary',
    borderStyle: 'solid',
    borderWidth: '1px',

    height: 'calc(100vh - 64px)',
    }}
    >
    <Button
    sx={{
    position: 'absolute',
    right: '0',
    display: !formOpen ? 'none' : 'block',
    }}
    onClick={toggleDrawer(!formOpen)}
    >
    <Close />
    </Button>
    <form onSubmit={formik.handleSubmit}>
    <Stack spacing={2} margin={2} alignContent={'center'}>
    <Typography variant="h5">Mint a new collection</Typography>

    <TextField
    id="standard-basic"
    name="token_id"
    label="token_id"
    value={formik.values.token_id}
    disabled
    variant="filled"
    />
    <TextField
    id="standard-basic"
    name="name"
    label="name"
    required
    value={formik.values.name}
    onChange={formik.handleChange}
    error={formik.touched.name && Boolean(formik.errors.name)}
    helperText={formik.touched.name && formik.errors.name}
    variant="filled"
    />
    <TextField
    id="standard-basic"
    name="symbol"
    label="symbol"
    required
    value={formik.values.symbol}
    onChange={formik.handleChange}
    error={
    formik.touched.symbol && Boolean(formik.errors.symbol)
    }
    helperText={formik.touched.symbol && formik.errors.symbol}
    variant="filled"
    />
    <TextField
    id="standard-basic"
    name="description"
    label="description"
    required
    multiline
    minRows={2}
    value={formik.values.description}
    onChange={formik.handleChange}
    error={
    formik.touched.description &&
    Boolean(formik.errors.description)
    }
    helperText={
    formik.touched.description && formik.errors.description
    }
    variant="filled"
    />

    <TextField
    type="number"
    id="standard-basic"
    name="quantity"
    label="quantity"
    required
    value={formik.values.quantity}
    onChange={formik.handleChange}
    error={
    formik.touched.quantity && Boolean(formik.errors.quantity)
    }
    helperText={
    formik.touched.quantity && formik.errors.quantity
    }
    variant="filled"
    />

    {pictureUrl ? (
    <img height={100} width={100} src={pictureUrl} />
    ) : (
    ''
    )}
    <Button variant="contained" component="label" color="primary">
    <AddCircleOutlined />
    Upload an image
    <input
    type="file"
    hidden
    name="data"
    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
    const data = e.target.files ? e.target.files[0] : null;
    if (data) {
    setFile(data);
    }
    e.preventDefault();
    }}
    />
    </Button>

    <Button variant="contained" type="submit">
    Mint
    </Button>
    </Stack>
    </form>
    </Box>
    </SwipeableDrawer>

    <Typography variant="h5">Mint your wine collection</Typography>

    {nftContratTokenMetadataMap.size != 0 ? (
    <Box sx={{ width: '70vw' }}>
    <SwipeableViews
    axis="x"
    index={activeStep}
    onChangeIndex={handleStepChange}
    enableMouseEvents
    >
    {Array.from(nftContratTokenMetadataMap!.entries()).map(
    ([token_id, token]) => (
    <Card
    sx={{
    display: 'block',
    maxWidth: '80vw',
    overflow: 'hidden',
    }}
    key={token_id.toString()}
    >
    <CardHeader
    titleTypographyProps={
    isTablet ? { fontSize: '1.5em' } : { fontSize: '1em' }
    }
    title={token.name}
    />

    <CardMedia
    sx={
    isTablet
    ? {
    width: 'auto',
    marginLeft: '33%',
    maxHeight: '50vh',
    }
    : { width: '100%', maxHeight: '40vh' }
    }
    component="img"
    image={token.thumbnailUri?.replace(
    'ipfs://',
    'https://gateway.pinata.cloud/ipfs/'
    )}
    />

    <CardContent>
    <Box>
    <Typography>{'ID : ' + token_id}</Typography>
    <Typography>{'Symbol : ' + token.symbol}</Typography>
    <Typography>
    {'Description : ' + token.description}
    </Typography>
    </Box>
    </CardContent>
    </Card>
    )
    )}
    </SwipeableViews>
    <MobileStepper
    variant="text"
    steps={Array.from(nftContratTokenMetadataMap!.entries()).length}
    position="static"
    activeStep={activeStep}
    nextButton={
    <Button
    size="small"
    onClick={handleNext}
    disabled={
    activeStep ===
    Array.from(nftContratTokenMetadataMap!.entries()).length -
    1
    }
    >
    Next
    <KeyboardArrowRight />
    </Button>
    }
    backButton={
    <Button
    size="small"
    onClick={handleBack}
    disabled={activeStep === 0}
    >
    <KeyboardArrowLeft />
    Back
    </Button>
    }
    />
    </Box>
    ) : (
    <Typography sx={{ py: '2em' }} variant="h4">
    Sorry, there is not NFT yet, you need to mint bottles first
    </Typography>
    )}
    </Paper>
    );
    }
  4. Replace the content of the src/OffersPage.tsx file 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!'),
    quantity: yup
    .number()
    .required('Quantity is required')
    .positive('ERROR: The number must be greater than 0!'),
    });

    type Offer = {
    price: nat;
    quantity: 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<number, Offer>
    >(new Map());
    let [ledgerTokenIDMap, setLedgerTokenIDMap] = React.useState<
    Map<number, nat>
    >(new Map());

    const {
    nftContrat,
    nftContratTokenMetadataMap,
    userAddress,
    storage,
    refreshUserContextOnPageReload,
    Tezos,
    setUserAddress,
    setUserBalance,
    wallet,
    } = React.useContext(UserContext) as UserContextType;

    const { enqueueSnackbar } = useSnackbar();

    const formik = useFormik({
    initialValues: {
    price: 0,
    quantity: 1,
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
    console.log('onSubmit: (values)', values, selectedTokenId);
    sell(selectedTokenId, values.quantity, values.price);
    },
    });

    const initPage = async () => {
    if (storage) {
    console.log('context is not empty, init page now');
    ledgerTokenIDMap = new Map();
    offersTokenIDMap = new Map();

    const ledgerBigMapId = (
    storage.ledger as unknown as { id: BigNumber }
    ).id.toNumber();

    const owner_token_ids = await api.bigMapsGetKeys(ledgerBigMapId, {
    micheline: 'Json',
    active: true,
    });

    await Promise.all(
    owner_token_ids.map(async (owner_token_idKey) => {
    const key: { address: string; nat: string } =
    owner_token_idKey.key;

    if (key.address === userAddress) {
    const ownerBalance = await storage.ledger.get({
    0: userAddress as address,
    1: BigNumber(key.nat) as nat,
    });
    if (ownerBalance.toNumber() !== 0)
    ledgerTokenIDMap.set(Number(key.nat), ownerBalance);
    const ownerOffers = await storage.extension.offers.get({
    0: userAddress as address,
    1: BigNumber(key.nat) as nat,
    });
    if (ownerOffers && ownerOffers.quantity.toNumber() !== 0)
    offersTokenIDMap.set(Number(key.nat), ownerOffers);

    console.log(
    'found for ' +
    key.address +
    ' on token_id ' +
    key.nat +
    ' with balance ' +
    ownerBalance
    );
    } else {
    console.log('skip to next owner');
    }
    })
    );
    setLedgerTokenIDMap(new Map(ledgerTokenIDMap)); //force refresh
    setOffersTokenIDMap(new Map(offersTokenIDMap)); //force refresh

    console.log('ledgerTokenIDMap', ledgerTokenIDMap);
    } 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, quantity: number, price: number) => {
    try {
    const op = await nftContrat?.methods
    .sell(
    BigNumber(token_id) as nat,
    BigNumber(quantity) as nat,
    BigNumber(price * 1000000) as nat //to mutez
    )
    .send();

    await op?.confirmation(2);

    enqueueSnackbar(
    'Wine collection (token_id=' +
    token_id +
    ') offer for ' +
    quantity +
    ' 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>
    {ledgerTokenIDMap && ledgerTokenIDMap.size != 0 ? (
    <Fragment>
    <Pagination
    page={currentPageIndex}
    onChange={(_, value) => setCurrentPageIndex(value)}
    count={Math.ceil(
    Array.from(ledgerTokenIDMap.entries()).length / itemPerPage
    )}
    showFirstButton
    showLastButton
    />

    <ImageList
    cols={
    isDesktop ? itemPerPage / 2 : isTablet ? itemPerPage / 3 : 1
    }
    >
    {Array.from(ledgerTokenIDMap.entries())
    .filter((_, index) =>
    index >= currentPageIndex * itemPerPage - itemPerPage &&
    index < currentPageIndex * itemPerPage
    ? true
    : false
    )
    .map(([token_id, balance]) => (
    <Card key={token_id + '-' + token_id.toString()}>
    <CardHeader
    avatar={
    <Tooltip
    title={
    <Box>
    <Typography>
    {' '}
    {'ID : ' + token_id.toString()}{' '}
    </Typography>
    <Typography>
    {'Description : ' +
    nftContratTokenMetadataMap.get(
    token_id.toString()
    )?.description}
    </Typography>
    </Box>
    }
    >
    <InfoOutlined />
    </Tooltip>
    }
    title={
    nftContratTokenMetadataMap.get(token_id.toString())
    ?.name
    }
    />
    <CardMedia
    sx={{ width: 'auto', marginLeft: '33%' }}
    component="img"
    height="100px"
    image={nftContratTokenMetadataMap
    .get(token_id.toString())
    ?.thumbnailUri?.replace(
    'ipfs://',
    'https://gateway.pinata.cloud/ipfs/'
    )}
    />

    <CardContent>
    <Box>
    <Typography variant="body2">
    {'Owned : ' + balance.toNumber()}
    </Typography>
    <Typography variant="body2">
    {offersTokenIDMap.get(token_id)
    ? 'Traded : ' +
    offersTokenIDMap.get(token_id)?.quantity +
    ' (price : ' +
    offersTokenIDMap
    .get(token_id)
    ?.price.dividedBy(1000000) +
    ' Tz/b)'
    : ''}
    </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(token_id);
    formik.handleSubmit(values);
    }}
    >
    <span>
    <TextField
    type="number"
    sx={{ width: '40%' }}
    name="price"
    label="price/bottle"
    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
    }
    />
    <TextField
    sx={{
    width: '60%',
    bottom: 0,
    position: 'relative',
    }}
    type="number"
    label="quantity"
    name="quantity"
    placeholder="Enter a quantity"
    variant="filled"
    value={formik.values.quantity}
    onChange={formik.handleChange}
    error={
    formik.touched.quantity &&
    Boolean(formik.errors.quantity)
    }
    helperText={
    formik.touched.quantity &&
    formik.errors.quantity
    }
    InputProps={{
    inputProps: {
    min: 0,
    max: balance.toNumber(),
    },
    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>
    );
    }
  5. Replace the content of the src/WineCataloguePage.tsx file with this code:

    import { InfoOutlined } from '@mui/icons-material';
    import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
    import {
    Box,
    Button,
    Card,
    CardActions,
    CardContent,
    CardHeader,
    CardMedia,
    ImageList,
    InputAdornment,
    Pagination,
    TextField,
    Tooltip,
    useMediaQuery,
    } from '@mui/material';
    import Paper from '@mui/material/Paper';
    import Typography from '@mui/material/Typography';

    import BigNumber from 'bignumber.js';
    import { useFormik } from 'formik';
    import { useSnackbar } from 'notistack';
    import React, { Fragment, 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;

    type OfferEntry = [{ 0: address; 1: nat }, Offer];

    type Offer = {
    price: nat;
    quantity: nat;
    };

    const validationSchema = yup.object({
    quantity: yup
    .number()
    .required('Quantity is required')
    .positive('ERROR: The number must be greater than 0!'),
    });

    export default function WineCataloguePage() {
    const {
    Tezos,
    nftContratTokenMetadataMap,
    setUserAddress,
    setUserBalance,
    wallet,
    userAddress,
    nftContrat,
    refreshUserContextOnPageReload,
    storage,
    } = React.useContext(UserContext) as UserContextType;
    const [selectedOfferEntry, setSelectedOfferEntry] =
    React.useState<OfferEntry | null>(null);

    const formik = useFormik({
    initialValues: {
    quantity: 1,
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
    console.log('onSubmit: (values)', values, selectedOfferEntry);
    buy(values.quantity, selectedOfferEntry!);
    },
    });
    const { enqueueSnackbar } = useSnackbar();
    const [currentPageIndex, setCurrentPageIndex] = useState<number>(1);

    const buy = async (quantity: number, selectedOfferEntry: OfferEntry) => {
    try {
    const op = await nftContrat?.methods
    .buy(
    selectedOfferEntry[0][1],
    BigNumber(quantity) as nat,
    selectedOfferEntry[0][0]
    )
    .send({
    amount: quantity * selectedOfferEntry[1].price.toNumber(),
    mutez: true,
    });

    await op?.confirmation(2);

    enqueueSnackbar(
    'Bought ' +
    quantity +
    ' unit of Wine collection (token_id:' +
    selectedOfferEntry[0][1] +
    ')',
    {
    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">
    Wine catalogue
    </Typography>

    {storage?.extension.offers && storage?.extension.offers.size != 0 ? (
    <Fragment>
    <Pagination
    page={currentPageIndex}
    onChange={(_, value) => setCurrentPageIndex(value)}
    count={Math.ceil(
    Array.from(storage?.extension.offers.entries()).filter(
    ([_, offer]) => offer.quantity.isGreaterThan(0)
    ).length / itemPerPage
    )}
    showFirstButton
    showLastButton
    />
    <ImageList
    cols={
    isDesktop ? itemPerPage / 2 : isTablet ? itemPerPage / 3 : 1
    }
    >
    {Array.from(storage?.extension.offers.entries())
    .filter(([_, offer]) => offer.quantity.isGreaterThan(0))
    .filter((_, index) =>
    index >= currentPageIndex * itemPerPage - itemPerPage &&
    index < currentPageIndex * itemPerPage
    ? true
    : false
    )
    .map(([key, offer]) => (
    <Card key={key[0] + '-' + key[1].toString()}>
    <CardHeader
    avatar={
    <Tooltip
    title={
    <Box>
    <Typography>
    {' '}
    {'ID : ' + key[1].toString()}{' '}
    </Typography>
    <Typography>
    {'Description : ' +
    nftContratTokenMetadataMap.get(
    key[1].toString()
    )?.description}
    </Typography>
    <Typography>{'Seller : ' + key[0]} </Typography>
    </Box>
    }
    >
    <InfoOutlined />
    </Tooltip>
    }
    title={
    nftContratTokenMetadataMap.get(key[1].toString())?.name
    }
    />
    <CardMedia
    sx={{ width: 'auto', marginLeft: '33%' }}
    component="img"
    height="100px"
    image={nftContratTokenMetadataMap
    .get(key[1].toString())
    ?.thumbnailUri?.replace(
    'ipfs://',
    'https://gateway.pinata.cloud/ipfs/'
    )}
    />

    <CardContent>
    <Box>
    <Typography variant="body2">
    {' '}
    {'Price : ' +
    offer.price.dividedBy(1000000) +
    ' XTZ/bottle'}
    </Typography>
    <Typography variant="body2">
    {'Available units : ' + offer.quantity}
    </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) => {
    setSelectedOfferEntry([key, offer]);
    formik.handleSubmit(values);
    }}
    >
    <TextField
    type="number"
    sx={{ bottom: 0, position: 'relative' }}
    fullWidth
    name="quantity"
    label="quantity"
    placeholder="Enter a quantity"
    variant="filled"
    value={formik.values.quantity}
    onChange={formik.handleChange}
    error={
    formik.touched.quantity &&
    Boolean(formik.errors.quantity)
    }
    helperText={
    formik.touched.quantity && formik.errors.quantity
    }
    InputProps={{
    inputProps: { min: 0, max: offer.quantity },
    endAdornment: (
    <InputAdornment position="end">
    <Button
    type="submit"
    aria-label="add to favorites"
    >
    <ShoppingCartIcon /> BUY
    </Button>
    </InputAdornment>
    ),
    }}
    />
    </form>
    )}
    </CardActions>
    </Card>
    ))}
    </ImageList>
    </Fragment>
    ) : (
    <Typography sx={{ py: '2em' }} variant="h4">
    Sorry, there is not NFT to buy yet, you need to mint or sell
    bottles first
    </Typography>
    )}
    </Paper>
    );
    }

Working with the completed application

Now you can create, buy, and sell bottles of wine as in the applications in the previous parts. For example, if you connect an administrator account you can create types of wine with quantities and offer them for sale. Then you can connect a different account and buy bottles from the available different types, as in this picture:

Buying bottles from the available different types

Summary

Now you can create token collections from the different templates that are available in the @ligo/fa library, including NFTs, single-asset tokens, and multi-asset tokens. You can create web applications that manage token transactions and show information about tokens.

For the complete content of the contract and web app at the end of the tutorial, see the completed part 4 app at https://github.com/marigold-dev/training-nft-4.

If you want to continue with the application, you can extend the contract or application. Here are some ideas:

  • Create an online marketplace for a different kind of token, like flowers, candy, or cars
  • Change how tokens behave, like sending a royalty to the marketplace as a sales fee when they are transferred
  • Add error checking for the application to prevent it from sending invalid transactions
  • Add new features to the marketplace, such as a shopping cart that lets people buy more than one kind of bottle at a time