Merge pull request #69 from etherspot/fix/paymaster-prop-object-memoized

paymaster prop as memoized object

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.6.8] - 2023-10-29
+
+### Added Changes
+- Fixed `<EtherspotBatches />` component `paymaster.context` issues
+
 ## [0.6.7] - 2023-10-28
 
 ### Added Changes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@etherspot/transaction-kit",
   "description": "React Etherspot Transaction Kit",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "main": "dist/cjs/index.js",
   "scripts": {
     "rollup:build": "NODE_OPTIONS=--max-old-space-size=8192 rollup -c",
@@ -25,7 +25,7 @@
     "@etherspot/prime-sdk": "^1.3.8",
     "buffer": "^6.0.3",
     "ethers": "^5.6.9",
-    "lodash.uniq": "^4.5.0",
+    "lodash": "^4.17.21",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.7"
   },
@@ -41,6 +41,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@jest/globals": "^29.3.1",
+    "@lifi/types": "^9.2.0",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-typescript": "^8.3.3",
     "@testing-library/react": "^14.0.0",
@@ -57,8 +58,7 @@
     "rimraf": "^5.0.1",
     "rollup": "^2.76.0",
     "rollup-plugin-dts": "^4.2.3",
-    "typescript": "^4.7.4",
-    "@lifi/types": "^9.2.0"
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": ">=16.13.0"

rollup.config.js

@@ -13,6 +13,7 @@ const external = [
   'ethers',
   'react',
   'buffer',
+  'lodash',
 ];
 
 export default [

src/components/EtherspotBatches.tsx

@@ -14,6 +14,7 @@ import { getObjectSortedByKeys } from '../utils/common';
 
 // hooks
 import useId from '../hooks/useId';
+import useDeepCompare from '../hooks/useDeepCompare';
 
 type EtherspotBatchesProps = IBatches & {
   children?: React.ReactNode;
@@ -26,7 +27,7 @@ const EtherspotBatches = (props: EtherspotBatchesProps) => {
     onEstimated,
     onSent,
     id: batchesId,
-    paymaster,
+    paymaster: paymasterObject,
   } = props;
 
   const context = useContext(EtherspotTransactionKitContext);
@@ -35,6 +36,7 @@ const EtherspotBatches = (props: EtherspotBatchesProps) => {
 
   const componentId = useId();
   const [batchesPerId, setBatchesPerId] = useState<TypePerId<IBatch>>({});
+  const paymaster = useDeepCompare(paymasterObject);
 
   if (existingBatchesContext !== null) {
     throw new Error('<EtherspotBatches /> cannot be inside <EtherspotBatches />');
@@ -71,9 +73,7 @@ const EtherspotBatches = (props: EtherspotBatchesProps) => {
     batchesPerId,
     skip,
     batchesId,
-    paymaster?.url,
-    paymaster?.api_key,
-    paymaster?.context,
+    paymaster,
   ]);
 
   return (

src/hooks/useDeepCompare.ts

@@ -0,0 +1,14 @@
+import { useRef } from 'react';
+import isEqual from 'lodash/isEqual';
+
+const useDeepCompare = (value: any) => {
+  const ref = useRef<any>(value);
+
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}
+
+export default useDeepCompare;

src/hooks/useId.ts

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import * as _ from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 
 const useId = () => {
-  return useMemo(() => _.uniqueId(), []);
+  return useMemo(() => uniqueId(), []);
 };
 
 export default useId;

src/utils/common.ts

@@ -1,5 +1,5 @@
 import { ethers } from 'ethers';
-import * as _ from 'lodash';
+import sortBy from 'lodash/sortBy';
 
 // types
 import { TypePerId } from '../types/Helper';
@@ -10,7 +10,7 @@ export async function sleep(seconds: number) {
 
 export const getObjectSortedByKeys = (
   object: TypePerId<any>,
-) => _.sortBy(Object.keys(object).map((key) => +key)).map((key) => object[key]);
+) => sortBy(Object.keys(object).map((key) => +key)).map((key) => object[key]);
 
 export const parseEtherspotErrorMessageIfAvailable = (errorMessage: string): string => {
   let etherspotErrorMessage;