Merge pull request #38 from bcnmy/feat/improve_sessions_dx

chore: sessions dx improvements
bcnmy · May 23, 2024 · 8c63adb · 8c63adb
2 parents cc7995c + fae0bbf
commit 8c63adb
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 67 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -4,13 +4,13 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "bun link @biconomy/account && vite",
+    "dev": "bun i && bun link @biconomy/account && vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@biconomy/account": "^4.2.0",
+    "@biconomy/account": "^4.4.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@ethersproject/providers": "^5.7.2",

diff --git a/src/components/Modules/CreateABISVM.tsx b/src/components/Modules/CreateABISVM.tsx
@@ -27,7 +27,7 @@ interface props {
 
 const CreateABISVM: React.FC<props> = () => {
   const nftAddress = "0x1758f42Af7026fBbB559Dc60EcE0De3ef81f665e";
-  const [activeSession, setActiveSession] = useState<Session | undefined>();
+  const [hasSession, setHasSession] = useState<boolean>(false);
   const { address } = useAccount();
   const { smartAccount, scwAddress } = useSmartAccountContext();
 
@@ -71,10 +71,9 @@ const CreateABISVM: React.FC<props> = () => {
           },
         ];
 
-        const { wait, session } = await createSession(
+        const { wait } = await createSession(
           smartAccount,
           policy,
-          sessionKeyAddress,
           sessionStorageClient,
           {
             paymasterServiceData: {
@@ -89,17 +88,19 @@ const CreateABISVM: React.FC<props> = () => {
 
         console.log("txHash", transactionHash);
         console.log("Sessions Enabled");
-        success && setActiveSession(session);
-        toast.success(`Success`, {
-          position: "top-right",
-          autoClose: 6000,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
-          progress: undefined,
-          theme: "dark",
-        });
+        if (success) {
+          setHasSession(true);
+          toast.success(`Success ${success}`, {
+            position: "top-right",
+            autoClose: 6000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+          });
+        }
       } catch (err: any) {
         console.error(err);
       }
@@ -121,12 +122,8 @@ const CreateABISVM: React.FC<props> = () => {
         theme="dark"
       />
 
-      {!!activeSession ? (
-        <UseABISVM
-          smartAccountAddress={scwAddress}
-          address={address!}
-          session={activeSession}
-        />
+      {!!hasSession ? (
+        <UseABISVM smartAccountAddress={scwAddress} address={address!} />
       ) : (
         <Button
           title="Create Session"

diff --git a/src/components/Modules/CreateBatchSession.tsx b/src/components/Modules/CreateBatchSession.tsx
@@ -15,7 +15,7 @@ import { useSmartAccountContext } from "../../contexts/SmartAccountContext";
 import { configInfo, showErrorMessage, showSuccessMessage } from "../../utils";
 import { getActionForErrorMessage } from "../../utils/error-utils";
 import { polygonAmoy } from "viem/chains";
-import { Hex, encodeAbiParameters, pad } from "viem";
+import { Hex, encodeAbiParameters } from "viem";
 import UseBatchSession from "./UseBatchSession";
 
 const nftAddress = "0x1758f42Af7026fBbB559Dc60EcE0De3ef81f665e";
@@ -27,7 +27,7 @@ const CreateBatchSession: React.FC = () => {
   const { address } = useAccount();
   const { smartAccount, scwAddress } = useSmartAccountContext();
   const [loading, setLoading] = useState(false);
-  const [activeSession, setActiveSession] = useState<Session | undefined>();
+  const [hasSession, setHasSession] = useState<boolean>(false);
 
   const createSessionHandler = async () => {
     if (!scwAddress || !smartAccount || !address) {
@@ -80,9 +80,8 @@ const CreateBatchSession: React.FC = () => {
         }),
       ];
 
-      const { wait, session } = await createBatchSession(
+      const { wait } = await createBatchSession(
         smartAccount,
-        sessionKeyAddress,
         sessionStorageClient,
         leaves,
         {
@@ -98,11 +97,13 @@ const CreateBatchSession: React.FC = () => {
       } = await wait();
 
       console.log("txHash", transactionHash);
-      showSuccessMessage(
-        `Session Created: ${transactionHash}`,
-        transactionHash
-      );
-      success && setActiveSession(session);
+      if (success) {
+        setHasSession(true);
+        showSuccessMessage(
+          `Session Created: ${transactionHash}`,
+          transactionHash
+        );
+      }
     } catch (err: any) {
       console.error(err);
       setLoading(false);
@@ -121,12 +122,8 @@ const CreateBatchSession: React.FC = () => {
 
       <h3 className={classes.subTitle}>Create Batch Session Flow</h3>
 
-      {!!activeSession ? (
-        <UseBatchSession
-          smartAccountAddress={scwAddress}
-          address={address!}
-          session={activeSession}
-        />
+      {!!hasSession ? (
+        <UseBatchSession smartAccountAddress={scwAddress} address={address!} />
       ) : (
         <Button
           title="Create Session"

diff --git a/src/components/Modules/CreateSessionForCustomSVM.tsx b/src/components/Modules/CreateSessionForCustomSVM.tsx
@@ -117,7 +117,7 @@ const CreateCustomSession: React.FC = () => {
 
       // Below helper gives you tx data to be used to make a call from Smart Account to enable session on-chain
       // This transaction needs a user signature and for gas sponsorship or ERC20 paymaster can be used.
-      const sessionTxData = await sessionManagerModule.createSession([
+      const sessionTxData = await sessionManagerModule.createSessionData([
         {
           validUntil: 0, // 0 value means extremes
           validAfter: 0, // 0 value means extremes

diff --git a/src/components/Modules/UseABISVM.tsx b/src/components/Modules/UseABISVM.tsx
@@ -15,14 +15,9 @@ import { bundlerUrl, paymasterApiKey } from "../../utils/chainConfig";
 interface props {
   smartAccountAddress: Hex;
   address: string;
-  session: Session;
 }
 
-const UseABISVM: React.FC<props> = ({
-  smartAccountAddress,
-  address,
-  session,
-}) => {
+const UseABISVM: React.FC<props> = ({ smartAccountAddress, address }) => {
   const sendUserOpWithData = async () => {
     if (!address || !smartAccountAddress || !address) {
       alert("Connect wallet first");
@@ -48,7 +43,7 @@ const UseABISVM: React.FC<props> = ({
           biconomyPaymasterApiKey: paymasterApiKey,
           chainId: polygonAmoy.id,
         },
-        session
+        smartAccountAddress
       );
 
       const tx = {
@@ -66,11 +61,7 @@ const UseABISVM: React.FC<props> = ({
           mode: PaymasterMode.SPONSORED,
         },
       });
-      console.log(
-        "userOpHash %o for Session Id %s",
-        userOpResponse,
-        session.sessionID
-      );
+      console.log("userOpHash %o for Session Id %s", userOpResponse);
 
       const { receipt, success } = await userOpResponse.wait(1);
 

diff --git a/src/components/Modules/UseBatchSession.tsx b/src/components/Modules/UseBatchSession.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  Session,
   createSessionSmartAccountClient,
   Transaction,
   getBatchSessionTxParams,
@@ -21,16 +20,11 @@ const amount = BigInt(50000000);
 interface props {
   smartAccountAddress?: Hex;
   address?: string;
-  session?: Session;
 }
 
-const UseBatchSession: React.FC<props> = ({
-  smartAccountAddress,
-  address,
-  session,
-}) => {
+const UseBatchSession: React.FC<props> = ({ smartAccountAddress, address }) => {
   const sendUserOpWithData = async () => {
-    if (!address || !smartAccountAddress || !session) {
+    if (!address || !smartAccountAddress) {
       alert("Connect wallet first");
       return;
     }
@@ -54,7 +48,7 @@ const UseBatchSession: React.FC<props> = ({
           biconomyPaymasterApiKey: paymasterApiKey,
           chainId: polygonAmoy.id,
         },
-        session,
+        smartAccountAddress,
         true // if batching
       );
 
@@ -77,9 +71,9 @@ const UseBatchSession: React.FC<props> = ({
 
       const txs = [transferTx, nftMintTx];
       const batchSessionParams = await getBatchSessionTxParams(
-        ["ERC20", "ABI"],
         txs,
-        session,
+        [0, 1],
+        smartAccountAddress,
         // @ts-ignore
         polygonAmoy
       );
@@ -126,12 +120,10 @@ const UseBatchSession: React.FC<props> = ({
   };
 
   return (
-    !!session && (
-      <Button
-        title="Transfer Token and Mint NFT"
-        onClickFunc={sendUserOpWithData}
-      />
-    )
+    <Button
+      title="Transfer Token and Mint NFT"
+      onClickFunc={sendUserOpWithData}
+    />
   );
 };