components#ConfirmationModal TypeScript Examples

The following examples show how to use components#ConfirmationModal. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AuctionListing.tsx    From gear-js with GNU General Public License v3.0 5 votes vote down vote up 
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} />}
    </>
  );
}
Example #2
Source File: SaleListing.tsx    From gear-js with GNU General Public License v3.0 5 votes vote down vote up 
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} />}
    </>
  );
}