Merge pull request #24 from bcnmy/fix/update-wallet-lib

SMA 240 update web3Auth with rainbowkit
bcnmy · Nov 15, 2023 · d801898 · d801898
2 parents d96522a + fc8e5ad
commit d801898
Show file tree

Hide file tree

Showing 24 changed files with 4,811 additions and 2,632 deletions.
diff --git a/.env-example b/.env-example
diff --git a/package.json b/package.json
@@ -3,27 +3,31 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@biconomy/account": "^3.0.0-alpha.0",
-    "@biconomy/bundler": "^3.0.0-alpha.0",
-    "@biconomy/common": "^3.0.0-alpha.0",
-    "@biconomy/core-types": "^3.0.0-alpha.0",
-    "@biconomy/paymaster": "^3.0.0-alpha.0",
-    "@biconomy/web3-auth": "^3.0.0-alpha.0",
+    "@biconomy/account": "3.1.1",
+    "@biconomy/bundler": "3.1.1",
+    "@biconomy/common": "3.1.1",
+    "@biconomy/core-types": "3.1.1",
+    "@biconomy/modules": "3.1.1",
+    "@biconomy/paymaster": "3.1.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.12",
     "@mui/styles": "^5.11.12",
+    "@rainbow-me/rainbowkit": "^1.2.0",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "buffer": "^6.0.3",
     "ethers": "^5.6.9",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.8",
     "typescript": "^4.4.2",
+    "viem": "^1.18.3",
+    "wagmi": "^1.4.5",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,14 @@
 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 TabsBody from "./components/TabsBody";
 import { useSmartAccountContext } from "./contexts/SmartAccountContext";
-import { useWeb3AuthContext } from "./contexts/SocialLoginContext";
-import Button from "./components/Button";
 
 const App: React.FC = () => {
   const classes = useStyles();
-  const { connect, address, loading: eoaWalletLoading } = useWeb3AuthContext();
+  const { address } = useAccount()
   const { loading } = useSmartAccountContext();
 
   if (!address) {
@@ -26,11 +26,7 @@ const App: React.FC = () => {
             Solve complex UX challenges with customisable SDK modules in
             minutes.
           </p>
-          <Button
-            title="Get Started"
-            onClickFunc={connect}
-            isLoading={eoaWalletLoading}
-          />
+          <ConnectButton />
         </div>
       </div>
     );

diff --git a/src/components/AA/BatchLiquidity.tsx b/src/components/AA/BatchLiquidity.tsx
@@ -1,13 +1,9 @@
 import React, { useState } from "react";
 import { ethers } from "ethers";
 import { makeStyles } from "@mui/styles";
-import {
-  IHybridPaymaster,
-  PaymasterMode,
-  SponsorUserOperationDto,
-} from "@biconomy/paymaster";
+import { PaymasterMode } from "@biconomy/paymaster";
 import Button from "../Button";
-import { useWeb3AuthContext } from "../../contexts/SocialLoginContext";
+import { useEthersSigner } from "../../contexts/ethers";
 import { useSmartAccountContext } from "../../contexts/SmartAccountContext";
 import {
   configInfo as config,
@@ -19,12 +15,12 @@ const iFace = new ethers.utils.Interface(config.usdc.abi);
 
 const BatchLiquidity: React.FC = () => {
   const classes = useStyles();
-  const { web3Provider } = useWeb3AuthContext();
+  const signer = useEthersSigner();
   const { smartAccount, scwAddress } = useSmartAccountContext();
   const [loading, setLoading] = useState(false);
 
   const makeTx = async () => {
-    if (!scwAddress || !smartAccount || !web3Provider) return;
+    if (!scwAddress || !smartAccount || !signer) return;
     try {
       setLoading(true);
       const txs = [];
@@ -42,7 +38,7 @@ const BatchLiquidity: React.FC = () => {
       const hyphenContract = new ethers.Contract(
         config.hyphenLP.address,
         config.hyphenLP.abi,
-        web3Provider
+        signer
       );
       const hyphenLPTx =
         await hyphenContract.populateTransaction.addTokenLiquidity(
@@ -59,26 +55,16 @@ const BatchLiquidity: React.FC = () => {
       // todo check this for hyphen LP on Mumbai!
       txs.push(tx2);
 
-      let userOp = await smartAccount.buildUserOp(txs);
-      const biconomyPaymaster =
-        smartAccount.paymaster as IHybridPaymaster<SponsorUserOperationDto>;
-      let paymasterServiceData: SponsorUserOperationDto = {
-        mode: PaymasterMode.SPONSORED,
-      };
-      const paymasterAndDataResponse =
-        await biconomyPaymaster.getPaymasterAndData(
-          userOp,
-          paymasterServiceData
-        );
-      userOp.paymasterAndData = paymasterAndDataResponse.paymasterAndData;
+      let userOp = await smartAccount.buildUserOp(txs, {
+        paymasterServiceData: {
+          mode: PaymasterMode.SPONSORED,
+        },
+      });
       const userOpResponse = await smartAccount.sendUserOp(userOp);
       console.log("userOpHash", userOpResponse);
-      const { receipt } = await userOpResponse.wait(1);
-      console.log("txHash", receipt.transactionHash);
-      showSuccessMessage(
-        `Added batch liquidity ${receipt.transactionHash}`,
-        receipt.transactionHash
-      );
+      const { transactionHash } = await userOpResponse.waitForTxHash();
+      console.log("txHash", transactionHash);
+      showSuccessMessage(`Added batch liquidity ${transactionHash}`, transactionHash);
       setLoading(false);
     } catch (err: any) {
       console.error(err);

diff --git a/src/components/AA/BatchMintNft.tsx b/src/components/AA/BatchMintNft.tsx
@@ -1,14 +1,10 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { ethers } from "ethers";
 import { makeStyles } from "@mui/styles";
-import {
-  IHybridPaymaster,
-  PaymasterMode,
-  SponsorUserOperationDto,
-} from "@biconomy/paymaster";
+import { PaymasterMode } from "@biconomy/paymaster";
 
 import Button from "../Button";
-import { useWeb3AuthContext } from "../../contexts/SocialLoginContext";
+import { useEthersSigner } from "../../contexts/ethers";
 import { useSmartAccountContext } from "../../contexts/SmartAccountContext";
 import {
   configInfo as config,
@@ -18,17 +14,17 @@ import {
 
 const BatchMintNft: React.FC = () => {
   const classes = useStyles();
-  const { web3Provider } = useWeb3AuthContext();
+  const signer = useEthersSigner();
   const { smartAccount, scwAddress } = useSmartAccountContext();
   const [nftCount, setNftCount] = useState<number | null>(null);
   const [loading, setLoading] = useState(false);
 
   const getNftCount = useCallback(async () => {
-    if (!scwAddress || !web3Provider) return;
+    if (!scwAddress || !signer) return;
     const nftContract = new ethers.Contract(
       config.nft.address,
       config.nft.abi,
-      web3Provider
+      signer
     );
     const count = await nftContract.balanceOf(scwAddress);
     console.log("count", Number(count));
@@ -38,16 +34,16 @@ const BatchMintNft: React.FC = () => {
 
   useEffect(() => {
     getNftCount();
-  }, [getNftCount, web3Provider]);
+  }, [getNftCount, signer]);
 
   const mintNft = async () => {
-    if (!scwAddress || !smartAccount || !web3Provider) return;
+    if (!scwAddress || !smartAccount || !signer) return;
     try {
       setLoading(true);
       const nftContract = new ethers.Contract(
         config.nft.address,
         config.nft.abi,
-        web3Provider
+        signer
       );
       console.log("smartAccount.address ", scwAddress);
       const safeMintTx = await nftContract.populateTransaction.safeMint(
@@ -59,18 +55,12 @@ const BatchMintNft: React.FC = () => {
         data: safeMintTx.data,
       };
 
-      let userOp = await smartAccount.buildUserOp([tx1, tx1]);
-      const biconomyPaymaster =
-        smartAccount.paymaster as IHybridPaymaster<SponsorUserOperationDto>;
-      let paymasterServiceData: SponsorUserOperationDto = {
-        mode: PaymasterMode.SPONSORED,
-      };
-      const paymasterAndDataResponse =
-        await biconomyPaymaster.getPaymasterAndData(
-          userOp,
-          paymasterServiceData
-        );
-      userOp.paymasterAndData = paymasterAndDataResponse.paymasterAndData;
+      let userOp = await smartAccount.buildUserOp([tx1, tx1], {
+        paymasterServiceData: {
+          mode: PaymasterMode.SPONSORED,
+        },
+      });
+
       const userOpResponse = await smartAccount.sendUserOp(userOp);
       console.log("userOpHash", userOpResponse);
       const { receipt } = await userOpResponse.wait(1);

diff --git a/src/components/AA/MintErc20.tsx b/src/components/AA/MintErc20.tsx
@@ -1,14 +1,10 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { ethers } from "ethers";
 import { makeStyles } from "@mui/styles";
-import {
-  IHybridPaymaster,
-  PaymasterMode,
-  SponsorUserOperationDto,
-} from "@biconomy/paymaster";
+import { PaymasterMode } from "@biconomy/paymaster";
 
 import Button from "../Button";
-import { useWeb3AuthContext } from "../../contexts/SocialLoginContext";
+import { useEthersSigner } from "../../contexts/ethers";
 import { useSmartAccountContext } from "../../contexts/SmartAccountContext";
 import {
   configInfo as config,
@@ -18,17 +14,17 @@ import {
 
 const MintErc20: React.FC = () => {
   const classes = useStyles();
-  const { web3Provider } = useWeb3AuthContext();
+  const signer = useEthersSigner();
   const { smartAccount, scwAddress } = useSmartAccountContext();
   const [balance, setBalance] = useState(0);
   const [loading, setLoading] = useState(false);
 
   const getBalance = useCallback(async () => {
-    if (!scwAddress || !web3Provider) return;
+    if (!scwAddress || !signer) return;
     const erc20Contract = new ethers.Contract(
       config.terc20.address,
       config.terc20.abi,
-      web3Provider
+      signer
     );
     const count = await erc20Contract.balanceOf(scwAddress);
     console.log("count", Number(count));
@@ -38,16 +34,16 @@ const MintErc20: React.FC = () => {
 
   useEffect(() => {
     getBalance();
-  }, [getBalance, web3Provider]);
+  }, [getBalance, signer]);
 
   const makeTx = async () => {
-    if (!scwAddress || !web3Provider || !smartAccount) return;
+    if (!scwAddress || !signer || !smartAccount) return;
     try {
       setLoading(true);
       const erc20Contract = new ethers.Contract(
         config.terc20.address,
         config.terc20.abi,
-        web3Provider
+        signer
       );
       const amountGwei = ethers.utils.parseEther("100");
       const data = erc20Contract.interface.encodeFunctionData("mint", [
@@ -58,26 +54,17 @@ const MintErc20: React.FC = () => {
         to: config.terc20.address,
         data: data,
       };
-      let userOp = await smartAccount.buildUserOp([tx]);
-      const biconomyPaymaster =
-        smartAccount.paymaster as IHybridPaymaster<SponsorUserOperationDto>;
-      let paymasterServiceData: SponsorUserOperationDto = {
-        mode: PaymasterMode.SPONSORED,
-      };
-      const paymasterAndDataResponse =
-        await biconomyPaymaster.getPaymasterAndData(
-          userOp,
-          paymasterServiceData
-        );
-      userOp.paymasterAndData = paymasterAndDataResponse.paymasterAndData;
+      let userOp = await smartAccount.buildUserOp([tx], {
+        paymasterServiceData: {
+          mode: PaymasterMode.SPONSORED,
+        },
+      });
+
       const userOpResponse = await smartAccount.sendUserOp(userOp);
       console.log("userOpHash", userOpResponse);
-      const { receipt } = await userOpResponse.wait(1);
-      console.log("txHash", receipt.transactionHash);
-      showSuccessMessage(
-        `Minted ERC20 ${receipt.transactionHash}`,
-        receipt.transactionHash
-      );
+      const { transactionHash } = await userOpResponse.waitForTxHash();
+      console.log("txHash", transactionHash);
+      showSuccessMessage(`Minted ERC20 ${transactionHash}`, transactionHash);
       setLoading(false);
       await new Promise((resolve) => setTimeout(resolve, 2000));
       getBalance();