Create Time State Machines with Realtime Block Timestamp Comparisons

This React component displays new status badges when a timestamp threshold is met. Useful for time-based games.

Getting Started

Follow the Project Setup instructions to start the project in your local machine and try the recipes yourself. You can also clone or navigate the repo to get just what you need.

A few things to remember:

• NEAR native block timestamps accuracy is in nanoseconds, that's 18 0's, 1000000000000000000

  • But Javascript dates only handle up to the microseconds, that's 12 0's, 1000000000000

• NEAR native block timestamps are in UTC, or GMT-0

  • While your app Date libraries may print the date in the user's local time

• NEAR native block timestamps return an u64 type

  • While the chrono Rust crate returns i64 values

Knowing this will make your life easier when handling dates in smart-contracts. Let's begin.

Fetching dates from a React hook

Let's examine where does Prompt Wars use dates from the on-chain storage, see fetchMarketContractValues:

These values are then used in this component to render a Counter:

https://github.com/aufacicenta/pulsemarkets/blob/prompt-wars/app/src/ui/pulse/img-prompt-card/ImgPromptCard.tsx#L107

import clsx from "clsx";
import Countdown from "react-countdown";
import { useTranslation } from "next-i18next";

import { Card } from "ui/card/Card";
import { Grid } from "ui/grid/Grid";
import { Typography } from "ui/typography/Typography";
import { Icon } from "ui/icon/Icon";
import near from "providers/near";
import currency from "providers/currency";
import { PromptWarsMarketContractStatus } from "providers/near/contracts/prompt-wars/prompt-wars.types";
import ipfs from "providers/ipfs";
import { useWalletStateContext } from "context/wallet/state/useWalletStateContext";
import { Button } from "ui/button/Button";

import { ImgPromptCardProps } from "./ImgPromptCard.types";
import styles from "./ImgPromptCard.module.scss";

export const ImgPromptCard: React.FC<ImgPromptCardProps> = ({
  marketId,
  marketContractValues,
  className,
  datesElement,
  onClaimDepositUnresolved,
  onClickSeeResults,
  onClickCreateNewGame,
}) => {
  const walletState = useWalletStateContext();

  const { market, resolution, outcomeIds, collateralToken, status } = marketContractValues;

  const { t } = useTranslation(["prompt-wars"]);

  const getDatesElement = () => datesElement;

  const getStatusElement = () => {
    if (status === PromptWarsMarketContractStatus.REVEALING) {
      return (
        <>
          <Typography.Text flat className={styles["img-prompt-card__status--text"]}>
            {t(`promptWars.status.${status}`)} <span>(closest to 0 wins)</span>
          </Typography.Text>
          <Typography.MiniDescription onClick={onClickSeeResults}>
            {t("promptWars.status.miniDescription.seeResults")}
          </Typography.MiniDescription>
        </>
      );
    }

    if (status === PromptWarsMarketContractStatus.RESOLVING) {
      return (
        <>
          <Typography.Text flat>{t(`promptWars.status.${status}`)}</Typography.Text>
          <Typography.MiniDescription>
            <Countdown date={resolution.window} />
          </Typography.MiniDescription>
        </>
      );
    }

    if (status === PromptWarsMarketContractStatus.RESOLVED) {
      return (
        <>
          <Typography.Text flat>
            {t(`promptWars.status.${status}`)} 🎉
            <br />
            <span className={styles["img-prompt-card__status--winner"]}>{resolution?.result}</span>
          </Typography.Text>
          <Typography.MiniDescription onClick={onClickSeeResults}>See results</Typography.MiniDescription>
        </>
      );
    }

    if (status === PromptWarsMarketContractStatus.UNRESOLVED) {
      return (
        <>
          <Typography.Text flat>{t(`promptWars.status.${status}`)}</Typography.Text>
          <Typography.MiniDescription onClick={onClaimDepositUnresolved}>
            {t("promptWars.status.miniDescription.claimBackDeposit")}
          </Typography.MiniDescription>
        </>
      );
    }

    return <Typography.Text>{t(`promptWars.status.${status}`)}</Typography.Text>;
  };

  return (
    <Card className={clsx(styles["img-prompt-card"], className)} withSpotlightEffect>
      <Card.Content>
        <Grid.Row>
          <Grid.Col lg={7}>
            <Card withSpotlightEffect className={styles["img-prompt-card__current-img-card"]}>
              <Card.Content className={styles["img-prompt-card__current-img-card--box"]}>
                <div className={styles["img-prompt-card__current-img-card--file"]}>
                  <img src={ipfs.asHttpsURL(market.image_uri)} alt="current" />
                </div>
              </Card.Content>
            </Card>
          </Grid.Col>
          <Grid.Col lg={5}>
            <div className={styles["img-prompt-card__right-column"]}>
              <Card className={styles["img-prompt-card__countdown"]}>
                <Card.Content className={styles["img-prompt-card__countdown--content"]}>
                  <Typography.Description>{t("promptWars.status.description.timeLeft")}</Typography.Description>
                  <Typography.Headline3 flat>
                    <Countdown date={market.ends_at} />
                  </Typography.Headline3>
                  {marketContractValues.isResolutionWindowExpired && (
                    <Button
                      variant="outlined"
                      color="success"
                      size="xs"
                      className={styles["img-prompt-card__countdown--button"]}
                      onClick={onClickCreateNewGame}
                    >
                      {t("promptWars.button.createNewGame")}
                    </Button>
                  )}
                </Card.Content>
              </Card>
              <div className={styles["img-prompt-card__start-end-time"]}>
                {getDatesElement()}

                <Card className={styles["img-prompt-card__stats"]} withSpotlightEffect>
                  <Card.Content className={styles["img-prompt-card__stats--content"]}>
                    <Typography.Description>{t("promptWars.status.description.status")}</Typography.Description>
                    {getStatusElement()}
                    <Typography.Description>{t("promptWars.status.description.participants")}</Typography.Description>
                    <Typography.Text flat={outcomeIds.includes(walletState.address as string)}>
                      {outcomeIds.length}
                    </Typography.Text>
                    <Typography.MiniDescription>
                      {outcomeIds.includes(walletState.address as string)
                        ? t("promptWars.status.description.youReIn")
                        : null}
                    </Typography.MiniDescription>
                    <Typography.Description>{t("promptWars.status.description.totalPriceBag")}</Typography.Description>
                    <Typography.Text flat>
                      {t("promptWars.description.usdt")}{" "}
                      {currency.convert.toDecimalsPrecisionString(collateralToken.balance, collateralToken.decimals)}
                    </Typography.Text>
                  </Card.Content>
                </Card>
              </div>
            </div>
          </Grid.Col>
        </Grid.Row>
      </Card.Content>
      <Card.Actions>
        <div className={styles["img-prompt-card__start-end-time--resolution"]}>
          <Typography.Description flat>{t("promptWars.status.description.contract")}</Typography.Description>
          <Typography.Anchor href={`${near.getConfig().explorerUrl}/accounts/${marketId}`} target="_blank">
            {marketId} <Icon name="icon-launch" />
          </Typography.Anchor>
        </div>
      </Card.Actions>
    </Card>
  );
};

Setting the on-chain Timestamp storage

For example, for the Counter component to render a countdown 5 minutes from the future, it uses ends_at. Note that Timestamp has an i64 (signed integer) as a type. While env::block_timestamp  returns an u64 (unsigned integer). The reason for this is that you want to prevent Rust overflow errors when doing time operations. A Rust overflow error happens when an unsigned integer breaks the -0 limit.

Comparing dates to determine time periods

Prompt Wars consists of 3 main time periods:

1. The game is active when env::block_timestamp is between starts_at and ends_at

   1. By this time, users may submit prompts

2. The game is in the REVEALING status when env::block_timestamp is greater than ends_at and less than resolution.window

   1. By this time, the game is comparing all prompts with the source image and setting the result of each player in its own OutcomeToken

3. The game is in the RESOLUTION status when env::block_timestamp is between the resolution.window 

   1. By this time, the game will set a winner by getting the result that's closest to 0

This time comparisons happen on-chain to prevent malicious manipulation and can be found here:

Automatic status checks

Lastly, in order for the UI to switch between statuses, a client-side interval checks for these flags in the UI side, but also a server-side cronjob will trigger smart-contract actions to reveal and resolve each game:

Client-side interval status checks

A simple useEffect  will fetch and detect changes on the contract time flags and update the status accordingly: