Added an optional waitForTransactionOptions parameter to the useTransact hook and waitForTransationResponse parameter to its onSuccess handler. Updated docs accordingly. Updated some dependencies. Incremented project version.

Author: kkomelin

apps/docs/package.json

@@ -13,13 +13,13 @@
     "deploy:firebase": "firebase deploy --only hosting"
   },
   "dependencies": {
-    "@mysten/dapp-kit": "^0.14.47",
-    "@mysten/sui": "^1.20.0",
+    "@mysten/dapp-kit": "^0.14.48",
+    "@mysten/sui": "^1.21.0",
     "@mysten/suins": "^0.4.2",
-    "@mysten/wallet-standard": "^0.13.23",
-    "@radix-ui/react-select": "^2.1.4",
+    "@mysten/wallet-standard": "^0.13.24",
+    "@radix-ui/react-select": "^2.1.5",
     "@radix-ui/react-toggle": "^1.1.1",
-    "@radix-ui/themes": "^3.1.6",
+    "@radix-ui/themes": "^3.2.0",
     "@suiware/kit": "workspace:*",
     "@tanstack/react-query": "^5.64.2",
     "bignumber.js": "^9.1.2",
@@ -31,24 +31,24 @@
     "react-use": "^17.6.0"
   },
   "devDependencies": {
-    "@types/node": "^22.10.7",
-    "@types/react": "^19.0.7",
+    "@types/node": "^22.10.10",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
-    "@typescript-eslint/eslint-plugin": "^8.20.0",
-    "@typescript-eslint/parser": "^8.20.0",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "autoprefixer": "^10.4.20",
     "env-file-rw": "^1.0.0",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.18",
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.10",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.3",
-    "vite": "^6.0.9",
+    "vite": "^6.0.11",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

package.json

@@ -13,9 +13,9 @@
     "docs:deploy": "pnpm  --filter=docs deploy:firebase"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.11",
+    "@changesets/cli": "^2.27.12",
     "prettier": "^3.4.2",
-    "turbo": "^2.3.3"
+    "turbo": "^2.3.4"
   },
   "packageManager": "pnpm@9.15.0",
   "name": "suiware-kit-monorepo"

packages/eslint-config/package.json

@@ -9,7 +9,7 @@
   ],
   "devDependencies": {
     "@vercel/style-guide": "^6.0.0",
-    "eslint-config-turbo": "^2.3.3",
+    "eslint-config-turbo": "^2.3.4",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-storybook": "^0.8.0"

packages/kit/docs/useTransact.md

@@ -17,7 +17,10 @@ function MyComponent() {
   const { transact } = useTransact({
     onBeforeStart: () => console.log('Transaction starting...'),
     onSuccess: (data) => console.log('Transaction succeeded:', data),
-    onError: (e) => console.error('Transaction failed:', e)
+    onError: (e) => console.error('Transaction failed:', e),
+    waitForTransactionOptions: {
+      showEffects: true,
+    },
   })
 
   const handleTransaction = () => {
@@ -41,8 +44,9 @@ The hook accepts an options object with the following properties:
 | Parameter | Type | Description |
 | --- | --- | --- |
 | onBeforeStart | () => void | (Optional) Callback executed when user triggers a transaction |
-| onSuccess | (data: SuiSignAndExecuteTransactionOutput) => void | (Optional) Callback executed after successful transaction completion |
+| onSuccess | (data: SuiSignAndExecuteTransactionOutput, waitForTransactionResponse: SuiTransactionBlockResponse) => void | (Optional) Callback executed when transaction succeeds |
 | onError | (e: Error) => void | (Optional) Callback executed if transaction fails |
+| waitForTransactionOptions | SuiTransactionBlockResponseOptions | (Optional) Options for waitForTransaction call |
 
 ## Return Value
 

packages/kit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suiware/kit",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "sideEffects": false,
   "license": "MIT",
   "type": "commonjs",
@@ -131,30 +131,30 @@
     "styles": "tailwindcss -c ./tailwind.config.mjs -i ./src/styles/main.css -o ./dist/main.css --minify"
   },
   "devDependencies": {
-    "@mysten/dapp-kit": "^0.14.47",
-    "@mysten/sui": "^1.20.0",
+    "@mysten/dapp-kit": "^0.14.48",
+    "@mysten/sui": "^1.21.0",
     "@mysten/suins": "^0.4.2",
-    "@mysten/wallet-standard": "^0.13.23",
+    "@mysten/wallet-standard": "^0.13.24",
     "@radix-ui/colors": "^3.0.0",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@tanstack/react-query": "^5.64.2",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/node": "^22.10.7",
-    "@types/react": "^19.0.7",
+    "@types/node": "^22.10.10",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.10",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "react": "^19.0.0",
     "tailwindcss": "^3.4.17",
-    "tsup": "^8.3.5",
+    "tsup": "^8.3.6",
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "@radix-ui/themes": "^3.1.6",
+    "@radix-ui/themes": "^3.2.0",
     "bignumber.js": "^9.1.2",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.469.0"

packages/kit/src/hooks/useTransact.tsx

@@ -1,24 +1,31 @@
 import { useSignAndExecuteTransaction, useSuiClient } from '@mysten/dapp-kit'
+import { SuiTransactionBlockResponse, SuiTransactionBlockResponseOptions } from '@mysten/sui/client'
 import { Transaction } from '@mysten/sui/transactions'
 import type { SuiSignAndExecuteTransactionOutput } from '@mysten/wallet-standard'
 
 export interface IUseTransactParams {
-   /**
+  /**
    * (Optional) Is executed when user triggers a transaction.
    */
   onBeforeStart?: () => void
   /**
    * (Optional) React on success, e.g. refetch dependent queries.
    *
    * @param {SuiSignAndExecuteTransactionOutput} data The transaction output.
+   * @param {SuiTransactionBlockResponse} waitForTransactionResponse The transaction response.
    */
-  onSuccess?: (data: SuiSignAndExecuteTransactionOutput) => void
+  onSuccess?: (data: SuiSignAndExecuteTransactionOutput, waitForTransactionResponse: SuiTransactionBlockResponse) => void
   /**
    * (Optional) React on error.
    *
    * @param {Error} e The error.
    */
   onError?: (e: Error) => void
+
+  /**
+   * (Optional) Options for waitForTransaction call.
+   */
+  waitForTransactionOptions?: SuiTransactionBlockResponseOptions
 }
 
 export interface IUseTransactResponse {
@@ -33,18 +40,13 @@ export interface IUseTransactResponse {
 /**
  * The useTransact() hook lets you perform a transaction on the Sui network.
  *
- * When user triggers a transaction, we display a notification to confirm that transaction in their wallet.
- * Once user confirmed or rejected the transaction, we convert that notification to a success message or error message.
- * The success message will have a link to a Sui Explorer depending on the active network.
- * In case of error, we additionally print full error message in the browser console.
- *
  * Usage:
  * ```ts
  * import type { SuiSignAndExecuteTransactionOutput } from '@mysten/wallet-standard'
  * import { Transaction } from '@mysten/sui/transactions'
  * const { transact: greet } = useTransact({
  *   onBeforeStart: () => {},
- *   onSuccess: (data: SuiSignAndExecuteTransactionOutput) => {},
+ *   onSuccess: (data: SuiSignAndExecuteTransactionOutput, waitForTransactionResponse: SuiTransactionBlockResponse) => {},
  *   onError: (e: Error) => {}
  * })
  *
@@ -67,6 +69,7 @@ const useTransact = ({
   onBeforeStart,
   onSuccess,
   onError,
+  waitForTransactionOptions,
 }: IUseTransactParams = {}): IUseTransactResponse => {
   const client = useSuiClient()
   const { mutate: signAndExecute } = useSignAndExecuteTransaction()
@@ -90,10 +93,11 @@ const useTransact = ({
           client
             .waitForTransaction({
               digest: data.digest,
+              options: waitForTransactionOptions,
             })
-            .then(() => {
+            .then((response: SuiTransactionBlockResponse) => {
               if (onSuccess != null) {
-                onSuccess(data)
+                onSuccess(data, response)
               }
             })
             .catch((e) => {