Proposal for typed local storage service

storage.ts

import { useLocalStorage } from "usehooks-ts"
import { RegistrationStep } from "../types"


// Registrations map example
// const registrations = {
//   'xdomain1.eth': {
//     domain: 'xdomain1.eth',
//     name: 'xdomain1',
//     owner: '0x9C51161bA2FB02Cc0a403332B607117685f34831',
//     step: 'commit', // pre-commit?
//     secret: undefined,
//     commitTxHash: undefined,
//     commitTimestamp: undefined,
//   },
//   'x123.eth': {
//     domain: 'x123.eth',
//     name: 'x123',
//     owner: '0x9C51161bA2FB02Cc0a403332B607117685f34831',
//     step: 'regsiter',
//     secret: '0x1234567890abcdef',
//     commitTxHash: '0xe21f22e2df3bf51813d1729f5f708bc6e89efcc928280a796188649fd9cee34a',
//     commitTimestamp: 1674143485,
//   }
// }


// Storage type
type Registration = {
  domain: string
  name: string
  owner: string
  step: RegistrationStep // make type for steps
  secret?: string
  commitTxHash?: string
  commitTimestamp?: number
}


// Read and write typed registrations
export function useRegistrations(): [Map<string, Registration>, (rs: Map<string, Registration>) => void] {
  const [regs, setRegs] = useLocalStorage('registrations', JSON.stringify(new Map()))

  const registrations = new Map<string, Registration>(JSON.parse(regs))
  const setRegistrations = (rs: Map<string, Registration>) => {
    const value = JSON.stringify(Array.from(rs.entries()))
    setRegs(value)
  }

  return [registrations, setRegistrations]
}

// Read all registrations
export function useReadRegistrations(): Map<string, Registration> {
  const [regs, _] = useRegistrations()
  return regs
}

// Read registration by domain
export function useReadRegistration(domain: string): Registration | undefined {
  const registrations = useReadRegistrations()
  return registrations.get(domain)
}

// Update domain registration by feature
export function useUpdateRegistrationCommitted(domain: string):
  (commitTxHash: string, commitTimestamp: number) => void {
  const [registrations, setRegistrations] = useRegistrations()

  const update = (commitTxHash: string, commitTimestamp: number) => {
    const reg = registrations.get(domain)
    if (!reg) return

    // todo: write this code correct
    const updatedReg: Registration = {
      ...reg,
      step: 'wait',
      commitTxHash,
      commitTimestamp
    }
    const newRegistrations = new Map(registrations)
    newRegistrations.set(domain, updatedReg)
    setRegistrations(newRegistrations)
  }

  return update
}


function usageExample() {
  const domain = 'xdomain1.eth'

  const registration = useReadRegistration(domain)
  const updateCommited = useUpdateRegistrationCommitted(domain)

  const onClick = (txHash: string, blockTimestamp: number) => {
    updateCommited(txHash, blockTimestamp)
  }

  // ...
}