Add biconomy docs (#501)

* add Biconomy docs

* Update interact_with_xc20.md

* Update biconomy.md

docs/build/builder-guides/leverage_parachains/interact_with_xc20.md

@@ -220,7 +220,7 @@ For the next step, we use [Remix](https://remix.ethereum.org/) to deploy our cod
 
 ![Untitled](mintable-xc20-cookbook/Untitled%208.png)
 
-After sending the initial funding to the faucet contract via MetaMask, you can successfully request tokens from the faucet now!
+After sending the initial funding to the faucet contract via MetaMask, you can successfully request tokens from the faucet!
 
 ![Untitled](mintable-xc20-cookbook/Untitled%209.png)
 

docs/build/integrations/account-abstraction/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "Account Abstraction",
+    "position": 1
+}

docs/build/integrations/account-abstraction/banana/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "Banana Wallet SDK",
+    "position": 1
+}

docs/build/integrations/account-abstraction/biconomy/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "Biconomy Account Abstraction SDK",
+    "position": 2
+}

docs/build/integrations/account-abstraction/biconomy/biconomy.md

@@ -0,0 +1,268 @@
+---
+sidebar_label: Quickstart
+sidebar_position: 1
+---
+
+# Quickstart: Smart Account Native Transfer
+
+In this guide, we will walk through creating a basic Node.js script using **TypeScript** with an implementation of the **Smart Account Package** from the Biconomy SDK. You will learn how to create a smart account and perform user operations by sending a native transfer of tokens. 
+
+:::info
+Please note that this tutorial assumes you have Node JS installed on your computer and have some working knowledge of Node.
+:::
+
+## Environment set up
+
+We will clone a preconfigured Node.js project with TypeScript support to get started. Follow these steps to clone the repository to your local machine using your preferred command line interface:
+
+1. Open your command line interface, Terminal, Command Prompt, or PowerShell.
+2. Navigate to the desired directory where you would like to clone the repository.
+3. Execute the following command to clone the repository from the provided [GitHub link](https://github.com/bcnmy/quickstart)
+
+```bash
+git clone git@github.com:bcnmy/quickstart.git
+```
+
+Note that this is the ssh example, use http or GithubCli options if you prefer. 
+
+```bash
+git clone https://github.com/bcnmy/quickstart.git
+```
+
+Once you have the repository on your local machine - start by installing all dependencies using your preferred package manager. In this tutorial we will use yarn.
+
+```bash
+yarn install
+yarn dev
+```
+After running these two commands you should see the printed statement “Hello World!” in your terminal. Any changes made to the `index.ts` file in the src directory should now automatically run in your terminal upon save. 
+
+All packages you need for this guide are all configured and installed for you, check out the `package.json` file if you want to explore the dependencies.
+
+<details>
+  <summary> Click to learn more about the packages </summary>
+
+- The account package will help you with creating smart contract accounts and an interface with them to create transactions.
+- The bundler package helps you with interacting with our bundler or alternatively another bundler of your choice.
+- The paymaster package works similarly to the bundler package in that you can use our paymaster or any other one of your choice.
+- The core types package will give us Enums for the proper ChainId we may want to use.
+- The modules package gives us access to the different modules we publish for the biconomy sdk.
+- The common package is needed by our accounts package as another dependency.
+- Finally the ethers package at version 5.7.2 will help us with giving our accounts an owner which will be our own EOA.
+
+</details>
+
+Let’s first set up a .env file in the root of our project, this will need a Private Key of any Externally Owned Account (EOA) you would like to serve as the owner of the smart account we create. This is a private key you can get from wallets like MetaMask, TrustWallet, Coinbase Wallet etc. All of these wallets will have tutorials on how to export the Private key. 
+
+```bash
+PRIVATE_KEY = "enter some private key"
+```
+
+Let’s give our script the ability to access this environment variable. Delete the console log inside of `src/index.ts` and replace it with the code below. All of our work for the remainder of the tutorial will be in this file. 
+
+```typescript
+import { config } from "dotenv"
+
+config()
+```
+Now our code is configured to access the environment variable as needed. 
+
+## Initialization
+
+Let’s import our bundler package, and providers from the ethers package:
+
+```typescript
+import { IBundler, Bundler } from '@biconomy/bundler'
+import { DEFAULT_ENTRYPOINT_ADDRESS } from "@biconomy/account"
+import { ethers } from 'ethers'
+import { ChainId } from "@biconomy/core-types"
+```
+
+IBundler is the typing for the Bundler class that we will create a new instance of. 
+
+
+### **Initial Configuration**
+
+```typescript
+const bundler: IBundler = new Bundler({
+    bundlerUrl: 'https://bundler.biconomy.io/api/v2/80001/nJPK7B3ru.dd7f7861-190d-41bd-af80-6877f74b8f44',     
+    chainId: ChainId.ASTAR_TESTNET,
+    entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS,
+  })
+```
+
+- Now we create an instance of our bundler with the following:
+    - a bundler url which you can retrieve from the Biconomy Dashboard
+    - chain ID, in this case we’re using Shibuya testnet
+    - and default entry point address imported from the account package
+
+
+```typescript
+import {  BiconomySmartAccountV2, DEFAULT_ENTRYPOINT_ADDRESS } from "@biconomy/account"
+```
+
+Update your import from the account package to also include BiconomySmartAccountV2 which is the class we will be using to create an instance of our smart account.
+
+```typescript
+const provider = new ethers.providers.JsonRpcProvider("https://evm.shibuya.astar.network")
+const wallet = new ethers.Wallet(process.env.PRIVATE_KEY || "", provider);
+```
+
+- We create a provider using a public RPC provider endpoint from Astar Foundation, feel free to use any service you wish.
+- Next we create an instance of the wallet associated to our Private key.
+
+One more thing we need to include before we move on is the module for our Smart account. You can learn more about modules here. In this instance we will create this smart account using the ECDSA module. 
+
+First we import our Module: 
+
+```typescript
+import { ECDSAOwnershipValidationModule, DEFAULT_ECDSA_OWNERSHIP_MODULE } from "@biconomy/modules";
+```
+Now let's initialize the module and pass it to our account creation config:
+
+```typescript
+async function createAccount() {
+
+  const module = await ECDSAOwnershipValidationModule.create({
+    signer: wallet,
+    moduleAddress: DEFAULT_ECDSA_OWNERSHIP_MODULE
+  })
+
+  let biconomySmartAccount = await BiconomySmartAccountV2.create({
+  signer: wallet,
+  chainId: ChainId.ASTAR_TESTNET,
+  bundler: bundler, 
+  entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS,
+  defaultValidationModule: module,
+  activeValidationModule: module
+})
+  console.log("address: ", await biconomySmartAccount.getAccountAddress())
+  return biconomySmartAccount;
+}
+
+```
+
+We create a new instance of the account using the BiconomySmartAccount class and passing it the configuration. 
+
+We then await the initialization of the account and log out two values to out terminal: the owner of the account and the smart account address. The owner should be the EOA that you got your private key from and the smart account address will be a new address referring to the address of this wallet. 
+:::info
+Smart accounts are counterfactual in nature. We know their address before they are even deployed. In this instance we won’t immediately deploy it, it will automatically be deployed on the first transaction it initiates and the gas needed for deployment will be added to that first transaction.
+:::
+
+:::caution
+Before continuing, now that we have our smart account address we need to fund it with some test network tokens! Since we are using the Shibuya network head over to the [Astar Portal](https://portal.astar.network) and use the faucet function to fund your account. If you skip this step you might run into the [AA21 didn't pay prefund error](https://docs.biconomy.io/troubleshooting/commonerrors)!
+:::
+Once you have tokens available it is time to start constructing our first userOps for a native transfer.
+
+
+## Execute your first userOp
+
+```typescript
+async function createTransaction() {
+  console.log("creating account")
+
+  const smartAccount = await createAccount();
+
+  const transaction = {
+    to: '0x322Af0da66D00be980C7aa006377FCaaEee3BDFD',
+    data: '0x',
+    value: ethers.utils.parseEther('0.1'),
+  }
+
+  const userOp = await smartAccount.buildUserOp([transaction])
+  userOp.paymasterAndData = "0x"
+
+  const userOpResponse = await smartAccount.sendUserOp(userOp)
+
+  const transactionDetail = await userOpResponse.wait()
+
+  console.log("transaction detail below")
+  console.log(transactionDetail)
+}
+
+createTransaction()
+```
+
+Let’s move the call to create account into the create transaction function and have it assigned to the value smartAccount. 
+
+Now we need to construct our transaction which will take the following values: 
+
+- `to`: the address this interaction is directed towards, (in this case here is an address I own, feel free to change this to your own or send me more test tokens)
+- `data`: we are defaulting to ‘0x’ as we do not need to send any specific data for this transaction to work since it is a native transfer
+- `value`: we indicate the amount we would like to transfer here and use the `parseEther` utility function to make sure our value is formatted the way we need it to be
+
+Next up is building the userOp, feel free to add an additional log here if you would like to see how the partial userOp looks in this case. We’re also going to add “0x” for the paymasterAndData value as we just want this to be a regular transaction where the gas is paid for by the end user. 
+
+Finally we send the userOp and save the value to a variable named userOpResponse and get the transactionDetail after calling `userOpResponse.wait()`. This function can optionally take a number to specify the amount of network confirmations you would like before returning a value. For example, if you passed `userOpResponse.wait(5)` this would wait for 5 confirmations on the network before giving you the necessary value. 
+
+Check out the long transaction details available now in your console! You just created and executed your first userOps using the Biconomy SDK! 
+
+<details>
+  <summary> Click to view final code </summary>
+
+```typescript
+import { config } from "dotenv"
+import { IBundler, Bundler } from '@biconomy/bundler'
+import { ChainId } from "@biconomy/core-types"
+import { BiconomySmartAccountV2, DEFAULT_ENTRYPOINT_ADDRESS } from "@biconomy/account"
+import { ECDSAOwnershipValidationModule, DEFAULT_ECDSA_OWNERSHIP_MODULE } from "@biconomy/modules";
+import { ethers } from 'ethers';
+
+config()
+
+const provider = new ethers.providers.JsonRpcProvider("https://rpc.ankr.com/polygon_mumbai")
+const wallet = new ethers.Wallet(process.env.PRIVATE_KEY || "", provider);
+
+const bundler: IBundler = new Bundler({
+  bundlerUrl: 'https://bundler.biconomy.io/api/v2/80001/nJPK7B3ru.dd7f7861-190d-41bd-af80-6877f74b8f44',     
+  chainId: ChainId.ASTAR_TESTNET,
+  entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS,
+})
+
+const module = await ECDSAOwnershipValidationModule.create({
+  signer: wallet,
+  moduleAddress: DEFAULT_ECDSA_OWNERSHIP_MODULE
+})
+
+  async function createAccount() {
+    let biconomyAccount = await BiconomySmartAccountV2.create({
+      signer: wallet,
+      chainId: ChainId.ASTAR_TESTNET,
+      bundler: bundler, 
+      entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS,
+      defaultValidationModule: module,
+      activeValidationModule: module
+    })
+    console.log("address", biconomyAccount.accountAddress)
+    return biconomyAccount
+  }
+
+  async function createTransaction() {
+    const smartAccount = await createAccount();
+    try {
+      const transaction = {
+        to: '0x322Af0da66D00be980C7aa006377FCaaEee3BDFD',
+        data: '0x',
+        value: ethers.utils.parseEther('0.1'),
+      }
+
+      const userOp = await smartAccount.buildUserOp([transaction])
+      userOp.paymasterAndData = "0x"
+
+      const userOpResponse = await smartAccount.sendUserOp(userOp)
+
+      const transactionDetail = await userOpResponse.wait()
+
+      console.log("transaction detail below")
+      console.log(`https://shibuya.subscan.io/extrinsic/${transactionDetail.receipt.transactionHash}`)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  createTransaction()
+```
+
+</details>
+
+Now that you have completed our quickstart take a look at exploring further usecases in our Quick Explore guide or our Node JS guides!

docs/build/integrations/account-abstraction/biconomy/index.md

@@ -0,0 +1,43 @@
+import Figure from '/src/components/figure'
+
+# Overview
+
+The Biconomy SDK is an Account Abstraction toolkit that enables the simplest UX on your dApp, wallet or appchain. Built on top of the ERC 4337 solution for Account Abstraction, we offer a full-stack solution for tapping into the power of our Smart Accounts Platform, Paymasters, and Bundlers. 
+
+ <Figure src={require('/docs/build/integrations/account-abstraction/biconomy/images/overview/fullstackaa.png').default} width="80%" />
+
+## Smart Accounts Platform
+
+The Biconomy Smart Account is an ERC 4337-compliant solution that works with any Paymaster and Bundler service. Smart Accounts are governed by code instead of ECDSA, which allows for other types of signature algorithms to be used with the Smart Account. Additionally, the smart accounts package allows you to quickly and easily build and execute User Operations or userOps. These are pseudo-transaction objects that eventually execute as a transaction on the EVM.  
+
+The Biconomy Smart Accounts are signer agnostic, which allows you to use any authorization package of your choice as long as you can pass a signer to our SDK upon the creation of a Smart Account. Check out different ways you can create a Biconomy Smart Account [here](https://docs.biconomy.io/category/signers).
+
+
+Smart Accounts are further enhanced by validation modules that allow you to execute arbitrary logic before validating a userOp. This allows you, as a developer, to build modules that allow for session keys, multi-chain validation modules, pass keys, and more. 
+
+ <Figure src={require('/docs/build/integrations/account-abstraction/biconomy/images/overview/modularsa.png').default} width="80%" />
+
+If you want to start diving into Smart Accounts you can do so [here](https://docs.biconomy.io/category/smart-accounts). If you know all about Smart Accounts and prefer to start working with modules, start learning about them [here](https://docs.biconomy.io/category/modules) or follow this step-by-step [tutorial](https://docs.biconomy.io/category/session-keys-tutorial) on how to build a dApp that utilizes session key modules. 
+
+## Paymaster
+
+Biconomy offers a Paymaster service designed with one of the best developer experiences in mind. Simply use one URL and switch modes between our sponsorship paymaster and our Token Paymaster. 
+
+### Sponsorship Paymaster
+
+ <Figure src={require('/docs/build/integrations/account-abstraction/biconomy/images/overview/sponsored.png').default} width="80%" />
+
+
+If the mode you choose in the request to the Paymaster URL is the sponsored mode, your users will benefit from gasless transactions, and you remove the friction point of needed native tokens to pay for gas on transactions. Learn how to set up your paymaster [here](https://docs.biconomy.io/dashboard/paymaster).
+
+### Token Paymaster
+
+ <Figure src={require('/docs/build/integrations/account-abstraction/biconomy/images/overview/erc20gas.png').default} width="80%" />
+
+Switching the mode of your Paymster to ERC20 allows you to unlock an experience where users can pay gas in any of our supported ERC20 tokens on different networks. Check out the latest supported tokens [here](https://docs.biconomy.io/supportedchains/supportedTokens).
+
+Learn how to utilize either of these Paymasters by checking out our How To Guide on [Executing transactions](https://docs.biconomy.io/category/executing-transactions)
+
+## Bundler
+
+The Bundler is a service that tracks userOps that exist in an alternative mem pool and as the name suggests, bundles them together to send to an Entry Point Contract for eventual execution onchain. This is the final piece of the flow where after constructing your userOp and then potentially signing it with data from a paymaster, you send the userOp on chain to be handled and executed as a transaction on the EVM. You can start using our Bundlers right now in your dApps; each of our [tutorials](https://docs.biconomy.io/category/tutorials) will walk you through how to use them in different scenarios.

docs/build/integrations/account-abstraction/index.md

@@ -0,0 +1,27 @@
+# Account Abstraction
+
+:::note
+Please note that this section is under active development. 
+:::
+
+## Overview
+Here you will find all the information required to refine the end-user experience and allow for seamless web2-like interactions with dApps and accounts on the Astar EVM.
+
+Account Abstraction is a blockchain technology that enables users to utilize smart contracts as their accounts. While the default account for most users is an Externally Owned Account (EOA), which is controlled by an external private key, it requires users to have a considerable understanding of blockchain technology to use them securely. Fortunately, smart contract accounts can create superior user experiences.
+
+### Using Account Abstraction
+There are two primary ways users can use account abstraction: with third party meta transaction services or by sending ERC-4337 transactions.
+
+#### Meta Transactions
+Meta transactions are bespoke third party services for achieving account abstraction. 
+
+#### ERC-4337
+ERC-4337, also known as EIP-4337.
+- Banana Wallet SDK
+
+```mdx-code-block
+import DocCardList from '@theme/DocCardList';
+import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+
+<DocCardList items={useCurrentSidebarCategory().items}/>
+```

docs/build/integrations/api/_category_.json

@@ -1,5 +1,5 @@
 {
     "label": "API",
-    "position": 1
+    "position": 2
 }
 

docs/build/integrations/dapp-listing/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "dApp Listings",
-  "position": 2
+  "position": 4
 }

docs/build/integrations/node-providers/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Node Providers",
-  "position": 4
+  "position": 6
 }