added gasless guides

src/app/connect/account-abstraction/third-party/biconomy/page.mdx → src/app/connect/account-abstraction/gasless/biconomy/page.mdx

@@ -1,4 +1,4 @@
-
+import { SDKCard, Grid, DocImage, createMetadata, Step, Steps, InstallTabs, OpenSourceCard } from "@doc";
 
 # Biconomy
 
@@ -8,21 +8,21 @@ This guide assumes you have already installed Connect SDK into your application.
 
 <Steps>
 
-<Step title="API Id and Key">
+<Step title="API Id & Key">
 
 Obtain an API Id and Key using Biconomy. For steps on how to obtain the API Id and Key, refer to the [Biconomy documentation](https://docs-gasless.biconomy.io/guides/biconomy-dashboard).
 
 </Step>
 
 <Step title="Forwarder Address">
 
-Obtain a Forwarder Address using Biconomy for the specified network. The full list of forwarder addresses can be found on [Biconomy's documentation](https://docs-gasless.biconomy.io/misc/contract-addresses)
+Obtain a Forwarder Address using Biconomy for the specified network. The full list of forwarder addresses can be found on [Biconomy documentation](https://docs-gasless.biconomy.io/misc/contract-addresses)
 </Step>
 
     <Step title="Add transaction button">
     Add a transaction button for the method you want to sponsor funds for. Pass in the `apiId` and `apiKey` obtained earlier from Biconomy's dashboard. 
 
-    ```
+    ```jsx
     function Example() {
     return (
         <TransactionButton
@@ -45,15 +45,15 @@ Obtain a Forwarder Address using Biconomy for the specified network. The full li
             console.error("Transaction error", error);
         }}
         gasless={{
-            provider: "biconomy";
-            relayerForwarderAddress: "...";
-            apiId: "...";
-            apiKey: "...";
+            provider: "biconomy",
+            relayerForwarderAddress: "...",
+            apiId: "...",
+            apiKey: "...",
         }}
         >
         Confirm Transaction
         </TransactionButton>
-    );
+    ); 
     }
     ```
 

src/app/connect/account-abstraction/gasless/engine/page.mdx

@@ -0,0 +1,57 @@
+import { SDKCard, Grid, DocImage, createMetadata, Step, Steps, InstallTabs, OpenSourceCard } from "@doc";
+
+# Engine
+
+Learn to setup gasless transactions using TransactionButton and Engine
+
+This guide assumes you have already installed Connect SDK into your application. If you have not, please refer to the [quickstart guide](/connect/quickstart). 
+
+<Steps>
+
+<Step title="Relayer URL">
+
+Obtain the Relayer URL using Engine. For steps on how to obtain the Relayer URL, refer to the [Engine relayer guide](/engine/features/relayers).
+
+</Step>
+
+
+<Step title="Add transaction button">
+    Add a transaction button for the method you want to sponsor funds for. Pass in the `relayerUrl` and `relayerForwarderAddress`
+
+    ```jsx
+    function Example() {
+    return (
+        <TransactionButton
+        transaction={() => {
+            // Create a transaction object and return it
+            const tx = prepareContractCall({
+            contract,
+            method: "mint",
+            params: [address, amount],
+            });
+            return tx;
+        }}
+        onTransactionSent={(result) => {
+            console.log("Transaction submitted", result.transactionHash);
+        }}
+        onTransactionConfirmed={(receipt) => {
+            console.log("Transaction confirmed", receipt.transactionHash);
+        }}
+        onError={(error) => {
+            console.error("Transaction error", error);
+        }}
+        gasless={{
+            provider: "engine",
+            relayerUrl: "...",
+            relayerForwarderAddress: "...",
+        }}
+        >
+        Confirm Transaction
+        </TransactionButton>
+    );
+    }
+    ```
+
+    </Step>
+
+</Steps>

src/app/connect/account-abstraction/gasless/openzeppelin/page.mdx

@@ -0,0 +1,63 @@
+import { SDKCard, Grid, DocImage, createMetadata, Step, Steps, InstallTabs, OpenSourceCard } from "@doc";
+
+# OpenZeppelin
+
+Learn to setup gasless transactions using TransactionButton and OpenZeppelin's gasless relayers. 
+
+This guide assumes you have already installed Connect SDK into your application. If you have not, please refer to the [quickstart guide](/connect/quickstart). 
+
+<Steps>
+
+<Step title="Relayer URL">
+
+Obtain the Relayer URL using OpenZeppelin. For steps on how to obtain the Relayer URL, refer to the [OpenZeppelin documentation](https://docs.openzeppelin.com/defender/v2/manage.html#relayers).
+
+<Step title="Forwarder Address">
+
+Obtain a Forwarder Address using Biconomy for the specified network. Learn how to obtain a forwarder address from [OpenZeppelin documentation](https://docs.openzeppelin.com/contracts/5.x/api/metatx)
+
+</Step>
+
+</Step>
+
+
+<Step title="Add transaction button">
+    Add a transaction button for the method you want to sponsor funds for. Pass in the `relayerUrl` and `relayerForwarderAddress`
+
+    ```jsx
+    function Example() {
+    return (
+        <TransactionButton
+        transaction={() => {
+            // Create a transaction object and return it
+            const tx = prepareContractCall({
+            contract,
+            method: "mint",
+            params: [address, amount],
+            });
+            return tx;
+        }}
+        onTransactionSent={(result) => {
+            console.log("Transaction submitted", result.transactionHash);
+        }}
+        onTransactionConfirmed={(receipt) => {
+            console.log("Transaction confirmed", receipt.transactionHash);
+        }}
+        onError={(error) => {
+            console.error("Transaction error", error);
+        }}
+        gasless={{
+            provider: "openzeppelin",
+            relayerUrl: "...",
+            relayerForwarderAddress: "...",
+        }}
+        >
+        Confirm Transaction
+        </TransactionButton>
+    );
+    }
+    ```
+
+    </Step>
+
+</Steps>

src/app/connect/sidebar.tsx

@@ -257,17 +257,21 @@ export const sidebar: SideBar = {
 					],
 				},
 				{
-					name: "Third-Parties",
+					name: "Gasless",
 					isCollapsible: true,
 					expanded: true,
 					links: [
+						{
+							name: "Engine",
+							href: `${aAslug}/gasless/engine`,
+						},
 						{
 							name: "Biconomy",
-							href: `${aAslug}/third-party/biconomy`,
+							href: `${aAslug}/gasless/biconomy`,
 						},
 						{
 							name: "OpenZeppelin",
-							href: `${aAslug}/third-party/openzeppelin`,
+							href: `${aAslug}/gasless/openzeppelin`,
 						},
 					],
 				},