resilience to refresh on registration, stay in the same step

[pikonha]

Persist data of name registrations

Store in localStorage all the relevant data relative to a name registration

As the user makes his commitment to buying a domain, a blockchain transaction is done and we, as technology solutions providers, do not want our users to lose money. Nowadays, if this same user refreshes the page or leaves it for any reason, he will need to start the name registration process from the beginning, which is painful for a good UX.

The goal of this issue is to, once a user makes a name registration commit, store relevant data about this started name registration process.

This data should be stored in localStorage for wider error cases support: internet connection, zeroed battery, closed tab, etc.

This data should always be tried to be accessed when a name registration starts, meaning that, if some data is located relative to the searched name, we go to step 1 and if no data is located, we go to step 2, being these:

1. Ask user, in a modal (ENS Thorin modal component) if he wants to resume the name registration process from where he lastly ended or not. If the user wants to resume the name registration, we go to step 3 and otherwise, to 4:
   3. Get the stored data and, from it, the commit txHash (if in commit step, otherwise, the most advanced txHash stored) previously stored. Await for a transactionReceipt of this txHash. From now on, you should already have enough information to set the user in the most advanced registration step possible and populate the nameRegistrationData reducer based on the also saved information.
   4. Simply display the usual name registration default userflow;
2. Simply display the usual name registration default userflow;

Alternatives

Is there any out-of-the-box way to connect Redux to localStorage?

Related Code

You need to save this data based on the authed user address:

{
    "0xfd9ee68000dc92aa6c67f8f6eb5d9d1a24086fad": {
        "mydomainregistration.eth": {
            "status": "PENDING_COMMIT",
            "commitTxHash": "0xeff10fe03b55a72e09791b7abad883714158bac7dfb23c36392030a70b03c18f",
            "secretUsed": "0xb21106b739a8d5e902096f9483b0ff54759b0a668291b6b731428f79ab46b824",
            "commitConfirmationTimestamp": null
        }
    }
}

Note: see how we save the secretUsed: this needs to be the same between commit and register transactions 👍🏼

Additional Context

Please understand the different possible userflows so we store all the relevant data.

[lgahdl]

Seems good, I'm not a big fan of using local storage coupled with redux, in my opinion it's better to update them separately and keep them decoupled, if we decide to replace redux for context API in the near future, it'll be easier

[FrancoAguzzi]

@lgahdl OK! It seems good to me to have the data getter and setter present in useNameRegistration()

this React hook could be the connection between Redux state and localStorage state 👍🏼