Expose All ReactQuery Options for Hooks

packages/checkout/src/hooks/useCheckoutUI/index.tsx

@@ -62,7 +62,7 @@ export const useCheckoutUI = ({
       tokenIDs: [collectible.tokenId ?? '']
     },
     {
-      disabled: !collectible.tokenId
+      enabled: !!collectible.tokenId
     }
   )
 

packages/checkout/src/hooks/useCheckoutUI/useCryptoPayment.tsx

@@ -152,7 +152,7 @@ export const useCryptoPayment = ({
       }
     },
     {
-      disabled: disableSwapQuote
+      enabled: !disableSwapQuote
     }
   )
 

packages/checkout/src/views/Checkout/PaymentMethodSelect/OrderSummary/index.tsx

@@ -21,7 +21,7 @@ export const OrderSummary = () => {
       tokenIDs: tokenIds.some(id => id === '') ? [] : tokenIds
     },
     {
-      disabled: tokenIds.some(id => id === '')
+      enabled: tokenIds.every(id => id !== '')
     }
   )
   const { data: dataCollectionInfo, isLoading: isLoadingCollectionInfo } = useGetContractInfo({

packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx

@@ -135,7 +135,7 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
       contractAddress: selectedCurrency.address
     },
     {
-      disabled: !isSwapTransaction
+      enabled: isSwapTransaction
     }
   )
 
@@ -161,7 +161,7 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
       }
     },
     {
-      disabled: !isSwapTransaction
+      enabled: isSwapTransaction
     }
   )
 

packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/useInitialBalanceCheck.tsx

@@ -43,7 +43,7 @@ export const useInitialBalanceCheck = ({
       chainId: chainId
     },
     {
-      disabled: isInitialBalanceChecked || !isInsufficientBalance || isFree
+      enabled: !isInitialBalanceChecked && isInsufficientBalance && !isFree
     }
   )
 
@@ -66,7 +66,7 @@ export const useInitialBalanceCheck = ({
       omitMetadata: true
     },
     {
-      disabled: isInitialBalanceChecked || !isInsufficientBalance || swapRoutesIsLoading || isFree
+      enabled: !isInitialBalanceChecked && isInsufficientBalance && !swapRoutesIsLoading && !isFree
     }
   )
 

packages/checkout/src/views/Swap/index.tsx

@@ -172,7 +172,7 @@ export const Swap = () => {
       }
     },
     {
-      disabled: disableSwapQuote
+      enabled: !disableSwapQuote
     }
   )
 

packages/checkout/src/views/TransactionStatus/index.tsx

@@ -125,7 +125,7 @@ export const TransactionStatus = () => {
       tokenIDs: noItemsToDisplay ? [] : items?.map(i => i.tokenId || '')
     },
     {
-      disabled: noItemsToDisplay
+      enabled: !noItemsToDisplay
     }
   )
 
@@ -172,7 +172,7 @@ export const TransactionStatus = () => {
       contractAddress: collectionAddress || ''
     },
     {
-      disabled: noItemsToDisplay
+      enabled: !noItemsToDisplay
     }
   )
   const { data: dataCurrencyInfo, isLoading: isLoadingCurrencyInfo } = useGetContractInfo(
@@ -181,7 +181,7 @@ export const TransactionStatus = () => {
       contractAddress: currencyAddress || ''
     },
     {
-      disabled: noItemsToDisplay
+      enabled: !noItemsToDisplay
     }
   )
 

packages/hooks/CHANGELOG.md

@@ -1,11 +1,5 @@
 # @0xsequence/hooks
 
-## 6.0.2
-
-### Patch Changes
-
-- Fix for chain switch
-
 ## 6.0.1
 
 ### Patch Changes

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/hooks",
-  "version": "6.0.2",
+  "version": "6.0.1",
   "description": "React hooks for Sequence Web SDK",
   "repository": "https://github.com/0xsequence/web-sdk/tree/master/packages/hooks",
   "author": "Sequence Platforms ULC",

packages/hooks/src/hooks/API/useGetCoinPrices.ts

@@ -1,8 +1,8 @@
-import { SequenceAPIClient, type Token } from '@0xsequence/api'
+import { SequenceAPIClient, type Token, type TokenPrice } from '@0xsequence/api'
 import { useQuery } from '@tanstack/react-query'
 
 import { QUERY_KEYS, time } from '../../constants.js'
-import type { HooksOptions } from '../../types/hooks.js'
+import type { QueryHookOptions } from '../../types/hooks.js'
 
 import { useAPIClient } from './useAPIClient.js'
 
@@ -36,16 +36,8 @@ const getCoinPrices = async (apiClient: SequenceAPIClient, tokens: Token[]) => {
  *   - chainId: The chain ID where the token exists
  *   - contractAddress: The token's contract address (use ZERO_ADDRESS for native tokens)
  *
- * @param options - Optional configuration options:
- *   - retry: Whether to retry failed requests (defaults to false)
- *   - disabled: Whether to disable the query
- *
- * @returns React Query result object containing:
- *   - data: Array of token prices when available
- *   - isLoading: Whether the initial request is in progress
- *   - error: Any error that occurred
- *   - isError: Whether an error occurred
- *   - isSuccess: Whether the request was successful
+ * @param options - React Query options (except queryKey and queryFn which are managed by the hook).
+ *   Defaults: retry: false, staleTime: 1 minute.
  *
  * @example
  * ```tsx
@@ -59,24 +51,17 @@ const getCoinPrices = async (apiClient: SequenceAPIClient, tokens: Token[]) => {
  *     contractAddress: '0x...' // USDC on Polygon
  *   }
  * ])
- *
- * if (isLoading) {
- *   return <div>Loading prices...</div>
- * }
- *
- * if (prices) {
- *   console.log('ETH price:', prices[0].price.value)
- * }
  * ```
  */
-export const useGetCoinPrices = (tokens: Token[], options?: HooksOptions) => {
+export const useGetCoinPrices = (tokens: Token[], options?: QueryHookOptions<TokenPrice[]>) => {
   const apiClient = useAPIClient()
 
   return useQuery({
-    queryKey: [QUERY_KEYS.useGetCoinPrices, tokens, options],
+    queryKey: [QUERY_KEYS.useGetCoinPrices, tokens],
     queryFn: () => getCoinPrices(apiClient, tokens),
-    retry: options?.retry ?? false,
+    retry: false,
     staleTime: time.oneMinute,
-    enabled: tokens.length > 0 && !options?.disabled
+    enabled: tokens.length > 0,
+    ...options
   })
 }

packages/hooks/src/hooks/API/useGetCollectiblePrices.ts

@@ -1,8 +1,8 @@
-import { SequenceAPIClient, type Token } from '@0xsequence/api'
+import { SequenceAPIClient, type Token, type TokenPrice } from '@0xsequence/api'
 import { useQuery } from '@tanstack/react-query'
 
 import { QUERY_KEYS, time } from '../../constants.js'
-import type { HooksOptions } from '../../types/hooks.js'
+import type { QueryHookOptions } from '../../types/hooks.js'
 
 import { useAPIClient } from './useAPIClient.js'
 
@@ -29,8 +29,6 @@ const getCollectiblePrices = async (apiClient: SequenceAPIClient, tokens: Token[
  *
  * This hook uses React Query to fetch and cache collectible prices from the Sequence API.
  * Prices are automatically refreshed every minute to ensure they stay current.
- * Used in various UI components to display NFT valuations, particularly in collection views
- * and transaction details.
  *
  * @see {@link https://docs.sequence.xyz/sdk/web/hooks-sdk/hooks/useGetCollectiblePrices} for more detailed documentation.
  *
@@ -39,49 +37,29 @@ const getCollectiblePrices = async (apiClient: SequenceAPIClient, tokens: Token[
  *   - contractAddress: The NFT collection's contract address
  *   - tokenId: The specific token ID within the collection
  *
- * @param options - Optional configuration options:
- *   - retry: Whether to retry failed requests (defaults to false)
- *   - disabled: Whether to disable the query
- *
- * @returns React Query result object containing:
- *   - data: Array of token prices when available, each containing:
- *     - price: The price for the collection
- *     - price24hChange: The price change for the collection in the last 24 hours (if available)
- *     - floorPrice: The floor price for the collection (if available)
- *     - buyPrice: Current market buy price (if available)
- *     - sellPrice: Current market sell price (if available)
- *   - isLoading: Whether the initial request is in progress
- *   - error: Any error that occurred
- *   - isError: Whether an error occurred
- *   - isSuccess: Whether the request was successful
+ * @param options - React Query options (except queryKey and queryFn which are managed by the hook).
+ *   Defaults: retry: false, staleTime: 1 minute.
  *
  * @example
  * ```tsx
  * const { data: prices, isLoading } = useGetCollectiblePrices([
  *   {
  *     chainId: 1,
- *     contractAddress: '0x...',  // NFT collection address
- *     tokenId: '123'            // Specific NFT ID
+ *     contractAddress: '0x...',
+ *     tokenId: '123'
  *   }
  * ])
- *
- * if (isLoading) {
- *   return <div>Loading prices...</div>
- * }
- *
- * if (prices?.[0]) {
- *   console.log('Price:', prices[0].price.value)
- * }
  * ```
  */
-export const useGetCollectiblePrices = (tokens: Token[], options?: HooksOptions) => {
+export const useGetCollectiblePrices = (tokens: Token[], options?: QueryHookOptions<TokenPrice[]>) => {
   const apiClient = useAPIClient()
 
   return useQuery({
-    queryKey: [QUERY_KEYS.useGetCollectiblePrices, tokens, options],
+    queryKey: [QUERY_KEYS.useGetCollectiblePrices, tokens],
     queryFn: () => getCollectiblePrices(apiClient, tokens),
-    retry: options?.retry ?? false,
+    retry: false,
     staleTime: time.oneMinute,
-    enabled: tokens.length > 0 && !options?.disabled
+    enabled: tokens.length > 0,
+    ...options
   })
 }

packages/hooks/src/hooks/API/useGetExchangeRate.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
 import { QUERY_KEYS, time } from '../../constants.js'
-import type { HooksOptions } from '../../types/hooks.js'
+import type { QueryHookOptions } from '../../types/hooks.js'
 
 import { useAPIClient } from './useAPIClient.js'
 
@@ -10,45 +10,25 @@ import { useAPIClient } from './useAPIClient.js'
  *
  * This hook uses React Query to fetch and cache exchange rates from the Sequence API.
  * Rates are automatically refreshed every 10 minutes to ensure they stay current.
- * Used throughout the wallet widget and checkout components to display fiat values
- * for tokens and NFTs.
  *
  * @see {@link https://docs.sequence.xyz/sdk/web/hooks-sdk/hooks/useGetExchangeRate} for more detailed documentation.
  *
  * @param toCurrency - The target currency code (e.g., 'EUR', 'GBP', 'JPY').
  *                     If 'USD' is provided, returns 1 as the conversion rate.
  *
- * @param options - Optional configuration options:
- *   - retry: Whether to retry failed requests (defaults to false)
- *   - disabled: Whether to disable the query
- *
- * @returns React Query result object containing:
- *   - data: The exchange rate value from USD to the target currency
- *   - isLoading: Whether the initial request is in progress
- *   - error: Any error that occurred
- *   - isError: Whether an error occurred
- *   - isSuccess: Whether the request was successful
+ * @param options - React Query options (except queryKey and queryFn which are managed by the hook).
+ *   Defaults: retry: false, staleTime: 10 minutes.
  *
  * @example
  * ```tsx
  * const { data: rate = 1, isLoading } = useGetExchangeRate('EUR')
- *
- * // Convert USD amount to EUR
- * const usdAmount = 100
- * const eurAmount = usdAmount * rate
- *
- * if (isLoading) {
- *   return <div>Loading rates...</div>
- * }
- *
- * console.log(`${usdAmount} USD = ${eurAmount} EUR`)
  * ```
  */
-export const useGetExchangeRate = (toCurrency: string, options?: HooksOptions) => {
+export const useGetExchangeRate = (toCurrency: string, options?: QueryHookOptions<number>) => {
   const apiClient = useAPIClient()
 
   return useQuery({
-    queryKey: [QUERY_KEYS.useGetExchangeRate, toCurrency, options],
+    queryKey: [QUERY_KEYS.useGetExchangeRate, toCurrency],
     queryFn: async () => {
       if (toCurrency === 'USD') {
         return 1
@@ -58,8 +38,9 @@ export const useGetExchangeRate = (toCurrency: string, options?: HooksOptions) =
 
       return res.exchangeRate.value
     },
-    retry: options?.retry ?? false,
+    retry: false,
     staleTime: time.oneMinute * 10,
-    enabled: !!toCurrency && !options?.disabled
+    enabled: !!toCurrency,
+    ...options
   })
 }

packages/hooks/src/hooks/Builder/useDetectContractVersion.ts

@@ -1,42 +1,32 @@
 import { useQuery } from '@tanstack/react-query'
 
 import { QUERY_KEYS, time } from '../../constants.js'
-import type { HooksOptions } from '../../types/hooks.js'
+import type { QueryHookOptions } from '../../types/hooks.js'
 import { useConfig } from '../useConfig.js'
 
 /**
  * Hook to fetch the version of a contract.
  *
  * This hook uses React Query to fetch and cache the version of a contract.
  *
- *
  * @param args - The arguments for the hook:
- *   - address: The address of the contract
+ *   - contractAddress: The address of the contract
  *   - chainId: The chain id of the contract
  *
- * @param options - Optional configuration options:
- *   - retry: Whether to retry failed requests (defaults to false)
- *   - disabled: Whether to disable the query
- *
- * @returns React Query result object containing:
- *   - data: The version of the contract
- *   - isLoading: Whether the initial request is in progress
- *   - error: Any error that occurred
- *   - isError: Whether an error occurred
- *   - isSuccess: Whether the request was successful
- *
+ * @param options - React Query options (except queryKey and queryFn which are managed by the hook).
+ *   Defaults: retry: false, staleTime: 60 minutes.
  */
 
 interface DetectContractVersionArgs {
   contractAddress: string
   chainId: number
 }
 
-export const useDetectContractVersion = (args: DetectContractVersionArgs, options?: HooksOptions) => {
+export const useDetectContractVersion = (args: DetectContractVersionArgs, options?: QueryHookOptions<any>) => {
   const { projectAccessKey, env } = useConfig()
 
   return useQuery({
-    queryKey: [QUERY_KEYS.useDetectContractVersion, args.contractAddress, args.chainId, options],
+    queryKey: [QUERY_KEYS.useDetectContractVersion, args.contractAddress, args.chainId],
     queryFn: async () => {
       const res = await fetch(`${env.builderUrl}/rpc/ContractLibrary/DetectContractVersion`, {
         method: 'POST',
@@ -46,8 +36,9 @@ export const useDetectContractVersion = (args: DetectContractVersionArgs, option
       const data = await res.json()
       return data
     },
-    retry: options?.retry ?? false,
+    retry: false,
     staleTime: time.oneMinute * 60,
-    enabled: !!args.contractAddress && !!args.chainId && !options?.disabled
+    enabled: !!args.contractAddress && !!args.chainId,
+    ...options
   })
 }