diff --git a/docs/tools/kit/index.md b/docs/tools/kit/index.md index 8accd0352c..3ff38daa3c 100644 --- a/docs/tools/kit/index.md +++ b/docs/tools/kit/index.md @@ -406,11 +406,71 @@ function TransactionComponent() { const txId = "your-transaction-id-here" const { transactionStatus, error } = useFlowTransactionStatus({ id: txId }) - if (error) return
Error: {error.message}
+ if (error) return
Error: {error.message}
; + + return
Status: {transactionStatus?.statusString}
; +} +``` + +--- + +### `useCrossVmTokenBalance` + +```tsx +import { useFlowQuery } from '@onflow/kit'; +``` + +Fetch the balance of a token balance for a given user across both Cadence and EVM environments. + +#### Parameters: + +- `owner: string` – Cadence address of the account whose token balances you want. +- `vaultIdentifier?: string` – Optional Cadence resource identifier (e.g. "0x1cf0e2f2f715450.FlowToken.Vault") for on-chain balance +- `erc20AddressHexArg?: string` – Optional bridged ERC-20 contract address (hex) for EVM/COA balance +- `query?: Omit, "queryKey" | "queryFn">` – Optional TanStack Query config (e.g. staleTime, enabled) + +> **Note:** You must pass `owner`, and one of `vaultIdentifier` or `erc20AddressHexArg`. + +#### Returns: `UseQueryResult` + +Where `UseCrossVmTokenBalanceData` is defined as: + +```typescript +interface UseCrossVmTokenBalanceData { + cadence: TokenBalance // Token balance of Cadence vault + evm: TokenBalance // Token balance of EVM (COA stored in /storage/coa) + combined: TokenBalance // Combined balance of both Cadence and EVM +} +``` + +Where `TokenBalance` is defined as: + +```typescript +interface TokenBalance { + value: bigint // Balance value in smallest unit + formatted: string // Formatted balance string (e.g. "123.45") + precision: number // Number of decimal places for the token +} +``` + +```tsx +function QueryExample() { + const { data, isLoading, error, refetch } = useCrossVmTokenBalance({ + owner: '0x1cf0e2f2f715450', + vaultIdentifier: '0x1cf0e2f2f715450.FlowToken.Vault', + query: { staleTime: 10000 }, + }); + + if (isLoading) return

Loading token balance...

; + if (error) return

Error fetching token balance: {error.message}

; return (
- Status: {transactionStatus?.statusString} +

Token Balances

+

Cadence Balance: {data.cadence.formatted} (Value: {data.cadence.value})

+

EVM Balance: {data.evm.formatted} (Value: {data.evm.value})

+

Combined Balance: {data.combined.formatted} (Value: {data.combined.value})

+
) }