ceramic patch - local state

dapp/components/login/LogInBox.tsx

@@ -18,14 +18,12 @@ const LogInBox = () => {
       if (provider && account) {
         try {
           const zkWalletFactory = connectFactory(provider)
-          console.log("🚀 ~ file: LogInBox.tsx ~ line 21 ~ loadInfo ~ zkWalletFactory", zkWalletFactory.userAddressToWalletAddress(account))
-          console.log("🚀 ~ file: LogInBox.tsx ~ line 24 ~ loadInfo ~ account", account)
           const walletAddress =
             await zkWalletFactory.userAddressToWalletAddress(account)
           console.log(walletAddress)
-          if (walletAddress !== ethers.constants.AddressZero) {
-            router.push('./dashboard')
-          }
+          // if (walletAddress !== ethers.constants.AddressZero) {
+          //   router.push('./dashboard')
+          // }
         } catch (e) {
           console.log(e)
         }

dapp/helpers/utils.ts

@@ -45,7 +45,7 @@ export async function prepareMerkleTree(
 
   // TODO: Replace this local storage to IPFS or Ceramic
   const encryptedHashes = await encryptMetamask(hashes.join(','))
-  localStorage.setItem('OTPhashes', hashes.join(','))
+  // localStorage.setItem('OTPhashes', hashes.join(','))
 
   if (encryptedHashes) {
     return [uri, SECRET, root, encryptedHashes]
@@ -63,10 +63,10 @@ export async function generateInput(
   otp: string | number,
   encryptedHashes: string
 ) {
-  let hashes = localStorage.getItem('OTPhashes')?.split(',').map(BigInt)
+  // let hashes = localStorage.getItem('OTPhashes')?.split(',').map(BigInt)
   // console.log(hashes)
   const hashesString = await decryptOrSignMetamask(encryptedHashes, 'eth_decrypt')
-  // const hashes = hashesString.split(',').map(BigInt) 
+  const hashes = hashesString?.split(',').map(BigInt)
 
   if (hashes) {
 

dapp/hooks/useCeramic.tsx

@@ -1,7 +1,7 @@
 import { useViewerConnection, ViewerRecord } from '@self.id/react'
 import { useViewerRecord } from '@self.id/react'
 import { EthereumAuthProvider } from '@self.id/web'
-import { Dispatch, SetStateAction, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 
 
 async function connectCeramic({ address, connect, setConnecting }: { address: string, connect: any, setConnecting: Dispatch<SetStateAction<boolean>> }) {
@@ -16,7 +16,7 @@ async function connectCeramic({ address, connect, setConnecting }: { address: st
 
 // A hook combining login and fetching data. Gets triggered when a eth address is passed.
 export function useCeramic(address: string | null): {
-  ceramicData: ViewerRecord<any>,
+  ceramicData: { content: any, set: Dispatch<any> },
   ceramicStatus: string
   // setCeramicAddress: Dispatch<SetStateAction<string | null | undefined>>
 } {
@@ -24,6 +24,7 @@ export function useCeramic(address: string | null): {
   const [connecting, setConnecting] = useState<boolean>(false)
   const record = useViewerRecord('kjzl6cwe1jw149ljmroydckks0ihhv2qel7wpyrold7qs3bgp765siz8234jqge')
 
+  // promt user to connect to ceramic if it's available and not yet connected
   if (connection.status !== 'connected' && address && !connecting) {
     connectCeramic({
       address,
@@ -32,7 +33,25 @@ export function useCeramic(address: string | null): {
     })
   }
 
-  return { ceramicData: record, ceramicStatus: connection.status }
+  const [content, setContent] = useState<any>()
+  const [isFetched, setIsFetched] = useState<boolean>(false)
+
+  // sets the local state to the fetched value once it is available 
+  useEffect(() => {
+    if (record.content && !isFetched) {
+      setContent(() => record.content)
+      setIsFetched(() => true)
+    }
+  }, [isFetched, record.content])
+
+  // updates the ceramic record with the local state. 
+  useEffect(() => {
+    if (isFetched && (record.content !== content) && record.set) {
+      record.set(content)
+    }
+  }, [content, isFetched])
+
+  return { ceramicData: { content, set: setContent }, ceramicStatus: connection.status }
 }
 
 // Excerpt from the docs. The data is stored in record.content. To write use record.set or record.merge.