Feature/prime sdk as default (#57)

* removed via prop, removed etherspot provider type, default provider etherspot prime

* removed gas token, added prime sdk estimations (#58)

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [0.6.0] - 2023-10-18
+
+### Breaking Changes
+- Removed `etherspot` wallet type from `useWalletAddress` hook
+- Removed `via` prop from `<EtherspotBatches />` component
+- Default `useWalletAddress` and  `<EtherspotBatches />` provider is set to `etherspot-prime`
+- Removed `gasTokenAddress` prop from `<EtherspotBatches />` component due being unsupported in default `etherspot-prime` provider
+
+### Added
+- Added `gasCost` to `etherspot-prime` estimations
+
 ## [0.5.1] - 2023-10-17
 
 ### Added

__tests__/hooks/useEtherspotTransactions.test.js

@@ -6,7 +6,7 @@ import { useEtherspotTransactions, EtherspotTransactionKit, EtherspotBatches, Et
 
 const TestSingleBatchComponent = () => (
   <EtherspotBatches>
-    <EtherspotBatch chainId={1} gasTokenAddress={'testGasTokenAddress'}>
+    <EtherspotBatch chainId={1}>
       <EtherspotTransaction
         to={'0x12'}
         data={'0x0'}
@@ -29,7 +29,7 @@ describe('useEtherspotTransactions()', () => {
           test
           <span>
             <EtherspotBatches>
-              <EtherspotBatch chainId={123} gasTokenAddress={'testGasTokenAddress'}>
+              <EtherspotBatch chainId={123}>
                 <EtherspotTransaction
                   to={'0x12'}
                   data={'0x0'}
@@ -53,16 +53,7 @@ describe('useEtherspotTransactions()', () => {
         <EtherspotBatches skip>
           <span>test</span>
         </EtherspotBatches>
-        <EtherspotBatches via={'etherspot-prime'}>
-          <EtherspotBatch chainId={69}>
-            <EtherspotTransaction
-              to={'0x420'}
-              data={'0x69420'}
-              value={'69'}
-            />
-          </EtherspotBatch>
-        </EtherspotBatches>
-        <EtherspotBatches via={'etherspot-prime'} paymaster={{ url: 'someUrl', api_key: 'someApiKey' }}>
+        <EtherspotBatches paymaster={{ url: 'someUrl', api_key: 'someApiKey' }}>
           <EtherspotBatch chainId={69}>
             <EtherspotTransaction
               to={'0x420'}
@@ -81,10 +72,9 @@ describe('useEtherspotTransactions()', () => {
 
     const { result: { current } } = renderHook(() => useEtherspotTransactions(), { wrapper });
 
-    expect(current.batches.length).toBe(6);
+    expect(current.batches.length).toBe(5);
     expect(current.batches[0].batches.length).toBe(1);
     expect(current.batches[0].batches[0].chainId).toBe(123);
-    expect(current.batches[0].batches[0].gasTokenAddress).toBe('testGasTokenAddress');
     expect(current.batches[0].batches[0].transactions.length).toBe(3);
     expect(current.batches[0].batches[0].transactions[1].to).toBe('0x0');
     expect(current.batches[0].batches[0].transactions[1].data).toBe('0xFFF');
@@ -93,13 +83,7 @@ describe('useEtherspotTransactions()', () => {
     expect(current.batches[0].batches[0].transactions[2].data).toBe('0xa9059cbb0000000000000000000000007f30b1960d5556929b03a0339814fe903c55a347000000000000000000000000000000000000000000000006aaf7c8516d0c0000');
     expect(current.batches[0].batches[0].transactions[2].value).toBe(undefined);
     expect(current.batches[1].skip).toBe(true);
-    expect(current.batches[2].batches.length).toBe(1);
-    expect(current.batches[2].batches[0].chainId).toBe(69);
-    expect(current.batches[2].batches[0].transactions.length).toBe(1);
-    expect(current.batches[2].batches[0].transactions[0].to).toBe('0x420');
-    expect(current.batches[2].batches[0].transactions[0].data).toBe('0x69420');
-    expect(current.batches[2].batches[0].transactions[0].value.toJSON()).toStrictEqual({ 'hex': '0x03bd913e6c1df40000', 'type': 'BigNumber' });
-    expect(current.batches[3].paymaster).toStrictEqual({ url: 'someUrl', api_key: 'someApiKey' });
+    expect(current.batches[2].paymaster).toStrictEqual({ url: 'someUrl', api_key: 'someApiKey' });
   });
 
   it('throws an error if <EtherspotBatches /> within <EtherspotBatches />', () => {

__tests__/hooks/useWalletAddress.test.js

@@ -7,11 +7,23 @@ import { EtherspotTransactionKit, useWalletAddress } from '../../src';
 const ethersProvider = new ethers.providers.JsonRpcProvider('http://localhost:8545', 'goerli'); // replace with your node's RPC URL
 const provider = new ethers.Wallet.createRandom().connect(ethersProvider);
 
-const etherspotAddress = '0x7F30B1960D5556929B03a0339814fE903c55a347';
 const etherspotPrimeAddress = '0x07ff85757f5209534EB601E1CA60d72807ECE0bC';
 const providerWalletAddress = provider.address;
 
 describe('useWalletAddress()', () => {
+  it('returns default type wallet address if no provided type', async () => {
+    const wrapper = ({ children }) => (
+      <EtherspotTransactionKit provider={provider}>
+        {children}
+      </EtherspotTransactionKit>
+    );
+
+    const { result } = renderHook(() => useWalletAddress(), { wrapper });
+
+    await waitFor(() => expect(result.current).not.toBe(undefined));
+    expect(result.current).toEqual(etherspotPrimeAddress);
+  });
+
   it('returns wallet address by type', async () => {
     const wrapper = ({ children }) => (
       <EtherspotTransactionKit provider={provider}>
@@ -20,15 +32,11 @@ describe('useWalletAddress()', () => {
     );
 
     const { result, rerender } = renderHook(({ providerType }) => useWalletAddress(providerType), {
-      initialProps: { providerType: 'etherspot' },
+      initialProps: { providerType: 'etherspot-prime' },
       wrapper,
     });
 
     await waitFor(() => expect(result.current).not.toBe(undefined));
-    expect(result.current).toEqual(etherspotAddress);
-
-    rerender({ providerType: 'etherspot-prime' });
-    await waitFor(() => expect(result.current).not.toBe(etherspotAddress));
     expect(result.current).toEqual(etherspotPrimeAddress);
 
     rerender({ providerType: 'provider' });
@@ -44,12 +52,12 @@ describe('useWalletAddress()', () => {
     );
 
     const { result, rerender } = renderHook(({ providerType }) => useWalletAddress(providerType), {
-      initialProps: { providerType: 'etherspot' },
+      initialProps: { providerType: 'etherspot-prime' },
       wrapper,
     });
 
     await waitFor(() => expect(result.current).not.toBe(undefined));
-    expect(result.current).toEqual(etherspotAddress);
+    expect(result.current).toEqual(etherspotPrimeAddress);
 
     rerender({ providerType: 'whatever' });
     expect(result.current).toEqual(undefined);

package.json

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

src/components/EtherspotBatch.tsx

@@ -18,7 +18,7 @@ interface EtherspotBatchProps extends IBatch {
   children?: React.ReactNode;
 }
 
-const EtherspotBatch = ({ children, chainId, gasTokenAddress, id: batchId }: EtherspotBatchProps) => {
+const EtherspotBatch = ({ children, chainId, id: batchId }: EtherspotBatchProps) => {
   const context = useContext(EtherspotBatchesContext);
   const existingBatchContext = useContext(EtherspotBatchContext);
   const componentId = useId();
@@ -36,7 +36,6 @@ const EtherspotBatch = ({ children, chainId, gasTokenAddress, id: batchId }: Eth
     const batch = {
       id: batchId ?? componentId,
       chainId,
-      gasTokenAddress,
       transactions: getObjectSortedByKeys(transactionsPerId),
     };
 
@@ -48,7 +47,7 @@ const EtherspotBatch = ({ children, chainId, gasTokenAddress, id: batchId }: Eth
         return current;
       });
     }
-  }, [componentId, transactionsPerId, chainId, batchId, gasTokenAddress]);
+  }, [componentId, transactionsPerId, chainId, batchId]);
 
   return (
     <EtherspotBatchContext.Provider value={{ setTransactionsPerId, chainId }}>

src/components/EtherspotBatches.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { PaymasterApi } from '@etherspot/prime-sdk';
 
 // contexts
 import EtherspotTransactionKitContext from '../contexts/EtherspotTransactionKitContext';
@@ -21,13 +20,14 @@ type EtherspotBatchesProps = IBatches & {
 }
 
 const EtherspotBatches = (props: EtherspotBatchesProps) => {
-  let paymaster: PaymasterApi | undefined;
-
-  const { children, skip, onEstimated, onSent, id: batchesId, via } = props;
-
-  if (via === 'etherspot-prime') {
-    paymaster = props.paymaster;
-  }
+  const {
+    children,
+    skip,
+    onEstimated,
+    onSent,
+    id: batchesId,
+    paymaster,
+  } = props;
 
   const context = useContext(EtherspotTransactionKitContext);
   const existingBatchesContext = useContext(EtherspotBatchesContext);
@@ -55,13 +55,9 @@ const EtherspotBatches = (props: EtherspotBatchesProps) => {
       batches: getObjectSortedByKeys(batchesPerId),
       onEstimated,
       onSent,
-      via,
+      paymaster,
     };
 
-    if (groupedBatch.via === 'etherspot-prime') {
-      groupedBatch = { ...groupedBatch, paymaster };
-    }
-
     context.setGroupedBatchesPerId((current) => ({ ...current, [componentId]: groupedBatch }));
 
     return () => {
@@ -70,7 +66,7 @@ const EtherspotBatches = (props: EtherspotBatchesProps) => {
         return current;
       });
     }
-  }, [componentId, batchesPerId, skip, batchesId, via, paymaster]);
+  }, [componentId, batchesPerId, skip, batchesId, paymaster]);
 
   return (
     <EtherspotBatchesContext.Provider value={{ setBatchesPerId }}>

src/hooks/useWalletAddress.ts

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useEtherspot } from '@etherspot/react-etherspot';
-import { AccountTypes } from 'etherspot';
 
 // types
 import { IWalletType } from '../types/EtherspotTransactionKit';
@@ -14,7 +13,7 @@ import useEtherspotTransactions from './useEtherspotTransactions';
  * @param chainId {number} - Chain ID
  * @returns {string | undefined} - wallet address by its type
  */
-const useWalletAddress = (walletType: IWalletType = 'etherspot', chainId?: number): string | undefined => {
+const useWalletAddress = (walletType: IWalletType = 'etherspot-prime', chainId?: number): string | undefined => {
   const [walletAddress, setWalletAddress] = useState<(string | undefined)>(undefined);
   const { connect, getSdkForChainId, providerWalletAddress, chainId: defaultChainId  } = useEtherspot();
   const { getEtherspotPrimeSdkForChainId } = useEtherspotTransactions();
@@ -35,13 +34,7 @@ const useWalletAddress = (walletType: IWalletType = 'etherspot', chainId?: numbe
         console.warn(`Unable to get SDK for chain ID ${walletAddressChainId}`);
       }
 
-      if (walletType === 'etherspot') {
-        if (sdkForChainId?.state?.account?.type !== AccountTypes.Contract) {
-          await connect(walletAddressChainId);
-        }
-
-        updatedWalletAddress = sdkForChainId?.state?.account?.address;
-      } else if (walletType === 'etherspot-prime') {
+      if (walletType === 'etherspot-prime') {
         const etherspotPrimeSdk = await getEtherspotPrimeSdkForChainId(walletAddressChainId);
         if (!etherspotPrimeSdk) {
           console.warn(`Unable to get Etherspot Prime SDK for chain ID ${walletAddressChainId}`);