hooks#useMarketplaceMessage TypeScript Examples

function Offer({ bid, bidder, listingOwner, hash }: Props) {
  const { id } = useParams() as Params;
  const sendMessage = useMarketplaceMessage();
  const { account } = useAccount();

  const [isModalOpen, setIsModalOpen] = useState(false);

  const isOwner = account?.decodedAddress === listingOwner;
  const isSale = !!hash;

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  const accept = () => {
    const payload = {
      AcceptOffer: { nftContractId: NFT_CONTRACT_ADDRESS, tokenId: id, offerHash: hash },
    };

    sendMessage(payload).then(closeModal);
  };

  return (
    <>
      <div className={styles.offer}>
        <div className={styles.info}>
          <p className={styles.bid}>{bid}</p>
          <p className={styles.bidder}>{bidder}</p>
        </div>
        {isOwner && isSale && <Button text="Accept" size="small" onClick={openModal} />}
      </div>
      {isModalOpen && (
        <ConfirmationModal heading={`Do you agree to sell the item for ${bid}?`} close={closeModal} onSubmit={accept} />
      )}
    </>
  );
}

function AuctionListing(props: Props) {
  const { isOwner, id, heading, description, owner, image, offers, startedAt, endedAt, price, royalty, rarity, attrs } =
    props;

  const sendMessage = useMarketplaceMessage();
  const [isPriceModalOpen, setIsPriceModalOpen] = useState(false);
  const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);

  const getTimestamp = (value: string) => +value.replaceAll(',', '');

  const startTimestamp = getTimestamp(startedAt);
  const endTimestamp = getTimestamp(endedAt);

  const startDate = new Date(startTimestamp).toLocaleString();
  const endDate = new Date(endTimestamp).toLocaleString();

  const currentTimestamp = new Date().getTime();
  const isAuctionOver = currentTimestamp > endTimestamp;

  const openPriceModal = () => {
    setIsPriceModalOpen(true);
  };

  const openConfirmationModal = () => {
    setIsConfirmationModalOpen(true);
  };

  const closeModal = () => {
    setIsPriceModalOpen(false);
    setIsConfirmationModalOpen(false);
  };

  const bid = (priceValue: string) => {
    const payload = { AddBid: { nftContractId: NFT_CONTRACT_ADDRESS, tokenId: id, price: priceValue } };
    sendMessage(payload, priceValue).then(closeModal);
  };

  const settle = () => {
    const payload = { SettleAuction: { nftContractId: NFT_CONTRACT_ADDRESS, tokenId: id } };
    sendMessage(payload).then(closeModal);
  };

  return (
    <>
      <Listing
        heading={heading}
        description={description}
        owner={owner}
        image={image}
        offers={offers}
        price={price}
        royalty={royalty}
        rarity={rarity}
        attrs={attrs}>
        <div className={styles.body}>
          <p className={styles.time}>
            <span>Start time: {startDate}</span>
            <span>End time: {endDate}</span>
          </p>
          <OnLogin>
            {isOwner
              ? isAuctionOver && <Button text="Settle auction" onClick={openConfirmationModal} block />
              : !isAuctionOver && <Button text="Make bid" onClick={openPriceModal} block />}
          </OnLogin>
        </div>
      </Listing>
      {isPriceModalOpen && (
        <PriceModal heading={`Enter your bid. Min price is ${price}`} close={closeModal} onSubmit={bid} />
      )}
      {isConfirmationModalOpen && <ConfirmationModal heading="Settle auction?" close={closeModal} onSubmit={settle} />}
    </>
  );
}

function OwnerListing(props: Props) {
  const { isOwner, id, heading, description, owner, image, offers, price, royalty, rarity, attrs } = props;

  const sendMessage = useMarketplaceMessage();

  const [isAuctionModalOpen, setIsAuctionModalOpen] = useState(false);
  const [isPriceModalOpen, setIsPriceModalOpen] = useState(false);

  const openAuctionModal = () => {
    setIsAuctionModalOpen(true);
  };

  const openPriceModal = () => {
    setIsPriceModalOpen(true);
  };

  const closeModal = () => {
    setIsAuctionModalOpen(false);
    setIsPriceModalOpen(false);
  };

  const startSale = (priceValue: string) => {
    const payload = {
      AddMarketData: {
        nftContractId: NFT_CONTRACT_ADDRESS,
        ftContractId: null,
        tokenId: id,
        price: priceValue,
      },
    };

    sendMessage(payload, priceValue).then(closeModal);
  };

  return (
    <>
      <Listing
        heading={heading}
        description={description}
        owner={owner}
        image={image}
        offers={offers}
        price={price}
        royalty={royalty}
        rarity={rarity}
        attrs={attrs}>
        <OnLogin>
          {isOwner && (
            <>
              <Button text="Start auction" onClick={openAuctionModal} block />
              <Button text="Start sale" onClick={openPriceModal} block />
            </>
          )}
        </OnLogin>
      </Listing>
      {isAuctionModalOpen && <AuctionModal close={closeModal} />}
      {isPriceModalOpen && <PriceModal heading="Enter price to start sale" close={closeModal} onSubmit={startSale} />}
    </>
  );
}

function AuctionModal({ close }: Props) {
  const { id } = useParams() as Params;

  const { values, handleChange } = useForm({ minPrice: '', duration: '', bidPeriod: '' });
  const { minPrice, duration, bidPeriod } = values;

  const sendMessage = useMarketplaceMessage();

  const getMilliseconds = (value: string) => Number(value) * MILLISECONDS_MULTIPLIER;

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (minPrice && duration) {
      const payload = {
        CreateAuction: {
          nftContractId: NFT_CONTRACT_ADDRESS,
          ftContractId: null,
          tokenId: id,
          duration: getMilliseconds(duration),
          bidPeriod: getMilliseconds(bidPeriod),
          minPrice,
        },
      };

      sendMessage(payload).then(close);
    }
  };

  return (
    <Modal heading="Auction" close={close}>
      <form className={styles.form} onSubmit={handleSubmit}>
        <Input placeholder="min price" name="minPrice" value={minPrice} onChange={handleChange} />
        <Input placeholder="duration (min)" name="duration" value={duration} onChange={handleChange} />
        <Input placeholder="bid period (min)" name="bidPeriod" value={bidPeriod} onChange={handleChange} />
        <Button type="submit" text="Start auction" block />
      </form>
    </Modal>
  );
}

function SaleListing(props: Props) {
  const { isOwner, id, heading, description, owner, image, offers, price, royalty, rarity, attrs } = props;

  const sendMessage = useMarketplaceMessage();

  const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
  const [isPriceModalOpen, setIsPriceModalOpen] = useState(false);

  const openConfirmationModal = () => {
    setIsConfirmationModalOpen(true);
  };

  const openPriceModal = () => {
    setIsPriceModalOpen(true);
  };

  const closeModal = () => {
    setIsConfirmationModalOpen(false);
    setIsPriceModalOpen(false);
  };

  const buy = () => {
    const payload = { BuyItem: { nftContractId: NFT_CONTRACT_ADDRESS, tokenId: id } };
    const value = price?.replaceAll(',', '');

    sendMessage(payload, value).then(closeModal);
  };

  const offer = (priceValue: string) => {
    const payload = {
      AddOffer: {
        nftContractId: NFT_CONTRACT_ADDRESS,
        ftContractId: null,
        tokenId: id,
        price: priceValue,
      },
    };

    sendMessage(payload, priceValue).then(closeModal);
  };

  return (
    <>
      <Listing
        heading={heading}
        description={description}
        owner={owner}
        image={image}
        offers={offers}
        price={price}
        royalty={royalty}
        rarity={rarity}
        attrs={attrs}>
        <OnLogin>
          {!isOwner && (
            <>
              <Button color="secondary" text="Make offer" onClick={openPriceModal} block />
              <Button text="Buy now" onClick={openConfirmationModal} block />
            </>
          )}
        </OnLogin>
      </Listing>
      {isConfirmationModalOpen && <ConfirmationModal heading="Buy item?" close={closeModal} onSubmit={buy} />}
      {isPriceModalOpen && <PriceModal heading="Enter your offer" close={closeModal} onSubmit={offer} />}
    </>
  );
}