Sui dApp Starter

https://sui-dapp-starter.dev/docs/
Admin
Sui dApp Starter is a full-stack boilerplate that helps scaffold a solid foundation for Sui...
Tokens:10,835
Snippets:105
Trust Score:5.6
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install Project Dependencies

Source: https://sui-dapp-starter.dev/docs/index

Install all necessary project dependencies using pnpm. This command should be run after scaffolding a new project.

```bash
pnpm install
```

--------------------------------

### Run the Sui dApp

Source: https://sui-dapp-starter.dev/docs/index

Start the Sui dApp application using the pnpm start command. All available starter console commands can be found in the package.json file.

```bash
pnpm start
```

--------------------------------

### Run Local Sui Network

Source: https://sui-dapp-starter.dev/docs/index

Start a local Sui network using the pnpm localnet:start command. The local Sui Explorer will be accessible at localhost:9001.

```bash
pnpm localnet:start
```

--------------------------------

### Deploy Demo Package to Local Network

Source: https://sui-dapp-starter.dev/docs/index

Deploy the demo package to your local Sui network using the pnpm localnet:deploy command. This prepares the network for testing.

```bash
pnpm localnet:deploy
```

--------------------------------

### Scaffold a New Sui dApp with CLI

Source: https://sui-dapp-starter.dev/docs/index

Use the pnpm create sui-dapp command to scaffold a new Sui dApp project. This command allows you to choose a template and configure your project step-by-step.

```bash
pnpm create sui-dapp@latest
```

--------------------------------

### Start Sui Network (CLI)

Source: https://sui-dapp-starter.dev/docs/frontend/deployment/walrus

Commands to start the local testnet or mainnet for Sui. These are essential for interacting with the Sui blockchain.

```bash
testnet start
# or
mainnet start
```

--------------------------------

### Fund Local Network Account

Source: https://sui-dapp-starter.dev/docs/index

Fund your local network account using the faucet. Pass your localnet address as a parameter to the pnpm localnet:faucet command.

```bash
pnpm localnet:faucet 0xYOURADDRESS
```

--------------------------------

### Basic SuiProvider Setup in React

Source: https://sui-dapp-starter.dev/docs/frontend/kit/SuiProvider

This snippet demonstrates the basic usage of the SuiProvider component in a React application. It wraps the application's components to provide Sui blockchain functionalities. No external dependencies beyond '@suiware/kit' are required for this basic setup.

```javascript
import { SuiProvider } from '@suiware/kit';

function App() {
  return (
    <SuiProvider>
      {/* Your app components */}
    </SuiProvider>
  );
}
```

--------------------------------

### Install Firebase Tools

Source: https://sui-dapp-starter.dev/docs/frontend/deployment/firebase

Installs the Firebase command-line interface (CLI) globally using pnpm. This tool is necessary for interacting with Firebase services, including deployment.

```shell
pnpm add -g firebase-tools
```

--------------------------------

### Full Example with Network Display and Sync Button

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useNetworkType

This comprehensive example integrates the useNetworkType hook to display the current network status and provides a button to manually trigger synchronization. It includes auto-sync configuration and handles the case where the wallet might not be connected.

```javascript
import { useNetworkType } from '@suiware/kit';

function NetworkDisplay() {
  const { networkType, synchronize } = useNetworkType({
    autoSync: true,
    autoSyncInterval: 5000
  });

  return (
    <div>
      <div>Current Network: {networkType || 'Not Connected'}</div>
      <button onClick={synchronize}>
        Sync Network
      </button>
    </div>
  );
}
```

--------------------------------

### SuiProvider with Custom Configuration in React

Source: https://sui-dapp-starter.dev/docs/frontend/kit/SuiProvider

This example shows how to configure the SuiProvider with custom settings. It includes a custom React Query client, custom network configurations for 'devnet' and 'testnet', sets 'devnet' as the default network, enables wallet auto-connection, and specifies a custom wallet name. This requires additional imports from '@tanstack/react-query' and '@mysten/sui/client'.

```javascript
import { SuiProvider } from '@suiware/kit';
import { QueryClient } from '@tanstack/react-query';
import { getFullnodeUrl } from '@mysten/sui/client';

const queryClient = new QueryClient();
const networkConfig = {
  devnet: { url: getFullnodeUrl('devnet') },
  testnet: { url: getFullnodeUrl('testnet') },
};

function App() {
  return (
    <SuiProvider
      customQueryClient={queryClient}
      customNetworkConfig={networkConfig}
      defaultNetwork="devnet"
      walletAutoConnect={true}
      walletSlushName="My Sui Wallet"
    >
      {/* Your app components */}
    </SuiProvider>
  );
}
```

--------------------------------

### Customized AmountInput with Styling and Placeholder

Source: https://sui-dapp-starter.dev/docs/frontend/kit/AmountInput

Illustrates how to customize the AmountInput component with custom CSS classes and a specific placeholder text. This example highlights the flexibility of the component for UI integration.

```javascript
import { AmountInput } from '@suiware/kit';

function MyComponent() {
  const [amount, setAmount] = useState('');

  return (
    <AmountInput
      value={amount}
      onChange={setAmount}
      className="custom-input"
      placeholder="Enter amount in SUI"
    />
  );
}
```

--------------------------------

### Full Example: useTransact with Move Call

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useTransact

A comprehensive example of using the useTransact hook to execute a Move contract function on the Sui network. It includes setting up the transaction with a `moveCall` and passing necessary arguments, along with a success callback.

```javascript
import { useTransact } from '@suiware/kit'
import { Transaction } from '@mysten/sui/transactions'

function GreetingComponent() {
  const { transact } = useTransact({
    onSuccess: () => {
      console.log('Greeting updated!')
    }
  })

  const updateGreeting = (packageId: string, objectId: string, name: string) => {
    const tx = new Transaction()
    tx.moveCall({
      arguments: [
        tx.object(objectId),
        tx.pure.string(name),
        tx.object('0x8')
      ],
      target: `${packageId}::greeting::set_greeting`,
    })
    transact(tx)
  }

  return (
    <button onClick={() => updateGreeting(packageId, objectId, 'Hello')}>
      Update Greeting
    </button>
  )
}
```

--------------------------------

### Faucet Hook with Enhanced Error Handling (React)

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useFaucet

An example demonstrating the useFaucet hook with more explicit error handling using alerts for success and user-friendly error messages. It shows how to fund the current wallet or a specified address using the returned 'fund' function.

```javascript
import { useFaucet } from '@suiware/kit';

function MyComponent() {
  const { fund } = useFaucet({
    onSuccess: (message) => {
      alert(message);
    },
    onError: (_, userFriendlyMessage) => {
      alert(userFriendlyMessage);
    }
  });

  return (
    <div>
      <button onClick={() => fund()}>
        Fund Current Wallet
      </button>
      <button onClick={() => fund('0x123...')}>
        Fund Specific Address
      </button>
    </div>
  );
}
```

--------------------------------

### Get Sui Deployer Address and Balance (CLI)

Source: https://sui-dapp-starter.dev/docs/frontend/deployment/walrus

Commands to retrieve the active deployer address and its balance using the Sui client. This is crucial for verifying funds before deployment.

```bash
tsui client active-address
# or
msui client active-address
```

```bash
tsui client balance
# or
msui client balance
```

--------------------------------

### Manual Network Synchronization

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useNetworkType

This example demonstrates how to manually synchronize the app's network with the wallet's network using the `synchronize` function returned by the useNetworkType hook. This is useful for triggering updates on user demand.

```javascript
const { networkType, synchronize } = useNetworkType();

function handleSync() {
  synchronize();
}
```

--------------------------------

### Basic AddressInput Usage in React

Source: https://sui-dapp-starter.dev/docs/frontend/kit/AddressInput

Demonstrates the fundamental usage of the AddressInput component in a React application. It shows how to import the component and manage the input value using React's useState hook. This example does not include SuiNS resolution.

```javascript
import { AddressInput } from '@suiware/kit';
  
function MyComponent() {
  const [address, setAddress] = useState('');
  
  return (
    <AddressInput
      value={address}
      onChange={setAddress}
    />
  );
}
```

--------------------------------

### Faucet with Detailed Error Handling in React

Source: https://sui-dapp-starter.dev/docs/frontend/kit/Faucet

Illustrates advanced usage of the Faucet component in React, specifically focusing on implementing detailed success and error handling functions. This example defines separate handler functions for better code organization and clarity.

```jsx
import { Faucet } from '@suiware/kit';
  
function MyComponent() {
  const handleSuccess = (message: string) => {
    console.log('Funding successful:', message);
  };
  
  const handleError = (error: Error | null, userFriendlyMessage?: string) => {
    console.error('Funding failed:', userFriendlyMessage || error?.message);
  };
  
  return (
    <Faucet
      onSuccess={handleSuccess}
      onError={handleError}
    />
  );
}
```

--------------------------------

### AddressInput with SuiNS Resolution in React

Source: https://sui-dapp-starter.dev/docs/frontend/kit/AddressInput

Illustrates how to enable SuiNS name resolution within the AddressInput component. This example requires initializing both a SuiClient and a SuinsClient from the '@mysten/sui' and '@mysten/suins' libraries, respectively. The `suinsClient` prop is then passed to the AddressInput.

```javascript
import { AddressInput } from '@suiware/kit';
import { SuinsClient } from '@mysten/suins';
import { getFullnodeUrl, SuiClient } from '@mysten/sui/client';

const client = new SuiClient({ url: getFullnodeUrl('mainnet') });
const suinsClient = new SuinsClient({
	client,
	network: 'mainnet',
});

function MyComponent() {
  const [address, setAddress] = useState('');

  return (
    <AddressInput
      value={address}
      onChange={setAddress}
      suinsClient={suinsClient}
      placeholder="Enter Sui address or SuiNS name"
    />
  );
}
```

--------------------------------

### One-time Network Type Request

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useNetworkType

This example shows how to use the useNetworkType hook for a one-time network type request by setting `autoSync` to `false`. This is useful when you only need to check the network type once and do not require continuous synchronization.

```javascript
const { networkType } = useNetworkType({
  autoSync: false
});
```

--------------------------------

### useTransact Hook with Event Handlers

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useTransact

Illustrates how to use the useTransact hook with custom event handlers for transaction lifecycle events. This example shows setting loading states and refreshing data upon successful transactions, and displaying error messages on failure.

```javascript
const { transact } = useTransact({
  onBeforeStart: () => {
    setLoading(true)
  },
  onSuccess: (data) => {
    setLoading(false)
    refreshData()
  },
  onError: (e) => {
    setLoading(false)
    showError(e.message)
  }
})
```

--------------------------------

### useNetworkType Hook Documentation

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useNetworkType

This hook allows you to get the current network type from the user's connected wallet and synchronize your application's network state with it. It supports automatic synchronization at a configurable interval or manual synchronization.

```APIDOC
## useNetworkType Hook

### Description

The `useNetworkType` hook is a React hook designed to detect and maintain synchronization with the network type (mainnet, testnet, devnet, or localnet) active in the user's connected wallet. It provides the current network type and a function to manually trigger synchronization.

### Method

React Hook

### Parameters

#### Options Object

- **autoSync** (boolean) - Optional - Determines whether the app network needs to be synchronized with the wallet network regularly or just once. Defaults to `false`.
- **autoSyncInterval** (number) - Optional - Auto sync interval in milliseconds. Defaults to `3000`ms.

### Return Value

The hook returns an object with the following properties:

- **networkType** ("mainnet" | "testnet" | "devnet" | "localnet" | undefined) - The current network type detected from the wallet. Returns `undefined` if the wallet is not connected.
- **synchronize** (() => void) - A function that manually triggers the synchronization of the app's network state with the wallet's network state.

### Usage Examples

#### Basic Usage with Auto-sync

```javascript
import { useNetworkType } from '@suiware/kit';

function MyComponent() {
  const { networkType } = useNetworkType({
    autoSync: true,
    autoSyncInterval: 5000
  });

  return (
    <div>
      Current Network: {networkType || 'Not Connected'}
    </div>
  );
}
```

#### Manual Synchronization

```javascript
import { useNetworkType } from '@suiware/kit';

function NetworkDisplay() {
  const { networkType, synchronize } = useNetworkType();

  return (
    <div>
      <div>Current Network: {networkType || 'Not Connected'}</div>
      <button onClick={synchronize}>
        Sync Network
      </button>
    </div>
  );
}
```

### Features

- Automatic network type detection from the connected wallet.
- Optional automatic synchronization with a configurable interval.
- Manual synchronization capability.
- Handles wallet connection state.
- Synchronizes the app network with the wallet network.
```

--------------------------------

### Build Sui Binaries from Source

Source: https://sui-dapp-starter.dev/docs/misc/troubleshooting

This command initiates the process of building Sui binaries from source code. It is an alternative troubleshooting step when issues arise with precompiled binaries, potentially resolving download or compatibility problems.

```bash
localnet build
```

--------------------------------

### Deploy Sui dApp Frontend to Walrus Sites (CLI)

Source: https://sui-dapp-starter.dev/docs/frontend/deployment/walrus

Commands to deploy the frontend of the Sui dApp Starter project to Walrus Sites for either testnet or mainnet.

```bash
pnpm frontend:deploy:walrus:testnet
# or
pnpm frontend:deploy:walrus:mainnet
```

--------------------------------

### Basic Faucet Usage in React

Source: https://sui-dapp-starter.dev/docs/frontend/kit/Faucet

Demonstrates the basic integration of the Faucet component within a React application. It shows how to import the component and render it, with optional callbacks for success and error events.

```jsx
import { Faucet } from '@suiware/kit';
  
function MyComponent() {
  return (
    <Faucet
      onSuccess={(message) => console.log(message)}
      onError={(error, userFriendlyMessage) => console.error(error, userFriendlyMessage)}
    />
  );
}
```

--------------------------------

### Basic AmountInput Usage in React

Source: https://sui-dapp-starter.dev/docs/frontend/kit/AmountInput

Demonstrates the fundamental usage of the AmountInput component in a React application. It shows how to import the component and manage the input's state using useState and the onChange callback.

```javascript
import { AmountInput } from '@suiware/kit';

function MyComponent() {
  const [amount, setAmount] = useState('');

  return (
    <AmountInput
      value={amount}
      onChange={setAmount}
    />
  );
}
```

--------------------------------

### Set Sui Binary Version in suibase.yaml

Source: https://sui-dapp-starter.dev/docs/misc/troubleshooting

This snippet shows how to modify the `suibase.yaml` file to specify a previous version of Sui binaries. This can resolve issues related to downloading or extracting precompiled binaries.

```yaml
force_tag: "devnet-v1.24.0"
```

--------------------------------

### Display SUI Balance with React Component

Source: https://sui-dapp-starter.dev/docs/frontend/kit/Balance

This snippet shows how to import and use the Balance React component from the '@suiware/kit' library. It renders the component within a functional React component. The Balance component automatically fetches and displays the user's SUI balance, updating periodically and hiding when no wallet is connected.

```javascript
import { Balance } from '@suiware/kit';

function MyComponent() {
  return <Balance />;
}
```

--------------------------------

### Initialize Firebase Project for Sui dApp

Source: https://sui-dapp-starter.dev/docs/frontend/deployment/firebase

Initializes the frontend project for Firebase deployment using a predefined script. This step configures your project to work with Firebase Hosting and prompts for Firebase project selection.

```shell
pnpm frontend:deploy:firebase:init
```

--------------------------------

### Disable Precompiled Binaries in suibase.yaml

Source: https://sui-dapp-starter.dev/docs/misc/troubleshooting

This snippet demonstrates how to disable the use of precompiled binaries in `suibase.yaml`. Setting `precompiled_bin` to `false` forces Suibase to compile Sui binaries from source, which can resolve download or extraction errors.

```yaml
precompiled_bin=false
```

--------------------------------

### Use Faucet Hook for Test SUI Funding (React)

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useFaucet

This React hook, useFaucet, enables requesting test SUI tokens for localnet, devnet, and testnet. It accepts optional onSuccess and onError callbacks for handling funding results and returns a 'fund' function to initiate the request. Automatic wallet connection checks and network validation are included.

```javascript
import { useFaucet } from '@suiware/kit';

function MyComponent() {
  const { fund } = useFaucet({
    onSuccess: (message) => console.log(message),
    onError: (error, userFriendlyMessage) => console.error(error, userFriendlyMessage)
  });

  return (
    <button onClick={() => fund()}>
      Request Test SUI
    </button>
  );
}
```

--------------------------------

### Basic useTransact Hook Usage

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useTransact

Demonstrates the fundamental usage of the useTransact hook to initiate a transaction on the Sui network. It requires importing the hook and the Transaction class from the Sui SDK. The hook manages wallet interactions and transaction lifecycle.

```javascript
import { useTransact } from '@suiware/kit'
import { Transaction } from '@mysten/sui/transactions'

function MyComponent() {
  const { transact } = useTransact({
    onBeforeStart: () => console.log('Transaction starting...'),
    onSuccess: (data, response) => console.log('Transaction succeeded:', data, response),
    onError: (e) => console.error('Transaction failed:', e),
    waitForTransactionOptions: {
      showEffects: true,
    },
  })

  const handleTransaction = () => {
    const tx = new Transaction()
    // Configure transaction...
    transact(tx)
  }

  return (
    <button onClick={handleTransaction}>
      Perform Transaction
    </button>
  )
}
```

--------------------------------

### useFaucet Hook

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useFaucet

The useFaucet hook provides a convenient way to request test SUI tokens for specified addresses on localnet, devnet, and testnet. It includes built-in error handling and success callbacks.

```APIDOC
## useFaucet Hook

### Description
A React hook that allows you to fund addresses with SUI tokens on test networks (localnet, devnet, and testnet).

### Method
N/A (React Hook)

### Endpoint
N/A (React Hook)

### Parameters
#### Hook Options
- **onSuccess** (function) - Optional - Callback function called when funding succeeds. Receives a string message.
- **onError** (function) - Optional - Callback function called when funding fails. Receives an Error object and an optional user-friendly message string.

### Return Value
- **fund** (function) - A function to request funds. It can optionally accept an address string to fund a specific address.

### Features
- Supports localnet, devnet, and testnet networks.
- Automatic wallet connection check.
- Network compatibility validation.
- Error handling with descriptive messages.
- Success confirmation with formatted address.

### Network Support
- **localnet**: 100 SUI
- **devnet**: 10 SUI
- **testnet**: 1 SUI (faucet link opens in a new tab)

### Request Example
```javascript
import { useFaucet } from '@suiware/kit';

function MyComponent() {
  const { fund } = useFaucet({
    onSuccess: (message) => console.log(message),
    onError: (error, userFriendlyMessage) => console.error(error, userFriendlyMessage)
  });

  return (
    <button onClick={() => fund()}>
      Request Test SUI
    </button>
  );
}
```

### Response
#### Success Response
N/A (Callback function `onSuccess` is invoked with a message string).

#### Response Example (Callback)
```javascript
// Inside onSuccess callback:
// "Successfully funded 0x123... with 10 SUI on devnet."
```

#### Error Response
N/A (Callback function `onError` is invoked with error details).

#### Error Response Example (Callback)
```javascript
// Inside onError callback:
// Error object, "Insufficient balance for faucet request."
```
```

--------------------------------

### Deploy Sui dApp Frontend to Firebase

Source: https://sui-dapp-starter.dev/docs/frontend/deployment/firebase

Deploys the frontend application to Firebase Hosting using a pnpm script. This command uploads your project's static assets to Firebase servers, making your dApp accessible online.

```shell
pnpm frontend:deploy:firebase
```

--------------------------------

### Fetch and Monitor SUI Balance with useBalance (React)

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useBalance

The useBalance hook fetches and monitors SUI token balances for the connected wallet. It supports automatic periodic updates and manual refreshes. The hook returns the balance, any errors, and a refetch function. It automatically formats balance values and cleans up intervals on unmount.

```javascript
import { useBalance } from '@suiware/kit';

function MyComponent() {
  const { balance, error, refetch } = useBalance({
    autoRefetch: true,
    autoRefetchInterval: 3000
  });

  return <div>Balance: {balance} SUI</div>;
}
```

```javascript
const { balance } = useBalance({
  autoRefetch: false
});
```

```javascript
const { balance } = useBalance({
  autoRefetch: true,
  autoRefetchInterval: 5000 // Updates every 5 seconds
});
```

```javascript
const { balance, refetch } = useBalance();

// Later in your code
const handleRefresh = () => {
  refetch();
};
```

--------------------------------

### Display Network Type with React Component

Source: https://sui-dapp-starter.dev/docs/frontend/kit/NetworkType

This snippet demonstrates how to import and use the NetworkType React component within a custom component. It requires the '@suiware/kit' library. The component renders a visual indicator of the current network status.

```javascript
import { NetworkType } from '@suiware/kit';

function MyComponent() {
  return <NetworkType />;
}
```

--------------------------------

### useBalance Hook

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useBalance

The useBalance hook fetches and monitors the SUI token balance for the currently connected wallet. It supports automatic periodic refreshing and manual refetching.

```APIDOC
## useBalance Hook

### Description
Fetches and monitors the SUI token balance for the currently connected wallet address. Supports one-time fetches, periodic updates, and manual refreshes.

### Method
React Hook

### Endpoint
N/A (Client-side hook)

### Parameters
#### Hook Configuration Object (Optional)
- **autoRefetch** (boolean) - Optional - Whether to automatically refresh the balance periodically. Defaults to `false`.
- **autoRefetchInterval** (number) - Optional - Interval for auto-refresh in milliseconds. Defaults to `3000`.

### Return Value
- **balance** (string | undefined) - The formatted SUI balance.
- **error** (Error | null) - Any error that occurred during fetching. Defaults to `null`.
- **refetch** (() => void) - Function to manually refresh the balance.

### Request Example
```javascript
import { useBalance } from '@suiware/kit';

function MyComponent() {
  const { balance, error, refetch } = useBalance({
    autoRefetch: true,
    autoRefetchInterval: 5000
  });

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      Balance: {balance} SUI
      <button onClick={refetch}>Refresh Balance</button>
    </div>
  );
}
```

### Response
#### Success Response (Balance Fetched)
- **balance** (string) - The SUI balance, formatted as a string (e.g., '100.5 SUI').
- **error** (null) - No error occurred.

#### Response Example (Success)
```json
{
  "balance": "100.5 SUI",
  "error": null
}
```

#### Error Response
- **balance** (undefined) - Balance is not available due to an error.
- **error** (Error) - An error object detailing the issue during fetching.

#### Response Example (Error)
```json
{
  "balance": undefined,
  "error": {
    "message": "Failed to fetch balance: Network error"
  }
}
```
```

--------------------------------

### Regular Auto-sync Network Type

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useNetworkType

This snippet illustrates how to configure the useNetworkType hook for regular automatic synchronization by setting `autoSync` to `true` and specifying an `autoSyncInterval`. The network type will be updated automatically at the defined interval.

```javascript
const { networkType } = useNetworkType({
  autoSync: true,
  autoSyncInterval: 3000
});
```

--------------------------------

### Use useNetworkType Hook in React

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useNetworkType

This snippet demonstrates the basic usage of the useNetworkType hook in a React component. It imports the hook from '@suiware/kit' and utilizes its returned values to display the current network type. The hook can be configured with options like autoSync and autoSyncInterval.

```javascript
import { useNetworkType } from '@suiware/kit';  
  
function MyComponent() {
  const { networkType, synchronize } = useNetworkType({
    autoSync: true,
    autoSyncInterval: 3000
  });

  return (
    <div>
      Current Network: {networkType}
    </div>
  );
}
```

--------------------------------

### useTransact Hook

Source: https://sui-dapp-starter.dev/docs/frontend/kit/useTransact

The useTransact hook facilitates performing transactions on the Sui network. It manages wallet interactions and transaction lifecycle events, providing callbacks for different stages of the transaction process.

```APIDOC
## useTransact Hook

### Description
A React hook that simplifies performing transactions on the Sui network. It handles wallet interactions and transaction lifecycle events, offering callbacks for transaction initiation, success, and failure.

### Method
React Hook

### Parameters
#### Options Object
- **onBeforeStart** ( () => void ) - Optional - Callback executed when user triggers a transaction.
- **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 the `waitForTransaction` call.

### Return Value
The hook returns an object with the following property:
- **transact** ( (tx: Transaction) => void ) - Function to execute a transaction on the Sui network.

### Features
- Handles wallet interaction for transaction signing.
- Automatic transaction confirmation tracking.
- Success/error notification management.
- Integration with Sui Explorer for transaction viewing.
- Complete transaction lifecycle management.

### Usage Example
```javascript
import { useTransact } from '@suiware/kit'
import { Transaction } from '@mysten/sui/transactions'

function MyComponent() {
  const { transact } = useTransact({
    onBeforeStart: () => console.log('Transaction starting...'),
    onSuccess: (data, response) => console.log('Transaction succeeded:', data, response),
    onError: (e) => console.error('Transaction failed:', e),
    waitForTransactionOptions: {
      showEffects: true,
    },
  })

  const handleTransaction = () => {
    const tx = new Transaction()
    // Configure transaction...
    transact(tx)
  }

  return (
    <button onClick={handleTransaction}>
      Perform Transaction
    </button>
  )
}
```

### Basic Transaction Example
```javascript
const { transact } = useTransact()

const handleTransaction = () => {
  const tx = new Transaction()
  tx.moveCall({
    target: `${packageId}::module::function`,
    arguments: [/* ... */],
  })
  transact(tx)
}
```

### Example with Event Handlers
```javascript
const { transact } = useTransact({
  onBeforeStart: () => {
    setLoading(true)
  },
  onSuccess: (data) => {
    setLoading(false)
    refreshData()
  },
  onError: (e) => {
    setLoading(false)
    showError(e.message)
  }
})
```

### Full Example with Move Call
```javascript
import { useTransact } from '@suiware/kit'
import { Transaction } from '@mysten/sui/transactions'

function GreetingComponent() {
  const { transact } = useTransact({
    onSuccess: () => {
      console.log('Greeting updated!')
    }
  })

  const updateGreeting = (packageId, objectId, name) => {
    const tx = new Transaction()
    tx.moveCall({
      arguments: [
        tx.object(objectId),
        tx.pure.string(name),
        tx.object('0x8')
      ],
      target: `${packageId}::greeting::set_greeting`,
    })
    transact(tx)
  }

  return (
    <button onClick={() => updateGreeting(packageId, objectId, 'Hello')}>
      Update Greeting
    </button>
  )
}
```
```
Tokens:
Raw