chore: update the js v5 page

content/sdk/10.js/00.ethers/10.v5/00.getting-started.md

@@ -12,3 +12,126 @@ ensuring smoother and more efficient workflows.
 This version is now obsolete. For continued support and access to the latest features and improvements, please migrate to
 [version 6](/sdk/js/ethers/v6/getting-started) for better performance and new features.
 ::
+
+However, ZKsync still supports Ethers v5, and this is how to get started:
+
+## Installation
+
+Install the `zksync-ethers` library:
+
+```bash
+npm install zksync-ethers ethers
+```
+
+## Initialization
+
+To initialize the provider to connect to the %%zk_testnet_name%%:
+
+```typescript
+import { Provider, types } from "zksync-ethers";
+
+const provider = Provider.getDefaultProvider(types.Network.Sepolia);
+```
+
+## Network information
+
+To fetch details about the connected network and the current block number:
+
+```typescript
+(async () => {
+  const network = await provider.getNetwork();
+  const blockNumber = await provider.getBlockNumber();
+  console.log(`Network: ${JSON.stringify(network)}`);
+  console.log(`Block number: ${blockNumber}`);
+})();
+```
+
+## Transaction details
+
+To fetch transaction details:
+
+```typescript
+(async () => {
+  const transactionHash = "0xaa065e5a57e1f8470a6f258e2b6eee87c547eab066b8620ce7f3fd51405665e1";
+  const result = await provider.getTransactionDetails(transactionHash);
+  console.log(`Transaction Details: ${JSON.stringify(result)}`);
+})();
+```
+
+## Error handling
+
+Wrap the main logic in a try-catch block to handle potential errors:
+
+```typescript
+(async () => {
+  try {
+    // Your code here
+  } catch (error) {
+    console.error(`Error fetching transaction details from ZKsync: ${error}`);
+  }
+})();
+```
+
+## Example code
+
+Here is an example script demonstrating the usage of the SDK:
+
+```typescript
+import { Provider, types } from "zksync-ethers";
+
+async function main() {
+  const provider = Provider.getDefaultProvider(types.Network.Sepolia);
+
+  const network = await provider.getNetwork();
+  const blockNumber = await provider.getBlockNumber();
+  console.log(`Network: ${JSON.stringify(network)}`);
+  console.log(`Block number: ${blockNumber}`);
+
+  const transactionHash = "0xaa065e5a57e1f8470a6f258e2b6eee87c547eab066b8620ce7f3fd51405665e1";
+
+  try {
+    const result = await provider.getTransactionDetails(transactionHash);
+    if (result) {
+      console.log(`Transaction Details from ZKsync: ${JSON.stringify(result)}`);
+      console.log(`ethCommitTxHash: ${result.ethCommitTxHash}`);
+      console.log(`ethExecuteTxHash: ${result.ethExecuteTxHash}`);
+      console.log(`ethProveTxHash: ${result.ethProveTxHash}`);
+    } else {
+      console.log(`Transaction with hash ${transactionHash} not found in ZKsync.`);
+    }
+  } catch (error) {
+    console.error(`Error fetching transaction details from ZKsync: ${error}`);
+  }
+}
+
+main()
+  .then(() => console.log("Script executed successfully"))
+  .catch((error) => console.error(`Error executing script: ${error}`));
+```
+
+## Run the script
+
+Use the following command to run the script:
+
+```bash
+npx ts-node <file-name>
+```
+
+## Output
+
+Example output when the script runs successfully:
+
+```sh
+Network: {"name":"unknown","chainId":"300"}
+Block number: 2725282
+Transaction Details from ZKsync: {"ethCommitTxHash":"0xfe921b3af6bf14d35d6c550f1a337f20a46997a36c24bae37c1b2d129ee3b4d6","ethExecuteTxHash":"0x08e42763d6ba1052d117174acbb708d9e015ae9246574cf9d9b06c001b31e750","ethProveTxHash":"0x49ab3b1a7cc72911492afe39f21d5f557abcb2769aa63841f658c719a7ec5ba2","fee":"0x1252b3c112d2e","gasPerPubdata":"0xc350","initiatorAddress":"0xb71ce978bf48e3e4669a7a0acb89850023fc3279","isL1Originated":false,"receivedAt":"2024-06-03T09:16:41.519Z","status":"verified"}
+ethCommitTxHash: 0xfe921b3af6bf14d35d6c550f1a337f20a46997a36c24bae37c1b2d129ee3b4d6
+ethExecuteTxHash: 0x08e42763d6ba1052d117174acbb708d9e015ae9246574cf9d9b06c001b31e750
+ethProveTxHash: 0x49ab3b1a7cc72911492afe39f21d5f557abcb2769aa63841f658c719a7ec5ba2
+Script executed successfully
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+If you encounter any error while using the zksync-ethers v5, kindly visit the
+[Troubleshooting Guide](/sdk/troubleshooting#javascript-sdk) for more information.
+::

content/sdk/10.js/00.ethers/10.v5/01.features.md

@@ -1,99 +1,110 @@
 ---
-title: ZKsync Era Features
-description:
+
+title: ZKsync Era Features  
+description: Explore ZKsync Era features and custom transactions
+tags: ["zksync", "ethereum", "zksync Era", "transactions", "paymasters"]
+
 ---
 
-While ZKsync is mostly Web3-compatible, it has some differences compared to Ethereum. The major of those are:
+ZKsync Era, while mostly Web3-compatible, has key differences compared to Ethereum:
 
-- Account abstraction support (accounts may have near-arbitrary validation logic, and also paymaster
-  support is enabled).
-- Deployment transactions require the contracts' bytecode to be passed in a separate field.
-- The fee system is somewhat different.
+- **Account Abstraction Support**: Allows near-arbitrary validation logic and enables paymaster support.
+- **Deployment Transactions**: Contracts' bytecode must be passed in a separate field.
+- **Fee System**: Requires additional fields in transactions.
 
-These require us to extend standard Ethereum transactions with new custom fields. Such extended transactions
-are called EIP712 transactions since [EIP712](https://eips.ethereum.org/EIPS/eip-712) is used to sign them.
-You can look at the internal structure of the EIP712 transactions [here](https://docs.zksync.io/zk-stack/concepts/transaction-lifecycle.html#eip-712-0x71).
+These differences necessitate extending standard Ethereum transactions with new custom fields, known as EIP712
+transactions. Refer to the ZKsync documentation on Transaction Lifecycle for details on [EIP712 transactions](https://docs.zksync.io/zk-stack/concepts/transaction-lifecycle#eip-712-0x71).
 
-This document will focus solely on how to pass these arguments to the SDK.
+::callout{icon="i-heroicons-light-bulb"}
+This guide focuses on passing these arguments to the SDK.
+::
 
 ## Overrides
 
-`ethers.js` has a notion of overrides. For any on-chain transaction, `ethers.js` finds the optimal
-`gasPrice`, `gasLimit`, `nonce`, and other important fields under the hood. But sometimes, you may
-have a need to explicitly provide these values (you want to set a smaller `gasPrice` for instance,
-or sign a transaction with future `nonce`).
+`ethers.js` has a notion of overrides. For any on-chain transaction, `ethers.js` finds the optimal `gasPrice`,
+`gasLimit`, `nonce`, and other important fields under the hood. But sometimes, you may have a need to explicitly
+provide these values (e.g., setting a smaller `gasPrice` or signing a transaction with a future `nonce`).
 
-In this case, you can provide an `Overrides` object as the last parameter.
-There you can supply fields like `gasPrice`, `gasLimit`, `nonce` etc.
+In such cases, you can provide an `Overrides` object as the last parameter. There, you can supply fields like
+`gasPrice`, `gasLimit`, `nonce`, etc.
 
-In order to make the SDK as flexible as possible, `zksync-ethers` uses `customData` object in the
-overrides to supply ZKsync-specific fields. To supply ZKsync-specific fields, you
-need to pass the following override:
+To make the SDK as flexible as possible, `zksync-ethers` uses the `customData` object in the overrides to supply
+ZKsync-specific fields. To supply ZKsync-specific fields, you need to pass the following override:
 
 ```typescript
 {
-    overrides: {
-        customData: {
-            gasPerPubdata?: BigNumberish;
-            factoryDeps?: BytesLike[];
-            customSignature?: BytesLike;
-            paymasterParams?: {
-                paymaster: Address;
-                paymasterInput: BytesLike;
-            };
-        }
+  overrides: {
+    customData: {
+      gasPerPubdata?: BigNumberish;
+      factoryDeps?: BytesLike[];
+      customSignature?: BytesLike;
+      paymasterParams?: {
+        paymaster: Address;
+        paymasterInput: BytesLike;
+      };
     }
+  }
 }
 ```
 
-Please note once again: everything that is inside `customData` in `overrides` is related to ZKsync(L2 gas, etc.).
+::callout{icon="i-heroicons-light-bulb"}
+Everything that is inside `customData` in `overrides` is related to ZKsync (L2 gas, etc.).
+::
+
+### CustomData fields
 
-Examples:
+- `gasPerPubdata`: Specifies L2 gas per published byte.
+- `factoryDeps`: Array of contract bytecodes for deployment.
+- `customSignature`: Custom signature for the transaction.
+- `paymasterParams`: Parameters for using a paymaster.
 
-Override to deploy a contract with bytecode `0xcde...12` and enforce that the operator will not charge more than
-`100` L2 gas per published bytes on Layer 1:
+## Example overrides
+
+### Contract deployment
+
+Override to deploy a contract with bytecode `0xcde...12` and enforce that the operator will not charge more than `100`
+L2 gas per published bytes on Layer 1:
 
 ```typescript
 {
-    customData: {
-        gasPerPubdata: "100",
-        factoryDeps: ["0xcde...12"],
-    }
+  customData: {
+    gasPerPubdata: "100",
+    factoryDeps: ["0xcde...12"],
+  }
 }
 ```
 
-Use custom signature `0x123456` for account, while using paymaster with address
-`0x8e1DC7E4Bb15927E76a854a92Bf8053761501fdC` and paymaster input `0x8c5a3445`:
+### Custom signature and paymaster
+
+Use custom signature `0x123456` for the account, while using paymaster with
+address `0x8e1DC7E4Bb15927E76a854a92Bf8053761501fdC` and paymaster input `0x8c5a3445`:
 
 ```typescript
 {
-    customData: {
-        customSignature: "0x123456",
-        paymasterParams: {
-            paymaster: "0x8e1DC7E4Bb15927E76a854a92Bf8053761501fdC",
-            paymasterInput: "0x8c5a3445"
-        }
+  customData: {
+    customSignature: "0x123456",
+    paymasterParams: {
+      paymaster: "0x8e1DC7E4Bb15927E76a854a92Bf8053761501fdC",
+      paymasterInput: "0x8c5a3445"
     }
+  }
 }
 ```
 
 ## Encoding paymaster params
 
-While the paymaster feature by itself does not impose any limitations on values of the
-`paymasterInput`, the Matter Labs team endorses certain types of
-[paymaster flows](https://docs.zksync.io/build/developer-reference/account-abstraction.html#built-in-paymaster-flows)
+While the paymaster feature itself does not impose any limitations on values of the `paymasterInput`, the Matter Labs
+team endorses certain types of [paymaster flows](https://docs.zksync.io/build/developer-reference/account-abstraction.html#built-in-paymaster-flows)
 that are processable by EOAs.
 
-ZKsync SDK provides a utility method that can be used to get the correctly formed `paymasterParams` object:
-[getPaymasterParams](/sdk/js/ethers/v5/paymaster-utils#getpaymasterparams).
+The ZKsync SDK provides a utility method that can be used to get the correctly formed `paymasterParams` object: [getPaymasterParams](/sdk/js/ethers/v5/paymaster-utils#getpaymasterparams).
 
-## See in action
+## Using a paymaster with a contract method
 
-If you want to call the method `setGreeting` of an ethers `Contract` object called `greeter`,
-this would look the following way, while paying fees with the
-[testnet paymaster](https://docs.zksync.io/build/developer-reference/account-abstraction.html#testnet-paymaster):
+If you want to call the `setGreeting` method of an ethers `Contract` object called `greeter`, this would look the
+following way, while paying fees with the [testnet paymaster](https://docs.zksync.io/build/developer-reference/account-abstraction.html#testnet-paymaster):
 
-```ts
+```typescript
 // The `setGreeting` method has a single parameter -- new greeting
 // We will set its value as `a new greeting`.
 const greeting = "a new greeting";

content/sdk/10.js/00.ethers/10.v5/02.front-end.md

@@ -1,16 +1,17 @@
 ---
-title: Front-end Integration
-description:
+title: Frontend Integration
+description: How to integrate ZKsync Era for optimal user experience
+tags: ["zksync", "ethereum", "zksync era", "transactions", "frontend"]
 ---
 
-This section describes how to make the most of ZKsync to provide the best UX.
+Learn how to integrate ZKsync Era into your front-end for the best user experience.
 
-## Going to production right away
+## Immediate production deployment
 
-If your front-end code does not deploy new smart contracts, then no changes to the codebase are required!
-All the existing SDKs/infrastructure will work out-of-box.
+If your front-end does not deploy new smart contracts, you don't need to change your codebase! All existing SDKs and
+infrastructure will work seamlessly.
 
-## Enabling ZKsync features
+## Using ZKsync Era features
 
-If you want to deploy smart contracts or enable advanced ZKsync features, like account abstraction,
-then you need to use the `zksync-ethers` library. You can read about the basics [here](/sdk/js/ethers/v5/features).
+To deploy smart contracts or use advanced zksync features like account abstraction, you'll need the `zksync-ethers`
+library. Learn the basics of `zksync-ethers` in the [ZKsync Era Features](/sdk/js/ethers/v6/features).