[SOLVED] How to save/continue with on going transactions after page reload?

Hey guys,

I would like to know how I can keep track of user transactions so that the same transactions remain in progress in case of a reload.

For example, on my website, users can initiate a transaction which creates a cloned contract. Once this clone is created, users have the options to customise that clone contract. Right now, these options only become available after the first transaction to create the clone contract is completed.

However, after (or during) the creation of the clone, if a user refreshes the page, he will lose access to the created clone contract and won’t be able to customise it. Instead, he will have to create another clone contract and customise that.

Does Moralis have a feature which addresses this issue so that incase of a refresh, the website remembers that he has already created the clone and accordingly allow him to customise it?

A related example would be the ENS domains website. When one buys an ENS domain, there are 3 steps. If one completes the first step, and for some reason completely exits the website, when he logs back on he will find that he doesn’t need to pay for and complete the first tx again as it’s already saved, and he can simply continue from where he left off. I would like to implement something similar on my website.

Thanks!

there are at least 3 options:

  1. you get the transactions for the user address when the page loads and you can check if the clone contract was deployed or not
  2. you get the events for your contract that deployed that clone and check if the clone was deployed for that address (assuming that the event exists)
  3. you track everything with Streams API (user wallet and/or contract events), save the data and query it when needed
1 Like

I’ve already got everything set up with Streams and have events for everything. Can you explain a little more how I can keep track of these particular transactions based on the users wallet?

it depends on what information you have in those saved events, if you have the user wallet address in an event then all you have to do is to search current user address in the previous events to see in what stage it is

Hey @cryptokid

I’m currently using the following logic, however it doesn’t seem to be working:

//check whether user has created a clone in the NewClones tables (STAGE 1) 
  const {data: newClone} = useMoralisQuery(
    "NewClones",
    (query) => query.equalTo("creatorAddress", account).limit(1).descending("updatedAt"),
    [account]
  )

//if clone exists, set cloneAddress to global variable createdWhoopyAddress
  newClone.map((clone) => {
    if (newClone !== null) {
      const {cloneAddress} = clone.attributes
      createdWhoopyAddress = cloneAddress
    }
  })

//check whether created clone has been customised. 
//If it's been customised, it should show up in the createdWhoopys table(STAGE 2) 
  const {data: checkWhoopy} = useMoralisQuery(
    "CreatedWhoopys",
    (query) => query.equalTo("whoopyAddress", createdWhoopyAddress)
  )

//if it doesn't show up in the createdWhoopys table, however it has been created, 
//I would like my users to be able to customise the already created clone contract instead 
//of having to create another one again. When setWhoopyCreated is true, 
//they can simply customise their already created whoopy, even if they reload their page.

  checkWhoopy.map((check) => {
    if (checkWhoopy == null && createdWhoopyAddress !== null) {
      const {whoopyAddress} = check.attributes
      whoopyAddressMain = whoopyAddress
      setWhoopyCreated(true)
    }
  })

Can you please guide me as to whether I’m on the right track or if there’s anything wrong with the logic? Thanks!

the logic seems ok to me, you first check in the database if the NewClones table and then you check in CreatedWhoopys to see if it was already customised

what doesn’t work?

I’m using a useEffect as follows, however it’s not changing the state of setWhoopyCreated"

  useEffect(() => {
    if (checkWhoopy.length === 0 && newClone.length !== 0) {
      whoopyAddressMain = createdWhoopyAddress
      setWhoopyCreated(true)
      console.log("Done")
    }
  }, [])

when I console log checkWhoopy, it returns an empty array and when I console log newClone it returns [ParseObject]. This is when the clone is created, but it’s not customised so it’s not present in the createdWhoopys table.

Any idea why the useEffect isn’t working?

you can add some dependencies to that useEffect, in that [] from the end, and then to check those dependencies in the useEffect code

maybe there are errors when the code executes?you can try to add try catch and look in the browser console

for that ParseObject you can try console.log(JSON.stringify(variable))

(I’m not expert in react)

Added account as a dependency and it worked!!

1 Like