Merge pull request #26 from bcnmy/contract-call-abi-svm-demo

Contract call abi svm demo
bcnmy · Dec 12, 2023 · 3080bdc · 3080bdc
2 parents e3569f3 + 3fe859f
commit 3080bdc
Show file tree

Hide file tree

Showing 12 changed files with 1,124 additions and 167 deletions.
diff --git a/src/components/AA/BatchLiquidity.tsx b/src/components/AA/BatchLiquidity.tsx
@@ -40,19 +40,12 @@ const BatchLiquidity: React.FC = () => {
         config.hyphenLP.abi,
         signer
       );
-      const hyphenLPTx =
-        await hyphenContract.populateTransaction.addTokenLiquidity(
-          config.usdc.address,
-          ethers.BigNumber.from("1000000"),
-          {
-            from: scwAddress,
-          }
-        );
+      const addLiquidityData = hyphenContract.interface.encodeFunctionData("addTokenLiquidity", [config.usdc.address,
+        ethers.BigNumber.from("1000000")])
       const tx2 = {
         to: config.hyphenLP.address,
-        data: hyphenLPTx.data,
+        data: addLiquidityData,
       };
-      // todo check this for hyphen LP on Mumbai!
       txs.push(tx2);
 
       let userOp = await smartAccount.buildUserOp(txs, {

diff --git a/src/components/AA/index.tsx b/src/components/AA/index.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { makeStyles } from "@mui/styles";
-import ControlPointIcon from "@mui/icons-material/ControlPoint";
+// import ControlPointIcon from "@mui/icons-material/ControlPoint";
 import ImageIcon from "@mui/icons-material/Image";
 import ControlPointDuplicateIcon from "@mui/icons-material/ControlPointDuplicate";
-import CollectionsIcon from "@mui/icons-material/Collections";
+// import CollectionsIcon from "@mui/icons-material/Collections";
 
 interface Props {
   useCase: number;
@@ -12,24 +12,24 @@ interface Props {
 }
 
 const cardItems = [
-  {
-    title: "Mint ERC20 Token",
-    description: "This is single transaction to give Mint an ERC-20 token",
-    index: 4,
-    icon: (
-      <ControlPointIcon
-        style={{
-          color: "#FFB999",
-          fontSize: 72,
-        }}
-      />
-    ),
-  },
+  // {
+  //   title: "Mint ERC20 Token",
+  //   description: "This is single transaction to give Mint an ERC-20 token",
+  //   index: 4,
+  //   icon: (
+  //     <ControlPointIcon
+  //       style={{
+  //         color: "#FFB999",
+  //         fontSize: 72,
+  //       }}
+  //     />
+  //   ),
+  // },
   {
     title: "Mint NFT",
     description:
       "This is single transaction to give Mint an ERC-721 (NFT) token",
-      index: 5,
+    index: 3,
     icon: (
       <ImageIcon
         style={{
@@ -43,7 +43,7 @@ const cardItems = [
     title: "BatchTx - Liquidity",
     description:
       "This magic bundle will approve USDC then provide the USDC liquidity to Hyphen Pool.",
-      index: 6,
+    index: 4,
     icon: (
       <ControlPointDuplicateIcon
         style={{
@@ -53,23 +53,27 @@ const cardItems = [
       />
     ),
   },
-  {
-    title: "BatchTx - NFT",
-    description:
-      "This magic bundle will batch two single safeMint into one transaction.",
-      index: 7,
-    icon: (
-      <CollectionsIcon
-        style={{
-          color: "#FFB999",
-          fontSize: 72,
-        }}
-      />
-    ),
-  },
+  // {
+  //   title: "BatchTx - NFT",
+  //   description:
+  //     "This magic bundle will batch two single safeMint into one transaction.",
+  //     index: 7,
+  //   icon: (
+  //     <CollectionsIcon
+  //       style={{
+  //         color: "#FFB999",
+  //         fontSize: 72,
+  //       }}
+  //     />
+  //   ),
+  // },
 ];
 
-const AccountAbstraction: React.FC<Props> = ({ useCase, setUseCase, pageIndexChange }) => {
+const AccountAbstraction: React.FC<Props> = ({
+  useCase,
+  setUseCase,
+  pageIndexChange,
+}) => {
   const classes = useStyles();
 
   return (
@@ -96,28 +100,32 @@ const AccountAbstraction: React.FC<Props> = ({ useCase, setUseCase, pageIndexCha
 
       <div className={classes.cardContainer}>
         {cardItems.map((item, index) => (
-          <div onClick={(e)=>pageIndexChange(e,item.index)} key={index} className={classes.card}>
+          <div
+            onClick={(e) => pageIndexChange(e, item.index)}
+            key={index}
+            className={classes.card}
+          >
             {item.icon}
             <div className={classes.textBox}>
-            <h3
-              style={{
-                color: "#FFB999",
-                textAlign: "start",
-                fontSize: "auto",
-                margin: 0,
-              }}
-            >
-              {item.title}
-            </h3>
-            <p
-              style={{
-                fontSize: 14,
-                margin: 0,
-                textAlign: "center",
-              }}
-            >
-              {item.description}
-            </p>
+              <h3
+                style={{
+                  color: "#FFB999",
+                  textAlign: "start",
+                  fontSize: "auto",
+                  margin: 0,
+                }}
+              >
+                {item.title}
+              </h3>
+              <p
+                style={{
+                  fontSize: 14,
+                  margin: 0,
+                  textAlign: "center",
+                }}
+              >
+                {item.description}
+              </p>
             </div>
           </div>
         ))}
@@ -186,15 +194,15 @@ const useStyles = makeStyles(() => ({
     fontSize: 36,
     margin: 0,
   },
-  textBox:{
+  textBox: {
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
     gap: 8,
     "@media (max-width:1640px)": {
       alignItems: "start",
-    }
+    },
   },
   subSubTitle: {
     fontFamily: "Rubik",

diff --git a/src/components/Forward/BatchLiquidity.tsx b/src/components/Forward/BatchLiquidity.tsx
@@ -58,19 +58,16 @@ const BatchLiquidity: React.FC = () => {
       };
       txs.push(tx1);
 
-      const hyphenLPTx =
-        await hyphenContract.populateTransaction.addTokenLiquidity(
-          config.usdc.address,
-          ethers.BigNumber.from("1000000")
-        );
-
+      const addLiquidityData = hyphenContract.interface.encodeFunctionData("addTokenLiquidity", [config.usdc.address,
+        ethers.BigNumber.from("1000000")]) // 1 USDC (mumbai USDC has 6 decimals)
       const tx2 = {
         to: config.hyphenLP.address,
-        data: hyphenLPTx.data,
+        data: addLiquidityData,
       };
+
       txs.push(tx2);
       console.log("Tx array created", txs);
-      let partialUserOp = await smartAccount.buildUserOp([tx1], {
+      let partialUserOp = await smartAccount.buildUserOp(txs, {
         paymasterServiceData: {
           mode: PaymasterMode.ERC20,
         },
@@ -84,7 +81,7 @@ const BatchLiquidity: React.FC = () => {
           // here we are explicitly telling by mode ERC20 that we want to pay in ERC20 tokens and expect fee quotes
           mode: PaymasterMode.ERC20,
           // one can pass tokenList empty array. and it would return fee quotes for all tokens supported by the Biconomy paymaster
-          tokenList: [],
+          tokenList: [config.usdc.address, config.usdt.address],
           // preferredToken is optional. If you want to pay in a specific token, you can pass its address here and get fee quotes for that token only
           // preferredToken: config.preferredToken,
         });

diff --git a/src/components/Forward/MintNft.tsx b/src/components/Forward/MintNft.tsx
@@ -78,7 +78,7 @@ const MintNftForward: React.FC = () => {
         // here we are explicitly telling by mode ERC20 that we want to pay in ERC20 tokens and expect fee quotes
         mode: PaymasterMode.ERC20,
         // one can pass tokenList empty array. and it would return fee quotes for all tokens supported by the Biconomy paymaster
-        tokenList: [],
+        tokenList: [config.usdc.address, config.usdt.address],
         // preferredToken is optional. If you want to pay in a specific token, you can pass its address here and get fee quotes for that token only
         // preferredToken: config.preferredToken,
       });

diff --git a/src/components/Forward/index.tsx b/src/components/Forward/index.tsx
@@ -11,12 +11,12 @@ interface Props {
 
 const cardItems = [
   {
-    title: "Batch Liquidity",
+    title: "Batch NFT",
     description:
-      "This magic bundle will approve USDC then provide the USDC liquidity to Hyphen Pool.",
-    index: 9,
+      "This magic bundle will batch two single safeMint into one transaction.",
+    index: 6,
     icon: (
-      <ControlPointDuplicateIcon
+      <CollectionsIcon
         style={{
           color: "#FFB999",
           fontSize: 72,
@@ -25,12 +25,12 @@ const cardItems = [
     ),
   },
   {
-    title: "Batch NFT",
+    title: "Batch Liquidity",
     description:
-      "This magic bundle will batch two single safeMint into one transaction.",
-    index: 10,
+      "This magic bundle will approve USDC then provide the USDC liquidity to Hyphen Pool.",
+    index: 7,
     icon: (
-      <CollectionsIcon
+      <ControlPointDuplicateIcon
         style={{
           color: "#FFB999",
           fontSize: 72,