Add EZ transactions article (#151)

docs/api/tooling/gasless-txs.md

@@ -0,0 +1,52 @@
+---
+sidebar_position: 4
+sidebar_label: Gasless and Signless Transactions
+---
+
+# Gasless and Signless Transactions
+
+The **EZ-Transactions package** (aka Easy-transactions) simplifies blockchain interactions by enabling gasless and signless transactions. Anyone can use it to integrate into their dApp projects.
+
+With gasless transactions, the dApp developer covers gas fees for their users (web2-like approach), while signless transactions allow automatic signing via temporary sub-accounts. This combination creates a seamless user experience, as they no longer need to pay gas fees or manually sign each transaction. 
+
+Developers can easily integrate these features into their dApps using provided hooks and providers, such as `GaslessTransactionsProvider` and `SignlessTransactionsProvider`. The package also includes UI components for enabling or disabling these features.
+
+For more details, visit the [GitHub page](https://github.com/gear-foundation/dapps/tree/master/frontend/packages/ez-transactions).
+
+## Key Features
+### Gasless Transactions
+
+- Users no longer need to worry about paying gas fees. The backend handles transaction fees, creating a more streamlined experience.
+- This is particularly useful for applications targeting non-crypto-savvy users who might find gas fees confusing.
+
+### Signless Transactions
+
+- Signless transactions are automatically signed by a temporary sub-account on the user's behalf.
+- This removes the need for users to manually sign every transaction, speeding up processes and making applications more user-friendly.
+
+## Package Composition
+The package includes several key elements that developers can leverage to integrate these features into their applications:
+
+### Providers
+
+- `GaslessTransactionsProvider`: Wraps components to enable gasless transaction functionality. This ensures that the backend manages all transaction costs.
+- `SignlessTransactionsProvider`: Enables automatic signing of transactions, reducing user friction.
+
+### Hooks
+
+- `useGaslessTransaction`: Allows developers to easily implement gasless functionality in specific parts of their dApp.
+- `useSignlessTransaction`: Integrates signless functionality for seamless transaction processing.
+
+### UI Components
+
+The package also provides UI elements that can toggle these features on or off, giving flexibility to both developers and users. These components can be customized to suit the needs of the application.
+
+## Use Cases
+- **User-friendly dApps**: Great for developers wanting to improve the user experience, especially for users unfamiliar with blockchain or unwilling to deal with gas fees or manual signing.
+- **DeFi Projects**: Reduces friction for frequent transactions, such as trading or lending operations, where user experience is critical.
+- **Gaming dApps**: Gamers can focus on playing without worrying about blockchain complexities.
+
+## Conclusion
+The **EZ-Transactions package** empowers developers to create smoother and more accessible blockchain applications. By integrating gasless and signless transaction capabilities, developers can remove major pain points for their users and improve overall engagement.
+
+For detailed documentation about how to use, check the [GitHub page](https://github.com/gear-foundation/dapps/tree/master/frontend/packages/ez-transactions).

docs/api/tooling/react-hooks.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 3
 sidebar_label: React-hooks
 ---
 

docs/examples/Gaming/Battleship/battleship.md

@@ -15,7 +15,7 @@ Battleship is a popular game that operates **entirely on-chain**. The primary ga
 
 Another feature of this example is an option that allos anyone to interact with the dApp without needing to sign in (**signless transactions**). The dApp transaction operates as usual with one difference — a voucher is issued not directly to a user, but to a temporarily created account (sub-account) to which the user grants temporary rights to sign transactions on their behalf in this application.
 
-These features allow users to interact with the game for a certain period without the need to individually sign each transaction. By eliminating the repetitive signing process, this approach streamlines interactions and significantly improves the overall UX efficiency.
+These features allow users to interact with the game for a certain period without the need to individually sign each transaction. By eliminating the repetitive signing process, this approach streamlines interactions and significantly improves the overall UX efficiency. For more details about how to use Gasless and Signless features in your dApps, visit [**EZ-Transactions package**](/docs/api/tooling/gasless-txs.md) article.
 
 The source code is available on [GitHub](https://github.com/gear-foundation/dapps/tree/master/contracts/battleship ). This article describes the program interface, data structure, basic functions and explains their purpose. It can be used as is or modified to suit your own scenarios.
 

docs/examples/Gaming/Battleship/zk-battleship.md

@@ -11,6 +11,8 @@ sidebar_position: 2
 
 To address this issue and preserve the confidentiality of players' data, the new version of the game integrates **Zero-Knowledge Proofs (zk-SNARKs)**. With this technology, players' boards are stored locally, and no information about ship positions is transmitted to the network, ensuring both fairness and security in gameplay.
 
+The game example uses the [**EZ-Transactions package**](/docs/api/tooling/gasless-txs.md) that simplifies blockchain interactions by enabling gasless and signless transactions. Anyone can use it to integrate into their dApp projects. For more details, visit the [GitHub page](https://github.com/gear-foundation/dapps/tree/vt-update-ez-transactions/frontend/packages/ez-transactions).
+
 Everyone can play the game via this link - [Play ZK Battleship](https://zk-battleship.vara.network/) (VARA tokens are required for gas fees).
 
 ### What Are Zero-Knowledge Proofs?

docs/examples/Gaming/racingcars.md

@@ -15,6 +15,8 @@ However, in the case of Vara, the game operates **fully on-chain**, thanks to th
 
 For this version of the game, improvements were made to increase its appeal. The game features a competition where a player races against two pre-loaded programs on the blockchain. Participants have three cars: the player's car is green, while the competitors' cars are white. Both the player and the program algorithms can choose to either accelerate, moving the car forward, or shoot at the nearest car to slow it down. The objective is to cross the finish line first to win the race.
 
+The game example uses the [**EZ-Transactions package**](/docs/api/tooling/gasless-txs.md) that simplifies blockchain interactions by enabling gasless and signless transactions. Anyone can use it to integrate into their dApp projects. For more details, visit the [GitHub page](https://github.com/gear-foundation/dapps/tree/vt-update-ez-transactions/frontend/packages/ez-transactions).
+
 The source code for the game program and algorithm examples are available on [GitHub](https://github.com/gear-foundation/dapps/tree/master/contracts/car-races).
 The [frontend application](https://github.com/gear-foundation/dapps/tree/master/frontend/apps/racing-car-game) facilitates gameplay and interacts with the programs.
 This article describes the program interface, data structure, basic functions and explains their purpose. It can be used as is or modified to suit your own scenarios.

docs/examples/Gaming/tictactoe.md

@@ -11,6 +11,8 @@ A classic and simple game in which the user competes against a program operating
 
 Usually, the state of a program advances as the application is utilized. A <u>distinctive feature</u> of this game's program implementation is its capability to clean up its storage. In other words, as soon as the game session is completed and the results are recorded in the program, all unnecessary data structures are purged automatically through a special **delayed message**. [Delayed messages](/docs/build/gstd/delayed-messages) represent one of the various unique features of the Gear Protocol.
 
+The game example uses the [**EZ-Transactions package**](/docs/api/tooling/gasless-txs.md) that simplifies blockchain interactions by enabling gasless and signless transactions. Anyone can use it to integrate into their dApp projects. For more details, visit the [GitHub page](https://github.com/gear-foundation/dapps/tree/vt-update-ez-transactions/frontend/packages/ez-transactions).
+
 The source code is available on [GitHub](https://github.com/gear-foundation/dapps/tree/master/contracts/tic-tac-toe).
 The [frontend application](https://github.com/gear-foundation/dapps/tree/master/frontend/apps/tic-tac-toe) facilitates gameplay and interacts with the smart program.
 This article describes the program interface, data structure, basic functions and explains their purpose. It can be used as is or modified to suit your own scenarios.

docs/examples/Gaming/varaman.md

@@ -9,7 +9,9 @@ sidebar_position: 2
 
 Vara-man is a classic arcade game, the main character is Vara mouse, who must collect all the coins in the allotted time. In the labyrinth, the main character will encounter cat enemies that must be avoided in order to survive and collect all the coins.
 
-There is an option to include [vouchers](docs/api/vouchers.md) that allow users to play with a zero tokens on their balance (**gasless transactions**). This requires activation of the backend to issue vouchers (instructions for voucher integration will be detailed in the article).
+The game example uses the [**EZ-Transactions package**](/docs/api/tooling/gasless-txs.md) that simplifies blockchain interactions by enabling gasless and signless transactions. Anyone can use it to integrate into their dApp projects. For more details, visit the [GitHub page](https://github.com/gear-foundation/dapps/tree/vt-update-ez-transactions/frontend/packages/ez-transactions).
+
+It implies [vouchers](docs/api/vouchers.md) that allow users to play with a zero tokens on their balance (**gasless transactions**). This requires activation of the backend to issue vouchers (instructions for voucher integration will be detailed in the article).
 
 Another feature of this example is an option that allos anyone to interact with the dApp without needing to sign in (**signless transactions**). The dApp transaction operates as usual with one difference — a voucher is issued not directly to a user, but to a temporarily created account (sub-account) to which the user grants temporary rights to sign transactions on their behalf in this application.
 

package.json

@@ -20,6 +20,7 @@
     "@docusaurus/preset-classic": "3.4.0",
     "@docusaurus/theme-mermaid": "3.4.0",
     "@mdx-js/react": "3.0.1",
+    "@tanstack/virtual-core": "^3.10.6",
     "clsx": "2.1.1",
     "prism-react-renderer": "2.3.1",
     "react": "18.3.1",