separate bundler and data services api keys

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.10.0] - 2024-03-20
+
+### Breaking Changes
+- Etherspot project keys are now split as `dataApiKey` and `bundlerApiKey` to support separation of bundler and data services, however `TransactionKit` still carries embedded keys with low frequency usage API calls support
+
 ## [0.9.2] - 2024-03-20
 
 ### Breaking Changes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@etherspot/transaction-kit",
   "description": "React Etherspot Transaction Kit",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "main": "dist/cjs/index.js",
   "scripts": {
     "rollup:build": "NODE_OPTIONS=--max-old-space-size=8192 rollup -c",

rollup.config.js

@@ -37,7 +37,8 @@ export default [
         exclude: ['./example/**', './src/test/**']
       }),
       replace({
-        __ETHERSPOT_PROJECT_KEY__: process.env.ETHERSPOT_PROJECT_KEY ?? '',
+        __ETHERSPOT_DATA_API_KEY__: process.env.ETHERSPOT_DATA_API_KEY ?? '',
+        __ETHERSPOT_BUNDLER_API_KEY__: process.env.ETHERSPOT_BUNDLER_API_KEY ?? '',
         preventAssignment: true,
       }),
     ],

src/components/EtherspotTransactionKit.tsx

@@ -13,21 +13,24 @@ interface EtherspotTransactionKitProps extends React.PropsWithChildren {
   provider: WalletProviderLike;
   chainId?: number;
   accountTemplate?: AccountTemplate;
-  projectKey?: string;
+  dataApiKey?: string;
+  bundlerApiKey?: string;
 }
 
 const EtherspotTransactionKit = ({
   children,
   provider,
   chainId = 1,
   accountTemplate = Factory.ETHERSPOT,
-  projectKey,
+  dataApiKey,
+  bundlerApiKey,
 }: EtherspotTransactionKitProps) => (
   <EtherspotContextProvider
     provider={provider}
     chainId={+chainId} // cast to make it less failproof when passed as string, i.e. from env file
     accountTemplate={accountTemplate}
-    projectKey={projectKey}
+    dataApiKey={dataApiKey}
+    bundlerApiKey={bundlerApiKey}
   >
     <EtherspotTransactionKitContextProvider>
       <ProviderWalletContextProvider>

src/providers/EtherspotContextProvider.tsx

@@ -28,13 +28,15 @@ const EtherspotContextProvider = ({
   provider,
   chainId,
   accountTemplate,
-  projectKey,
+  dataApiKey,
+  bundlerApiKey,
 }: {
   children: ReactNode;
   provider: WalletProviderLike;
   chainId: number;
   accountTemplate: AccountTemplate;
-  projectKey?: string;
+  dataApiKey?: string;
+  bundlerApiKey?: string;
 }) => {
   const context = useContext(EtherspotContext);
 
@@ -68,7 +70,7 @@ const EtherspotContextProvider = ({
     // @ts-ignore
     const sdkForChain = new PrimeSdk(mappedProvider ?? provider, {
       chainId: +sdkChainId,
-      etherspotBundlerApiKey: projectKey ?? ('__ETHERSPOT_PROJECT_KEY__' || undefined),
+      etherspotBundlerApiKey: bundlerApiKey ?? ('__ETHERSPOT_BUNDLER_API_KEY__' || undefined),
       factoryWallet: accountTemplate as Factory,
     });
 
@@ -81,13 +83,13 @@ const EtherspotContextProvider = ({
     await sdkForChain.getCounterFactualAddress();
 
     return sdkForChain;
-  }, [provider, chainId, accountTemplate, projectKey]);
+  }, [provider, chainId, accountTemplate, bundlerApiKey]);
 
   const getDataService = useCallback(() => {
     if (dataService) return dataService;
-    dataService = new DataUtils(projectKey ?? ('__ETHERSPOT_PROJECT_KEY__' || undefined));
+    dataService = new DataUtils(dataApiKey ?? ('__ETHERSPOT_DATA_API_KEY__' || undefined));
     return dataService;
-  }, [projectKey]);
+  }, [dataApiKey]);
 
   const contextData = useMemo(() => ({
     getSdk,