Merge pull request #39 from bcnmy/feat/use-aa

chore: use hooks

package.json

@@ -5,12 +5,14 @@
   "type": "module",
   "scripts": {
     "dev": "bun i && bun link @biconomy/account && vite",
+    "start": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@biconomy/account": "^4.4.0",
+    "@biconomy/account": "^4.4.5",
+    "@biconomy/use-aa": "^1.0.8",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@ethersproject/providers": "^5.7.2",
@@ -24,8 +26,8 @@
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.8",
-    "viem": "^2.10.2",
-    "wagmi": "latest"
+    "viem": "^2.13.7",
+    "wagmi": "^2.9.9"
   },
   "devDependencies": {
     "@types/react": "^18.3.1",

src/App.tsx

@@ -1,27 +1,29 @@
 import React from "react";
 import { makeStyles } from "@mui/styles";
 import { ToastContainer } from "react-toastify";
-import { useAccount } from 'wagmi'
-import { ConnectButton } from '@rainbow-me/rainbowkit';
+import { useAccount } from "wagmi";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
 import TabsBody from "./components/TabsBody";
-import { useSmartAccountContext } from "./contexts/SmartAccountContext";
 
 const App: React.FC = () => {
   const classes = useStyles();
-  const { address } = useAccount()
-  const { loading } = useSmartAccountContext();
+  const { address } = useAccount();
 
   if (!address) {
     return (
       <div className={classes.bgCover}>
         <div className={classes.container}>
           <h1 className={classes.title}>
-          <img width={35} style={
-            {
-              marginRight: 20,
-            }
-          } src="/logo.svg" alt="" />
-            Biconomy SDK</h1>
+            <img
+              width={35}
+              style={{
+                marginRight: 20,
+              }}
+              src="/logo.svg"
+              alt=""
+            />
+            Biconomy SDK
+          </h1>
           <p className={classes.subTitle}>
             Solve complex UX challenges with customisable SDK modules in
             minutes.
@@ -34,7 +36,7 @@ const App: React.FC = () => {
 
   return (
     <div className={classes.bgCover}>
-      <TabsBody loading={loading} />
+      <TabsBody loading={false} />
       <ToastContainer position="bottom-left" newestOnTop theme="dark" />
     </div>
   );

src/components/AA/MintNft.tsx

@@ -3,20 +3,34 @@ import { makeStyles } from "@mui/styles";
 import { usePublicClient } from "wagmi";
 import { Hex, encodeFunctionData, getContract } from "viem";
 import Button from "../Button";
-import { useSmartAccountContext } from "../../contexts/SmartAccountContext";
+import { configInfo as config, showSuccessMessage } from "../../utils";
 import {
-  configInfo as config,
-  showErrorMessage,
-  showSuccessMessage,
-} from "../../utils";
-import { PaymasterMode } from "@biconomy/account";
+  useSendTransaction,
+  useSmartAccount,
+  useUserOpWait,
+} from "@biconomy/use-aa";
+import { ErrorGuard } from "../../utils/ErrorGuard";
+import { polygonAmoy } from "viem/chains";
 
 const MintNft: React.FC = () => {
   const classes = useStyles();
   const publicClient = usePublicClient();
-  const { smartAccount, scwAddress } = useSmartAccountContext();
   const [nftCount, setNftCount] = useState<number | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [loadedCount, setLoadedCount] = useState<boolean>(false);
+
+  const { smartAccountAddress: scwAddress } = useSmartAccount();
+  const {
+    mutate,
+    data: userOpResponse,
+    error,
+    isPending,
+  } = useSendTransaction();
+  const {
+    isLoading: waitIsLoading,
+    isSuccess: waitIsSuccess,
+    error: waitError,
+    data: waitData,
+  } = useUserOpWait({ userOpResponse });
 
   const getNftCount = useCallback(async () => {
     if (!scwAddress || !publicClient) return;
@@ -31,66 +45,56 @@ const MintNft: React.FC = () => {
   }, [publicClient, scwAddress]);
 
   useEffect(() => {
-    getNftCount();
-  }, [getNftCount, publicClient]);
-
-  const mintNft = async () => {
-    if (!scwAddress || !smartAccount || !publicClient) return;
-    try {
-      setLoading(true);
-      const mintData = encodeFunctionData({
-        abi: config.nft.abi,
-        functionName: "safeMint",
-        args: [scwAddress as Hex],
-      });
-      const tx1 = {
-        to: config.nft.address as Hex,
-        value: BigInt(0),
-        data: mintData,
-      };
-      let { waitForTxHash } = await smartAccount.sendTransaction(tx1, {
-        paymasterServiceData: { mode: PaymasterMode.SPONSORED },
-      });
-      const { transactionHash } = await waitForTxHash();
-      console.log("txHash", transactionHash);
-      showSuccessMessage(`Minted Nft ${transactionHash}`, transactionHash);
-      setLoading(false);
-      await new Promise((resolve) => setTimeout(resolve, 2000));
+    if (waitIsSuccess || !loadedCount) {
       getNftCount();
-    } catch (err: any) {
-      console.error(err);
-      setLoading(false);
-      showErrorMessage(err.message || "Error in sending the transaction");
+      setLoadedCount(true);
     }
-  };
-
-  return (
-    <main className={classes.main}>
-      <p style={{ color: "#7E7E7E" }}>
-        Use Cases {"->"} Gasless {"->"} Mint Nft
-      </p>
+  }, [getNftCount, waitIsSuccess]);
 
-      <h3 className={classes.subTitle}>Mint Nft Flow</h3>
+  useEffect(() => {
+    waitIsSuccess &&
+      showSuccessMessage(
+        "Successful mint: " +
+          `${polygonAmoy.blockExplorers.default.url}/tx/${waitData?.receipt?.transactionHash}`
+      );
+  }, [waitIsSuccess]);
 
-      <p style={{ marginBottom: 20 }}>
-        This is an example gasless transaction to Mint Nft.
-      </p>
-      <p>
-        Nft Contract Address: {config.nft.address}{" "}
-        <span style={{ fontSize: 13, color: "#FFB4B4" }}>
-          (same of goerli, amoy, polygon)
-        </span>
-      </p>
-      <p style={{ marginBottom: 30, marginTop: 30, fontSize: 24 }}>
-        Nft Balance in SCW:{" "}
-        {nftCount === null ? (
-          <p style={{ color: "#7E7E7E", display: "contents" }}>fetching...</p>
-        ) : (
-          nftCount
-        )}
-      </p>
+  const mintNft = () =>
+    mutate({
+      manyOrOneTransactions: {
+        to: config.nft.address as Hex,
+        data: encodeFunctionData({
+          abi: config.nft.abi,
+          functionName: "safeMint",
+          args: [scwAddress as Hex],
+        }),
+      },
+    });
 
-      <Button title="Mint NFT" isLoading={loading} onClickFunc={mintNft} />
+  return (
+    <main className={classes.main}>
+      <ErrorGuard errors={[error, waitError]}>
+        <p style={{ color: "#7E7E7E" }}>
+          Use Cases {"->"} Gasless {"->"} Mint Nft
+        </p>
+        <h3 className={classes.subTitle}>Mint Nft Flow</h3>
+        <p style={{ marginBottom: 20 }}>
+          This is an example gasless transaction to Mint Nft.
+        </p>
+        <p>
+          Nft Contract Address: {config.nft.address}{" "}
+          <span style={{ fontSize: 13, color: "#FFB4B4" }}>
+            (same of goerli, amoy, polygon)
+          </span>
+        </p>
+        <p style={{ marginBottom: 30, marginTop: 30, fontSize: 24 }}>
+          Nft Balance in SCW:{" "}
+          <p style={{ color: "#7E7E7E", display: "contents" }}>
+            {waitIsLoading ? "fetching..." : nftCount}
+          </p>
+        </p>
+        <Button title="Mint NFT" isLoading={isPending} onClickFunc={mintNft} />
+      </ErrorGuard>
     </main>
   );
 };