session key comments

src/components/Modules/CreateSession.tsx

@@ -69,7 +69,7 @@ const CreateSession: React.FC = () => {
       // If you have session key-pair on the client side you can keep using those without making part of any storage
       window.localStorage.setItem("sessionPKey", sessionSigner.privateKey);
 
-      // Create an instanbce of Session Key Manager module from modules package
+      // Create an instance of Session Key Manager module from modules package
       // This module is responsible for below tasks/helpers:
       // a. Maintain session leaf storage in defined storage client (Biconomy by default using browser local storage which works for front-end apps)
       // b. Generate dummy signature for userOp estimations

src/components/Modules/ERC20Transfer.tsx → src/components/Modules/ERC20TransferUsingSession.tsx

@@ -12,6 +12,7 @@ import {
   showErrorMessage,
 } from "../../utils";
 import { DEFAULT_SESSION_KEY_MANAGER_MODULE } from "@biconomy/modules";
+import { ERC20_SESSION_VALIDATION_MODULE } from "../../utils/chainConfig";
 
 const ERC20Transfer: React.FC = () => {
   const classes = useStyles();
@@ -27,8 +28,8 @@ const ERC20Transfer: React.FC = () => {
     try {
       setLoading(true);
       let biconomySmartAccount = smartAccount;
-      const managerModuleAddr = DEFAULT_SESSION_KEY_MANAGER_MODULE;
-      const erc20ModuleAddr = "0x000000D50C68705bd6897B2d17c7de32FB519fDA";
+      const sessionKeyManagerModuleAddr = DEFAULT_SESSION_KEY_MANAGER_MODULE;
+      const erc20SessionValidationModuleAddr = ERC20_SESSION_VALIDATION_MODULE;
 
       // get session key from local storage
       const sessionKeyPrivKey = window.localStorage.getItem("sessionPKey");
@@ -40,15 +41,17 @@ const ERC20Transfer: React.FC = () => {
       const sessionSigner = new ethers.Wallet(sessionKeyPrivKey);
       console.log("sessionSigner", sessionSigner);
 
-      // generate sessionModule
-      const sessionModule = await SessionKeyManagerModule.create({
-        moduleAddress: managerModuleAddr,
+      // generate sessionManagerModule
+      const sessionManagerModule = await SessionKeyManagerModule.create({
+        moduleAddress: sessionKeyManagerModuleAddr,
         smartAccountAddress: scwAddress,
       });
 
-      // set active module to sessionModule
+      // set active module to sessionManagerModule
+      // This time we will make use of enabled session hence transaction needs to via go through session manager module
+      // Hence it is set as runtime active module
       biconomySmartAccount =
-        biconomySmartAccount.setActiveValidationModule(sessionModule);
+        biconomySmartAccount.setActiveValidationModule(sessionManagerModule);
 
       const tokenContract = new ethers.Contract(
         config.usdc.address,
@@ -64,36 +67,38 @@ const ERC20Transfer: React.FC = () => {
       }
 
       const { data } = await tokenContract.populateTransaction.transfer(
-        "0x42138576848E839827585A3539305774D36B9602", // receiver address
+        "0x42138576848E839827585A3539305774D36B9602", // receiver address // Has to be the same receiver for which session permissions are set
         ethers.utils.parseUnits("5".toString(), decimals)
       );
 
-      // TODO // get these from config
       // generate tx data to erc20 transfer
+      // NOTE: It can only be used for single transaction and not part of batch calldata
+      // If you want to make use of batch calldata then you need to use the session router module
       const tx1 = {
-        to: "0xdA5289fCAAF71d52a80A254da614a192b693e977", //erc20 token address
+        to: config.usdc.address, //erc20 token address
         data: data,
         value: "0",
       };
 
       // build user op
+      // with calldata to transfer ERC20 tokens
       let userOp = await biconomySmartAccount.buildUserOp([tx1], {
-        overrides: {
-          // signature: "0x0000000000000000000000000000000000000000000000000000000000000040000000000000000000000000000000456b395c4e107e0302553b90d1ef4a32e9000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000db3d753a1da5a6074a9f74f39a0a779d3300000000000000000000000000000000000000000000000000000000000000c0000000000000000000000000000000000000000000000000000000000000016000000000000000000000000000000000000000000000000000000000000001800000000000000000000000000000000000000000000000000000000000000080000000000000000000000000bfe121a6dcf92c49f6c2ebd4f306ba0ba0ab6f1c000000000000000000000000da5289fcaaf71d52a80a254da614a192b693e97700000000000000000000000042138576848e839827585a3539305774d36b96020000000000000000000000000000000000000000000000000000000002faf08000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000041feefc797ef9e9d8a6a41266a85ddf5f85c8f2a3d2654b10b415d348b150dabe82d34002240162ed7f6b7ffbc40162b10e62c3e35175975e43659654697caebfe1c00000000000000000000000000000000000000000000000000000000000000"
-          // callGasLimit: 2000000, // only if undeployed account
-          // verificationGasLimit: 700000
-        },
-        skipBundlerGasEstimation: false,
+        skipBundlerGasEstimation: false, // can skip this if paymasterServiceData is being provided for sponsorship mode
+        // These are required (as query params in session storage) to be able to find the leaf and generate proof for the dummy signature (which is in turn used for estimating gas values)
         params: {
           sessionSigner: sessionSigner,
-          sessionValidationModule: erc20ModuleAddr,
+          sessionValidationModule: erc20SessionValidationModuleAddr,
         },
       });
 
-      // send user op
-      const userOpResponse = await biconomySmartAccount.sendUserOp(userOp, {
+      // send user operation
+      const userOpResponse = await biconomySmartAccount.sendUserOp(userOp, 
+        // below params are required for passing on this information to session key manager module to create padded signature
+        {
         sessionSigner: sessionSigner,
-        sessionValidationModule: erc20ModuleAddr,
+        sessionValidationModule: erc20SessionValidationModuleAddr,
+        // optionally can also provide simulationType
+        simulationType: 'validation_and_execution'
       });
 
       console.log("userOpHash", userOpResponse);
@@ -117,7 +122,7 @@ const ERC20Transfer: React.FC = () => {
       <h3 className={classes.subTitle}>ERC20 Transfer via Session Key</h3>
 
       <p style={{ marginBottom: 20 }}>
-        This is an example gasless transaction to transfer ERC20 tokens.
+        This is an example to transfer ERC20 tokens makin use of enabled session.
       </p>
 
       <Button

src/components/TabsBody.tsx

@@ -40,9 +40,9 @@ import MintNftForward from "./Forward/MintNft";
 import BatchLiquidityForward from "./Forward/BatchLiquidity";
 import CreateSession from "./Modules/CreateSession";
 import SessionFlow from "./Modules";
-import ERC20Transfer from "./Modules/ERC20Transfer";
-import CreateBatchRouter from "./Modules/CreateBatchRouter";
-import ERC20RouterTransfer from "./Modules/ERC20RouterTransfer";
+import ERC20Transfer from "./Modules/ERC20TransferUsingSession";
+import CreateBatchRouter from "./Modules/CreateSessionsWithBatchRouter";
+import ERC20RouterTransfer from "./Modules/UseSessionsBatch";
 
 const drawerWidth = 350;
 const onboardingList = [