Use wagmi storage for interacting with local storage

0xsequence · Apr 26, 2024 · 945519a · 945519a
1 parent 4fa140d
commit 945519a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx
@@ -15,7 +15,7 @@ import {
   IconButton,
   Tooltip
 } from '@0xsequence/design-system'
-import { useConnect, useAccount, Connector } from 'wagmi'
+import { useConnect, useAccount, Connector, useConfig, Storage } from 'wagmi'
 import { EMAIL_CONNECTOR_LOCAL_STORAGE_KEY, LogoProps } from '@0xsequence/kit-connectors'
 import { GoogleLogin } from '@react-oauth/google'
 import { appleAuthHelpers, useScript } from 'react-apple-signin-auth'
@@ -42,6 +42,8 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
   useScript(appleAuthHelpers.APPLE_SCRIPT_SRC)
 
   const { isConnected } = useAccount()
+  const wagmiConfig = useConfig()
+  const storage = wagmiConfig.storage as Storage<{ [string: string]: string }>
   const { config = {} } = props
   const { signIn = {} } = config as KitConfig
   const {
@@ -121,7 +123,7 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
   } = useEmailAuth({
     connector: connectors.find(c => c._wallet.id === 'email-waas'),
     onSuccess: async idToken => {
-      localStorage.setItem(LocalStorageKey.WaasEmailIdToken, idToken)
+      storage?.setItem(LocalStorageKey.WaasEmailIdToken, idToken)
       if (emailConnector) {
         connect({ connector: emailConnector })
       }
@@ -264,10 +266,10 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
                         <GoogleLogin
                           type="icon"
                           size="large"
-                          nonce={localStorage.getItem(LocalStorageKey.WaasSessionHash) ?? undefined}
+                          nonce={(storage?.getItem(LocalStorageKey.WaasSessionHash) as string) ?? undefined}
                           onSuccess={credentialResponse => {
                             if (credentialResponse.credential) {
-                              localStorage.setItem(LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential)
+                              storage?.setItem(LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential)
                               onConnect(connector)
                             }
                           }}
@@ -282,9 +284,9 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
                       <ConnectButton
                         connector={connector}
                         onConnect={() => {
-                          const appleClientId = localStorage.getItem(LocalStorageKey.WaasAppleClientID) || ''
-                          const appleRedirectUri = localStorage.getItem(LocalStorageKey.WaasAppleRedirectURI) || ''
-                          const sessionHash = localStorage.getItem(LocalStorageKey.WaasSessionHash) || ''
+                          const appleClientId = (storage?.getItem(LocalStorageKey.WaasAppleClientID) as string) || ''
+                          const appleRedirectUri = (storage?.getItem(LocalStorageKey.WaasAppleRedirectURI) as string) || ''
+                          const sessionHash = (storage?.getItem(LocalStorageKey.WaasSessionHash) as string) || ''
                           appleAuthHelpers.signIn({
                             authOptions: {
                               clientId: appleClientId,
@@ -295,7 +297,7 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
                             },
                             onSuccess: (response: any) => {
                               if (response.authorization?.id_token) {
-                                localStorage.setItem(LocalStorageKey.WaasAppleIdToken, response.authorization.id_token)
+                                storage?.setItem(LocalStorageKey.WaasAppleIdToken, response.authorization.id_token)
                                 onConnect(connector)
                               } else {
                                 console.log('Apple login error: No id_token found')

diff --git a/packages/kit/src/components/KitProvider/index.tsx b/packages/kit/src/components/KitProvider/index.tsx
@@ -96,20 +96,19 @@ export const KitProvider = (props: KitConnectProviderProps) => {
   const [analytics, setAnalytics] = useState<sequence.SequenceClient['analytics']>()
   const { address, isConnected } = useAccount()
   const connections = useConnections()
-
+  const wagmiConfig = useConfig()
   const waasConnector: Connector | undefined = connections.find(c => c.connector.id.includes('waas'))?.connector
 
   const [pendingRequestConfirmation, confirmPendingRequest, rejectPendingRequest] = useWaasConfirmationHandler(waasConnector)
 
-  // const googleClientId = localStorage.getItem(LocalStorageKey.WaasGoogleClientID) || ''
-
-  const wagmiConfig = useConfig()
   const googleWaasConnector = wagmiConfig.connectors.find(
     c => c.id === 'sequence-waas' && (c as ExtendedConnector)._wallet.id === 'google-waas'
   ) as ExtendedConnector | undefined
   const googleClientId: string = (googleWaasConnector as any)?.params?.googleClientId || ''
 
-  console.log('googleClientId', googleClientId)
+  useEffect(() => {
+    localStorage.setItem(LocalStorageKey.ProjectAccessKey, config.projectAccessKey)
+  }, [])
 
   const setupAnalytics = (projectAccessKey: string) => {
     const s = sequence.initWallet(projectAccessKey)

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