### 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 ( {/* Your app components */} ); } ``` -------------------------------- ### 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 (
Current Network: {networkType || 'Not Connected'}
); } ``` -------------------------------- ### 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 ( {/* Your app components */} ); } ``` -------------------------------- ### 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 ( ); } ``` -------------------------------- ### 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 ( ) } ``` -------------------------------- ### 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 (
); } ``` -------------------------------- ### 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 ( ); } ``` -------------------------------- ### 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 ( ); } ``` -------------------------------- ### 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 ( ); } ``` -------------------------------- ### 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 (
Current Network: {networkType || 'Not Connected'}
); } ``` #### Manual Synchronization ```javascript import { useNetworkType } from '@suiware/kit'; function NetworkDisplay() { const { networkType, synchronize } = useNetworkType(); return (
Current Network: {networkType || 'Not Connected'}
); } ``` ### 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 ( 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 ( ); } ``` -------------------------------- ### 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 ; } ``` -------------------------------- ### 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 ( ); } ``` -------------------------------- ### 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 ( ) } ``` -------------------------------- ### 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 ( ); } ``` ### 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
Balance: {balance} SUI
; } ``` ```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 ; } ``` -------------------------------- ### 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
Error: {error.message}
; } return (
Balance: {balance} SUI
); } ``` ### 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 (
Current Network: {networkType}
); } ``` -------------------------------- ### 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 ( ) } ``` ### 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 ( ) } ``` ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.