fix: have API_KEY set correctly by OnchainKitProvider (#501)

.changeset/eight-doors-juggle.md

@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **fix**: have API_KEY set correctly by `OnchainKitProvider` and avoid request CORS issue with the `onchainkit_version` Header. By @zizzamia #501

src/OnchainKitProvider.test.tsx

@@ -7,6 +7,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import type { EASSchemaUid } from './identity/types';
+import { setOnchainKitConfig, ONCHAIN_KIT_CONFIG } from './OnchainKitConfig';
 import { OnchainKitProvider } from './OnchainKitProvider';
 import { useOnchainKit } from './useOnchainKit';
 
@@ -20,6 +21,17 @@ const TestComponent = () => {
   );
 };
 
+jest.mock('./OnchainKitConfig', () => ({
+  setOnchainKitConfig: jest.fn(),
+  ONCHAIN_KIT_CONFIG: {
+    address: null,
+    apiKey: null,
+    chain: base,
+    rpcUrl: null,
+    schemaId: null,
+  },
+}));
+
 describe('OnchainKitProvider', () => {
   const schemaId: EASSchemaUid = `0x${'1'.repeat(64)}`;
   const apiKey = 'test-api-key';
@@ -66,4 +78,19 @@ describe('OnchainKitProvider', () => {
       ),
     ).not.toThrow();
   });
+
+  it('should call setOnchainKitConfig with the correct values', async () => {
+    render(
+      <OnchainKitProvider chain={base} schemaId={schemaId} apiKey={apiKey}>
+        <TestComponent />
+      </OnchainKitProvider>,
+    );
+    expect(setOnchainKitConfig).toHaveBeenCalledWith({
+      address: null,
+      apiKey,
+      chain: base,
+      rpcUrl: null,
+      schemaId,
+    });
+  });
 });

src/OnchainKitProvider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useMemo } from 'react';
 import { checkHashLength } from './utils/checkHashLength';
-import { ONCHAIN_KIT_CONFIG } from './OnchainKitConfig';
+import { ONCHAIN_KIT_CONFIG, setOnchainKitConfig } from './OnchainKitConfig';
 import type { OnchainKitContextType, OnchainKitProviderReact } from './types';
 
 export const OnchainKitContext = createContext<OnchainKitContextType>(ONCHAIN_KIT_CONFIG);
@@ -20,13 +20,15 @@ export function OnchainKitProvider({
     throw Error('EAS schemaId must be 64 characters prefixed with "0x"');
   }
   const value = useMemo(() => {
-    return {
+    const onchainKitConfig = {
       address: address ?? null,
       apiKey: apiKey ?? null,
       chain: chain,
       rpcUrl: rpcUrl ?? null,
       schemaId: schemaId ?? null,
     };
+    setOnchainKitConfig(onchainKitConfig);
+    return onchainKitConfig;
   }, [address, chain, schemaId, apiKey, rpcUrl]);
   return <OnchainKitContext.Provider value={value}>{children}</OnchainKitContext.Provider>;
 }

src/queries/request.test.ts

@@ -1,5 +1,4 @@
 import { setOnchainKitConfig } from '../OnchainKitConfig';
-import { version } from '../version';
 import { buildRequestBody, sendRequest } from './request';
 
 describe('request', () => {
@@ -47,7 +46,6 @@ describe('request', () => {
         body: JSON.stringify(requestBody),
         headers: {
           'Content-Type': 'application/json',
-          onchainkit_version: version,
         },
       });
       expect(response).toEqual(mockResponse);

src/queries/request.ts

@@ -23,7 +23,6 @@ export type JSONRPCResult<T> = {
 const POST_METHOD = 'POST';
 const JSON_HEADERS = {
   'Content-Type': 'application/json',
-  onchainkit_version: version,
 };
 const JSON_RPC_VERSION = '2.0';
 

src/version.ts

@@ -1 +1 @@
-export const version = '0.19.6';
+export const version = '0.19.7';