feat: improves write hooks examples

Author: cesarenaldi

packages/react/src/transactions.ts

@@ -22,7 +22,41 @@ import { type UseAsyncTask, useAsyncTask } from './helpers';
  * A hook that provides a way to supply assets to an Aave market.
  *
  * ```ts
- * const [supply, { loading, error, data }] = useSupply();
+ * const [supply, supplying] = useSupply();
+ * const [sendTransaction, sending] = useSendTransaction(wallet);
+ *
+ * const loading = supplying.loading && sending.loading;
+ * const error = supplying.error || sending.error;
+ * const data = supplying.data || sending.data;
+ *
+ * // …
+ *
+ * const result = await supply({ ... })
+ *   .andThen((plan) => {
+ *     switch (plan.__typename) {
+ *       case 'TransactionRequest':
+ *         return sendTransaction(plan);
+ *
+ *       case 'ApprovalRequired':
+ *         return sendTransaction(plan.approval)
+ *           .andThen(() => sendTransaction(plan.originalTransaction));
+ *     }
+ *   });
+ *
+ * if (result.isErr()) {
+ *   switch (error.name) {
+ *     case 'SigningError':
+ *       console.error(`Failed to sign the transaction: ${error.message}`);
+ *       break;
+ *
+ *     case 'ValidationError':
+ *       console.error(`Insufficient balance: ${error.cause.required.value} required.`);
+ *       break;
+ *   }
+ *   return;
+ * }
+ *
+ * console.log('Transaction sent with hash:', result.value);
  * ```
  */
 export function useSupply(): UseAsyncTask<
@@ -39,7 +73,41 @@ export function useSupply(): UseAsyncTask<
  * A hook that provides a way to borrow assets from an Aave market.
  *
  * ```ts
- * const [borrow, { loading, error, data }] = useBorrow();
+ * const [borrow, borrowing] = useBorrow();
+ * const [sendTransaction, sending] = useSendTransaction(wallet);
+ *
+ * const loading = borrowing.loading && sending.loading;
+ * const error = borrowing.error || sending.error;
+ * const data = borrowing.data || sending.data;
+ *
+ * // …
+ *
+ * const result = await borrow({ ... })
+ *   .andThen((plan) => {
+ *     switch (plan.__typename) {
+ *       case 'TransactionRequest':
+ *         return sendTransaction(plan);
+ *
+ *       case 'ApprovalRequired':
+ *         return sendTransaction(plan.approval)
+ *           .andThen(() => sendTransaction(plan.originalTransaction));
+ *     }
+ *   });
+ *
+ * if (result.isErr()) {
+ *   switch (error.name) {
+ *     case 'SigningError':
+ *       console.error(`Failed to sign the transaction: ${error.message}`);
+ *       break;
+ *
+ *     case 'ValidationError':
+ *       console.error(`Insufficient balance: ${error.cause.required.value} required.`);
+ *       break;
+ *   }
+ *   return;
+ * }
+ *
+ * console.log('Transaction sent with hash:', result.value);
  * ```
  */
 export function useBorrow(): UseAsyncTask<
@@ -56,7 +124,41 @@ export function useBorrow(): UseAsyncTask<
  * A hook that provides a way to repay borrowed assets to an Aave market.
  *
  * ```ts
- * const [repay, { loading, error, data }] = useRepay();
+ * const [repay, repaying] = useRepay();
+ * const [sendTransaction, sending] = useSendTransaction(wallet);
+ *
+ * const loading = repaying.loading && sending.loading;
+ * const error = repaying.error || sending.error;
+ * const data = repaying.data || sending.data;
+ *
+ * // …
+ *
+ * const result = await repay({ ... })
+ *   .andThen((plan) => {
+ *     switch (plan.__typename) {
+ *       case 'TransactionRequest':
+ *         return sendTransaction(plan);
+ *
+ *       case 'ApprovalRequired':
+ *         return sendTransaction(plan.approval)
+ *           .andThen(() => sendTransaction(plan.originalTransaction));
+ *     }
+ *   });
+ *
+ * if (result.isErr()) {
+ *   switch (error.name) {
+ *     case 'SigningError':
+ *       console.error(`Failed to sign the transaction: ${error.message}`);
+ *       break;
+ *
+ *     case 'ValidationError':
+ *       console.error(`Insufficient balance: ${error.cause.required.value} required.`);
+ *       break;
+ *   }
+ *   return;
+ * }
+ *
+ * console.log('Transaction sent with hash:', result.value);
  * ```
  */
 export function useRepay(): UseAsyncTask<
@@ -73,7 +175,41 @@ export function useRepay(): UseAsyncTask<
  * A hook that provides a way to withdraw supplied assets from an Aave market.
  *
  * ```ts
- * const [withdraw, { loading, error, data }] = useWithdraw();
+ * const [withdraw, withdrawing] = useWithdraw();
+ * const [sendTransaction, sending] = useSendTransaction(wallet);
+ *
+ * const loading = withdrawing.loading && sending.loading;
+ * const error = withdrawing.error || sending.error;
+ * const data = withdrawing.data || sending.data;
+ *
+ * // …
+ *
+ * const result = await withdraw({ ... })
+ *   .andThen((plan) => {
+ *     switch (plan.__typename) {
+ *       case 'TransactionRequest':
+ *         return sendTransaction(plan);
+ *
+ *       case 'ApprovalRequired':
+ *         return sendTransaction(plan.approval)
+ *           .andThen(() => sendTransaction(plan.originalTransaction));
+ *     }
+ *   });
+ *
+ * if (result.isErr()) {
+ *   switch (error.name) {
+ *     case 'SigningError':
+ *       console.error(`Failed to sign the transaction: ${error.message}`);
+ *       break;
+ *
+ *     case 'ValidationError':
+ *       console.error(`Insufficient balance: ${error.cause.required.value} required.`);
+ *       break;
+ *   }
+ *   return;
+ * }
+ *
+ * console.log('Transaction sent with hash:', result.value);
  * ```
  */
 export function useWithdraw(): UseAsyncTask<
@@ -90,7 +226,24 @@ export function useWithdraw(): UseAsyncTask<
  * A hook that provides a way to toggle eMode for a user in an Aave market.
  *
  * ```ts
- * const [toggleEMode, { loading, error, data }] = useEModeToggle();
+ * const [toggleEMode, toggling] = useEModeToggle();
+ * const [sendTransaction, sending] = useSendTransaction(wallet);
+ *
+ * const loading = toggling.loading && sending.loading;
+ * const error = toggling.error || sending.error;
+ * const data = toggling.data || sending.data;
+ *
+ * // …
+ *
+ * const result = await toggleEMode({ ... })
+ *   .andThen(sendTransaction);
+ *
+ * if (result.isErr()) {
+ *   console.error(`Failed to sign the transaction: ${error.message}`);
+ *   return;
+ * }
+ *
+ * console.log('Transaction sent with hash:', result.value);
  * ```
  */
 export function useEModeToggle(): UseAsyncTask<