Add jwt to SequenceHooksConfig so api, metadata, and indexer clients can pass it correctly (#377)

* Store jwt value on context and pass to api, metadata, and indexer clients

* Exposing setJWT on SequenceHooksConfig context

* Allow jwt to be set via provider props

Author: corbanbrook

packages/hooks/src/contexts/ConfigContext.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { createContext } from 'react'
+import { createContext, useState } from 'react'
 
 export interface SequenceHooksEnv {
   indexerGatewayUrl: string
@@ -13,11 +13,14 @@ export interface SequenceHooksEnv {
 export interface SequenceHooksConfigProviderValue {
   projectAccessKey: string
   env?: Partial<SequenceHooksEnv>
+  jwt?: string
 }
 
 export interface SequenceHooksConfig {
   projectAccessKey: string
   env: Required<SequenceHooksEnv>
+  jwt: string | undefined
+  setJWT: React.Dispatch<React.SetStateAction<string | undefined>>
 }
 
 const defaultEnv: Required<SequenceHooksEnv> = {
@@ -36,12 +39,16 @@ interface SequenceHooksProviderProps {
 }
 
 export const SequenceHooksProvider = (props: SequenceHooksProviderProps) => {
-  const config = {
+  const [jwt, setJWT] = useState<string | undefined>(props.config.jwt)
+
+  const config: SequenceHooksConfig = {
     ...props.config,
     env: {
       ...defaultEnv,
       ...props.config.env
-    }
+    },
+    jwt,
+    setJWT
   }
 
   return <SequenceHooksContext.Provider value={config}>{props.children}</SequenceHooksContext.Provider>

packages/hooks/src/hooks/API/useAPIClient.ts

@@ -4,13 +4,11 @@ import { useMemo } from 'react'
 import { useConfig } from '../useConfig'
 
 export const useAPIClient = () => {
-  const { projectAccessKey, env } = useConfig()
+  const { projectAccessKey, jwt, env } = useConfig()
 
   const apiClient = useMemo(() => {
-    const clientUrl = env.apiUrl
-
-    return new SequenceAPIClient(clientUrl, projectAccessKey)
-  }, [projectAccessKey])
+    return new SequenceAPIClient(env.apiUrl, projectAccessKey, jwt)
+  }, [projectAccessKey, jwt])
 
   return apiClient
 }

packages/hooks/src/hooks/Indexer/useIndexerClient.ts

@@ -7,17 +7,17 @@ import { useConfig } from '../useConfig'
 import { useNetwork } from '../useNetwork'
 
 export const useIndexerClient = (chainId: ChainId) => {
-  const { projectAccessKey, env } = useConfig()
+  const { env, projectAccessKey, jwt } = useConfig()
 
   const indexerClients = useMemo(() => {
     return new Map<ChainId, SequenceIndexer>()
-  }, [projectAccessKey])
+  }, [projectAccessKey, jwt])
 
   const network = useNetwork(chainId)
   const indexerUrl = envString(env.indexerUrl, 'indexer', network.name)
 
   if (!indexerClients.has(chainId)) {
-    indexerClients.set(chainId, new SequenceIndexer(indexerUrl, projectAccessKey))
+    indexerClients.set(chainId, new SequenceIndexer(indexerUrl, projectAccessKey, jwt))
   }
 
   const indexerClient = indexerClients.get(chainId)
@@ -30,11 +30,11 @@ export const useIndexerClient = (chainId: ChainId) => {
 }
 
 export const useIndexerClients = (chainIds: number[]) => {
-  const { projectAccessKey, env } = useConfig()
+  const { env, projectAccessKey, jwt } = useConfig()
 
   const indexerClients = useMemo(() => {
     return new Map<ChainId, SequenceIndexer>()
-  }, [projectAccessKey])
+  }, [projectAccessKey, jwt])
 
   const result = new Map<ChainId, SequenceIndexer>()
 
@@ -43,7 +43,7 @@ export const useIndexerClients = (chainIds: number[]) => {
     const indexerUrl = envString(env.indexerUrl, 'indexer', network.name)
 
     if (!indexerClients.has(chainId)) {
-      indexerClients.set(chainId, new SequenceIndexer(indexerUrl, projectAccessKey))
+      indexerClients.set(chainId, new SequenceIndexer(indexerUrl, projectAccessKey, jwt))
     }
 
     const indexerClient = indexerClients.get(chainId)

packages/hooks/src/hooks/IndexerGateway/useIndexerGatewayClient.ts

@@ -4,13 +4,11 @@ import { useMemo } from 'react'
 import { useConfig } from '../useConfig'
 
 export const useIndexerGatewayClient = () => {
-  const { projectAccessKey, env } = useConfig()
+  const { env, projectAccessKey, jwt } = useConfig()
 
   const indexerGatewayClient = useMemo(() => {
-    const clientUrl = env.indexerGatewayUrl
-
-    return new SequenceIndexerGateway(clientUrl, projectAccessKey)
-  }, [projectAccessKey])
+    return new SequenceIndexerGateway(env.indexerGatewayUrl, projectAccessKey, jwt)
+  }, [projectAccessKey, jwt])
 
   return indexerGatewayClient
 }

packages/hooks/src/hooks/Metadata/useMetadataClient.ts

@@ -4,13 +4,11 @@ import { useMemo } from 'react'
 import { useConfig } from '../useConfig'
 
 export const useMetadataClient = () => {
-  const { projectAccessKey, env } = useConfig()
+  const { env, projectAccessKey, jwt } = useConfig()
 
   const metadataClient = useMemo(() => {
-    const clientUrl = env.metadataUrl
-
-    return new SequenceMetadata(clientUrl, projectAccessKey)
-  }, [projectAccessKey])
+    return new SequenceMetadata(env.metadataUrl, projectAccessKey)
+  }, [projectAccessKey, jwt])
 
   return metadataClient
 }