docs!: optimizing frontend apps

[danielbate]

• Closes Add documentation for tx dependency optimisation technique #3495
• Part of Introduce the autoCost helper for transaction requests #3535
• Part of Wrap and implement submitAndAwaitStatus at provider level #3526

Release notes

In this release, we:

• Added documentation on optimizing frontend apps through transaction pre-loading

Summary

This PR primarily adds a dedicated page on optimizing transactions for apps and an advanced react example that utilises the techniques.

However some other decisions have been made in this PR, around the premise of transaction optimisation techniques:

Provider.sendTransactionAndAwaitStatus() and the contents of #3526 has been reverted. Rather than adding unnecessary bloat, we will just recommend Provider.sendTransaction() and Provider.waitForResult(). For accounts wanting to side-step any account level abstractions to sendTransaction(), they should fund and sign a request prior, and then use the provider to send the transaction, rather than the account. This technique is used in the added docs.

ScriptTransactionRequest.autoCost() has been renamed to ScriptTransactionRequest.estimateAndFund() as this seemed more appropriate. and BaseInvocationScope.autoCost() has been renamed back to BaseInvocationScope.fundWithRequiredCoins() as it is a relatively hidden method and to minimise breaking changes on the release. This was initially introduced in #3535.

Breaking Changes

• ScriptTransactionRequest.autoCost() has been renamed to ScriptTransactionRequest.estimateAndFund(), initially introduced by Introduce the autoCost helper for transaction requests #3535

// before
await request.autoCost(wallet);

// after
await request.estimateAndFund(wallet);

• BaseInvocationScope.autoCost() has been renamed back to BaseInvocationScope.fundWithRequiredCoins(), initially introduced by Introduce the autoCost helper for transaction requests #3535

// before
const request = await contract.functions.increment().autoCost();

// after
const request = await contract.functions.increment().fundWithRequiredCoins();

Checklist

• All changes are covered by tests (or not applicable)
• All changes are documented (or not applicable)
• I reviewed the entire PR myself (preferably, on GH UI)
• I described all Breaking Changes (or there's none)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fuels-template	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 10, 2025 4:04pm
ts-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 10, 2025 4:04pm
ts-docs-api	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 10, 2025 4:04pm

[github-actions]

Coverage Report:

Lines	Branches	Functions	Statements
77.02%(-0.01%)	70.61%(-0.01%)	75.13%(-0.01%)	77.03%(-0.01%)

Changed Files:

Ok	File (✨=New File)	Lines	Branches	Functions	Statements
🔴	packages/account/src/providers/provider.ts	68.55% (-0.21%)	58.37% (-0.21%)	69.89% (-0.32%)	68.28% (-0.21%)