Merge pull request #133 from etherspot/fix/sdk-init-improvements

optimize sdk init calls, use new sdk config

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.10.1] - 2024-03-20
+
+### Added Changes
+- Fixes and optimizations on SDK initialization
+- Updated `@etherspot/prime-sdk` to version `1.6.4` with config changes
+
 ## [0.10.0] - 2024-03-20
 
 ### Breaking Changes

__mocks__/@etherspot/prime-sdk.js

@@ -277,4 +277,6 @@ export const isWalletProvider = EtherspotPrime.isWalletProvider;
 
 export const Factory = EtherspotPrime.Factory;
 
+export const EtherspotBundler = jest.fn();
+
 export default EtherspotPrime;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@etherspot/transaction-kit",
   "description": "React Etherspot Transaction Kit",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "main": "dist/cjs/index.js",
   "scripts": {
     "rollup:build": "NODE_OPTIONS=--max-old-space-size=8192 rollup -c",
@@ -22,7 +22,7 @@
   "homepage": "https://github.com/etherspot/transaction-kit#readme",
   "dependencies": {
     "@etherspot/eip1271-verification-util": "0.1.2",
-    "@etherspot/prime-sdk": "1.6.2",
+    "@etherspot/prime-sdk": "1.6.4",
     "buffer": "^6.0.3",
     "ethers": "^5.6.9",
     "lodash": "^4.17.21"

src/providers/EtherspotContextProvider.tsx

@@ -5,6 +5,7 @@ import {
   Factory,
   Web3WalletProvider,
   DataUtils,
+  EtherspotBundler,
 } from '@etherspot/prime-sdk';
 import React, {
   ReactNode,
@@ -13,14 +14,18 @@ import React, {
   useEffect,
   useMemo,
 } from 'react';
+import isEqual from 'lodash/isEqual';
 
 // contexts
 import EtherspotContext from '../contexts/EtherspotContext';
 
 // types
 import { AccountTemplate } from '../types/EtherspotTransactionKit';
 
-let sdkPerChain: { [chainId: number]: PrimeSdk } = {};
+let sdkPerChain: { [chainId: number]: PrimeSdk | Promise<PrimeSdk> } = {};
+let prevProvider: WalletProviderLike;
+let prevAccountTemplate: AccountTemplate | undefined;
+
 let dataService: DataUtils;
 
 const EtherspotContextProvider = ({
@@ -34,7 +39,7 @@ const EtherspotContextProvider = ({
   children: ReactNode;
   provider: WalletProviderLike;
   chainId: number;
-  accountTemplate: AccountTemplate;
+  accountTemplate?: AccountTemplate;
   dataApiKey?: string;
   bundlerApiKey?: string;
 }) => {
@@ -45,44 +50,53 @@ const EtherspotContextProvider = ({
   }
 
   useEffect(() => {
-    // reset on provider change
-    sdkPerChain = {};
-  }, [provider]);
+    return () => {
+      // reset on unmount
+      sdkPerChain = {};
+    }
+  }, []);
 
   const getSdk = useCallback(async (sdkChainId: number = chainId, forceNewInstance: boolean = false) => {
-    if (sdkPerChain[sdkChainId] && !forceNewInstance) return sdkPerChain[sdkChainId];
-
-    let mappedProvider;
-    if (!isWalletProvider(provider)) {
-      try {
-        // @ts-ignore
-        mappedProvider = new Web3WalletProvider(provider);
-        await mappedProvider.refresh();
-      } catch (e) {
-        // no need to log, this is an attempt
-      }
+    const accountTemplateOrProviderChanged = (prevProvider && !isEqual(prevProvider, provider))
+      || (prevAccountTemplate && prevAccountTemplate !== accountTemplate);
 
-      if (!mappedProvider) {
-        throw new Error('Invalid provider!');
-      }
+    if (sdkPerChain[sdkChainId] && !forceNewInstance && !accountTemplateOrProviderChanged) {
+      return sdkPerChain[sdkChainId];
     }
 
-    // @ts-ignore
-    const sdkForChain = new PrimeSdk(mappedProvider ?? provider, {
-      chainId: +sdkChainId,
-      etherspotBundlerApiKey: bundlerApiKey ?? ('__ETHERSPOT_BUNDLER_API_KEY__' || undefined),
-      factoryWallet: accountTemplate as Factory,
-    });
+    sdkPerChain[sdkChainId] = (async () => {
+      let mappedProvider;
+
+      if (!isWalletProvider(provider)) {
+        try {
+          // @ts-ignore
+          mappedProvider = new Web3WalletProvider(provider);
+          await mappedProvider.refresh();
+        } catch (e) {
+          // no need to log, this is an attempt
+        }
+
+        if (!mappedProvider) {
+          throw new Error('Invalid provider!');
+        }
+      }
 
-    sdkPerChain = {
-      ...sdkPerChain,
-      [sdkChainId]: sdkForChain,
-    }
+      const etherspotPrimeSdk = new PrimeSdk(mappedProvider ?? provider, {
+        chainId: +sdkChainId,
+        bundlerProvider: new EtherspotBundler(+sdkChainId, bundlerApiKey ?? ('__ETHERSPOT_BUNDLER_API_KEY__' || undefined)),
+        factoryWallet: accountTemplate as Factory,
+      });
+
+      // load the address into SDK state
+      await etherspotPrimeSdk.getCounterFactualAddress();
+
+      prevProvider = provider;
+      prevAccountTemplate = accountTemplate;
 
-    // establishes connection, requests signature
-    await sdkForChain.getCounterFactualAddress();
+      return etherspotPrimeSdk;
+    })();
 
-    return sdkForChain;
+    return sdkPerChain[sdkChainId];
   }, [provider, chainId, accountTemplate, bundlerApiKey]);
 
   const getDataService = useCallback(() => {