docs: added ts doc for wallet-widget hooks (#381)

Author: VGabriel45

packages/wallet-widget/src/hooks/useNavigation.ts

@@ -7,6 +7,46 @@ interface UseNavigation {
   goBack: () => void
 }
 
+/**
+ * Hook for managing navigation state and history within the wallet widget.
+ * Provides functions to navigate between views and maintain navigation history.
+ * Automatically handles scrolling to the top of the view on navigation.
+ *
+ * @returns {UseNavigation} Navigation control object containing:
+ * - `setNavigation`: Function to navigate to a new view. Automatically manages history:
+ *   - If navigating to 'home', clears history
+ *   - Otherwise, adds new location to history stack
+ * - `history`: Current navigation history stack
+ * - `setHistory`: Direct history manipulation (use setNavigation instead when possible)
+ * - `goBack`: Function to navigate back to previous view
+ *
+ * @see {@link https://docs.sequence.xyz/sdk/web/hooks/useNavigation} for more detailed documentation.
+ *
+ * @example
+ * function SendView() {
+ *   const { setNavigation, goBack } = useNavigation()
+ *
+ *   const handleSend = () => {
+ *     // Navigate to confirmation view
+ *     setNavigation({
+ *       location: 'send-confirmation',
+ *       params: { amount, recipient }
+ *     })
+ *   }
+ *
+ *   const handleCancel = () => {
+ *     // Go back to previous view
+ *     goBack()
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleSend}>Send</button>
+ *       <button onClick={handleCancel}>Cancel</button>
+ *     </div>
+ *   )
+ * }
+ */
 export const useNavigation = (): UseNavigation => {
   const { setHistory, history } = useNavigationContext()
 

packages/wallet-widget/src/hooks/useScrollbarWidth.ts

@@ -1,5 +1,13 @@
 import { useEffect, useState } from 'react'
 
+/**
+ * Hook that returns the browser's scrollbar width based on the user agent.
+ * Specifically handles Chrome-based browsers differently from others.
+ *
+ * @returns {string} The scrollbar width as a CSS pixel value:
+ * - Returns '13px' for Chrome-based browsers (Chrome, Chromium, Chrome iOS)
+ * - Returns '0px' for all other browsers
+ */
 export const useScrollbarWidth = () => {
   const [scrollbarWidth, setScrollbarWidth] = useState<string>('0px')
 

packages/wallet-widget/src/hooks/useSettings.ts

@@ -17,6 +17,46 @@ interface Settings {
 
 type SettingsItems = Pick<Settings, 'hideCollectibles' | 'hideUnlistedTokens' | 'fiatCurrency' | 'selectedNetworks'>
 
+/**
+ * Hook to manage wallet settings with persistent storage.
+ * Provides access to and control over user preferences for the wallet interface.
+ * Settings are stored in localStorage and persist across sessions.
+ *
+ * @returns {Settings} Object containing current settings and setter functions:
+ * - `hideCollectibles`: Whether to hide NFT collectibles in the wallet view
+ * - `hideUnlistedTokens`: Whether to hide unverified tokens
+ * - `fiatCurrency`: Selected fiat currency for value display (e.g., USD, EUR)
+ * - `selectedNetworks`: Array of chain IDs for networks to display
+ * - `setFiatCurrency`: Function to update fiat currency preference
+ * - `setHideCollectibles`: Function to toggle collectibles visibility
+ * - `setHideUnlistedTokens`: Function to toggle unlisted tokens visibility
+ * - `setSelectedNetworks`: Function to update selected networks
+ *
+ * @see {@link https://docs.sequence.xyz/sdk/web/hooks/useSettings} for more detailed documentation.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage in a component
+ * function WalletView() {
+ *   const {
+ *     hideCollectibles,
+ *     fiatCurrency,
+ *     selectedNetworks,
+ *     setHideCollectibles
+ *   } = useSettings()
+ *
+ *   return (
+ *     <div>
+ *       <Toggle
+ *         checked={hideCollectibles}
+ *         onChange={setHideCollectibles}
+ *         label="Hide NFTs"
+ *       />
+ *       <Text>Currency: {fiatCurrency.symbol}</Text>
+ *     </div>
+ *   )
+ * } *
+ */
 export const useSettings = (): Settings => {
   const { readOnlyNetworks, displayedAssets } = useWalletSettings()
   const { chains } = useConfig()