Best way for developing/testing time-related features with frontend app

Question

I'm looking for a solution to conveniently test how the app WILL look like in a few months after the project starts.

I.e. - let's say that in the project we will periodically deploy contracts that will expire in 30 days. The expiration date will be available for users to read etc.

FE app should fetch active contracts and check how much time is left. It should also fetch expired contracts and show how much time passed since they expired.

I know that in hardhat I can use "TimeTraveler" to simulate time passing. But the browser will keep using the real time. This causes problem with time calculation and requires setting huge transaction deadline when interacting with blockchain.

Is there a plugin or an option in devTools of Firefox or Chrome to change current date to lets say 3 months in the future?

Or maybe there is a way to start hardhat-blockchain a few months in past, run some scripts and then use TimeTraveler to move to current time?

Answer 1

The contract must get the time as an input from the browser. So you can send in your testings time with a desired shift manually.

I guess you can also change your browser time reference.

Answer 2

You can work with block.timestamp.

Save block.timestamp in a initialTimeStamp public variable in the constructor. Also set activePeriodInSeconds in the constructor. Before every call you should check

Require(block.timestamp > (initialTimeStamp + activePeriodInSeconds))

This will make your contract deactive after pre-defined seconds passed.

In UI when you get the initialTimeStamp and the activePeriodInSeconds you can calculate whatever time you need in any time zone.

Timestamp is a uint number. You can convert it to an actual time that user can understand. Take a look at: https://www.unixtimestamp.com/