Refactor localStorage helpers

0xsequence · May 1, 2024 · c2af918 · c2af918
1 parent 157aeef
commit c2af918
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 24 deletions.
diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx
@@ -32,6 +32,7 @@ import { ExtendedConnector } from '../../../utils/getKitConnectWallets'
 import * as styles from '../../styles.css'
 import { useEmailAuth } from '../../../hooks/useWaasEmailAuth'
 import { PINCodeInput } from './PINCodeInput'
+import { getStorageItem } from '../../../utils/storage'
 
 interface ConnectWalletContentProps extends KitConnectProviderProps {
   openConnectModal: boolean
@@ -266,7 +267,7 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
                         <GoogleLogin
                           type="icon"
                           size="large"
-                          nonce={JSON.parse(localStorage.getItem('wagmi.' + LocalStorageKey.WaasSessionHash) ?? '') || undefined}
+                          nonce={getStorageItem(LocalStorageKey.WaasSessionHash)}
                           onSuccess={credentialResponse => {
                             if (credentialResponse.credential) {
                               storage?.setItem(LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential)
@@ -284,16 +285,17 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
                       <ConnectButton
                         connector={connector}
                         onConnect={() => {
-                          const appleClientId = localStorage.getItem('wagmi.' + LocalStorageKey.WaasAppleClientID) || ''
-                          const appleRedirectUri = localStorage.getItem('wagmi.' + LocalStorageKey.WaasAppleRedirectURI) || ''
-                          const sessionHash = localStorage.getItem('wagmi.' + LocalStorageKey.WaasSessionHash) || ''
+                          const appleClientId = getStorageItem(LocalStorageKey.WaasAppleClientID)
+                          const appleRedirectUri = getStorageItem(LocalStorageKey.WaasAppleRedirectURI)
+                          const sessionHash = getStorageItem(LocalStorageKey.WaasSessionHash)
+
                           appleAuthHelpers.signIn({
                             authOptions: {
-                              clientId: JSON.parse(appleClientId),
+                              clientId: appleClientId,
                               scope: 'openid email',
-                              redirectURI: JSON.parse(appleRedirectUri),
+                              redirectURI: appleRedirectUri,
                               usePopup: true,
-                              nonce: JSON.parse(sessionHash)
+                              nonce: sessionHash
                             },
                             onSuccess: (response: any) => {
                               if (response.authorization?.id_token) {

diff --git a/packages/kit/src/components/KitProvider/index.tsx b/packages/kit/src/components/KitProvider/index.tsx
@@ -27,6 +27,7 @@ import { useWaasConfirmationHandler } from '../../hooks/useWaasConfirmationHandl
 
 import { TxnDetails } from '../TxnDetails'
 import { NetworkBadge } from '@0xsequence/kit-wallet'
+import { setStorageItem } from '../../utils/storage'
 
 export declare const THEME: readonly ['dark', 'light']
 export declare type Theme = Exclude<ComponentProps<typeof ThemeProvider>['theme'], undefined>
@@ -159,15 +160,12 @@ export const KitProvider = (props: KitConnectProviderProps) => {
     // EthAuth
     // note: keep an eye out for potential race-conditions, though they shouldn't occur.
     // If there are race conditions, the settings could be a function executed prior to being passed to wagmi
-    localStorage.setItem(
-      LocalStorageKey.EthAuthSettings,
-      JSON.stringify({
-        expiry,
-        app,
-        origin: origin || location.origin,
-        nonce
-      })
-    )
+    setStorageItem(LocalStorageKey.EthAuthSettings, {
+      expiry,
+      app,
+      origin: origin || location.origin,
+      nonce
+    })
   }, [theme, ethAuth])
 
   useEffect(() => {

diff --git a/packages/kit/src/utils/ethAuth.ts b/packages/kit/src/utils/ethAuth.ts
@@ -8,26 +8,24 @@ import { publicClientToProvider, walletClientToSigner } from './adapters'
 
 import { LocalStorageKey, DEFAULT_SESSION_EXPIRATION } from '../constants'
 import { EthAuthSettings } from '../components/KitProvider'
+import { getStorageItem } from './storage'
 
 export const signEthAuthProof = async (walletClient: GetWalletClientData<any, any>): Promise<ETHAuthProof> => {
   const wagmiConfig = useConfig()
-  const storage = wagmiConfig.storage as Storage<{ [key: string]: string }>
-  const proofInformation = localStorage.getItem('wagmi.' + LocalStorageKey.EthAuthProof)
+  const proofInformation = getStorageItem(LocalStorageKey.EthAuthProof) as ETHAuthProof | undefined
+
   // if proof information was generated and saved upon wallet connection, use that
   if (proofInformation) {
-    const proof = JSON.parse(proofInformation) as ETHAuthProof
-    return proof
+    return proofInformation
   }
 
   // generate a new proof
-  const proofSettingsFromStorage = localStorage.getItem('wagmi.' + LocalStorageKey.EthAuthSettings) as string | undefined
+  const proofSettings = getStorageItem(LocalStorageKey.EthAuthSettings) as EthAuthSettings | undefined
 
-  if (!proofSettingsFromStorage) {
+  if (!proofSettings) {
     throw new Error('No ETHAuth settings found')
   }
 
-  const proofSettings = JSON.parse(proofSettingsFromStorage) as EthAuthSettings
-
   const walletAddress = walletClient.account.address
 
   const proof = new Proof()

diff --git a/packages/kit/src/utils/storage.ts b/packages/kit/src/utils/storage.ts
@@ -0,0 +1,29 @@
+import { LocalStorageKey } from '../constants'
+
+const WAGMI_PREFIX = 'wagmi'
+
+// Get a wagmi prefixed and stringified value from storage
+export const getStorageItem = (key: LocalStorageKey) => {
+  try {
+    const json = localStorage.getItem(`${WAGMI_PREFIX}.${key}`)
+
+    if (!json) {
+      return undefined
+    }
+
+    const value = JSON.parse(json)
+
+    return value || undefined
+  } catch (err) {
+    return undefined
+  }
+}
+
+// Set a wagmi prefixed and stringified value to storage
+export const setStorageItem = (key: LocalStorageKey, value: any) => {
+  try {
+    localStorage.setItem(`${WAGMI_PREFIX}.${key}`, JSON.stringify(value))
+  } catch (err) {
+    // Do nothing
+  }
+}