chore: use hooks

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "bun i && bun link @biconomy/account && vite",
+    "dev": "bun i && bun link @biconomy/account @biconomy/use-aa && vite",
     "start": "vite",
     "build": "tsc && vite build",
     "format": "biome format . --write",
@@ -13,27 +13,28 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@biconomy/use-aa": "1.0.14",
+    "@biconomy/account": "^4.5.2",
+    "@biconomy/use-aa": "^1.0.14",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@ethersproject/providers": "^5.7.2",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.12",
     "@mui/styles": "^5.11.12",
-    "@noble/ed25519": "^2.1.0",
     "@rainbow-me/rainbowkit": "^2.0.0",
     "@silencelaboratories/walletprovider-sdk": "^0.0.8",
     "@tanstack/react-query": "^5.22.2",
+    "@types/react-toastify": "^4.1.0",
     "ethers": "^6.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "react-toastify": "^9.0.8",
+    "react-toastify": "^10.0.5",
     "viem": "^2.13.7",
     "wagmi": "^2.9.9"
   },
   "devDependencies": {
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",

src/components/Modules/CreateDistributedSession.tsx

@@ -0,0 +1,139 @@
+import type { PolicyWithoutSessionKey } from "@biconomy/account"
+import {
+  Options,
+  bigIntReplacer,
+  useCreateDistributedSession,
+  useSmartAccount,
+  useUserOpWait
+} from "@biconomy/use-aa"
+import { makeStyles } from "@mui/styles"
+import type React from "react"
+import { useEffect, useState } from "react"
+import { ToastContainer } from "react-toastify"
+import "react-toastify/dist/ReactToastify.css"
+import type { Hex } from "viem"
+import { polygonAmoy } from "viem/chains"
+import { showSuccessMessage } from "../../utils"
+import { ErrorGuard } from "../../utils/ErrorGuard"
+import Button from "../Button"
+import UseDistributedSession from "./UseDistributedSession"
+
+const CreateDistributedSession: React.FC = () => {
+  const classes = useStyles()
+  const nftAddress: Hex = "0x1758f42Af7026fBbB559Dc60EcE0De3ef81f665e"
+  const { smartAccountAddress } = useSmartAccount()
+  const [success, setSuccess] = useState<boolean>(false)
+
+  const policy: PolicyWithoutSessionKey[] = [
+    {
+      contractAddress: nftAddress,
+      functionSelector: "safeMint(address)",
+      rules: [
+        {
+          offset: 0,
+          condition: 0,
+          referenceValue: smartAccountAddress
+        }
+      ],
+      interval: {
+        validUntil: 0,
+        validAfter: 0
+      },
+      valueLimit: 0n
+    }
+  ]
+
+  const {
+    mutate,
+    data: userOpResponse,
+    error,
+    isPending
+  } = useCreateDistributedSession()
+
+  const {
+    isLoading: waitIsLoading,
+    isSuccess: waitIsSuccess,
+    error: waitError,
+    data: waitData
+  } = useUserOpWait(userOpResponse)
+
+  const isLoading = waitIsLoading || isPending
+
+  useEffect(() => {
+    if (waitIsSuccess) {
+      setSuccess(true)
+      showSuccessMessage(
+        `Successful mint: ${polygonAmoy.blockExplorers.default.url}/tx/${waitData?.receipt?.transactionHash}`
+      )
+    }
+  }, [waitIsSuccess, waitData])
+
+  const createDistributedSessionHandler = () =>
+    mutate({
+      policy,
+      options: Options.Sponsored
+    })
+
+  return (
+    <main className={classes.main}>
+      <ErrorGuard errors={[error, waitError]}>
+        <p style={{ color: "#7E7E7E" }}>
+          Use Cases {"->"} Modules {"->"} {!!success ? "Use" : "Create"} Dan
+          Session
+        </p>
+
+        <h3 className={classes.subTitle}>
+          {!!success ? "Use" : "Create"} a Dan Session
+        </h3>
+
+        <ToastContainer
+          position="top-right"
+          autoClose={5000}
+          hideProgressBar={true}
+          newestOnTop={false}
+          closeOnClick={true}
+          rtl={false}
+          pauseOnFocusLoss={false}
+          draggable={false}
+          pauseOnHover={false}
+          theme="dark"
+        />
+
+        <pre>policy: {JSON.stringify(policy, bigIntReplacer, 2)}</pre>
+
+        {!!success ? (
+          <UseDistributedSession smartAccountAddress={smartAccountAddress} />
+        ) : (
+          <Button
+            isLoading={isLoading}
+            title="Create Session"
+            onClickFunc={createDistributedSessionHandler}
+          />
+        )}
+      </ErrorGuard>
+    </main>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  main: {
+    margin: "auto",
+    padding: "10px 40px",
+    color: "#EEEEEE"
+  },
+  subTitle: {
+    color: "#FFB999",
+    fontSize: 36,
+    margin: 0
+  },
+  h3Title: {
+    color: "#e6e6e6"
+  },
+  listHover: {
+    "&:hover": {
+      color: "#FF9551"
+    }
+  }
+}))
+
+export default CreateDistributedSession

src/components/Modules/CreateSession.tsx

@@ -7,7 +7,7 @@ import {
 } from "@biconomy/use-aa"
 import { makeStyles } from "@mui/styles"
 import type React from "react"
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
 import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 import type { Hex } from "viem"