JS SDK page revamp

docs/developers/fuse-box/fuse-sdk/README.mdx

@@ -6,3 +6,12 @@ sidebar_position: 2
 # FuseBox JS SDK
 
 Welcome to the FuseBox JS SDK documentation! This guide will walk you through the process of integrating the SDK into your applications, covering initialization, and usage of various methods.
+
+## FuseBox SDK Features
+
+The FuseBox JS SDK enables easy ways to enable Account Abstraction on the Fuse Blockchain. Features include:
+
+- Create a Smart Contract Wallet
+- Send Single Transactions
+- Send Batch Transactions
+- Sponsored Transactions (Paymaster)

docs/developers/fuse-box/fuse-sdk/create-scw.mdx

@@ -0,0 +1,26 @@
+---
+title: Create Smart Contract Wallet
+sidebar_position: 5
+---
+
+### Create a Smart Contract Wallet
+
+The `init` method is a fundamental feature of the FuseBox JS SDK that enables you to setup a wallet by parsing the `PRIVATE_KEY` from an EOA. In the example below, we parse the `PRIVATE_KEY` and `YOUR_API_KEY` to the `init` method. Get `YOUR_API_KEY` [here](https://developers.fuse.io/). We use the `EthersJS` library to access the `PRIVATE_KEY` of the EOA. After a Smart Contract Wallet has been initialized, we can read it using the `getSender()` method.
+
+Note: Developers can use the EthersJS `createRandom()` to create new random Wallets.
+
+```typescript
+import { ethers } from "ethers";
+import { FuseSDK } from "@fuseio/fusebox-web-sdk";
+
+const main = async () => {
+  const publicApiKey = "YOUR_API_KEY" as string;
+  const credentials = new ethers.Wallet("PRIVATE_KEY" as string);
+
+  const fuse = await FuseSDK.init(publicApiKey, credentials);
+
+  console.log(`Sender Address is ${fuseSDK.wallet.getSender()}`);
+};
+
+main();
+```

docs/developers/fuse-box/fuse-sdk/installation-and-setup.mdx

@@ -6,7 +6,7 @@ sidebar_position: 2
 Install the FuseBox JS SDK:
 
 ```bash
-npm install ethers @fuseio/fusebox-web-sdk
+npm install @fuseio/fusebox-web-sdk
 ```
 
 Once you have installed the package, you can import it into your JS code:
@@ -19,10 +19,16 @@ import { FuseSDK } from "@fuseio/fusebox-web-sdk";
 
 To use the FuseBox JS SDK in your project, you must create an instance of the **`FuseSDK`** class. This class is the key to interacting with the Fuse API using the SDK. Fortunately, the `FuseSDK` class provides a range of instance methods, allowing you to execute various operations with the API.
 
+Using the SDK requires the use of the `EthersJS` library. We require the `EthersJS` library methods for creating Wallets.
+
+```bash
+npm install ethers
+```
+
 The following code initializes the Fuse SDK and creates an instance of the `FuseSDK` class. The `publicApiKey` variable should be set to your own API key.
 
-Replace `YOUR_API_KEY` with your actual API key obtained from the Fuse Console Dashboard.
-If you don’t want to enable `Paymaster` set it to false. It is default `false`
+Replace `YOUR_API_KEY` with your actual API key obtained from the Fuse [Developer](https://developers.fuse.io/) Dashboard.
+To enable `Paymaster`, set it as the third argument in the `init()` method. `withPaymaster: true` . It is default `false` where the argument is not provided.
 
 ```javascript
 import { ethers } from 'ethers';

docs/developers/fuse-box/fuse-sdk/paymaster.mdx

@@ -0,0 +1,19 @@
+---
+title: Send Transactions using Paymaster
+sidebar_position: 8
+---
+
+### Sponsored Transactions
+
+Sponsored transactions are the ability to pay for another user’s transaction fees. To do this, the Fuse operator must enable the sponsored feature in his project and deposit some funds into the paymaster contract. The SDK provides a middleware to check if the project is sponsored and the amount of funds available for sponsoring.
+
+To use this feature, you must first initialize the SDK with the _`withPaymaster`_ parameter set to true.
+
+```javascript
+import { FuseSDK } from "@fuseio/fusebox-web-sdk";
+
+const publicApiKey = "YOUR_API_KEY";
+const fuseSDK = await FuseSDK.init(publicApiKey, credentials, {
+  withPaymaster: true,
+});
+```

docs/developers/fuse-box/fuse-sdk/send-batch-txn.mdx

@@ -0,0 +1,59 @@
+---
+title: Send Batch Transactions
+sidebar_position: 7
+---
+
+### Send Batch Transactions
+
+A batch refers to a group of calls inside a single user operationhe. This can be an `approve` and `send` transaction in one call. The **`executeBatch()`** method is used.
+
+The **`executeBatch()`** method takes in an array of objects. With each object taking in 3 keys: `to`, `value` and `data`.
+
+```javascript
+executeBatch([
+  { to, value, data },
+  { to, value, data },
+  { to, value, data },
+]);
+```
+
+|   Param   | Type       | Status     | Description                                      |
+| :-------: | ---------- | ---------- | ------------------------------------------------ |
+|  **to**   | _address_  | _required_ | The address where the user want to send Tokens.  |
+| **value** | _number_   | _required_ | The amount of Tokens the user is sending         |
+| **data**  | _Function_ |            | Encoded Function Data for Smart Contract Methods |
+
+Example: **`index.ts`**
+
+```typescript
+import { ethers } from "ethers";
+import { FuseSDK } from "@fuseio/fusebox-web-sdk";
+
+const main = async () => {
+  const credentials = new ethers.Wallet("PRIVATE_KEY" as string);
+  const publicApiKey = "YOUR_API_KEY" as string;
+  const fuseSDK = await FuseSDK.init(publicApiKey, credentials);
+
+  console.log(`Sender Address is ${fuseSDK.wallet.getSender()}`);
+
+  const to = ["EOA_ADDRESS", "EOA_ADDRESS"];
+
+  const calls = to.map((x) => {
+    return {
+      to: x,
+      value: ethers.utils.parseEther("0.001"),
+      data: Uint8Array.from([]),
+    };
+  });
+
+  const res = await fuseSDK.executeBatch(calls);
+
+  console.log(`UserOpHash: ${res?.userOpHash}`);
+  console.log("Waiting for transaction...");
+
+  const receipt = await res?.wait();
+  console.log("Transaction Hash:", receipt?.transactionHash);
+};
+
+main();
+```

docs/developers/fuse-box/fuse-sdk/send-single-txn.mdx

@@ -0,0 +1,49 @@
+---
+title: Send Single Transaction
+sidebar_position: 6
+---
+
+### Send single transaction
+
+Transactions are cryptographically signed instructions from accounts. An account will initiate a transaction to update the state of the Fuse network. The simplest transaction is transferring Fuse Tokens from one account to another. To carry out a transaction using the FuseBox JS SDK, the **`callContract()`** method is used.
+
+The **`callContract()`** method takes in 3 arguments: `to`, `value` and `data`.
+
+```javascript
+callContract(to, value, data);
+```
+
+|   Param   | Type       | Status     | Description                                      |
+| :-------: | ---------- | ---------- | ------------------------------------------------ |
+|  **to**   | _address_  | _required_ | The address where the user want to send Tokens.  |
+| **value** | _number_   | _required_ | The amount of Tokens the user is sending         |
+| **data**  | _Function_ |            | Encoded Function Data for Smart Contract Methods |
+
+Example: **`index.ts`**
+
+```typescript
+import { ethers } from "ethers";
+import { FuseSDK } from "@fuseio/fusebox-web-sdk";
+
+const main = async () => {
+  const credentials = new ethers.Wallet("PRIVATE_KEY" as string);
+  const publicApiKey = "pk_wEP0gTlc3jcvBXEDpSnXBgbQ" as string;
+  const fuseSDK = await FuseSDK.init(publicApiKey, credentials);
+
+  console.log(`Sender Address is ${fuseSDK.wallet.getSender()}`);
+
+  const to = "0xb6e4fa6ff2873480590c68d9aa991e5bb14dbf03";
+  const value = ethers.utils.parseEther("0.001");
+  const data = Uint8Array.from([]);
+  console.log(data);
+  const res = await fuseSDK.callContract(to, value, data);
+
+  console.log(`UserOpHash: ${res?.userOpHash}`);
+  console.log("Waiting for transaction...");
+
+  const receipt = await res?.wait();
+  console.log("Transaction Hash:", receipt?.transactionHash);
+};
+
+main();
+```