chore: update fuels-ts to 0.57.0

docs/guides/docs/quickstart/building-a-frontend.mdx

@@ -24,6 +24,8 @@ Fuel Wallet version `0.11.0` is not compatible with beta 4. For compatibility wi
 
 We have already submitted the beta-4 compatible version to the Chrome Web Store, and it is currently under review.
 
+> Note: Make sure your browser is using the latest version of chromium.
+
 Please follow the instructions provided below:
 
 > **Note**: This is a temporary measure while the Fuel Wallet version `0.12.3` gets published in the Chrome WebStore.
@@ -49,13 +51,13 @@ To split our project's contract from frontend code, let's initialize our fronten
 cd ..
 ```
 
-Now, iniitialize a react project using [`Create React App`](https://create-react-app.dev/).
+Now, initialize a react project using [`Create React App`](https://create-react-app.dev/).
 
 ```console
 npx create-react-app frontend --template typescript
 ```
 
-The output should be simmilar to:
+The output should be similar to:
 
 ```console
 Success! Created frontend at Fuel/fuel-project/frontend
@@ -83,13 +85,13 @@ Move into the `frontend` folder, then run:
 cd frontend
 ```
 
-Then:
+Install `fuels` and `@fuel-wallet/sdk`.
 
 ```console
-npm install fuels@0.55.0 @fuel-wallet/sdk@0.12.3 --save
+npm install fuels@0.57.0 @fuel-wallet/sdk@0.12.3 --save
 ```
 
-If the installation wnet correctly the result will be simmilar to this:
+If the installation went correctly the result will be similar to this:
 
 ```console
 added 114 packages, and audited 115 packages in 9s
@@ -117,7 +119,7 @@ Inside the `fuel-project/frontend` directory run:
 npx fuels typegen -i ../counter-contract/out/debug/*-abi.json -o ./src/contracts
 ```
 
-A succesful process should print and output like the following:
+A successful process should print and output like the following:
 
 ```console
 Generating files..
@@ -143,7 +145,7 @@ File: `./frontend/src/App.tsx`
   lang="tsx"
 />
 
-Finally, replace the value of the `CONTRACT_ID` variable in `App.tsx` with the address of the contract you just deployed.
+Finally, replace the value of the `CONTRACT_ID` variable at the top of your `App.tsx` file with the address of the contract you just deployed.
 
 ### Run your project
 

docs/guides/docs/quickstart/building-a-smart-contract.mdx

@@ -185,7 +185,7 @@ cd counter-contract
 ```
 
 ```console
-changed directory into `counter-countract`
+changed directory into `counter-contract`
 ```
 
 Then run the following command to build your contract:
@@ -375,7 +375,9 @@ Just below the list, you'll see this prompt:
 
 Then you'll enter the number of the account of preference and press `Y` when prompted to accept the transaction.
 
-Finally, you will get back the network endpoint where the contract was dpeloyed, a `ContractId` and the block where the transaction was signed. To confirm your contract was deployed. With this ID, you can head to the [block explorer](https://fuellabs.github.io/block-explorer-v2/) and view your contract.
+Finally, you will get back the network endpoint where the contract was deployed, a `Contract ID` and the block where the transaction was signed. 
+Save the `Contract ID`, as you'll need this later to connect the frontend.
+With this ID, you can also head to the [block explorer](https://fuellabs.github.io/block-explorer-v2/) to confirm the contract was deployed.
 
 ```console
 Contract deploy-to-beta-4 Deployed!

docs/guides/docs/testnet-migration/beta-3-to-beta-4-migration.mdx

@@ -12,7 +12,7 @@ This guide focuses on the transition from the end of tool support for `beta 3` t
 
 - [Fuelup v0.19.5](https://github.com/FuelLabs/fuelup/releases/tag/v0.19.5)
 - [Sway v0.45.0](https://github.com/FuelLabs/sway/releases/tag/v0.45.0)
-- [TS SDK v0.55.0](https://github.com/FuelLabs/fuels-ts/releases/tag/v0.55.0)
+- [TS SDK v0.57.0](https://github.com/FuelLabs/fuels-ts/releases/tag/v0.57.0)
 - [Rust SDK v0.47.0](https://github.com/FuelLabs/fuels-rs/releases/tag/v0.47.0)
 - [Wallet SDK v0.12.3](https://github.com/FuelLabs/fuels-wallet/releases/tag/v0.12.3)
 
@@ -174,6 +174,39 @@ let { value } = await contract.functions.get_count().get();
 let { value } = await contract.functions.get_count().simulate();
 ```
 
+The `addResourceInputsAndOutputs` function has been renamed to `addResources`, streamlining its name.
+
+```typescript
+// BEFORE - BETA 3
+request.addResourceInputsAndOutputs(resources);
+
+// AFTER - BETA 4
+request.addResources(resources);
+```
+
+Similarly, `addPredicateResourcesInputsAndOutputs` is now more concisely known as `addPredicateResources`.
+The reason we have a distinct method for adding predicate resources is that the creation of predicate inputs mandates the presence of both the predicate’s bytes and data bytes. 
+With these methods, there’s no longer a need to manually create and set up an instance of a `ScriptTransactionRequest`, simplifying the process further.
+
+```typescript
+// BEFORE - BETA 3
+const predicateInputs: TransactionRequestInput[] = predicateUtxos.map((utxo) => ({
+  id: utxo.id,
+  type: InputType.Coin,
+  amount: utxo.amount,
+  assetId: utxo.assetId,
+  owner: utxo.owner.toB256(),
+  txPointer: '0x00000000000000000000000000000000',
+  witnessIndex: 0,
+  maturity: 0,
+  predicate: predicate.bytes,
+  predicateData: predicate.predicateData,
+}));
+
+// AFTER - BETA 4
+request.addPredicateResources(predicateUtxos, predicate.bytes, predicate.predicateData)
+```
+
 ## Rust SDK
 
 When providing contract IDs or addresses to contract functions, `.into()` is not longer needed: