AppKit React

Hook

Balances

useBalance

React hook reading the Toncoin balance of the currently selected wallet through TanStack Query — auto-resolves the wallet address (use useBalanceByAddress for an arbitrary address).

Parameter	Type	Description
parameters	UseBalanceParameters	TanStack Query overrides (select, enabled, staleTime, …) and an optional network override.
parameters.address	UserFriendlyAddress | Address	Wallet address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
parameters.network	Network	Network to read the balance from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseBalanceReturnType<selectData = GetBalanceByAddressData> — TanStack Query result for the balance read.

Example

const { data: balance, isLoading, error } = useBalance();

if (isLoading) {
    return <div>Loading...</div>;
}

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

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

useBalanceByAddress

React hook reading the Toncoin balance of an arbitrary address through TanStack Query — useful for addresses that aren’t tied to the selected wallet (use useBalance for the selected wallet).

Parameter	Type	Description
parameters	UseBalanceByAddressParameters	Target address, optional network override, and TanStack Query overrides.
parameters.address	UserFriendlyAddress | Address	Wallet address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
parameters.network	Network	Network to read the balance from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseBalanceByAddressReturnType<selectData = GetBalanceByAddressData> — TanStack Query result for the balance read.

Example

const {
    data: balance,
    isLoading,
    error,
} = useBalanceByAddress({
    address: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
});

if (isLoading) {
    return <div>Loading...</div>;
}

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

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

useWatchBalance

Subscribe to Toncoin balance updates for the currently selected wallet. Updates flow into the TanStack Query cache so useBalance picks up the new data automatically (use useWatchBalanceByAddress for a fixed address). Requires a streaming provider registered for the network — the hook exits silently with a console warning when none is configured.

Parameter	Type	Description
parameters	UseWatchBalanceParameters	Update callback and optional network override.
parameters.onChange	(update: BalanceUpdate) => void	Callback fired on every balance update from the streaming provider.
parameters.network	Network	Network to watch on. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.

Returns: void.

Example

const { data: balance } = useBalance();

useWatchBalance();

return <div>Current balance: {balance}</div>;

useWatchBalanceByAddress

Subscribe to Toncoin balance updates for an arbitrary address — updates flow into the TanStack Query cache so useBalanceByAddress picks up the new data automatically. Requires a streaming provider registered for the network — the hook exits silently with a console warning when none is configured.

Parameter	Type	Description
parameters*	UseWatchBalanceByAddressParameters	Address, update callback and optional network override.
parameters.address	UserFriendlyAddress | Address	Wallet address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
parameters.network	Network	Network to watch on. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.onChange	(update: BalanceUpdate) => void	Callback fired on every balance update from the streaming provider.

Returns: void.

Example

const address = 'UQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJKZ';
const network = Network.mainnet();
const { data: balance } = useBalanceByAddress({ address, network });

useWatchBalanceByAddress({ address, network });

return <div>Current balance: {balance}</div>;

Connectors

useConnectorById

Look up a connector by its id and stay subscribed to its registration lifecycle — updates when a connector with that id is registered (via AppKit’s constructor or addConnector) or unregistered. Returns the matching Connector, or undefined when none with that id is currently registered. Use useConnectedWallets if you want to react to wallet connect/disconnect events instead.

Parameter	Type	Description
id*	string	ID of the connector to look up.

Returns: Connector | undefined — The matching Connector, or undefined if none with that id is registered.

useConnectors

Read the list of connectors registered on this AppKit instance. Updates when a connector is registered or unregistered (use useConnectedWallets to react to wallet connect/disconnect events).

Returns: UseConnectorsReturnType — Read-only array of registered Connectors.

Crypto Onramp

useCreateCryptoOnrampDeposit

Create a crypto-onramp deposit from a quote previously obtained via useCryptoOnrampQuote. Call mutate(options) where options matches CreateCryptoOnrampDepositOptions (quote, refund address, optional provider override). On success, data is the CryptoOnrampDeposit carrying the address and amount the user must send on the source chain to complete the onramp. Pair with useCryptoOnrampStatus to poll the deposit until it settles.

Parameter	Type	Description
parameters	UseCreateCryptoOnrampDepositParameters	TanStack Query mutation overrides (parameters.mutation).
parameters.mutation	MutationOptionsOverride	TanStack Query mutation options forwarded to useMutation (onSuccess, onError, onMutate, retry, …). mutationFn, mutationKey and throwOnError are managed by the wrapper.

Returns: UseCreateCryptoOnrampDepositReturnType<context = unknown> — Mutation result for the deposit call.

useCryptoOnrampContext

Reads the CryptoOnrampContext populated by CryptoOnrampWidgetProvider — returns the widget’s selection state, quote/deposit data and actions (CryptoOnrampContextType).

Returns: CryptoOnrampContextType.

useCryptoOnrampProvider

Read a registered crypto-onramp provider by id, or the default provider when no id is given — subscribes to watchCryptoOnrampProviders and re-reads via getCryptoOnrampProvider so the result stays in sync. The read swallows the throw from getCryptoOnrampProvider (which throws when no provider matches — or when no id is passed and no default has been registered) and yields undefined instead.

Parameter	Type	Description
parameters	UseCryptoOnrampProviderParameters	Optional provider id.
parameters.id	string	Provider ID to look up. When omitted, returns the registered default provider.

Returns: UseCryptoOnrampProviderReturnType — The matching provider, or undefined when none is registered.

useCryptoOnrampProviders

List every crypto-onramp provider registered on the AppKit instance (both those passed via AppKitConfig’s providers and those added later through registerProvider). Subscribes to watchCryptoOnrampProviders and re-reads via getCryptoOnrampProviders so the array stays in sync.

Returns: UseCryptoOnrampProvidersReturnType — Array of registered crypto-onramp providers.

useCryptoOnrampQuote

Quote a crypto-to-TON onramp — given a source asset/chain and the target TON asset, returns the rate, expected amount and the provider-specific metadata required to feed useCreateCryptoOnrampDeposit. data is the CryptoOnrampQuote payload.

Parameter	Type	Description
parameters	UseCryptoOnrampQuoteParameters	Quote inputs and TanStack Query overrides.
parameters.amount	string	Amount to onramp (either source or target crypto, depending on isSourceAmount)
parameters.sourceCurrencyAddress	string	Source crypto currency address (contract address or 0x0… for native)
parameters.sourceChain	string	Source chain identifier in CAIP-2 format (e.g. ‘eip155:1’ for Ethereum mainnet, ‘eip155:42161’ for Arbitrum One). Providers map this to their own chain identifiers internally.
parameters.targetCurrencyAddress	string	Target crypto currency address on TON (contract address or 0x0… for native)
parameters.recipientAddress	string	TON address that will receive the target crypto.
parameters.refundAddress	string	Refund address for the source crypto.
parameters.isSourceAmount	boolean	If true, amount is the source amount to spend. If false, amount is the target amount to receive. Defaults to true when omitted.
parameters.providerOptions	TProviderOptions = unknown	Provider-specific options.
parameters.providerId	string	Provider to quote against. Defaults to the registered default provider.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseCryptoOnrampQuoteReturnType<selectData = GetCryptoOnrampQuoteData> — TanStack Query result for the quote read.

useCryptoOnrampStatus

Read the current status of a crypto-onramp deposit previously created via useCreateCryptoOnrampDeposit. Typically polled via refetchInterval until data reaches a terminal state — 'success' (delivered to the recipient) or 'failed' (provider could not complete the deposit).

Parameter	Type	Description
parameters	UseCryptoOnrampStatusParameters	Deposit id, originating provider id and TanStack Query overrides.
parameters.depositId	string	Deposit id.
parameters.providerId	string	Identifier of the provider that issued this deposit.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseCryptoOnrampStatusReturnType<selectData = GetCryptoOnrampStatusData> — TanStack Query result for the status read.

Jettons

useJettonBalanceByAddress

React hook reading a jetton balance for a given owner through TanStack Query — derives the owner’s jetton-wallet address from the master and formats the balance using the supplied decimals.

Parameter	Type	Description
parameters	UseJettonBalanceByAddressParameters	Jetton master, owner address, decimals, optional network override and TanStack Query overrides.
parameters.jettonAddress	UserFriendlyAddress	Jetton master contract address (the token, not the user’s wallet for it).
parameters.ownerAddress	UserFriendlyAddress	Owner of the jetton wallet — typically the connected user’s address.
parameters.jettonDecimals	number	Decimals declared by the jetton master. Used to format the raw balance into a human-readable string.
parameters.network	Network	Network to read the balance from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseJettonBalanceByAddressReturnType<selectData = GetJettonBalanceByAddressData> — TanStack Query result for the jetton balance read.

Example

const {
    data: balance,
    isLoading,
    error,
} = useJettonBalanceByAddress({
    ownerAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
    jettonAddress: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiXme1Xc56Iwobkzgnjj',
});

if (isLoading) {
    return <div>Loading...</div>;
}

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

return <div>Jetton Balance: {balance}</div>;

useJettonInfo

React hook reading jetton-master metadata (name, symbol, decimals, image, description) through TanStack Query.

Parameter	Type	Description
parameters	UseJettonInfoParameters	Jetton master address, optional network override and TanStack Query overrides.
parameters.address	UserFriendlyAddress	Jetton master contract address whose metadata is being fetched.
parameters.network	Network	Network to query. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseJettonInfoReturnType<selectData = GetJettonInfoData> — TanStack Query result for the jetton info read.

Example

const {
    data: info,
    isLoading,
    error,
} = useJettonInfo({
    address: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiXme1Xc56Iwobkzgnjj',
});

if (isLoading) {
    return <div>Loading...</div>;
}

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

return (
    <div>
        <h3>Jetton Info</h3>
        <p>Name: {info?.name}</p>
        <p>Symbol: {info?.symbol}</p>
        <p>Decimals: {info?.decimals}</p>
    </div>
);

useJettonWalletAddress

React hook deriving the owner’s jetton-wallet address — the per-owner contract that actually holds the jetton balance for a given master — through TanStack Query.

Parameter	Type	Description
parameters	UseJettonWalletAddressParameters	Jetton master, owner address, optional network override and TanStack Query overrides.
parameters.jettonAddress	UserFriendlyAddress	Jetton master contract address.
parameters.ownerAddress	UserFriendlyAddress	Owner whose jetton wallet should be derived.
parameters.network	Network	Network to query. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseQueryReturnType<selectData, Error> — TanStack Query result for the jetton-wallet address read.

Example

const {
    data: walletAddress,
    isLoading,
    error,
} = useJettonWalletAddress({
    ownerAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
    jettonAddress: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiXme1Xc56Iwobkzgnjj',
});

if (isLoading) {
    return <div>Loading...</div>;
}

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

return <div>Jetton Wallet Address: {walletAddress}</div>;

useJettons

React hook listing jettons held by the currently selected wallet through TanStack Query — auto-resolves the wallet address (use useJettonsByAddress for an arbitrary address).

Parameter	Type	Description
parameters	UseJettonsParameters	TanStack Query overrides (select, enabled, staleTime, …), pagination and an optional network override.
parameters.address	UserFriendlyAddress | Address	Owner address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
parameters.network	Network	Network to read the jettons from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.limit	number	Maximum number of jettons to return.
parameters.offset	number	Number of jettons to skip before returning results — used for pagination.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseJettonsReturnType<selectData = GetJettonsByAddressData> — TanStack Query result for the jettons list.

Example

const { data: jettons, isLoading, error } = useJettons();

if (isLoading) {
    return <div>Loading...</div>;
}

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

return (
    <div>
        <h3>Jettons</h3>
        <ul>
            {jettons?.jettons.map((jetton) => (
                <li key={jetton.walletAddress}>
                    {jetton.info.name}: {jetton.balance}
                </li>
            ))}
        </ul>
    </div>
);

useJettonsByAddress

React hook listing jettons held by an arbitrary address through TanStack Query — useful for wallets that aren’t selected in AppKit (use useJettons for the selected wallet).

Parameter	Type	Description
parameters	UseJettonsByAddressParameters	Owner address, optional network override, pagination and TanStack Query overrides.
parameters.address	UserFriendlyAddress | Address	Owner address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
parameters.network	Network	Network to read the jettons from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.limit	number	Maximum number of jettons to return.
parameters.offset	number	Number of jettons to skip before returning results — used for pagination.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseJettonsByAddressReturnType<selectData = GetJettonsByAddressData> — TanStack Query result for the jettons list.

Example

const {
    data: jettons,
    isLoading,
    error,
} = useJettonsByAddress({
    address: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
});

if (isLoading) {
    return <div>Loading...</div>;
}

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

return (
    <div>
        <h3>Jettons</h3>
        <ul>
            {jettons?.jettons.map((jetton) => (
                <li key={jetton.walletAddress}>
                    {jetton.info.name}: {jetton.balance}
                </li>
            ))}
        </ul>
    </div>
);

useTransferJetton

Transfer a jetton from the selected wallet in one step — derives the owner’s jetton-wallet from the master address, builds the transfer message, signs it through the wallet and broadcasts it. Call mutate with the jettonAddress (master), the recipientAddress, an amount (in jetton units as a human-readable decimal — converted into raw smallest units using jettonDecimals), the jettonDecimals itself and an optional comment. On success, data carries the BoC and normalized hash of the broadcast transaction. Throws Error('Wallet not connected') if no wallet is currently selected — TanStack Query surfaces it via the mutation’s error.

Parameter	Type	Description
parameters	UseTransferJettonParameters	TanStack Query mutation overrides.
parameters.mutation	MutationOptionsOverride	TanStack Query mutation options forwarded to useMutation (onSuccess, onError, onMutate, retry, …). mutationFn, mutationKey and throwOnError are managed by the wrapper.

Returns: UseTransferJettonReturnType<context = unknown> — Mutation result for the jetton transfer call.

Example

const { mutate: transfer, isPending, error } = useTransferJetton();

const handleTransfer = () => {
    transfer({
        recipientAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
        amount: '100', // 100 USDT
        jettonAddress: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs',
        jettonDecimals: 6,
    });
};

return (
    <div>
        <button onClick={handleTransfer} disabled={isPending}>
            {isPending ? 'Transferring...' : 'Transfer Jetton'}
        </button>
        {error && <div>Error: {error.message}</div>}
    </div>
);

useWatchJettons

Subscribe to jetton-balance updates for the currently selected wallet. Updates flow into the TanStack Query cache so useJettons picks up the new data automatically (use useWatchJettonsByAddress for a fixed address). Requires a streaming provider registered for the network — the hook exits silently with a console warning when none is configured.

Parameter	Type	Description
parameters	UseWatchJettonsParameters	Update callback and optional network override.
parameters.onChange	(update: JettonUpdate) => void	Callback fired on every jetton-balance update from the streaming provider.
parameters.network	Network	Network to watch on. Defaults to the selected wallet’s network.

Returns: void.

Example

const { data: jettons } = useJettons();

useWatchJettons();

return (
    <div>
        <h3>Your Jettons:</h3>
        <ul>
            {jettons?.jettons.map((j) => (
                <li key={j.walletAddress}>
                    {j.info.name}: {j.balance}
                </li>
            ))}
        </ul>
    </div>
);

useWatchJettonsByAddress

Subscribe to jetton-balance updates for an arbitrary owner address. Updates flow into the TanStack Query cache so useJettonsByAddress and useJettonBalanceByAddress pick up the new data automatically. Requires a streaming provider registered for the network — the hook exits silently with a console warning when none is configured.

Parameter	Type	Description
parameters*	UseWatchJettonsByAddressParameters	Owner address, update callback and optional network override.
parameters.address	UserFriendlyAddress | Address	Owner address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
parameters.onChange	(update: JettonUpdate) => void	Callback fired on every jetton-balance update from the streaming provider.
parameters.network	Network	Network to watch on. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.

Returns: void.

Example

const address = 'UQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJKZ';
const { data: jettons } = useJettonsByAddress({ address });

useWatchJettonsByAddress({ address });

return (
    <div>
        <h3>Jettons for {address}:</h3>
        <ul>
            {jettons?.jettons.map((j) => (
                <li key={j.walletAddress}>
                    {j.info.name}: {j.balance}
                </li>
            ))}
        </ul>
    </div>
);

NFTs

useNft

React hook reading metadata and ownership for a single NFT through TanStack Query, keyed by its contract address. data is null when the indexer has no record.

Parameter	Type	Description
parameters	UseNftParameters	NFT address, optional network override, and TanStack Query overrides.
parameters.address	UserFriendlyAddress | Address	NFT contract address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
parameters.network	Network	Network to query. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseNftReturnType<selectData = GetNftData> — TanStack Query result for the NFT read.

Example

const {
    data: nft,
    isLoading,
    error,
} = useNft({
    address: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
});

if (isLoading) {
    return <div>Loading...</div>;
}

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

return (
    <div>
        <h3>NFT Details</h3>
        <p>Name: {nft?.info?.name}</p>
        <p>Collection: {nft?.collection?.name}</p>
        <p>Owner: {nft?.ownerAddress}</p>
    </div>
);

useNfts

React hook that reads NFTs held by the currently selected wallet through TanStack Query — auto-resolves the wallet address (use useNftsByAddress for an arbitrary address).

Parameter	Type	Description
parameters	UseNFTsParameters	Optional pagination, network override, and TanStack Query overrides.
parameters.address	UserFriendlyAddress | Address	Owner address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
parameters.network	Network	Network to read NFTs from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.limit	number	Maximum number of NFTs to return.
parameters.offset	number	Number of NFTs to skip before returning results — used for pagination.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseNFTsReturnType<selectData = GetNFTsData> — TanStack Query result for the NFTs read.

Example

const {
    data: nfts,
    isLoading,
    error,
} = useNfts({
    limit: 10,
});

if (isLoading) {
    return <div>Loading...</div>;
}

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

return (
    <div>
        <h3>My NFTs</h3>
        <ul>
            {nfts?.nfts.map((nft) => (
                <li key={nft.address}>
                    {nft.info?.name} ({nft.collection?.name})
                </li>
            ))}
        </ul>
    </div>
);

useNftsByAddress

React hook that reads NFTs held by an arbitrary address through TanStack Query — useful for wallets that aren’t selected in AppKit (use useNfts for the selected wallet).

Parameter	Type	Description
parameters	UseNFTsByAddressParameters	Owner address, optional pagination and network override, plus TanStack Query overrides.
parameters.address	UserFriendlyAddress | Address	Owner address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
parameters.network	Network	Network to read NFTs from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.limit	number	Maximum number of NFTs to return.
parameters.offset	number	Number of NFTs to skip before returning results — used for pagination.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseNFTsByAddressReturnType<selectData = GetNFTsData> — TanStack Query result for the NFTs read.

Example

const {
    data: nfts,
    isLoading,
    error,
} = useNftsByAddress({
    address: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
    limit: 10,
});

if (isLoading) {
    return <div>Loading...</div>;
}

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

return (
    <div>
        <h3>NFTs</h3>
        <ul>
            {nfts?.nfts.map((nft) => (
                <li key={nft.address}>
                    {nft.info?.name} ({nft.collection?.name})
                </li>
            ))}
        </ul>
    </div>
);

useTransferNft

Transfer an NFT from the selected wallet in one step — builds the ownership-transfer message and broadcasts it. Call mutate with an nftAddress, the recipientAddress, an optional amount (the TON attached for gas — defaults to AppKit’s NFT gas-fee constant when omitted) and an optional comment. On success, data carries the BoC and normalized hash of the broadcast transaction. Throws Error('Wallet not connected') if no wallet is currently selected — TanStack Query surfaces it via the mutation’s error.

Parameter	Type	Description
parameters	UseTransferNftParameters	TanStack Query mutation overrides.
parameters.mutation	MutationOptionsOverride	TanStack Query mutation options forwarded to useMutation (onSuccess, onError, onMutate, retry, …). mutationFn, mutationKey and throwOnError are managed by the wrapper.

Returns: UseTransferNftReturnType<context = unknown> — Mutation result for the transfer call.

Example

const { mutate: transfer, isPending, error } = useTransferNft();

const handleTransfer = () => {
    transfer({
        nftAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
        recipientAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
        comment: 'Gift for you',
    });
};

return (
    <div>
        <button onClick={handleTransfer} disabled={isPending}>
            {isPending ? 'Transferring...' : 'Transfer NFT'}
        </button>
        {error && <div>Error: {error.message}</div>}
    </div>
);

Networks

useBlockNumber

React hook reading the latest masterchain seqno through TanStack Query — useful for freshness checks and pagination cursors.

Parameter	Type	Description
parameters	UseBlockNumberParameters	TanStack Query overrides and optional network.
parameters.network	Network	Network to query. Defaults to mainnet when omitted.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseBlockNumberReturnType<selectData = GetBlockNumberData> — TanStack Query result for the seqno read.

useDefaultNetwork

Read and write AppKit’s default network — the network connectors use for new wallet connections. Returns a useState-style tuple. The read side updates when the default changes through any source (this hook, setDefaultNetwork, manager events).

Returns: UseDefaultNetworkReturnType — Tuple [network, setNetwork].

useNetwork

Read the Network the selected wallet is connected to. Updates when the wallet’s network changes (e.g. user switches mainnet/testnet inside the wallet).

Returns: UseNetworkReturnType — Selected wallet’s network, or undefined when no wallet is selected.

useNetworks

Read the list of networks configured on AppKit. Updates when AppKitNetworkManager adds, replaces or drops a network.

Returns: UseNetworksReturnType — Array of configured Networks.

Settings

useAppKit

Read the AppKit instance hosted by AppKitProvider. Throws when the hook is rendered outside the provider tree.

Returns: AppKit — The AppKit instance shared with descendant hooks/components.

useAppKitTheme

State hook that mirrors the active appkit-react theme to document.body[data-ta-theme] — returns a [theme, setTheme] tuple just like useState.

Returns: readonly [string, Dispatch<SetStateAction<string>>] — Tuple [theme, setTheme] for reading and switching the active theme.

useI18n

Read the i18n context published by I18nProvider (or the wrapping AppKitProvider). Returns the active locale, translation function and helpers to switch locales or merge dictionaries. Throws when rendered outside the provider tree.

Returns: I18nContextType — The i18n context (I18nContextType) with activeLocale, t, locale and addDict.

Signing

useSignBinary

Ask the selected wallet to sign an opaque binary blob (Base64-encoded), without on-chain structure. Call mutate from an event handler with the bytes to sign and an optional network override. On success, data carries the signature plus the signer address, timestamp and dApp domain the wallet bound to the signature. Throws Error('Wallet not connected') if no wallet is currently selected — TanStack Query surfaces it via the mutation’s error.

Parameter	Type	Description
parameters	UseSignBinaryParameters	TanStack Query mutation overrides.
parameters.mutation	MutationOptionsOverride	TanStack Query mutation options forwarded to useMutation (onSuccess, onError, onMutate, retry, …). mutationFn, mutationKey and throwOnError are managed by the wrapper.

Returns: UseSignBinaryReturnType<context = unknown> — Mutation result for the signing call.

useSignCell

Ask the selected wallet to sign a TON cell — typically so the signature can later be verified on-chain by a contract. Call mutate from an event handler with the cell content, a TL-B-style schema (used by the wallet to render the payload to the user before signing) and an optional network override. On success, data carries the signature plus the signer address, timestamp and dApp domain. Throws Error('Wallet not connected') if no wallet is currently selected — TanStack Query surfaces it via the mutation’s error.

Parameter	Type	Description
parameters	UseSignCellParameters	TanStack Query mutation overrides.
parameters.mutation	MutationOptionsOverride	TanStack Query mutation options forwarded to useMutation (onSuccess, onError, onMutate, retry, …). mutationFn, mutationKey and throwOnError are managed by the wrapper.

Returns: UseSignCellReturnType<context = unknown> — Mutation result for the signing call.

useSignText

Ask the selected wallet to sign a plain-text message — useful for off-chain login proofs and signed challenges. Call mutate from an event handler with the text to sign and an optional network override. On success, data carries the signature plus the canonicalized signer address, timestamp and dApp domain the wallet bound to the signature. Throws Error('Wallet not connected') if no wallet is currently selected — TanStack Query surfaces it via the mutation’s error.

Parameter	Type	Description
parameters	UseSignTextParameters	TanStack Query mutation overrides.
parameters.mutation	MutationOptionsOverride	TanStack Query mutation options forwarded to useMutation (onSuccess, onError, onMutate, retry, …). mutationFn, mutationKey and throwOnError are managed by the wrapper.

Returns: UseSignTextReturnType<context = unknown> — Mutation result for the signing call.

Staking

useBuildStakeTransaction

Build a stake/unstake TransactionRequest from a StakingQuote (obtained via useStakingQuote) without sending it — lets the UI inspect, batch, or pass the request to useSendTransaction separately. Call mutate(params) where params matches BuildStakeTransactionOptions (quote + user address, optional provider override). The resulting TransactionRequest is in data once the mutation resolves.

Returns: UseBuildStakeTransactionReturnType<context = unknown> — Mutation result for the build call.

useStakedBalance

React hook reading a user’s staked balance from a staking provider through TanStack Query — total staked plus, depending on the provider, any instant-unstake balance available right now. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.

Parameter	Type	Description
parameters	UseStakedBalanceParameters	Owner address, optional providerId, optional network override, and TanStack Query overrides.
parameters.userAddress	UserFriendlyAddress	Owner whose staked balance should be read.
parameters.network	Network	Network to query. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.providerId	string	Provider to query. Defaults to the registered default staking provider.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseStakedBalanceReturnType<selectData = GetStakedBalanceData> — TanStack Query result for the staked-balance read.

useStakingContext

Reads the StakingContextType from the nearest StakingWidgetProvider (or StakingWidget). Outside a provider, returns the default context (empty inputs, no-op actions) so a custom UI can still mount without crashing.

Returns: StakingContextType.

useStakingProvider

React hook returning a registered staking provider. Subscribes to provider-registry changes via watchStakingProviders and looks up by id, or returns the registered default when no id is given. Returns undefined when no provider matches and no default has been registered (where the underlying getStakingProvider action would throw).

Parameter	Type	Description
parameters	UseStakingProviderParameters	Optional provider id.
parameters.id	string	Provider ID to look up. When omitted, returns the registered default staking provider.

Returns: UseStakingProviderReturnType — Matching staking provider instance, or undefined when none resolves.

useStakingProviderInfo

React hook reading live staking-pool info for a provider through TanStack Query — APY, instant-unstake liquidity and (for liquid staking) the current exchange rate. Use useStakingProviderMetadata for static metadata (name, stake/receive tokens, supported unstake modes). Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.

Parameter	Type	Description
parameters	UseStakingProviderInfoParameters	Optional providerId, network override, and TanStack Query overrides.
parameters.network	Network	Network whose staking pool should be inspected. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.providerId	string	Provider to query. Defaults to the registered default staking provider.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseStakingProviderInfoReturnType<selectData = GetStakingProviderInfoData> — TanStack Query result for the live provider info.

useStakingProviderMetadata

Read static metadata for a staking provider — display name, stake/receive tokens, supported unstake modes and contract address. Returns undefined when no provider matches and no default is registered. Use useStakingProviderInfo for live values (APY, instant-unstake liquidity, exchange rate). Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.

Parameter	Type	Description
parameters	UseStakingProviderMetadataParameters	Optional providerId and network override.
parameters.network	Network	Network whose provider metadata should be read. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
parameters.providerId	string	Provider to query. Defaults to the registered default staking provider.

Returns: StakingProviderMetadata | undefined — Static StakingProviderMetadata, or undefined when the provider can’t be resolved.

useStakingProviders

React hook returning every staking provider registered on the AppKit instance (both those passed via config and those added later). Subscribes to provider-registry changes via watchStakingProviders.

Returns: UseStakingProvidersReturnType — Array of registered staking providers.

useStakingQuote

Quote a stake or unstake — given an amount, direction ('stake' / 'unstake') and the target asset, returns the rate, expected output and the provider-specific metadata required to feed useBuildStakeTransaction. data is the StakingQuote payload. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.

Parameter	Type	Description
parameters	UseStakingQuoteParameters	Quote parameters, optional providerId, optional network override, and TanStack Query overrides.
parameters.direction	StakingQuoteDirection	Direction of the quote (stake or unstake)
parameters.amount	string	Amount of tokens to stake or unstake.
parameters.userAddress	UserFriendlyAddress	Address of the user.
parameters.network	Network	Network on which the staking will be executed.
parameters.unstakeMode	UnstakeModes	Unstake-timing mode the quote should target — see UnstakeMode for the supported flavours ('INSTANT', 'WHEN_AVAILABLE', 'ROUND_END'). Only meaningful when direction === 'unstake' and the provider lists the mode in supportedUnstakeModes.
parameters.isReversed	boolean	If true, for unstake requests the amount is specified in the staking coin (e.g. TON) instead of the Liquid Staking Token (e.g. tsTON).
parameters.providerOptions	TProviderOptions = unknown	Provider-specific options.
parameters.providerId	string	Provider to quote against. Defaults to the registered default staking provider.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseStakingQuoteReturnType<selectData = GetStakingQuoteData> — TanStack Query result for the quote read.

Swap

useBuildSwapTransaction

Build a swap TransactionRequest from a SwapQuote (obtained via useSwapQuote) without sending it — lets the UI inspect, batch, or pass the request to useSendTransaction separately. Call mutate(params) where params matches BuildSwapTransactionOptions (quote, user address, optional slippage/deadline overrides). The resulting TransactionRequest is in data once the mutation resolves.

Parameter	Type	Description
parameters	UseBuildSwapTransactionParameters	TanStack Query mutation overrides.
parameters.mutation	MutationOptionsOverride	TanStack Query mutation options forwarded to useMutation (onSuccess, onError, onMutate, retry, …). mutationFn, mutationKey and throwOnError are managed by the wrapper.

Returns: UseBuildSwapTransactionReturnType<context = unknown> — Mutation result for the build call.

useSwapContext

Reads the SwapContextType populated by the nearest SwapWidgetProvider (or the SwapWidget that mounts one). Outside a provider it returns the no-op default value.

Returns: SwapContextType.

useSwapProvider

Read and switch the default swap provider — subscribes to watchSwapProviders and re-reads via getSwapProvider. Returns a useState-style tuple. The read swallows the throw from getSwapProvider (which throws when no provider matches — or when no id is passed and no default has been registered) and yields undefined instead.

Returns: UseSwapProviderReturnType — Tuple [provider, setProviderId].

useSwapProviders

List every swap provider registered on the AppKit instance (both those passed via AppKitConfig’s providers and those added later through registerProvider). Subscribes to watchSwapProviders and re-reads via getSwapProviders so the array stays in sync.

Returns: UseSwapProvidersReturnType — Array of registered swap providers.

useSwapQuote

Quote a swap — given source/target tokens and an amount, returns the rate, expected output and the provider-specific metadata required to feed useBuildSwapTransaction. data is the SwapQuote payload. The network field defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.

Parameter	Type	Description
parameters	UseSwapQuoteParameters	Source and target tokens, amount, optional network/provider override, and TanStack Query overrides.
parameters.amount	string	Amount of tokens to swap (incoming or outgoing depending on isReverseSwap)
parameters.from	SwapToken	Token to swap from.
parameters.to	SwapToken	Token to swap to.
parameters.network	Network	Network on which the swap will be executed.
parameters.slippageBps	number	Slippage tolerance in basis points (1 bp = 0.01%)
parameters.maxOutgoingMessages	number	Maximum number of outgoing messages
parameters.providerOptions	TProviderOptions = unknown	Provider-specific options.
parameters.isReverseSwap	boolean	If true, amount is the amount to receive (buy). If false, amount is the amount to spend (sell).
parameters.providerId	string	Provider to quote against. Defaults to the registered default swap provider.
parameters.query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

Returns: UseSwapQuoteReturnType<selectData = GetSwapQuoteData> — TanStack Query result for the swap quote.

Transactions

useSendTransaction

Hand a pre-built TransactionRequest to the selected wallet for signing and broadcast — typically the second step after a buildX / createX action (e.g. useBuildSwapTransaction, useBuildStakeTransaction) produces the request. Call mutate(request). On success, data carries the BoC and normalized hash of the broadcast transaction. Throws Error('Wallet not connected') if no wallet is currently selected — TanStack Query surfaces it via the mutation’s error.

Parameter	Type	Description
parameters	UseSendTransactionParameters	TanStack Query mutation overrides.
parameters.mutation	MutationOptionsOverride	TanStack Query mutation options forwarded to useMutation (onSuccess, onError, onMutate, retry, …). mutationFn, mutationKey and throwOnError are managed by the wrapper.

Returns: UseSendTransactionReturnType<context = unknown> — Mutation result for the send call.

useTransactionStatus

Poll the status of a sent transaction by its BoC or normalized hash. In TON a single external message triggers a tree of internal messages, so the transaction is 'completed' only once the entire trace finishes — pair with refetchInterval to keep polling until data.status is 'completed' or 'failed'. Pass either boc or normalizedHash (not both). The underlying action throws Error('Either boc or normalizedHash must be provided') when neither is supplied — TanStack Query surfaces it via the query’s error.

Parameter	Type	Description
parameters*	UseTransactionStatusParameters	boc xor normalizedHash, optional network and TanStack Query overrides.

Returns: UseTransactionStatusReturnType<selectData = GetTransactionStatusData> — TanStack Query result for the status read.

useTransferTon

Send TON from the selected wallet in one step — builds the transfer message, hands it to the wallet for signing and broadcasts it. Call mutate with a recipientAddress, an amount (in TON as a human-readable decimal, converted to nano-TON internally) and any of the optional comment / payload / stateInit fields. On success, data carries the BoC and normalized hash of the broadcast transaction — pair with useTransactionStatus to poll the trace to completion. Throws Error('Wallet not connected') if no wallet is currently selected — TanStack Query surfaces it via the mutation’s error.

Parameter	Type	Description
parameters	UseTransferTonParameters	TanStack Query mutation overrides.
parameters.mutation	MutationOptionsOverride	TanStack Query mutation options forwarded to useMutation (onSuccess, onError, onMutate, retry, …). mutationFn, mutationKey and throwOnError are managed by the wrapper.

Returns: UseTransferTonReturnType<context = unknown> — Mutation result for the transfer call.

useWatchTransactions

Subscribe to incoming-transaction events for the currently selected wallet (use useWatchTransactionsByAddress for a fixed address). Auto-rebinds when the user connects, switches or disconnects. Requires a streaming provider registered for the network — the hook exits silently with a console warning when none is configured.

Parameter	Type	Description
parameters	UseWatchTransactionsParameters	Update callback.
parameters.onChange	(update: TransactionsUpdate) => void	Callback fired on every transactions update from the streaming provider.

Returns: void.

Example

const [lastUpdate, setLastUpdate] = useState<TransactionsUpdate | null>(null);

useWatchTransactions({
    onChange: (update) => {
        setLastUpdate(update);
    },
});

return (
    <div>
        {lastUpdate ? (
            <div>
                Last update for: {lastUpdate.address}
                <br />
                Transactions count: {lastUpdate.transactions.length}
            </div>
        ) : (
            'Waiting for transactions...'
        )}
    </div>
);

useWatchTransactionsByAddress

Subscribe to incoming-transaction events for an arbitrary address (use useWatchTransactions for the selected wallet). Requires a streaming provider registered for the network — the hook exits silently with a console warning when none is configured.

Parameter	Type	Description
parameters*	UseWatchTransactionsByAddressParameters	Address, update callback and optional network override.
parameters.address	UserFriendlyAddress | Address	Address to watch — pass a UserFriendlyAddress string or an Address instance from @ton/core.
parameters.onChange	(update: TransactionsUpdate) => void	Callback fired on every transactions update from the streaming provider.
parameters.network	Network	Network to watch on. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.

Returns: void.

Example

const address = 'UQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJKZ';
const [lastUpdate, setLastUpdate] = useState<TransactionsUpdate | null>(null);

useWatchTransactionsByAddress({
    address,
    onChange: (update) => {
        setLastUpdate(update);
    },
});

return (
    <div>
        {lastUpdate ? (
            <div>
                New transactions for: {lastUpdate.address}
                <br />
                Count: {lastUpdate.transactions.length}
            </div>
        ) : (
            'Waiting for transactions...'
        )}
    </div>
);

Wallets

useAddress

Read the user-friendly address of the currently selected wallet. Updates when the selection changes.

Returns: UseAddressReturnType — Selected wallet’s address, or undefined when none is selected.

useConnect

Open a registered connector’s connection flow (e.g., the TonConnect modal) and await its completion. Call mutate from a Connect button with the connectorId of the connector to drive. Once the user finishes the flow the new wallet becomes available via useSelectedWallet / useConnectedWallets. Throws Error('Connector with id "<id>" not found') when no connector with that id is registered — TanStack Query surfaces it via the mutation’s error.

Parameter	Type	Description
parameters	UseConnectParameters	TanStack Query mutation overrides.
parameters.mutation	MutationOptionsOverride	TanStack Query mutation options forwarded to useMutation (onSuccess, onError, onMutate, retry, …). mutationFn, mutationKey and throwOnError are managed by the wrapper.

Returns: UseConnectReturnType<context = unknown> — Mutation result for the connect call.

useConnectedWallets

Read the list of currently connected wallets across all registered connectors. Updates when a wallet connects or disconnects.

Returns: UseConnectedWalletsReturnType — Read-only array of WalletInterfaces.

useDisconnect

Tear down the session on a registered connector, disconnecting whichever wallet it currently holds. Call mutate from a Log out / Disconnect button with the connectorId of the connector to tear down. Once it resolves the wallet drops out of useSelectedWallet / useConnectedWallets. Throws Error('Connector with id "<id>" not found') when no connector with that id is registered — TanStack Query surfaces it via the mutation’s error.

Parameter	Type	Description
parameters	UseDisconnectParameters	TanStack Query mutation overrides.
parameters.mutation	MutationOptionsOverride	TanStack Query mutation options forwarded to useMutation (onSuccess, onError, onMutate, retry, …). mutationFn, mutationKey and throwOnError are managed by the wrapper.

Returns: UseDisconnectReturnType<context = unknown> — Mutation result for the disconnect call.

useSelectedWallet

Read and switch the wallet that AppKit treats as active — most action hooks (useBalance, useSignText, useTransferTon) target this wallet implicitly. Returns a useState-style tuple.

Returns: UseSelectedWalletReturnType — Tuple [wallet, setWalletId].

Component

Balances

SendJettonButton

Pre-wired button that builds a jetton transfer with createTransferJettonTransaction and dispatches it through the standard Send flow on click — disabled until recipientAddress, amount, jetton.address and jetton.decimals are all set. Throws inside the click handler when jetton.address or jetton.decimals is missing.

Prop	Type	Description
recipientAddress*	string	Recipient address.
amount*	string	Amount in jetton units as a human-readable decimal string. Converted to raw smallest units via jetton.decimals.
jetton*	{ address: string; symbol: string; decimals: number; }	Jetton master metadata — address (master contract), symbol (rendered in the button label) and decimals (used to format amount).
comment	string	Optional human-readable comment attached to the transfer.
text	ReactNode	Override the button label. Defaults to “Send”.
size	ButtonSize	Size class applied to the button. Pass 'unset' to skip the size class entirely (no padding, no typography) — useful with variant="unstyled".
borderRadius	ButtonBorderRadius	Border radius token. Defaults to a size-dependent value (s → 2xl, m → l, l → xl).
variant	ButtonVariant	Visual variant. Use 'unstyled' to opt out of all built-in styling — the consumer is fully responsible for visuals via className. The Button still provides ref forwarding, disabled/loading plumbing, and icon/children rendering.
loading	boolean	When true, renders a spinner instead of icon/children and disables the button.
fullWidth	boolean	When true, the button stretches to fill its container width.
icon	ReactNode	Optional leading icon rendered before children when not loading.
children	(props: SendRenderProps) => ReactNode	Custom render function — replaces the default button with the caller’s UI. Receives the current send state and click handler via SendRenderProps.
onError	(error: Error) => void	Called when the wallet rejects the request or the send fails. Receives the raised Error.
onSuccess	(response: SendTransactionReturnType) => void	Called once the transaction is broadcast. Receives the wallet’s SendTransactionReturnType (BoC + normalized hash).

Example

return (
    <SendJettonButton
        recipientAddress="EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c"
        amount="5" // 5 USDT (human-readable format)
        comment="Payment for services"
        jetton={{
            address: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs', // USDT
            symbol: 'USDT',
            decimals: 6,
        }}
        onSuccess={(result) => console.log('Transaction sent:', result)}
        onError={(error) => console.error('Transaction failed:', error)}
    />
);

SendTonButton

Pre-wired button that builds a TON transfer with createTransferTonTransaction and dispatches it through the standard Send flow on click — disabled until both recipientAddress and amount are set.

Prop	Type	Description
recipientAddress*	string	Recipient address.
amount*	string	Amount in TON as a human-readable decimal string (e.g., "1.5"). Converted to nano-TON internally.
comment	string	Optional human-readable comment attached to the transfer.
text	ReactNode	Override the button label. Defaults to “Send”.
size	ButtonSize	Size class applied to the button. Pass 'unset' to skip the size class entirely (no padding, no typography) — useful with variant="unstyled".
borderRadius	ButtonBorderRadius	Border radius token. Defaults to a size-dependent value (s → 2xl, m → l, l → xl).
variant	ButtonVariant	Visual variant. Use 'unstyled' to opt out of all built-in styling — the consumer is fully responsible for visuals via className. The Button still provides ref forwarding, disabled/loading plumbing, and icon/children rendering.
loading	boolean	When true, renders a spinner instead of icon/children and disables the button.
fullWidth	boolean	When true, the button stretches to fill its container width.
icon	ReactNode	Optional leading icon rendered before children when not loading.
children	(props: SendRenderProps) => ReactNode	Custom render function — replaces the default button with the caller’s UI. Receives the current send state and click handler via SendRenderProps.
onError	(error: Error) => void	Called when the wallet rejects the request or the send fails. Receives the raised Error.
onSuccess	(response: SendTransactionReturnType) => void	Called once the transaction is broadcast. Receives the wallet’s SendTransactionReturnType (BoC + normalized hash).

Example

return (
    <SendTonButton
        recipientAddress="EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c"
        amount="1" // 1 TON (human-readable format)
        comment="Hello from AppKit"
        onSuccess={(result) => console.log('Transaction sent:', result)}
        onError={(error) => console.error('Transaction failed:', error)}
    />
);

Crypto Onramp

CryptoOnrampWidget

Drop-in widget for buying TON-side tokens with a crypto payment from another chain — wraps CryptoOnrampWidgetProvider (which drives token/method selection, quote fetching, deposit creation and status polling) around CryptoOnrampWidgetUI. Pass a children render function to swap in a fully custom UI while keeping the same provider state.

Prop	Type	Description
children	(props: CryptoOnrampWidgetRenderProps) => ReactNode	Custom render function. When provided, replaces the default CryptoOnrampWidgetUI and is called with the full CryptoOnrampWidgetRenderProps (context state, actions and forwarded <div> props), so callers can build a fully custom UI on top of the same provider.
tokens	CryptoOnrampToken[]	Target tokens (what the user buys on TON). Defaults to a built-in list.
tokenSections	CryptoOnrampTokenSectionConfig[]	Optional section configs grouping tokens in the picker.
paymentMethods	CryptoPaymentMethod[]	Source crypto payment methods (what the user pays with on another chain). Defaults to a built-in list.
methodSections	PaymentMethodSectionConfig[]	Optional section configs grouping paymentMethods in the picker.
chains	Record<string, ChainInfo>	Custom CAIP-2 → chain display info overrides. Merged on top of the built-in defaults, so consumers only need to provide what they want to override or add — for example, a single entry keyed by 'eip155:42161' with a name of 'Arbitrum' and a logo URL.
defaultTokenId	string	ID of the target token pre-selected on mount.
defaultMethodId	string	ID of the source payment method pre-selected on mount.

Example

// Uses built-in defaults for tokens, payment methods and chain display info.
// Make sure a crypto-onramp provider (Layerswap / swaps.xyz) is registered on AppKit.
return <CryptoOnrampWidget defaultTokenId="ton" />;

CryptoOnrampWidgetProvider

Context provider that powers the crypto-to-TON onramp widget — wires together token/method selection state, quote fetching (useCryptoOnrampQuote), deposit creation (useCreateCryptoOnrampDeposit), deposit status polling (useCryptoOnrampStatus), the target-token balance and validation. Consumers read the state via useCryptoOnrampContext.

Prop	Type	Description
tokens	CryptoOnrampToken[]	Target tokens (what the user buys on TON). Defaults to a built-in list.
tokenSections	CryptoOnrampTokenSectionConfig[]	Optional section configs grouping tokens in the picker.
paymentMethods	CryptoPaymentMethod[]	Source crypto payment methods (what the user pays with on another chain). Defaults to a built-in list.
methodSections	PaymentMethodSectionConfig[]	Optional section configs grouping paymentMethods in the picker.
chains	Record<string, ChainInfo>	Custom CAIP-2 → chain display info overrides. Merged on top of the built-in defaults, so consumers only need to provide what they want to override or add — for example, a single entry keyed by 'eip155:42161' with a name of 'Arbitrum' and a logo URL.
defaultTokenId	string	ID of the target token pre-selected on mount.
defaultMethodId	string	ID of the source payment method pre-selected on mount.

CryptoOnrampWidgetUI

Presentational UI for the crypto-to-TON onramp widget — renders the from/to selectors, amount input with presets, continue button, info block (you-get / balance / provider) and the token-pick / method-pick / refund-address / deposit modals. All state and actions come from props (CryptoOnrampWidgetRenderProps). Typically rendered inside CryptoOnrampWidgetProvider via CryptoOnrampWidget.

Prop	Type	Description
tokens*	CryptoOnrampToken[]	Full list of target tokens the user can buy.
tokenSections	CryptoOnrampTokenSectionConfig[]	Optional section configs grouping tokens in the picker.
selectedToken*	CryptoOnrampToken | null	Currently selected target token to buy. null until tokens load.
setSelectedToken*	(token: CryptoOnrampToken) => void	Updates selectedToken.
paymentMethods*	CryptoPaymentMethod[]	Available source crypto payment methods.
methodSections	PaymentMethodSectionConfig[]	Optional section configs grouping paymentMethods in the picker.
selectedMethod*	CryptoPaymentMethod	Currently selected source payment method.
setSelectedMethod*	(method: CryptoPaymentMethod) => void	Updates selectedMethod.
chains*	Record<string, ChainInfo>	CAIP-2 → chain display info map (built-in defaults merged with consumer overrides).
amount*	string	Current amount input value as a decimal string.
setAmount*	(value: string) => void	Updates amount.
amountInputMode*	CryptoAmountInputMode	Which side amount is denominated in — see CryptoAmountInputMode.
setAmountInputMode*	(mode: CryptoAmountInputMode) => void	Updates amountInputMode.
convertedAmount*	string	Other side of amount after applying the current quote’s rate.
presetAmounts*	OnrampAmountPreset[]	Quick-pick amount buttons rendered in the widget.
quote*	CryptoOnrampQuote | null	Current quote, or null if not yet fetched / invalidated.
isLoadingQuote*	boolean	Whether a quote is in flight (includes the input-debounce window).
quoteError*	string | null	Quote-side validation/fetch error as an i18n key, or null.
quoteProviderName*	string | null	Display name of the provider behind the current quote, when available.
deposit*	CryptoOnrampDeposit | null	Current deposit returned by the provider once createDeposit succeeded.
isCreatingDeposit*	boolean	Whether createDeposit is in flight.
depositError*	string | null	Deposit-side error as an i18n key, or null.
depositAmount*	string	Formatted deposit amount the user must send on the source chain.
createDeposit*	() => void	Triggers deposit creation from the current quote.
depositStatus*	CryptoOnrampStatus | null	Latest deposit status polled via useCryptoOnrampStatus, or null.
isRefundAddressRequired*	boolean	Whether the current quote provider requires a refund address before deposit.
isReversedAmountSupported*	boolean	Whether the current quote provider supports reversed (target-amount) input.
refundAddress*	string	Refund address the user typed, if isRefundAddressRequired.
setRefundAddress*	(address: string) => void	Updates refundAddress.
targetBalance*	string	Connected wallet’s balance of the selected target token (formatted, token units).
isLoadingTargetBalance*	boolean	Whether the target token balance is being fetched.
isWalletConnected*	boolean	Whether a TON wallet is currently connected.
canContinue*	boolean	Whether the user can proceed — valid amount, quote available, and wallet connected.
onReset*	() => void	Invalidates the active quote and clears the deposit, returning the widget to its initial state.

NFTs

NftItem

Card-style button rendering an NFT’s image, name and collection name with an “On Sale” badge when applicable — falls back to a placeholder icon when the image is missing or fails to load.

Prop	Type	Description
nft*	NFT	NFT to render — name, collection name, image and on-sale state are derived via getFormattedNftInfo.

Example

return <NftItem nft={sampleNft} onClick={() => console.log('NFT clicked')} />;

Providers

AppKitProvider

Top-level React provider that wires AppKit, the TonConnect bridge and i18n into the component tree — wrap your app once near the root so descendant hooks (useAppKit, useBalance, …) and components can resolve their context.

Prop	Type	Description
appKit*	AppKit	Runtime instance constructed at app startup. Shared across every appkit-react hook and component.

Example

return (
    <AppKitProvider appKit={appKit}>
        <h1>My App</h1>
        {/* Your App Content */}
    </AppKitProvider>
);

I18nProvider

React provider that mounts the i18n context for useI18n and child components — already wrapped by AppKitProvider, so apps usually only render it directly when they need to override the locale or dictionaries.

Prop	Type	Description
locale	string	Initial locale code. Defaults to the i18n library’s default when omitted.
lngDicts	Record<string, Dict>	Translation dictionaries keyed by locale. Loaded into the underlying i18n instance on mount.

Example

// Override the locale. Pass `lngDicts` with your own translations when you need them.
return (
    <I18nProvider locale="en">
        <div>My App</div>
    </I18nProvider>
);

Shared

AmountPresets

Horizontal row of preset amount buttons — typically used next to an amount input to offer quick fills.

Prop	Type	Description
presets*	AmountPreset[]	Preset buttons to render, in order.
currencySymbol	string	Optional symbol (e.g., "$") prepended to each preset label.
onPresetSelect*	(value: string) => void	Called with the selected preset’s amount unless the preset defines its own onSelect.

Example

return (
    <div>
        <input value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="Amount" />
        <AmountPresets presets={presets} currencySymbol="$" onPresetSelect={setAmount} />
    </div>
);

CopyButton

Icon-only button that copies value to the clipboard on click and flips its icon to a checkmark for a short confirmation window.

Prop	Type	Description
value*	string	Text written to the clipboard when the button is clicked.
aria-label*	string	Accessible label for screen readers.

Example

return <CopyButton value="EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c" aria-label="Copy wallet address" />;

CurrencyItem

Compound row used inside currency/token select lists: shows a token logo, name + ticker, optional verified badge, and an optional balance / under-balance on the right. Pass top-level props for the default layout, or pass children made of the sub-components for full control.

Members

Member	Description
CurrencyItem.Container	Root <button> wrapper — receives all native button props.
CurrencyItem.Logo	Token logo cell rendered as a 40px Logo.
CurrencyItem.Info	Vertical block holding the CurrencyItem.Header and CurrencyItem.Ticker.
CurrencyItem.VerifiedBadge	Verified checkmark badge — rendered next to the name when isVerified is set.
CurrencyItem.Header	Top line of Info (name + verified badge).
CurrencyItem.Name	Primary text line — defaults to the token name, falling back to the ticker when no name is provided.
CurrencyItem.Ticker	Secondary text line — renders the ticker, and when both ticker and name are present appends • followed by the name.
CurrencyItem.RightSide	Right-aligned column for balance values.
CurrencyItem.MainBalance	Primary balance number (top of RightSide).
CurrencyItem.UnderBalance	Secondary balance value (e.g., fiat) shown under MainBalance.

Example

// Top-level props give you the default layout in one line.
return (
    <CurrencyItem
        ticker="USDT"
        name="Tether USD"
        icon="https://cdn.example.com/usdt.png"
        balance="1,234.56"
        underBalance="≈ $1,234.56"
        isVerified
        onClick={() => console.log('Picked USDT')}
    />
);

CurrencySelect

Compound currency-select primitives — compose CurrencySelect.Modal with a CurrencySelect.Search and CurrencySelect.ListContainer of CurrencySelect.Section rows to build a custom token picker. For a ready-made implementation see TokenSelectModal.

Members

Member	Description
CurrencySelect.Modal	Modal wrapper.
CurrencySelect.Search	Auto-focused search input row.
CurrencySelect.ListContainer	Scrollable list area with built-in empty state.
CurrencySelect.SectionHeader	Header label rendered above a section.
CurrencySelect.Section	Container for a group of currency rows.

LowBalanceModal

Modal shown when a transaction would leave insufficient TON to cover fees — adapts its body and buttons to the LowBalanceMode.

Prop	Type	Description
open*	boolean	Controls visibility of the modal.
mode*	LowBalanceMode	reduce — user can fix it by reducing the amount (shows Change/Cancel). topup — reducing doesn’t help, user must top up TON (shows Close only).
requiredTon*	string	Required amount in TON, formatted as a decimal string (e.g. "0.423").
onChange*	() => void	Called when the user clicks the primary “Change” action (only in reduce mode).
onCancel*	() => void	Called when the user dismisses the modal (Cancel, Close, or backdrop click).

Example

return (
    <LowBalanceModal
        open={open}
        mode="reduce"
        requiredTon="0.423"
        onChange={() => {
            console.log('Reduce amount to fit balance');
            setOpen(false);
        }}
        onCancel={() => setOpen(false)}
    />
);

OptionSwitcher

Compact dropdown selector — renders the current option’s label and a chevron, opening a Select popover with the remaining choices. Falls back to the raw value or "—" when no option matches.

Prop	Type	Description
value*	string | undefined	Currently selected option value.
options*	OptionSwitcherOption[]	Available options.
onChange*	(value: string) => void	Called when the user picks an option.
disabled	boolean	When true, the trigger is non-interactive and dimmed.
className	string	Extra class applied to the trigger button.

Example

return <OptionSwitcher value={value} options={options} onChange={setValue} />;

SettingsButton

Icon-only secondary button with a sliders icon — drop-in trigger for opening settings panels.

Prop	Type	Description
onClick	() => void	Click handler — typically used to open a settings modal.
size	ButtonSize	Size class applied to the button. Pass 'unset' to skip the size class entirely (no padding, no typography) — useful with variant="unstyled".
borderRadius	ButtonBorderRadius	Border radius token. Defaults to a size-dependent value (s → 2xl, m → l, l → xl).
variant	ButtonVariant	Visual variant. Use 'unstyled' to opt out of all built-in styling — the consumer is fully responsible for visuals via className. The Button still provides ref forwarding, disabled/loading plumbing, and icon/children rendering.
loading	boolean	When true, renders a spinner instead of icon/children and disables the button.
fullWidth	boolean	When true, the button stretches to fill its container width.
icon	ReactNode	Optional leading icon rendered before children when not loading.

Example

return <SettingsButton onClick={() => console.log('Open settings')} />;

TokenSelectModal

Ready-made token picker modal — renders a search field and a sectioned list of CurrencyItem rows backed by CurrencySelect. Search matches by symbol, name, or exact address. Selecting a row fires onSelect, closes the modal, and resets the search.

Prop	Type	Description
open*	boolean	Controls modal visibility.
onClose*	() => void	Called when the modal is dismissed (selection, backdrop click, or escape).
tokens*	T = AppkitUIToken[]	Full set of tokens available for selection and search.
tokenSections	TokenSectionConfig[]	Optional sectioning rules. When omitted, all tokens render as a single untitled section.
onSelect*	(token: T = AppkitUIToken) => void	Called with the picked token. The modal closes and resets its search on selection.
title*	string	Modal header title.
searchPlaceholder	string	Placeholder shown inside the search input.

Example

return (
    <TokenSelectModal
        open={open}
        onClose={() => setOpen(false)}
        tokens={tokens}
        title="Select a token"
        searchPlaceholder="Search by name or address"
        onSelect={(token) => {
            console.log('Picked:', token.symbol);
            setOpen(false);
        }}
    />
);

TokenSelector

Compact pill button used as the trigger for a token picker — shows the token icon (optionally with a network badge), its symbol, and a chevron unless readOnly is set.

Prop	Type	Description
title*	string	Label shown next to the icon — typically the token symbol.
icon	string	Token logo URL.
iconFallback	string	Single-character fallback used when icon fails to load. Defaults to the first character of title.
networkIcon	string	When provided, renders a network badge overlay on the icon.
readOnly	boolean	Hide chevron and suppress click handling — use when there’s nothing to pick.
size	ButtonSize	Size class applied to the button. Pass 'unset' to skip the size class entirely (no padding, no typography) — useful with variant="unstyled".
borderRadius	ButtonBorderRadius	Border radius token. Defaults to a size-dependent value (s → 2xl, m → l, l → xl).
variant	ButtonVariant	Visual variant. Use 'unstyled' to opt out of all built-in styling — the consumer is fully responsible for visuals via className. The Button still provides ref forwarding, disabled/loading plumbing, and icon/children rendering.
loading	boolean	When true, renders a spinner instead of icon/children and disables the button.
fullWidth	boolean	When true, the button stretches to fill its container width.

Example

return (
    <TokenSelector
        title="TON"
        icon="https://ton.org/download/ton_symbol.png"
        iconFallback="T"
        onClick={() => console.log('Open token picker')}
    />
);

Staking

SelectUnstakeMode

Collapsible selector for the unstake mode (instant / round-end / when-available). Filters options by providerMetadata.supportedUnstakeModes and renders nothing when only one mode is supported. Annotates the instant option with the provider’s current instant-unstake limit.

Prop	Type	Description
value*	UnstakeModes	Currently selected unstake mode (see UnstakeMode).
onValueChange*	(mode: UnstakeModes) => void	Called when the user picks a different mode.
providerInfo*	StakingProviderInfo | undefined	Dynamic provider info — used to show the instant-unstake limit when available.
providerMetadata*	StakingProviderMetadata | undefined	Static provider metadata — supplies supportedUnstakeModes and stake-token formatting.

Example

return (
    <SelectUnstakeMode
        value={mode}
        onValueChange={setMode}
        providerMetadata={tonstakersMetadata}
        providerInfo={undefined}
    />
);

StakingBalanceBlock

Row showing the user’s relevant balance for the current direction: wallet balance of the stake token when staking, staked balance when unstaking. Renders a token icon (native TON when the token address is 'ton', otherwise a jetton icon resolved via useJettonInfo), a label, the formatted amount with ticker, and an optional MAX button.

Prop	Type	Description
providerMetadata*	StakingProviderMetadata | undefined	Provider metadata — supplies the stake/receive tokens (address, ticker, decimals).
direction*	StakingQuoteDirection	Operation direction. Selects which token and balance to render.
stakedBalance	string	User’s currently staked amount, used when direction === 'unstake'.
isStakedBalanceLoading	boolean	True while the staked balance is being fetched.
balance	string	User’s wallet balance of the stake token, used when direction === 'stake'.
isBalanceLoading	boolean	True while the wallet balance is being fetched.
onMaxClick	() => void	When provided, renders a MAX button that invokes this callback.

Example

return (
    <StakingBalanceBlock
        providerMetadata={tonstakersMetadata}
        direction="stake"
        balance="12.5"
        onMaxClick={() => console.log('Use max balance')}
    />
);

StakingInfo

Summary block rendered below the staking input. Shows the amount the user will receive, the provider’s current APY, the stake-token to receive-token exchange rate (only when the provider has a receive token), and the provider name. The exchange-rate row always reads as 1 stakeToken = X receiveToken, regardless of direction.

Prop	Type	Description
quote*	StakingQuote | undefined	Current staking quote — its amountOut is rendered in the “You get” row.
isQuoteLoading*	boolean	True while the quote is being fetched. Swaps the “You get” value for a skeleton.
providerInfo*	StakingProviderInfo | undefined	Dynamic provider info — supplies APY and exchange rate.
providerMetadata*	StakingProviderMetadata | undefined	Static provider metadata — supplies token tickers/decimals and the provider name.
isProviderInfoLoading*	boolean	True while provider info is being fetched.
direction	StakingQuoteDirection	Operation direction — controls which token’s decimals/ticker label the “You get” amount. Defaults to 'stake'.

StakingSettingsModal

Modal that lets the user pick the active staking provider. The selection is staged locally and only committed via onProviderChange when the user presses Save. Closing the modal otherwise discards the change. Each option is labeled with the provider’s metadata name, falling back to its providerId if metadata is unavailable on the given network.

Prop	Type	Description
open*	boolean	Controls modal visibility.
onClose*	() => void	Called when the user dismisses the modal or after a successful save.
provider*	StakingProvider | undefined	Currently active staking provider — used to preselect the option when the modal opens.
providers*	StakingProvider[]	All registered staking providers to choose from.
onProviderChange*	(providerId: string) => void	Invoked with the chosen providerId when the user saves a different selection.
network	Network	Network used to resolve each provider’s display name via its metadata.

Example

// Source `provider` and `providers` from `useStakingProvider` and
// `useStakingProviders` in real usage — they refresh as providers register
// through AppKit.
const provider: StakingProvider | undefined = undefined;
const providers: StakingProvider[] = [];
return (
    <StakingSettingsModal
        open={open}
        onClose={() => setOpen(false)}
        provider={provider}
        providers={providers}
        onProviderChange={(id) => console.log('Switch to', id)}
        network={Network.mainnet()}
    />
);

StakingWidget

High-level staking widget that wires the full stake/unstake flow: pick a provider, enter an amount (with optional reverse input on supported providers), review the quote (APY, exchange rate, “you get”), then submit the transaction. Internally wraps StakingWidgetProvider around StakingWidgetUI. Consumers can replace the UI by passing a render-prop children while keeping the widget’s state, quoting, balance checks, and submission logic.

Prop	Type	Description
children	(props: StakingWidgetRenderProps) => ReactNode	Optional render-prop. When provided, the default StakingWidgetUI is bypassed and this function is called with the full StakingWidgetRenderProps (context state + forwarded <div> props), letting consumers build a custom UI on top of the widget’s internal logic.
network	Network	Network used for quote fetching, balance reads, and transactions. Falls back to the connected wallet’s network when omitted.

Example

// Falls back to the connected wallet's network when `network` is omitted.
// Make sure a staking provider (e.g. Tonstakers) is registered on AppKit.
return <StakingWidget />;

StakingWidgetProvider

Headless provider that drives the staking-widget flow — owns the input state (amount, direction, unstake mode, reverse-input toggle), fetches quotes and balances, validates the input, and builds + submits the transaction with a low-balance guard. Children read everything through useStakingContext; pair with StakingWidgetUI (or pass a custom UI to StakingWidget’s children).

Prop	Type	Description
network	Network	Network used for quote fetching, balance reads, and transactions. Falls back to the connected wallet’s network when omitted.

StakingWidgetUI

Default staking-widget UI. Renders a stake/unstake tabbed layout: a centered amount input with optional reversed input, a StakingBalanceBlock for the relevant balance, the submit button (wired through ButtonWithConnect so a disconnected user is prompted to connect first), a settings button that opens StakingSettingsModal, the unstake-mode picker (SelectUnstakeMode, unstake tab only), and a StakingInfo summary. A LowBalanceModal surfaces when the built transaction would exceed the user’s TON balance. All state is consumed from props — typically supplied by StakingWidgetProvider.

Prop	Type	Description
amount*	string	Amount the user wants to stake (string to preserve input UX)
canSubmit*	boolean	Whether the user can proceed with staking (checks balance, amount validity, etc.)
quote*	StakingQuote | undefined	Raw staking quote from the provider
isQuoteLoading*	boolean	True while the stake quote is being fetched
error*	string | null	Current validation/fetch error for staking, null when everything is ok
providerInfo*	StakingProviderInfo | undefined	Staking provider dynamic info (APY, instant unstake availability, etc.)
providerMetadata*	StakingProviderMetadata | undefined	Staking provider static metadata
stakingProvider*	StakingProvider | undefined	Currently selected staking provider (defaults to the first registered one)
stakingProviders*	StakingProvider[]	All registered staking providers
setStakingProviderId*	(providerId: string) => void	Updates the selected staking provider
network*	Network | undefined	Network the widget is operating on (resolved from prop or wallet)
direction*	StakingQuoteDirection	Current operation direction: ‘stake’ or ‘unstake’
isProviderInfoLoading*	boolean	True while provider info is being fetched
balance*	string | undefined	Base balance (native or jetton) available for staking
isBalanceLoading*	boolean	True while base balance is being fetched
stakedBalance*	StakingBalance | undefined	User’s currently staked balance
isStakedBalanceLoading*	boolean	True while staked balance is being fetched
unstakeMode*	UnstakeModes	Selected unstake-timing mode — 'INSTANT', 'WHEN_AVAILABLE', or 'ROUND_END'. See UnstakeMode.
setAmount*	(amount: string) => void	Sets the input amount
setUnstakeMode*	(mode: UnstakeModes) => void	Sets the unstake mode
sendTransaction*	() => Promise<void>	Triggers the staking/unstaking transaction
onChangeDirection*	(direction: StakingQuoteDirection) => void	Changes the direction (stake/unstake)
isSendingTransaction*	boolean	True while a transaction is being processed
isReversed*	boolean	True if the user is inputting the output amount (“I want to get X”)
toggleReversed*	() => void	Toggles between inputting from amount and output amount
reversedAmount*	string	Amount displayed in the reversed (bottom) input
onMaxClick*	() => void	Sets the input amount to the maximum available balance (leaves room for TON gas on native stake)
isLowBalanceWarningOpen*	boolean	True when the built transaction outflow exceeds the user’s TON balance
lowBalanceMode*	'reduce' | 'topup'	reduce when the outgoing token is TON (user can fix by changing amount), topup otherwise.
lowBalanceRequiredTon*	string	Required TON amount for the pending operation, formatted as a decimal string. Empty when no pending op.
onLowBalanceChange*	() => void	Replace the input with a value that fits within the current TON balance and close the warning.
onLowBalanceCancel*	() => void	Dismiss the low-balance warning without changing the input.

Swap

SwapField

One row of the swap form. Renders the amount input, fiat conversion, balance line, and a token-selector chip. The pay variant is editable and exposes a “max” shortcut. The receive variant is read-only and shows the quote result.

Prop	Type	Description
type*	'pay' | 'receive'	pay renders the editable source row with a “max” shortcut. receive renders the read-only target row.
amount*	string	Current amount shown in the input as a human-readable decimal string.
fiatSymbol	string	Fiat currency symbol displayed in front of the converted value. Defaults to "$".
token	AppkitUIToken	Currently selected token. Controls the token selector label, balance formatting and fiat conversion.
onAmountChange	(value: string) => void	Called with the raw input value when the user edits the amount. Only fired for type: "pay".
balance	string	Formatted balance of token for the active wallet, as a human-readable decimal string. Rendered in the balance line beneath the input.
isBalanceLoading	boolean	When true, the balance area renders a skeleton placeholder instead of the value.
loading	boolean	When true, the underlying input renders its loading state — used while a fresh quote is in flight.
onMaxClick	() => void	Called when the user clicks the “max” shortcut to fill the maximum spendable amount.
onTokenSelectorClick	() => void	Called when the user clicks the token selector chip — typically opens a SwapTokenSelectModal.
size	InputSize	Size token applied to the input control(s) inside: `‘s'	'm'	'l’. Defaults to ’m’`.
variant	InputVariant	Visual variant: 'default' paints a filled field. 'unstyled' drops the chrome.
disabled	boolean	When true, descendant input controls are disabled.
error	boolean	When true, the field renders in error styling and Input.Caption switches to error text.
resizable	boolean	When true, Input.Input scales its font down to fit the available width as the user types.

Example

return (
    <SwapField
        type="pay"
        amount={amount}
        onAmountChange={setAmount}
        token={ton}
        balance="12.5"
        onMaxClick={() => setAmount('12.5')}
        onTokenSelectorClick={() => console.log('Open token picker')}
    />
);

SwapFlipButton

Round button rendered between the source and target SwapField rows. Clicking it flips the selected tokens. Visual rotation is driven by rotated.

Prop	Type	Description
onClick	() => void	Called when the user clicks the button. Wire this to a handler that swaps the source/target tokens (e.g. onFlip from the swap context).
rotated	boolean	When true, the icon is drawn in its rotated state — used to animate between flips.

Example

// Drop it between the source and target `SwapField` rows. Wire `onClick` to your token-flip handler.
return <SwapFlipButton rotated={rotated} onClick={() => setRotated((prev) => !prev)} />;

SwapInfo

Summary block rendered under the swap form. Shows the minimum amount the user is guaranteed to receive after slippage, the configured slippage tolerance, and the active SwapProvider.

Prop	Type	Description
toToken*	AppkitUIToken | null	Target token the user is receiving. Used to format minReceived with the right decimals and symbol.
slippage*	number	Slippage tolerance in basis points (100 = 1%). Rendered as a percentage.
provider	SwapProvider	Current SwapProvider. Its display name is shown in the provider row.
quote	SwapQuote	Quote whose minReceived value is displayed. When undefined the value falls back to 0 (still suffixed with the token symbol).
isQuoteLoading	boolean	When true, the minimum-received value renders a skeleton placeholder instead of the formatted number.

Example

// In the swap widget `quote` and `provider` come from `useSwapContext`; until
// those resolve the min-received row shows `0 USDT` and the provider row a
// skeleton placeholder.
return <SwapInfo toToken={toToken} slippage={100} />;

SwapWidget

Drop-in swap UI that walks the user through picking the source/target tokens, entering an amount, reviewing the quote (rate, min-received, slippage, provider), and confirming the swap — which builds the transaction via useBuildSwapTransaction and dispatches it through the standard send flow. Internally mounts a SwapWidgetProvider so the rendered UI (default SwapWidgetUI or a custom children render-prop) can read state through useSwapContext.

Prop	Type	Description
children	(props: SwapWidgetRenderProps) => ReactNode	Optional render-prop receiving the full swap context plus the forwarded <div> props. When supplied it replaces the default SwapWidgetUI.
network	Network	Network used for quote fetching and balance reads. When omitted, falls back to the selected wallet’s network via useNetwork.
tokens*	AppkitUIToken[]	Full list of tokens available for swapping in the UI. Filtered to the active network internally.
tokenSections	TokenSectionConfig[]	Optional section configs for grouping tokens inside the SwapTokenSelectModal.
defaultFromSymbol	string	Symbol of the token pre-selected as the source on first mount (e.g. "TON").
defaultToSymbol	string	Symbol of the token pre-selected as the target on first mount.
fiatSymbol	string	Fiat currency symbol displayed next to converted amounts. Defaults to "$".
defaultSlippage	number	Initial slippage tolerance in basis points (100 = 1%). Defaults to 100.

Example

// Make sure a swap provider (e.g. DeDust / Omniston) is registered on AppKit.
return <SwapWidget tokens={tokens} defaultFromSymbol="TON" defaultToSymbol="USDT" defaultSlippage={100} />;

SwapWidgetProvider

Provider that wires up the full swap state machine — debounces the entered amount, fetches the quote via useSwapQuote, reads source/target balances, validates the input, exposes the active SwapProvider, and offers sendSwapTransaction which builds the transaction with useBuildSwapTransaction and sends it (raising the low-balance warning when the outflow exceeds the user’s TON balance). Children read everything through useSwapContext.

Prop	Type	Description
tokens*	AppkitUIToken[]	Full list of tokens available for swapping in the UI. Filtered to the active network internally.
tokenSections	TokenSectionConfig[]	Optional section configs for grouping tokens inside the SwapTokenSelectModal.
defaultFromSymbol	string	Symbol of the token pre-selected as the source on first mount (e.g. "TON").
defaultToSymbol	string	Symbol of the token pre-selected as the target on first mount.
network	Network	Network used for quote fetching and balance reads. When omitted, falls back to the selected wallet’s network via useNetwork.
fiatSymbol	string	Fiat currency symbol displayed next to converted amounts. Defaults to "$".
defaultSlippage	number	Initial slippage tolerance in basis points (100 = 1%). Defaults to 100.

SwapWidgetUI

Default visual implementation of the swap widget — composes SwapField (source, then target), a SwapFlipButton between them, the submit button (auto-prompts wallet connect when no wallet is selected), the settings trigger that opens SwapSettingsModal, a SwapTokenSelectModal for picking source/target tokens, the SwapInfo summary, and a low-balance warning. Drives all state from the swap context props it receives — pair with SwapWidgetProvider, or use SwapWidget which mounts both.

Prop	Type	Description
tokens*	AppkitUIToken[]	Full list of available tokens for swapping
tokenSections	TokenSectionConfig[]	Optional section configs for grouping tokens in the selector
fromToken*	AppkitUIToken | null	Currently selected source token
toToken*	AppkitUIToken | null	Currently selected target token
fromAmount*	string	Amount the user wants to swap (string to preserve input UX)
toAmount*	string	Calculated receive amount from the current quote
fiatSymbol*	string	Fiat currency symbol for price display, e.g. ”$“
fromBalance*	string | undefined	User’s balance of the “from” token
toBalance*	string | undefined	User’s balance of the “to” token
isFromBalanceLoading*	boolean	True while the “from” balance is being fetched
isToBalanceLoading*	boolean	True while the “to” balance is being fetched
canSubmit*	boolean	Whether the user can proceed with the swap (checks balance, amount, quote)
quote*	GetSwapQuoteData | undefined	Raw swap quote from the provider
isQuoteLoading*	boolean	True while the quote is being fetched from the API
error*	string | null	Current validation or fetch error, null when everything is ok
slippage*	number	Slippage tolerance in basis points (100 = 1%)
swapProvider*	SwapProvider | undefined	Currently selected swap provider (defaults to the first registered one)
swapProviders*	SwapProvider[]	All registered swap providers
setSwapProviderId*	(providerId: string) => void	Updates the selected swap provider
setFromToken*	(token: AppkitUIToken) => void	Updates the source token
setToToken*	(token: AppkitUIToken) => void	Updates the target token
setFromAmount*	(amount: string) => void	Updates the swap amount
setSlippage*	(slippage: number) => void	Updates the slippage tolerance
onFlip*	() => void	Swaps source and target tokens
onMaxClick*	() => void	Sets the “from” amount to the maximum available balance
sendSwapTransaction*	() => Promise<void>	Executes the swap transaction
isSendingTransaction*	boolean	True while a transaction is being built or sent
isLowBalanceWarningOpen*	boolean	True when the built transaction outflow exceeds the user’s TON balance
lowBalanceMode*	'reduce' | 'topup'	reduce when the outgoing token is TON (user can fix by changing amount), topup otherwise.
lowBalanceRequiredTon*	string	Required TON amount for the pending operation, formatted as a decimal string. Empty when no pending op.
onLowBalanceChange*	() => void	Replace the input with a value that fits within the current TON balance and close the warning.
onLowBalanceCancel*	() => void	Dismiss the low-balance warning without changing the input.

UI

Block

Flex container primitive — renders a <div> that lays its children out vertically ('column') or horizontally ('row').

Prop	Type	Description
direction	'row' | 'column'	Flex direction of the block. Defaults to 'column'.

Example

return (
    <Block direction="row">
        <span>Left</span>
        <span>Right</span>
    </Block>
);

Button

Themed <button> with size, border-radius, and variant tokens. Renders an optional leading icon, swaps content for a spinner while loading, and is disabled whenever disabled or loading is true.

Prop	Type	Description
size	ButtonSize	Size class applied to the button. Pass 'unset' to skip the size class entirely (no padding, no typography) — useful with variant="unstyled".
borderRadius	ButtonBorderRadius	Border radius token. Defaults to a size-dependent value (s → 2xl, m → l, l → xl).
variant	ButtonVariant	Visual variant. Use 'unstyled' to opt out of all built-in styling — the consumer is fully responsible for visuals via className. The Button still provides ref forwarding, disabled/loading plumbing, and icon/children rendering.
loading	boolean	When true, renders a spinner instead of icon/children and disables the button.
fullWidth	boolean	When true, the button stretches to fill its container width.
icon	ReactNode	Optional leading icon rendered before children when not loading.

Example

return (
    <Button size="m" variant="fill" onClick={() => console.log('Clicked')}>
        Send transaction
    </Button>
);

CenteredAmountInput

Center-aligned, auto-resizing amount input with optional leading symbol and trailing ticker. Scales the font down to fit the container when the rendered text overflows, and clicking the wrapper focuses the input.

Prop	Type	Description
value*	string	Controlled input value (decimal string).
onValueChange*	(value: string) => void	Called with the new string whenever the user edits the input.
ticker	string	Optional trailing ticker label (e.g., 'TON').
symbol	string	Optional leading currency symbol (e.g., '$').
placeholder	string	Placeholder shown when value is empty. Defaults to '0'.
disabled	boolean	When true, the underlying <input> is disabled.

Example

return <CenteredAmountInput value={amount} onValueChange={setAmount} ticker="TON" placeholder="0" />;

Collapsible

Animated collapsible container — transitions its height between 0 and the content’s natural height when open toggles. Sets aria-hidden to mirror the open state.

Prop	Type	Description
open*	boolean	When true, the content is expanded. When false, it is collapsed to zero height.

Example

return (
    <div>
        <button onClick={() => setOpen((prev) => !prev)}>{open ? 'Hide details' : 'Show details'}</button>
        <Collapsible open={open}>
            <p>Hidden details about the transaction.</p>
        </Collapsible>
    </div>
);

InfoBlock

Compound component for rendering a stacked list of label/value rows (e.g., transaction details, settings summaries). Sub-components forward extra props to the underlying DOM element so callers can layer custom classes and handlers.

Members

Member	Description
InfoBlock.Container	Outer wrapper — vertical container that hosts the rows.
InfoBlock.Row	Horizontal row that pairs a label with a value.
InfoBlock.Label	Label cell — typically the muted descriptor on the left.
InfoBlock.Value	Value cell — typically the emphasized content on the right.
InfoBlock.LabelSkeleton	Skeleton placeholder for a InfoBlock.Label while data is loading. Defaults to width=64, height='1lh'.
InfoBlock.ValueSkeleton	Skeleton placeholder for a InfoBlock.Value while data is loading. Defaults to width=80, height='1lh'.

Example

return (
    <InfoBlock.Container>
        <InfoBlock.Row>
            <InfoBlock.Label>Rate</InfoBlock.Label>
            <InfoBlock.Value>1 TON ≈ $5.43</InfoBlock.Value>
        </InfoBlock.Row>
        <InfoBlock.Row>
            <InfoBlock.Label>Network fee</InfoBlock.Label>
            <InfoBlock.Value>0.01 TON</InfoBlock.Value>
        </InfoBlock.Row>
    </InfoBlock.Container>
);

Input

Compound text-input component. Use the default export as the outer wrapper (it is the Input.Container) and compose sub-components for the header, field, slots, control, and caption. State flags (disabled, error, loading, resizable, size) live on the container and are read by the inner control via context.

Members

Member	Description
Input.Container	Outer wrapper that provides input context (size, variant, disabled, error, loading, resizable).
Input.Header	Header row above the field — holds the title and optional trailing controls.
Input.Title	Title text shown inside Input.Header.
Input.Field	Horizontal row that holds slots and the input control.
Input.Slot	Side-anchored slot used for adornments such as icons or buttons.
Input.Input	The actual <input> control. Respects context flags and reads its size/variant from Input.Container.
Input.Caption	Caption / helper text below the field. Switches to error styling when the container has error set.

Example

return (
    <Input size="m">
        <Input.Header>
            <Input.Title>Recipient</Input.Title>
        </Input.Header>
        <Input.Field>
            <Input.Input value={value} onChange={(event) => setValue(event.target.value)} placeholder="EQ..." />
        </Input.Field>
        <Input.Caption>Paste a TON wallet address.</Input.Caption>
    </Input>
);

Logo

Square logo / avatar primitive — renders an <img> when src loads successfully, otherwise shows a text fallback (after a brief delay to avoid flicker). Useful for token icons, wallet avatars, and project logos.

Prop	Type	Description
size	number	Square size in pixels for the rendered logo. Defaults to 30.
src	string	Image URL to render. While loading or on failure, the fallback is shown.
alt	string	Alt text passed to the underlying <img>. When fallback is not provided, its first character is shown as the fallback. If both are missing, no fallback is rendered.
fallback	string	Text shown in place of the image when src fails or is missing (defaults to the first character of alt).

Example

return <Logo size={48} src="https://ton.org/download/ton_symbol.png" alt="TON" fallback="T" />;

LogoWithNetwork

Token logo with an overlaid network badge — wraps Logo and renders a smaller secondary logo as a corner badge to indicate which network the asset belongs to.

Prop	Type	Description
size	number	Size of the main logo in pixels. Defaults to 30. The network badge is sized to size * 0.4.
src	string	Image source for the main logo.
alt	string	Alt text for the main logo.
fallback	string	Fallback text shown when the main logo image fails or is missing.
networkSrc	string	Image source for the network badge overlay. When omitted, the badge is not rendered.
networkAlt	string	Alt text for the network badge.

Example

return (
    <LogoWithNetwork
        size={48}
        src="https://cdn.example.com/usdt.png"
        alt="USDT"
        fallback="U"
        networkSrc="https://ton.org/download/ton_symbol.png"
        networkAlt="TON"
    />
);

Modal

Centered modal dialog with a header (optional title + close button) and a scrollable body. Clicking the overlay closes the modal. Clicks on the content do not bubble through.

Prop	Type	Description
open	boolean	Controlled open state.
onOpenChange	(open: boolean) => void	Called whenever the open state changes (e.g., via the close button, overlay click, or Escape).
title	string	Optional title rendered in the modal header.
children	ReactNode	Modal body content.
className	string	Additional class name applied to the content container.
bodyClassName	string	Additional class name applied to the body container.

Example

return (
    <div>
        <button onClick={() => setOpen(true)}>Open modal</button>
        <Modal open={open} onOpenChange={setOpen} title="Confirm action">
            <p>Are you sure you want to proceed?</p>
        </Modal>
    </div>
);

Select

Compound select / dropdown component with controlled or uncontrolled state. The content is portaled to document.body and positioned relative to the trigger. Closes on outside click, Escape, or item selection.

Members

Member	Description
Select.Root	Provider that owns the selected value and open state, controlled or uncontrolled.
Select.Trigger	Button-based trigger that toggles the popover and exposes aria-expanded.
Select.Content	Portaled popover that renders the list of items. Positioned under the trigger with optional sideOffset.
Select.Item	Selectable option row. Commits its value to the root on click.

Example

return (
    <Select.Root value={value} onValueChange={setValue}>
        <Select.Trigger>{value === 'mainnet' ? 'Mainnet' : 'Testnet'}</Select.Trigger>
        <Select.Content>
            <Select.Item value="mainnet">Mainnet</Select.Item>
            <Select.Item value="testnet">Testnet</Select.Item>
        </Select.Content>
    </Select.Root>
);

Skeleton

Animated placeholder block used while data is loading. Supply width / height to match the dimensions of the eventual content.

Prop	Type	Description
width	string | number	Width of the placeholder. Accepts any valid CSS length or a number (interpreted as pixels).
height	string | number	Height of the placeholder. Accepts any valid CSS length or a number (interpreted as pixels).

Example

return <Skeleton width={120} height="1.2em" />;

Tabs

Root tabs container — owns the active value (controlled or uncontrolled) and shares it with descendant TabsList, TabsTrigger, and TabsContent via context.

Prop	Type	Description
value	string	Controlled active tab value.
defaultValue	string	Initial active tab when uncontrolled. Defaults to ''.
onValueChange	(value: string) => void	Called whenever the active tab changes.
children*	ReactNode	Compound sub-components — typically TabsList (with TabsTriggers) followed by TabsContents.

Example

return (
    <Tabs value={tab} onValueChange={setTab}>
        <TabsList>
            <TabsTrigger value="stake">Stake</TabsTrigger>
            <TabsTrigger value="unstake">Unstake</TabsTrigger>
        </TabsList>
        <TabsContent value="stake">
            <p>Stake your TON to earn rewards.</p>
        </TabsContent>
        <TabsContent value="unstake">
            <p>Withdraw your staked TON.</p>
        </TabsContent>
    </Tabs>
);

TabsContent

Tab panel rendered with role="tabpanel". Returns null unless its value matches the active Tabs value.

Prop	Type	Description
value*	string	Value this panel is associated with — rendered only when the parent Tabs is on this value.
children*	ReactNode	Panel content.

TabsList

Horizontal list of tab triggers with role="tablist".

Prop	Type	Description
children*	ReactNode	Tab triggers — typically one or more TabsTriggers.

TabsTrigger

Tab trigger button with role="tab". Activates its value on click and reflects active state via aria-selected and data-state.

Prop	Type	Description
value*	string	Value committed to the parent Tabs when this trigger is activated.
children*	ReactNode	Trigger label / content.

TonIcon

TON brand diamond glyph — solid, inherits color from currentColor.

Prop	Type	Description
size	number	Square size of the icon in pixels. Defaults to DEFAULT_ICON_SIZE.

TonIconCircle

TON brand glyph rendered inside a filled circle, using the TON brand color token.

Prop	Type	Description
size	number	Square size of the icon in pixels. Defaults to DEFAULT_ICON_SIZE.

Type

Balances

SendJettonButtonProps

Props accepted by SendJettonButton — extends the base Send button props (button text, sizing, callbacks) with the jetton-transfer details.

Field	Type	Description
recipientAddress*	string	Recipient address.
amount*	string	Amount in jetton units as a human-readable decimal string. Converted to raw smallest units via jetton.decimals.
jetton*	{ address: string; symbol: string; decimals: number; }	Jetton master metadata — address (master contract), symbol (rendered in the button label) and decimals (used to format amount).
comment	string	Optional human-readable comment attached to the transfer.
text	ReactNode	Override the button label. Defaults to “Send”.
size	ButtonSize	Size class applied to the button. Pass 'unset' to skip the size class entirely (no padding, no typography) — useful with variant="unstyled".
borderRadius	ButtonBorderRadius	Border radius token. Defaults to a size-dependent value (s → 2xl, m → l, l → xl).
variant	ButtonVariant	Visual variant. Use 'unstyled' to opt out of all built-in styling — the consumer is fully responsible for visuals via className. The Button still provides ref forwarding, disabled/loading plumbing, and icon/children rendering.
loading	boolean	When true, renders a spinner instead of icon/children and disables the button.
fullWidth	boolean	When true, the button stretches to fill its container width.
icon	ReactNode	Optional leading icon rendered before children when not loading.
children	(props: SendRenderProps) => ReactNode	Custom render function — replaces the default button with the caller’s UI. Receives the current send state and click handler via SendRenderProps.
onError	(error: Error) => void	Called when the wallet rejects the request or the send fails. Receives the raised Error.
onSuccess	(response: SendTransactionReturnType) => void	Called once the transaction is broadcast. Receives the wallet’s SendTransactionReturnType (BoC + normalized hash).

SendTonButtonProps

Props accepted by SendTonButton — extends the base Send button props (button text, sizing, callbacks) with the TON-transfer details.

Field	Type	Description
recipientAddress*	string	Recipient address.
amount*	string	Amount in TON as a human-readable decimal string (e.g., "1.5"). Converted to nano-TON internally.
comment	string	Optional human-readable comment attached to the transfer.
text	ReactNode	Override the button label. Defaults to “Send”.
size	ButtonSize	Size class applied to the button. Pass 'unset' to skip the size class entirely (no padding, no typography) — useful with variant="unstyled".
borderRadius	ButtonBorderRadius	Border radius token. Defaults to a size-dependent value (s → 2xl, m → l, l → xl).
variant	ButtonVariant	Visual variant. Use 'unstyled' to opt out of all built-in styling — the consumer is fully responsible for visuals via className. The Button still provides ref forwarding, disabled/loading plumbing, and icon/children rendering.
loading	boolean	When true, renders a spinner instead of icon/children and disables the button.
fullWidth	boolean	When true, the button stretches to fill its container width.
icon	ReactNode	Optional leading icon rendered before children when not loading.
children	(props: SendRenderProps) => ReactNode	Custom render function — replaces the default button with the caller’s UI. Receives the current send state and click handler via SendRenderProps.
onError	(error: Error) => void	Called when the wallet rejects the request or the send fails. Receives the raised Error.
onSuccess	(response: SendTransactionReturnType) => void	Called once the transaction is broadcast. Receives the wallet’s SendTransactionReturnType (BoC + normalized hash).

UseBalanceByAddressParameters

Parameters accepted by useBalanceByAddress — TanStack Query options (select, enabled, staleTime, …) plus the target address and optional network override.

Field	Type	Description
address	UserFriendlyAddress | Address	Wallet address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
network	Network	Network to read the balance from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseBalanceByAddressReturnType

Return type of useBalanceByAddress — TanStack Query result carrying data, isLoading, error and the standard companions.

type UseBalanceByAddressReturnType = UseQueryReturnType<
    selectData,
    GetBalanceErrorType
>;

UseBalanceParameters

Parameters accepted by useBalance — same shape as UseBalanceByAddressParameters. The hook resolves address from the selected wallet and overrides any value supplied here.

Field	Type	Description
address	UserFriendlyAddress | Address	Wallet address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
network	Network	Network to read the balance from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseBalanceReturnType

Return type of useBalance — TanStack Query result carrying data, isLoading, error and the standard companions.

type UseBalanceReturnType = UseBalanceByAddressReturnType<selectData>;

UseWatchBalanceByAddressParameters

Parameters accepted by useWatchBalanceByAddress — same fields as WatchBalanceByAddressOptions, all optional so callers can render the hook before the address is known.

type UseWatchBalanceByAddressParameters = Partial<WatchBalanceByAddressOptions>;

UseWatchBalanceParameters

Parameters accepted by useWatchBalance — same fields as UseWatchBalanceByAddressParameters minus address, which the hook resolves from the selected wallet.

type UseWatchBalanceParameters = Omit<UseWatchBalanceByAddressParameters, 'address'>;

Connectors

UseConnectorsReturnType

Return type of useConnectors — same shape as GetConnectorsReturnType.

type UseConnectorsReturnType = GetConnectorsReturnType;

Crypto Onramp

ChainInfo

Display info for a CAIP-2 chain — used by the crypto onramp widget to render chain names and logos.

Field	Type	Description
name*	string	Human-readable chain name (e.g. "Ethereum", "Arbitrum One").
logo	string	Optional logo URL for the chain.

CryptoAmountInputMode

Which side the amount input is currently denominated in — token means the user is entering the target-token amount, method means they are entering the source payment-method amount.

type CryptoAmountInputMode = 'token' | 'method';

CryptoOnrampContextType

Shape of the CryptoOnrampContext value — selection state, quote/deposit data and actions exposed by CryptoOnrampWidgetProvider to the widget UI (and to custom render callbacks passed to CryptoOnrampWidget).

Field	Type	Description
tokens*	CryptoOnrampToken[]	Full list of target tokens the user can buy.
tokenSections	CryptoOnrampTokenSectionConfig[]	Optional section configs grouping tokens in the picker.
selectedToken*	CryptoOnrampToken | null	Currently selected target token to buy. null until tokens load.
setSelectedToken*	(token: CryptoOnrampToken) => void	Updates selectedToken.
paymentMethods*	CryptoPaymentMethod[]	Available source crypto payment methods.
methodSections	PaymentMethodSectionConfig[]	Optional section configs grouping paymentMethods in the picker.
selectedMethod*	CryptoPaymentMethod	Currently selected source payment method.
setSelectedMethod*	(method: CryptoPaymentMethod) => void	Updates selectedMethod.
chains*	Record<string, ChainInfo>	CAIP-2 → chain display info map (built-in defaults merged with consumer overrides).
amount*	string	Current amount input value as a decimal string.
setAmount*	(value: string) => void	Updates amount.
amountInputMode*	CryptoAmountInputMode	Which side amount is denominated in — see CryptoAmountInputMode.
setAmountInputMode*	(mode: CryptoAmountInputMode) => void	Updates amountInputMode.
convertedAmount*	string	Other side of amount after applying the current quote’s rate.
presetAmounts*	OnrampAmountPreset[]	Quick-pick amount buttons rendered in the widget.
quote*	CryptoOnrampQuote | null	Current quote, or null if not yet fetched / invalidated.
isLoadingQuote*	boolean	Whether a quote is in flight (includes the input-debounce window).
quoteError*	string | null	Quote-side validation/fetch error as an i18n key, or null.
quoteProviderName*	string | null	Display name of the provider behind the current quote, when available.
deposit*	CryptoOnrampDeposit | null	Current deposit returned by the provider once createDeposit succeeded.
isCreatingDeposit*	boolean	Whether createDeposit is in flight.
depositError*	string | null	Deposit-side error as an i18n key, or null.
depositAmount*	string	Formatted deposit amount the user must send on the source chain.
createDeposit*	() => void	Triggers deposit creation from the current quote.
depositStatus*	CryptoOnrampStatus | null	Latest deposit status polled via useCryptoOnrampStatus, or null.
isRefundAddressRequired*	boolean	Whether the current quote provider requires a refund address before deposit.
isReversedAmountSupported*	boolean	Whether the current quote provider supports reversed (target-amount) input.
refundAddress*	string	Refund address the user typed, if isRefundAddressRequired.
setRefundAddress*	(address: string) => void	Updates refundAddress.
targetBalance*	string	Connected wallet’s balance of the selected target token (formatted, token units).
isLoadingTargetBalance*	boolean	Whether the target token balance is being fetched.
isWalletConnected*	boolean	Whether a TON wallet is currently connected.
canContinue*	boolean	Whether the user can proceed — valid amount, quote available, and wallet connected.
onReset*	() => void	Invalidates the active quote and clears the deposit, returning the widget to its initial state.

CryptoOnrampProviderProps

Props for CryptoOnrampWidgetProvider — configures the target tokens and payment methods exposed to the widget, plus optional chain display overrides.

Field	Type	Description
tokens	CryptoOnrampToken[]	Target tokens (what the user buys on TON). Defaults to a built-in list.
tokenSections	CryptoOnrampTokenSectionConfig[]	Optional section configs grouping tokens in the picker.
paymentMethods	CryptoPaymentMethod[]	Source crypto payment methods (what the user pays with on another chain). Defaults to a built-in list.
methodSections	PaymentMethodSectionConfig[]	Optional section configs grouping paymentMethods in the picker.
chains	Record<string, ChainInfo>	Custom CAIP-2 → chain display info overrides. Merged on top of the built-in defaults, so consumers only need to provide what they want to override or add — for example, a single entry keyed by 'eip155:42161' with a name of 'Arbitrum' and a logo URL.
defaultTokenId	string	ID of the target token pre-selected on mount.
defaultMethodId	string	ID of the source payment method pre-selected on mount.

CryptoOnrampToken

Target token (what the user is buying on TON) in the crypto onramp widget. Kept separate from AppkitUIToken because address is the raw form expected by the onramp provider (e.g. "0x0000000000000000000000000000000000000000" for native TON, "EQCx..." for USDT jetton master).

Field	Type	Description
id*	string	Stable identifier used by section configs and pre-selection props.
symbol*	string	Token symbol, e.g. "TON", "USDT".
name*	string	Full token name, e.g. "Toncoin", "Tether".
decimals*	number	Number of decimals for the token.
address*	string	Address as the onramp provider expects it.
logo	string	Optional logo URL.

CryptoOnrampTokenSectionConfig

Section configuration grouping CryptoOnrampToken entries by id in a picker.

Field	Type	Description
title*	string	Section header (typically already localized by the caller).
ids*	string[]	Ids of CryptoOnrampToken entries to include in this section, in order.

CryptoOnrampWidgetProps

Props for CryptoOnrampWidget — extends CryptoOnrampProviderProps (tokens, payment methods, defaults, chain overrides) plus the native <div> props the widget root forwards.

Field	Type	Description
children	(props: CryptoOnrampWidgetRenderProps) => ReactNode	Custom render function. When provided, replaces the default CryptoOnrampWidgetUI and is called with the full CryptoOnrampWidgetRenderProps (context state, actions and forwarded <div> props), so callers can build a fully custom UI on top of the same provider.
tokens	CryptoOnrampToken[]	Target tokens (what the user buys on TON). Defaults to a built-in list.
tokenSections	CryptoOnrampTokenSectionConfig[]	Optional section configs grouping tokens in the picker.
paymentMethods	CryptoPaymentMethod[]	Source crypto payment methods (what the user pays with on another chain). Defaults to a built-in list.
methodSections	PaymentMethodSectionConfig[]	Optional section configs grouping paymentMethods in the picker.
chains	Record<string, ChainInfo>	Custom CAIP-2 → chain display info overrides. Merged on top of the built-in defaults, so consumers only need to provide what they want to override or add — for example, a single entry keyed by 'eip155:42161' with a name of 'Arbitrum' and a logo URL.
defaultTokenId	string	ID of the target token pre-selected on mount.
defaultMethodId	string	ID of the source payment method pre-selected on mount.

CryptoOnrampWidgetRenderProps

Props for CryptoOnrampWidgetUI (and for the custom render callback on CryptoOnrampWidget) — the full CryptoOnrampContextType state and actions, plus the native <div> props the widget root forwards (className, style, etc.).

Field	Type	Description
tokens*	CryptoOnrampToken[]	Full list of target tokens the user can buy.
tokenSections	CryptoOnrampTokenSectionConfig[]	Optional section configs grouping tokens in the picker.
selectedToken*	CryptoOnrampToken | null	Currently selected target token to buy. null until tokens load.
setSelectedToken*	(token: CryptoOnrampToken) => void	Updates selectedToken.
paymentMethods*	CryptoPaymentMethod[]	Available source crypto payment methods.
methodSections	PaymentMethodSectionConfig[]	Optional section configs grouping paymentMethods in the picker.
selectedMethod*	CryptoPaymentMethod	Currently selected source payment method.
setSelectedMethod*	(method: CryptoPaymentMethod) => void	Updates selectedMethod.
chains*	Record<string, ChainInfo>	CAIP-2 → chain display info map (built-in defaults merged with consumer overrides).
amount*	string	Current amount input value as a decimal string.
setAmount*	(value: string) => void	Updates amount.
amountInputMode*	CryptoAmountInputMode	Which side amount is denominated in — see CryptoAmountInputMode.
setAmountInputMode*	(mode: CryptoAmountInputMode) => void	Updates amountInputMode.
convertedAmount*	string	Other side of amount after applying the current quote’s rate.
presetAmounts*	OnrampAmountPreset[]	Quick-pick amount buttons rendered in the widget.
quote*	CryptoOnrampQuote | null	Current quote, or null if not yet fetched / invalidated.
isLoadingQuote*	boolean	Whether a quote is in flight (includes the input-debounce window).
quoteError*	string | null	Quote-side validation/fetch error as an i18n key, or null.
quoteProviderName*	string | null	Display name of the provider behind the current quote, when available.
deposit*	CryptoOnrampDeposit | null	Current deposit returned by the provider once createDeposit succeeded.
isCreatingDeposit*	boolean	Whether createDeposit is in flight.
depositError*	string | null	Deposit-side error as an i18n key, or null.
depositAmount*	string	Formatted deposit amount the user must send on the source chain.
createDeposit*	() => void	Triggers deposit creation from the current quote.
depositStatus*	CryptoOnrampStatus | null	Latest deposit status polled via useCryptoOnrampStatus, or null.
isRefundAddressRequired*	boolean	Whether the current quote provider requires a refund address before deposit.
isReversedAmountSupported*	boolean	Whether the current quote provider supports reversed (target-amount) input.
refundAddress*	string	Refund address the user typed, if isRefundAddressRequired.
setRefundAddress*	(address: string) => void	Updates refundAddress.
targetBalance*	string	Connected wallet’s balance of the selected target token (formatted, token units).
isLoadingTargetBalance*	boolean	Whether the target token balance is being fetched.
isWalletConnected*	boolean	Whether a TON wallet is currently connected.
canContinue*	boolean	Whether the user can proceed — valid amount, quote available, and wallet connected.
onReset*	() => void	Invalidates the active quote and clears the deposit, returning the widget to its initial state.

CryptoPaymentMethod

Source crypto payment method (what the user pays with on another chain) in the crypto onramp widget.

Field	Type	Description
id*	string	Stable identifier for the method — used for selection state and methodSections.ids
symbol*	string	Token symbol, e.g. “USDC”, “USDT”.
name*	string	Full token name shown in the picker, e.g. “USD Coin”, “Tether”.
chain*	string	Source chain in CAIP-2 format, e.g. “eip155:8453”, “eip155:56” — passed as sourceChain to the onramp provider. The widget resolves a display name and logo for it via the chains map (see CryptoOnrampWidgetProvider).
decimals*	number	Number of decimals for the token (used to convert between display and base units)
address*	string	Token contract address on the source network (empty string / zero address for native)
logo	string	Token logo URL shown in the picker and selectors.

OnrampAmountPreset

Quick-pick amount button shown above the crypto-onramp input (carried on CryptoOnrampContextType’s presetAmounts).

Field	Type	Description
amount*	string	Amount value the preset sets on click (decimal string).
label*	string	Button label shown to the user.

PaymentMethodSectionConfig

Section configuration grouping CryptoPaymentMethod entries by id in a picker.

Field	Type	Description
title*	string	Section header (typically already localized by the caller).
ids*	string[]	Ids of CryptoPaymentMethod entries to include in this section, in order.

UseCreateCryptoOnrampDepositParameters

Parameters accepted by useCreateCryptoOnrampDeposit — TanStack Query mutation options forwarded via parameters.mutation.

type UseCreateCryptoOnrampDepositParameters = CreateCryptoOnrampDepositMutationOptions<context>;

UseCreateCryptoOnrampDepositReturnType

Return type of useCreateCryptoOnrampDeposit — TanStack Query mutation result.

type UseCreateCryptoOnrampDepositReturnType = UseMutationResult<
    CreateCryptoOnrampDepositData,
    CreateCryptoOnrampDepositErrorType,
    CreateCryptoOnrampDepositVariables,
    context
>;

UseCryptoOnrampProviderParameters

Parameters accepted by useCryptoOnrampProvider — optional provider id forwarded to getCryptoOnrampProvider.

type UseCryptoOnrampProviderParameters = GetCryptoOnrampProviderOptions;

UseCryptoOnrampProviderReturnType

Return type of useCryptoOnrampProvider — the matching CryptoOnrampProviderInterface, or undefined when none is registered (the hook swallows the throw from getCryptoOnrampProvider).

type UseCryptoOnrampProviderReturnType = GetCryptoOnrampProviderReturnType | undefined;

UseCryptoOnrampProvidersReturnType

Return type of useCryptoOnrampProviders — array of every CryptoOnrampProviderInterface currently registered on the AppKit instance.

type UseCryptoOnrampProvidersReturnType = GetCryptoOnrampProvidersReturnType;

UseCryptoOnrampQuoteParameters

Parameters accepted by useCryptoOnrampQuote — TanStack Query options (select, enabled, staleTime, …) plus the source/target assets, amount and optional provider override forwarded to getCryptoOnrampQuote.

Field	Type	Description
amount	string	Amount to onramp (either source or target crypto, depending on isSourceAmount)
sourceCurrencyAddress	string	Source crypto currency address (contract address or 0x0… for native)
sourceChain	string	Source chain identifier in CAIP-2 format (e.g. ‘eip155:1’ for Ethereum mainnet, ‘eip155:42161’ for Arbitrum One). Providers map this to their own chain identifiers internally.
targetCurrencyAddress	string	Target crypto currency address on TON (contract address or 0x0… for native)
recipientAddress	string	TON address that will receive the target crypto.
refundAddress	string	Refund address for the source crypto.
isSourceAmount	boolean	If true, amount is the source amount to spend. If false, amount is the target amount to receive. Defaults to true when omitted.
providerOptions	TProviderOptions = unknown	Provider-specific options.
providerId	string	Provider to quote against. Defaults to the registered default provider.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseCryptoOnrampQuoteReturnType

Return type of useCryptoOnrampQuote — TanStack Query result carrying data, isLoading, error and the standard companions.

type UseCryptoOnrampQuoteReturnType = UseQueryReturnType<
    selectData,
    GetCryptoOnrampQuoteErrorType
>;

UseCryptoOnrampStatusParameters

Parameters accepted by useCryptoOnrampStatus — TanStack Query options (select, enabled, refetchInterval, …) plus the deposit id, originating provider id and optional provider override forwarded to getCryptoOnrampStatus.

Field	Type	Description
depositId	string	Deposit id.
providerId	string	Identifier of the provider that issued this deposit.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseCryptoOnrampStatusReturnType

Return type of useCryptoOnrampStatus — TanStack Query result carrying data, isLoading, error and the standard companions.

type UseCryptoOnrampStatusReturnType = UseQueryReturnType<
    selectData,
    GetCryptoOnrampStatusErrorType
>;

Jettons

UseJettonBalanceByAddressParameters

Parameters accepted by useJettonBalanceByAddress — TanStack Query options (select, enabled, staleTime, …) plus the jetton master, owner address, decimals and optional network override.

Field	Type	Description
jettonAddress	UserFriendlyAddress	Jetton master contract address (the token, not the user’s wallet for it).
ownerAddress	UserFriendlyAddress	Owner of the jetton wallet — typically the connected user’s address.
jettonDecimals	number	Decimals declared by the jetton master. Used to format the raw balance into a human-readable string.
network	Network	Network to read the balance from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseJettonBalanceByAddressReturnType

Return type of useJettonBalanceByAddress — TanStack Query result carrying data, isLoading, error and the standard companions.

type UseJettonBalanceByAddressReturnType = UseQueryReturnType<
    selectData,
    GetJettonBalanceErrorType
>;

UseJettonInfoParameters

Parameters accepted by useJettonInfo — TanStack Query options (select, enabled, staleTime, …) plus the jetton master address and optional network override.

Field	Type	Description
address	UserFriendlyAddress	Jetton master contract address whose metadata is being fetched.
network	Network	Network to query. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseJettonInfoReturnType

Return type of useJettonInfo — TanStack Query result carrying data, isLoading, error and the standard companions. data is null when the indexer has no record for that master address.

type UseJettonInfoReturnType = UseQueryReturnType<
    selectData,
    GetJettonInfoErrorType
>;

UseJettonWalletAddressParameters

Parameters accepted by useJettonWalletAddress — TanStack Query options (select, enabled, staleTime, …) plus the jetton master, owner address and optional network override.

Field	Type	Description
jettonAddress	UserFriendlyAddress	Jetton master contract address.
ownerAddress	UserFriendlyAddress	Owner whose jetton wallet should be derived.
network	Network	Network to query. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseJettonWalletAddressReturnType

Return type of useJettonWalletAddress — TanStack Query result carrying data, isLoading, error and the standard companions.

type UseJettonWalletAddressReturnType = UseQueryReturnType<
    selectData,
    GetJettonWalletAddressErrorType
>;

UseJettonsByAddressParameters

Parameters accepted by useJettonsByAddress — TanStack Query options (select, enabled, staleTime, …) plus the owner address, optional network override and pagination.

Field	Type	Description
address	UserFriendlyAddress | Address	Owner address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
network	Network	Network to read the jettons from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
limit	number	Maximum number of jettons to return.
offset	number	Number of jettons to skip before returning results — used for pagination.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseJettonsByAddressReturnType

Return type of useJettonsByAddress — TanStack Query result carrying data, isLoading, error and the standard companions.

type UseJettonsByAddressReturnType = UseQueryReturnType<
    selectData,
    GetJettonsErrorType
>;

UseJettonsParameters

Parameters accepted by useJettons — same shape as UseJettonsByAddressParameters. The hook resolves address from the selected wallet and overrides any value supplied here.

Field	Type	Description
address	UserFriendlyAddress | Address	Owner address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
network	Network	Network to read the jettons from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
limit	number	Maximum number of jettons to return.
offset	number	Number of jettons to skip before returning results — used for pagination.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseJettonsReturnType

Return type of useJettons — TanStack Query result carrying data, isLoading, error and the standard companions.

type UseJettonsReturnType = UseJettonsByAddressReturnType<selectData>;

UseTransferJettonParameters

Parameters accepted by useTransferJetton — TanStack Query mutation options.

type UseTransferJettonParameters = TransferJettonOptions<context>;

UseTransferJettonReturnType

Return type of useTransferJetton — TanStack Query mutation result.

type UseTransferJettonReturnType = UseMutationReturnType<
    TransferJettonData,
    TransferJettonErrorType,
    TransferJettonVariables,
    context,
    (
        variables: TransferJettonVariables,
        options?: MutateOptions<TransferJettonData, TransferJettonErrorType, TransferJettonVariables, context>,
    ) => void,
    MutateFunction<TransferJettonData, TransferJettonErrorType, TransferJettonVariables, context>
>;

UseWatchJettonsByAddressParameters

Parameters accepted by useWatchJettonsByAddress — same fields as WatchJettonsByAddressOptions, all optional so callers can render the hook before the address is known.

type UseWatchJettonsByAddressParameters = Partial<WatchJettonsByAddressOptions>;

UseWatchJettonsParameters

Parameters accepted by useWatchJettons — update callback and optional network override. The hook resolves the address from the selected wallet.

type UseWatchJettonsParameters = Partial<WatchJettonsOptions>;

NFTs

NftItemProps

Props accepted by NftItem — extends the native <button> props (onClick, disabled, className, …) with the NFT to render.

Field	Type	Description
nft*	NFT	NFT to render — name, collection name, image and on-sale state are derived via getFormattedNftInfo.

UseNFTsByAddressParameters

Parameters accepted by useNftsByAddress — TanStack Query options (select, enabled, staleTime, …) plus the owner address, optional pagination (limit, offset) and network override.

The network field defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.

Field	Type	Description
address	UserFriendlyAddress | Address	Owner address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
network	Network	Network to read NFTs from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
limit	number	Maximum number of NFTs to return.
offset	number	Number of NFTs to skip before returning results — used for pagination.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseNFTsByAddressReturnType

Return type of useNftsByAddress — TanStack Query result carrying data, isLoading, error and the standard companions.

type UseNFTsByAddressReturnType = UseQueryReturnType<selectData, GetNFTsErrorType>;

UseNFTsParameters

Parameters accepted by useNfts — same shape as UseNFTsByAddressParameters. The hook resolves address from the selected wallet and overrides any value supplied here.

Field	Type	Description
address	UserFriendlyAddress | Address	Owner address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
network	Network	Network to read NFTs from. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
limit	number	Maximum number of NFTs to return.
offset	number	Number of NFTs to skip before returning results — used for pagination.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseNFTsReturnType

Return type of useNfts — TanStack Query result carrying data, isLoading, error and the standard companions.

type UseNFTsReturnType = UseNFTsByAddressReturnType<selectData>;

UseNftParameters

Parameters accepted by useNft — TanStack Query options (select, enabled, staleTime, …) plus the NFT contract address and optional network override.

The network field defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.

Field	Type	Description
address	UserFriendlyAddress | Address	NFT contract address — pass a UserFriendlyAddress string or an Address instance from @ton/core.
network	Network	Network to query. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseNftReturnType

Return type of useNft — TanStack Query result carrying data (the NFT or null when the indexer has no record), isLoading, error and the standard companions.

type UseNftReturnType = UseQueryReturnType<selectData, GetNftErrorType>;

UseTransferNftParameters

Parameters accepted by useTransferNft — TanStack Query mutation options.

type UseTransferNftParameters = TransferNftOptions<context>;

UseTransferNftReturnType

Return type of useTransferNft — TanStack Query mutation result.

type UseTransferNftReturnType = UseMutationReturnType<
    TransferNftData,
    TransferNftErrorType,
    TransferNftVariables,
    context,
    (
        variables: TransferNftVariables,
        options?: MutateOptions<TransferNftData, TransferNftErrorType, TransferNftVariables, context>,
    ) => void,
    MutateFunction<TransferNftData, TransferNftErrorType, TransferNftVariables, context>
>;

Networks

UseBlockNumberParameters

Parameters accepted by useBlockNumber — TanStack Query options plus an optional network override. Defaults to the selected wallet’s network. If no wallet is selected, falls back to mainnet.

Field	Type	Description
network	Network	Network to query. Defaults to mainnet when omitted.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseBlockNumberReturnType

Return type of useBlockNumber — TanStack Query result.

type UseBlockNumberReturnType = UseQueryReturnType<
    selectData,
    GetBlockNumberErrorType
>;

UseDefaultNetworkReturnType

Return type of useDefaultNetwork — [network, setNetwork] tuple. network is the current default (or undefined). setNetwork calls setDefaultNetwork and emits networks:default-changed.

type UseDefaultNetworkReturnType = [
    network: GetDefaultNetworkReturnType,
    setNetwork: (network: Network | undefined) => void,
];

UseNetworkReturnType

Return type of useNetwork — undefined when no wallet is currently selected.

type UseNetworkReturnType = Network | undefined;

UseNetworksReturnType

Return type of useNetworks — same shape as GetNetworksReturnType.

type UseNetworksReturnType = GetNetworksReturnType;

Providers

I18nContextType

Shape returned by useI18n — current locale, translation function and helpers to switch locales or merge new dictionaries at runtime.

Field	Type	Description
activeLocale*	string	Currently active locale code (e.g., "en", "ru").
t*	I18n['t']	Translation function — accepts a key plus interpolation values and returns the localized string.
locale*	(lang: string, dict?: Dict) => void	Switch to a new locale. Pass an optional dict to install translations alongside the switch.
addDict*	(lang: string, dict: Dict) => void	Merge a translation dictionary for lang without changing the active locale.

I18nProviderProps

Props accepted by I18nProvider.

Field	Type	Description
locale	string	Initial locale code. Defaults to the i18n library’s default when omitted.
lngDicts	Record<string, Dict>	Translation dictionaries keyed by locale. Loaded into the underlying i18n instance on mount.

Settings

AppKitTheme

Theme value accepted by useAppKitTheme — 'light', 'dark', or any custom string mapped to a data-ta-theme token in the host’s CSS.

type AppKitTheme = 'light' | 'dark' | string;

Shared

AmountPreset

Single preset entry rendered as a button in AmountPresets.

Field	Type	Description
label*	string	Text shown inside the button (e.g., "25%", "Max", "100").
amount*	string	Value passed to AmountPresetsProps.onPresetSelect when the button is clicked.
onSelect	() => void	Optional custom click handler — when set, it runs instead of onPresetSelect.

AmountPresetsProps

Props accepted by AmountPresets.

Field	Type	Description
presets*	AmountPreset[]	Preset buttons to render, in order.
currencySymbol	string	Optional symbol (e.g., "$") prepended to each preset label.
onPresetSelect*	(value: string) => void	Called with the selected preset’s amount unless the preset defines its own onSelect.

AppkitUIToken

UI-side token descriptor consumed by appkit-react widgets (SwapWidget, SwapField, currency selectors, etc.) — identifies the token in the picker UI and carries display + on-chain fields the widget needs to render and quote.

Field	Type	Description
id*	string	Stable id used for picker selection state and section grouping.
symbol*	string	Ticker symbol shown in the picker and selector chip (e.g., "TON", "USDT").
name*	string	Full token name shown in the picker (e.g., "Toncoin").
decimals*	number	Number of decimal places used to format raw amounts.
address*	string	Token contract address. Pass 'ton' for native TON; otherwise the jetton master’s user-friendly address.
logo	string	Optional URL of the token logo shown in the picker and selector chip.
rate	string	Optional fiat exchange rate (1 token = rate fiat units). Used by widgets to render fiat conversions next to amounts.
network*	Network	Network the token lives on. Widgets filter their token universe by the active network.

CopyButtonProps

Props accepted by CopyButton.

Field	Type	Description
value*	string	Text written to the clipboard when the button is clicked.
aria-label*	string	Accessible label for screen readers.

CurrencyItemProps

Props accepted by CurrencyItem when used as a single-shot button. Passing children switches it into compound mode and bypasses these fields.

Field	Type	Description
ticker	string	Token symbol (e.g., "TON") — also used as the icon fallback and rendered in the secondary line.
name	string	Human-readable token name shown as the primary line. Falls back to ticker when absent.
balance	string	Main balance value shown on the right side (already-formatted string).
underBalance	string	Optional secondary value (e.g., fiat equivalent) shown beneath the main balance.
icon	string	URL of the token logo.
isVerified	boolean	When true, renders a verified checkmark badge next to the name.

CurrencySelectListContainerProps

Props accepted by CurrencySelect.ListContainer.

Field	Type	Description
isEmpty*	boolean	When true, renders the built-in empty state instead of children.

CurrencySelectSearchProps

Props accepted by CurrencySelect.Search.

Field	Type	Description
searchValue*	string	Current search query.
onSearchChange*	(value: string) => void	Called whenever the user types in the search input.
placeholder	string	Placeholder text shown when the input is empty.
size	InputSize	Size token applied to the input control(s) inside: `‘s'	'm'	'l’. Defaults to ’m’`.
variant	InputVariant	Visual variant: 'default' paints a filled field. 'unstyled' drops the chrome.
loading	boolean	When true, Input.Input renders a skeleton placeholder instead of an <input>.
disabled	boolean	When true, descendant input controls are disabled.
error	boolean	When true, the field renders in error styling and Input.Caption switches to error text.
resizable	boolean	When true, Input.Input scales its font down to fit the available width as the user types.

LowBalanceModalProps

Props accepted by LowBalanceModal.

Field	Type	Description
open*	boolean	Controls visibility of the modal.
mode*	LowBalanceMode	reduce — user can fix it by reducing the amount (shows Change/Cancel). topup — reducing doesn’t help, user must top up TON (shows Close only).
requiredTon*	string	Required amount in TON, formatted as a decimal string (e.g. "0.423").
onChange*	() => void	Called when the user clicks the primary “Change” action (only in reduce mode).
onCancel*	() => void	Called when the user dismisses the modal (Cancel, Close, or backdrop click).

LowBalanceMode

Behavior mode for LowBalanceModal — see LowBalanceModalProps.mode.

type LowBalanceMode = 'reduce' | 'topup';

OptionSwitcherOption

Single entry rendered as an item inside OptionSwitcher.

Field	Type	Description
value*	string	Stable value passed back to OptionSwitcherProps.onChange when selected.
label*	string	Human-readable label shown in the trigger and dropdown item.

OptionSwitcherProps

Props accepted by OptionSwitcher.

Field	Type	Description
value*	string | undefined	Currently selected option value.
options*	OptionSwitcherOption[]	Available options.
onChange*	(value: string) => void	Called when the user picks an option.
disabled	boolean	When true, the trigger is non-interactive and dimmed.
className	string	Extra class applied to the trigger button.

SettingsButtonProps

Props accepted by SettingsButton — extends the base Button props.

Field	Type	Description
onClick	() => void	Click handler — typically used to open a settings modal.
size	ButtonSize	Size class applied to the button. Pass 'unset' to skip the size class entirely (no padding, no typography) — useful with variant="unstyled".
borderRadius	ButtonBorderRadius	Border radius token. Defaults to a size-dependent value (s → 2xl, m → l, l → xl).
variant	ButtonVariant	Visual variant. Use 'unstyled' to opt out of all built-in styling — the consumer is fully responsible for visuals via className. The Button still provides ref forwarding, disabled/loading plumbing, and icon/children rendering.
loading	boolean	When true, renders a spinner instead of icon/children and disables the button.
fullWidth	boolean	When true, the button stretches to fill its container width.
icon	ReactNode	Optional leading icon rendered before children when not loading.

TokenBase

Minimal shape every token in TokenSelectModal must satisfy. Callers may use richer types (e.g., AppkitUIToken) — TokenBase only fixes the fields the modal reads.

Field	Type	Description
id*	string	Stable identifier used to match tokens against TokenSectionConfig.ids.
symbol*	string	Ticker (e.g., "TON") — used for display and search matching.
name*	string	Human-readable name — used for display and search matching.
address*	string	Token contract address — used for exact-address search matching and as the React key.
logo	string	Optional logo URL.

TokenSectionConfig

Configuration that maps token ids to a named section in TokenSelectModal. Tokens not covered are placed in an “Other tokens” trailing section.

Field	Type	Description
title*	string	Section header label.
ids*	string[]	TokenBase.id values to include in this section, in render order.

TokenSelectModalProps

Props accepted by TokenSelectModal.

Field	Type	Description
open*	boolean	Controls modal visibility.
onClose*	() => void	Called when the modal is dismissed (selection, backdrop click, or escape).
tokens*	T = AppkitUIToken[]	Full set of tokens available for selection and search.
tokenSections	TokenSectionConfig[]	Optional sectioning rules. When omitted, all tokens render as a single untitled section.
onSelect*	(token: T = AppkitUIToken) => void	Called with the picked token. The modal closes and resets its search on selection.
title*	string	Modal header title.
searchPlaceholder	string	Placeholder shown inside the search input.

TokenSelectorProps

Props accepted by TokenSelector — extends the base Button props.

Field	Type	Description
title*	string	Label shown next to the icon — typically the token symbol.
icon	string	Token logo URL.
iconFallback	string	Single-character fallback used when icon fails to load. Defaults to the first character of title.
networkIcon	string	When provided, renders a network badge overlay on the icon.
readOnly	boolean	Hide chevron and suppress click handling — use when there’s nothing to pick.
size	ButtonSize	Size class applied to the button. Pass 'unset' to skip the size class entirely (no padding, no typography) — useful with variant="unstyled".
borderRadius	ButtonBorderRadius	Border radius token. Defaults to a size-dependent value (s → 2xl, m → l, l → xl).
variant	ButtonVariant	Visual variant. Use 'unstyled' to opt out of all built-in styling — the consumer is fully responsible for visuals via className. The Button still provides ref forwarding, disabled/loading plumbing, and icon/children rendering.
loading	boolean	When true, renders a spinner instead of icon/children and disables the button.
fullWidth	boolean	When true, the button stretches to fill its container width.

Signing

UseSignBinaryParameters

Parameters accepted by useSignBinary — TanStack Query mutation options.

type UseSignBinaryParameters = SignBinaryOptions<context>;

UseSignBinaryReturnType

Return type of useSignBinary — TanStack Query mutation result.

type UseSignBinaryReturnType = UseMutationResult<
    SignBinaryData,
    SignBinaryErrorType,
    SignBinaryVariables,
    context
>;

UseSignCellParameters

Parameters accepted by useSignCell — TanStack Query mutation options.

type UseSignCellParameters = SignCellOptions<context>;

UseSignCellReturnType

Return type of useSignCell — TanStack Query mutation result.

type UseSignCellReturnType = UseMutationResult<
    SignCellData,
    SignCellErrorType,
    SignCellVariables,
    context
>;

UseSignTextParameters

Parameters accepted by useSignText — TanStack Query mutation options.

type UseSignTextParameters = SignTextOptions<context>;

UseSignTextReturnType

Return type of useSignText — TanStack Query mutation result.

type UseSignTextReturnType = UseMutationResult<
    SignTextData,
    SignTextErrorType,
    SignTextVariables,
    context
>;

Staking

SelectUnstakeModeProps

Props accepted by SelectUnstakeMode.

Field	Type	Description
value*	UnstakeModes	Currently selected unstake mode (see UnstakeMode).
onValueChange*	(mode: UnstakeModes) => void	Called when the user picks a different mode.
providerInfo*	StakingProviderInfo | undefined	Dynamic provider info — used to show the instant-unstake limit when available.
providerMetadata*	StakingProviderMetadata | undefined	Static provider metadata — supplies supportedUnstakeModes and stake-token formatting.

StakingBalanceBlockProps

Props accepted by StakingBalanceBlock.

Field	Type	Description
providerMetadata*	StakingProviderMetadata | undefined	Provider metadata — supplies the stake/receive tokens (address, ticker, decimals).
direction*	StakingQuoteDirection	Operation direction. Selects which token and balance to render.
stakedBalance	string	User’s currently staked amount, used when direction === 'unstake'.
isStakedBalanceLoading	boolean	True while the staked balance is being fetched.
balance	string	User’s wallet balance of the stake token, used when direction === 'stake'.
isBalanceLoading	boolean	True while the wallet balance is being fetched.
onMaxClick	() => void	When provided, renders a MAX button that invokes this callback.

StakingContextType

Shape of the staking context exposed by StakingWidgetProvider and read via useStakingContext. Aggregates inputs (amount, direction, unstake mode), fetched data (balances, quote, provider info/metadata), derived flags (canSubmit, error, loading states), and the actions used by StakingWidgetUI (send transaction, switch provider, max, low-balance handling).

Field	Type	Description
amount*	string	Amount the user wants to stake (string to preserve input UX)
canSubmit*	boolean	Whether the user can proceed with staking (checks balance, amount validity, etc.)
quote*	StakingQuote | undefined	Raw staking quote from the provider
isQuoteLoading*	boolean	True while the stake quote is being fetched
error*	string | null	Current validation/fetch error for staking, null when everything is ok
providerInfo*	StakingProviderInfo | undefined	Staking provider dynamic info (APY, instant unstake availability, etc.)
providerMetadata*	StakingProviderMetadata | undefined	Staking provider static metadata
stakingProvider*	StakingProvider | undefined	Currently selected staking provider (defaults to the first registered one)
stakingProviders*	StakingProvider[]	All registered staking providers
setStakingProviderId*	(providerId: string) => void	Updates the selected staking provider
network*	Network | undefined	Network the widget is operating on (resolved from prop or wallet)
direction*	StakingQuoteDirection	Current operation direction: ‘stake’ or ‘unstake’
isProviderInfoLoading*	boolean	True while provider info is being fetched
balance*	string | undefined	Base balance (native or jetton) available for staking
isBalanceLoading*	boolean	True while base balance is being fetched
stakedBalance*	StakingBalance | undefined	User’s currently staked balance
isStakedBalanceLoading*	boolean	True while staked balance is being fetched
unstakeMode*	UnstakeModes	Selected unstake-timing mode — 'INSTANT', 'WHEN_AVAILABLE', or 'ROUND_END'. See UnstakeMode.
setAmount*	(amount: string) => void	Sets the input amount
setUnstakeMode*	(mode: UnstakeModes) => void	Sets the unstake mode
sendTransaction*	() => Promise<void>	Triggers the staking/unstaking transaction
onChangeDirection*	(direction: StakingQuoteDirection) => void	Changes the direction (stake/unstake)
isSendingTransaction*	boolean	True while a transaction is being processed
isReversed*	boolean	True if the user is inputting the output amount (“I want to get X”)
toggleReversed*	() => void	Toggles between inputting from amount and output amount
reversedAmount*	string	Amount displayed in the reversed (bottom) input
onMaxClick*	() => void	Sets the input amount to the maximum available balance (leaves room for TON gas on native stake)
isLowBalanceWarningOpen*	boolean	True when the built transaction outflow exceeds the user’s TON balance
lowBalanceMode*	'reduce' | 'topup'	reduce when the outgoing token is TON (user can fix by changing amount), topup otherwise.
lowBalanceRequiredTon*	string	Required TON amount for the pending operation, formatted as a decimal string. Empty when no pending op.
onLowBalanceChange*	() => void	Replace the input with a value that fits within the current TON balance and close the warning.
onLowBalanceCancel*	() => void	Dismiss the low-balance warning without changing the input.

StakingInfoProps

Props accepted by StakingInfo.

Field	Type	Description
quote*	StakingQuote | undefined	Current staking quote — its amountOut is rendered in the “You get” row.
isQuoteLoading*	boolean	True while the quote is being fetched. Swaps the “You get” value for a skeleton.
providerInfo*	StakingProviderInfo | undefined	Dynamic provider info — supplies APY and exchange rate.
providerMetadata*	StakingProviderMetadata | undefined	Static provider metadata — supplies token tickers/decimals and the provider name.
isProviderInfoLoading*	boolean	True while provider info is being fetched.
direction	StakingQuoteDirection	Operation direction — controls which token’s decimals/ticker label the “You get” amount. Defaults to 'stake'.

StakingProviderProps

Props accepted by StakingWidgetProvider.

Field	Type	Description
network	Network	Network used for quote fetching, balance reads, and transactions. Falls back to the connected wallet’s network when omitted.

StakingSettingsModalProps

Props accepted by StakingSettingsModal.

Field	Type	Description
open*	boolean	Controls modal visibility.
onClose*	() => void	Called when the user dismisses the modal or after a successful save.
provider*	StakingProvider | undefined	Currently active staking provider — used to preselect the option when the modal opens.
providers*	StakingProvider[]	All registered staking providers to choose from.
onProviderChange*	(providerId: string) => void	Invoked with the chosen providerId when the user saves a different selection.
network	Network	Network used to resolve each provider’s display name via its metadata.

StakingWidgetProps

Props accepted by StakingWidget. Extends StakingProviderProps (e.g. network) and standard <div> props forwarded to the default UI.

Field	Type	Description
children	(props: StakingWidgetRenderProps) => ReactNode	Optional render-prop. When provided, the default StakingWidgetUI is bypassed and this function is called with the full StakingWidgetRenderProps (context state + forwarded <div> props), letting consumers build a custom UI on top of the widget’s internal logic.
network	Network	Network used for quote fetching, balance reads, and transactions. Falls back to the connected wallet’s network when omitted.

StakingWidgetRenderProps

Props accepted by StakingWidgetUI (also the argument type for the StakingWidget render-prop). Combines the full StakingContextType with standard <div> props forwarded to the outer wrapper.

Field	Type	Description
amount*	string	Amount the user wants to stake (string to preserve input UX)
canSubmit*	boolean	Whether the user can proceed with staking (checks balance, amount validity, etc.)
quote*	StakingQuote | undefined	Raw staking quote from the provider
isQuoteLoading*	boolean	True while the stake quote is being fetched
error*	string | null	Current validation/fetch error for staking, null when everything is ok
providerInfo*	StakingProviderInfo | undefined	Staking provider dynamic info (APY, instant unstake availability, etc.)
providerMetadata*	StakingProviderMetadata | undefined	Staking provider static metadata
stakingProvider*	StakingProvider | undefined	Currently selected staking provider (defaults to the first registered one)
stakingProviders*	StakingProvider[]	All registered staking providers
setStakingProviderId*	(providerId: string) => void	Updates the selected staking provider
network*	Network | undefined	Network the widget is operating on (resolved from prop or wallet)
direction*	StakingQuoteDirection	Current operation direction: ‘stake’ or ‘unstake’
isProviderInfoLoading*	boolean	True while provider info is being fetched
balance*	string | undefined	Base balance (native or jetton) available for staking
isBalanceLoading*	boolean	True while base balance is being fetched
stakedBalance*	StakingBalance | undefined	User’s currently staked balance
isStakedBalanceLoading*	boolean	True while staked balance is being fetched
unstakeMode*	UnstakeModes	Selected unstake-timing mode — 'INSTANT', 'WHEN_AVAILABLE', or 'ROUND_END'. See UnstakeMode.
setAmount*	(amount: string) => void	Sets the input amount
setUnstakeMode*	(mode: UnstakeModes) => void	Sets the unstake mode
sendTransaction*	() => Promise<void>	Triggers the staking/unstaking transaction
onChangeDirection*	(direction: StakingQuoteDirection) => void	Changes the direction (stake/unstake)
isSendingTransaction*	boolean	True while a transaction is being processed
isReversed*	boolean	True if the user is inputting the output amount (“I want to get X”)
toggleReversed*	() => void	Toggles between inputting from amount and output amount
reversedAmount*	string	Amount displayed in the reversed (bottom) input
onMaxClick*	() => void	Sets the input amount to the maximum available balance (leaves room for TON gas on native stake)
isLowBalanceWarningOpen*	boolean	True when the built transaction outflow exceeds the user’s TON balance
lowBalanceMode*	'reduce' | 'topup'	reduce when the outgoing token is TON (user can fix by changing amount), topup otherwise.
lowBalanceRequiredTon*	string	Required TON amount for the pending operation, formatted as a decimal string. Empty when no pending op.
onLowBalanceChange*	() => void	Replace the input with a value that fits within the current TON balance and close the warning.
onLowBalanceCancel*	() => void	Dismiss the low-balance warning without changing the input.

UseBuildStakeTransactionReturnType

Return type of useBuildStakeTransaction — TanStack Query mutation result that resolves to a TransactionRequest.

type UseBuildStakeTransactionReturnType = UseMutationResult<
    BuildStakeTransactionData,
    BuildStakeTransactionErrorType,
    BuildStakeTransactionVariables,
    context
>;

UseStakedBalanceParameters

Parameters accepted by useStakedBalance — TanStack Query options (select, enabled, staleTime, …) plus the owner address, optional network override and optional providerId.

Field	Type	Description
userAddress	UserFriendlyAddress	Owner whose staked balance should be read.
network	Network	Network to query. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
providerId	string	Provider to query. Defaults to the registered default staking provider.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseStakedBalanceReturnType

Return type of useStakedBalance — TanStack Query result carrying the user’s staked balance.

type UseStakedBalanceReturnType = UseQueryReturnType<
    selectData,
    GetStakedBalanceErrorType
>;

UseStakingProviderInfoParameters

Parameters accepted by useStakingProviderInfo — TanStack Query options (select, enabled, staleTime, …) plus an optional providerId and network override.

Field	Type	Description
network	Network	Network whose staking pool should be inspected. Defaults to the selected wallet’s network. If no wallet is selected, falls back to AppKit’s default network, or mainnet when none is set.
providerId	string	Provider to query. Defaults to the registered default staking provider.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseStakingProviderInfoReturnType

Return type of useStakingProviderInfo — TanStack Query result carrying live StakingProviderInfo.

type UseStakingProviderInfoReturnType = UseQueryReturnType<
    selectData,
    GetStakingProviderInfoErrorType
>;

UseStakingProviderMetadataParameters

Parameters accepted by useStakingProviderMetadata — optional providerId and network override.

type UseStakingProviderMetadataParameters = GetStakingProviderMetadataOptions;

UseStakingProviderMetadataReturnType

Return type of useStakingProviderMetadata — static StakingProviderMetadata for the resolved provider, or undefined when no provider matches and no default is registered (the hook swallows the throw from getStakingProviderMetadata).

type UseStakingProviderMetadataReturnType = GetStakingProviderMetadataReturnType | undefined;

UseStakingProviderParameters

Parameters accepted by useStakingProvider — optional provider id forwarded to getStakingProvider.

type UseStakingProviderParameters = GetStakingProviderOptions;

UseStakingProviderReturnType

Return type of useStakingProvider — the matching staking provider, or undefined when none resolves (the hook swallows the throw from getStakingProvider).

type UseStakingProviderReturnType = GetStakingProviderReturnType | undefined;

UseStakingProvidersReturnType

Return type of useStakingProviders — array of registered staking providers.

type UseStakingProvidersReturnType = GetStakingProvidersReturnType;

UseStakingQuoteParameters

Parameters accepted by useStakingQuote — TanStack Query options (select, enabled, staleTime, …) plus stake/unstake amount, direction, target asset and optional providerId/network override.

Field	Type	Description
direction	StakingQuoteDirection	Direction of the quote (stake or unstake)
amount	string	Amount of tokens to stake or unstake.
userAddress	UserFriendlyAddress	Address of the user.
network	Network	Network on which the staking will be executed.
unstakeMode	UnstakeModes	Unstake-timing mode the quote should target — see UnstakeMode for the supported flavours ('INSTANT', 'WHEN_AVAILABLE', 'ROUND_END'). Only meaningful when direction === 'unstake' and the provider lists the mode in supportedUnstakeModes.
isReversed	boolean	If true, for unstake requests the amount is specified in the staking coin (e.g. TON) instead of the Liquid Staking Token (e.g. tsTON).
providerOptions	TProviderOptions = unknown	Provider-specific options.
providerId	string	Provider to quote against. Defaults to the registered default staking provider.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseStakingQuoteReturnType

Return type of useStakingQuote — TanStack Query result carrying a StakingQuote.

type UseStakingQuoteReturnType = UseQueryReturnType<
    selectData,
    GetStakingQuoteErrorType
>;

Swap

SwapContextType

Shape of the value exposed by useSwapContext. Holds the selected source/target tokens, the entered amount and the latest quote, balance readouts, validation state, slippage / provider settings, and the callbacks needed to mutate them or to submit the swap transaction.

Field	Type	Description
tokens*	AppkitUIToken[]	Full list of available tokens for swapping
tokenSections	TokenSectionConfig[]	Optional section configs for grouping tokens in the selector
fromToken*	AppkitUIToken | null	Currently selected source token
toToken*	AppkitUIToken | null	Currently selected target token
fromAmount*	string	Amount the user wants to swap (string to preserve input UX)
toAmount*	string	Calculated receive amount from the current quote
fiatSymbol*	string	Fiat currency symbol for price display, e.g. ”$“
fromBalance*	string | undefined	User’s balance of the “from” token
toBalance*	string | undefined	User’s balance of the “to” token
isFromBalanceLoading*	boolean	True while the “from” balance is being fetched
isToBalanceLoading*	boolean	True while the “to” balance is being fetched
canSubmit*	boolean	Whether the user can proceed with the swap (checks balance, amount, quote)
quote*	GetSwapQuoteData | undefined	Raw swap quote from the provider
isQuoteLoading*	boolean	True while the quote is being fetched from the API
error*	string | null	Current validation or fetch error, null when everything is ok
slippage*	number	Slippage tolerance in basis points (100 = 1%)
swapProvider*	SwapProvider | undefined	Currently selected swap provider (defaults to the first registered one)
swapProviders*	SwapProvider[]	All registered swap providers
setSwapProviderId*	(providerId: string) => void	Updates the selected swap provider
setFromToken*	(token: AppkitUIToken) => void	Updates the source token
setToToken*	(token: AppkitUIToken) => void	Updates the target token
setFromAmount*	(amount: string) => void	Updates the swap amount
setSlippage*	(slippage: number) => void	Updates the slippage tolerance
onFlip*	() => void	Swaps source and target tokens
onMaxClick*	() => void	Sets the “from” amount to the maximum available balance
sendSwapTransaction*	() => Promise<void>	Executes the swap transaction
isSendingTransaction*	boolean	True while a transaction is being built or sent
isLowBalanceWarningOpen*	boolean	True when the built transaction outflow exceeds the user’s TON balance
lowBalanceMode*	'reduce' | 'topup'	reduce when the outgoing token is TON (user can fix by changing amount), topup otherwise.
lowBalanceRequiredTon*	string	Required TON amount for the pending operation, formatted as a decimal string. Empty when no pending op.
onLowBalanceChange*	() => void	Replace the input with a value that fits within the current TON balance and close the warning.
onLowBalanceCancel*	() => void	Dismiss the low-balance warning without changing the input.

SwapFieldProps

Props accepted by SwapField — a single source/target row inside the swap widget that hosts the amount input, token picker trigger, fiat conversion and balance line.

Field	Type	Description
type*	'pay' | 'receive'	pay renders the editable source row with a “max” shortcut. receive renders the read-only target row.
amount*	string	Current amount shown in the input as a human-readable decimal string.
fiatSymbol	string	Fiat currency symbol displayed in front of the converted value. Defaults to "$".
token	AppkitUIToken	Currently selected token. Controls the token selector label, balance formatting and fiat conversion.
onAmountChange	(value: string) => void	Called with the raw input value when the user edits the amount. Only fired for type: "pay".
balance	string	Formatted balance of token for the active wallet, as a human-readable decimal string. Rendered in the balance line beneath the input.
isBalanceLoading	boolean	When true, the balance area renders a skeleton placeholder instead of the value.
loading	boolean	When true, the underlying input renders its loading state — used while a fresh quote is in flight.
onMaxClick	() => void	Called when the user clicks the “max” shortcut to fill the maximum spendable amount.
onTokenSelectorClick	() => void	Called when the user clicks the token selector chip — typically opens a SwapTokenSelectModal.
size	InputSize	Size token applied to the input control(s) inside: `‘s'	'm'	'l’. Defaults to ’m’`.
variant	InputVariant	Visual variant: 'default' paints a filled field. 'unstyled' drops the chrome.
disabled	boolean	When true, descendant input controls are disabled.
error	boolean	When true, the field renders in error styling and Input.Caption switches to error text.
resizable	boolean	When true, Input.Input scales its font down to fit the available width as the user types.

SwapFlipButtonProps

Props accepted by SwapFlipButton — the round button placed between the two SwapField rows that swaps the source and target tokens.

Field	Type	Description
onClick	() => void	Called when the user clicks the button. Wire this to a handler that swaps the source/target tokens (e.g. onFlip from the swap context).
rotated	boolean	When true, the icon is drawn in its rotated state — used to animate between flips.

SwapInfoProps

Props accepted by SwapInfo — the summary block under the swap form that surfaces minimum received, slippage and the chosen provider.

Field	Type	Description
toToken*	AppkitUIToken | null	Target token the user is receiving. Used to format minReceived with the right decimals and symbol.
slippage*	number	Slippage tolerance in basis points (100 = 1%). Rendered as a percentage.
provider	SwapProvider	Current SwapProvider. Its display name is shown in the provider row.
quote	SwapQuote	Quote whose minReceived value is displayed. When undefined the value falls back to 0 (still suffixed with the token symbol).
isQuoteLoading	boolean	When true, the minimum-received value renders a skeleton placeholder instead of the formatted number.

SwapProviderProps

Props accepted by SwapWidgetProvider — the inputs that configure the swap flow (token universe, network override, defaults).

Field	Type	Description
tokens*	AppkitUIToken[]	Full list of tokens available for swapping in the UI. Filtered to the active network internally.
tokenSections	TokenSectionConfig[]	Optional section configs for grouping tokens inside the SwapTokenSelectModal.
defaultFromSymbol	string	Symbol of the token pre-selected as the source on first mount (e.g. "TON").
defaultToSymbol	string	Symbol of the token pre-selected as the target on first mount.
network	Network	Network used for quote fetching and balance reads. When omitted, falls back to the selected wallet’s network via useNetwork.
fiatSymbol	string	Fiat currency symbol displayed next to converted amounts. Defaults to "$".
defaultSlippage	number	Initial slippage tolerance in basis points (100 = 1%). Defaults to 100.

SwapWidgetProps

Props accepted by SwapWidget — extend SwapProviderProps (swap configuration: tokens, network, defaults) with the standard <div> attributes and an optional render-prop override.

Field	Type	Description
children	(props: SwapWidgetRenderProps) => ReactNode	Optional render-prop receiving the full swap context plus the forwarded <div> props. When supplied it replaces the default SwapWidgetUI.
network	Network	Network used for quote fetching and balance reads. When omitted, falls back to the selected wallet’s network via useNetwork.
tokens*	AppkitUIToken[]	Full list of tokens available for swapping in the UI. Filtered to the active network internally.
tokenSections	TokenSectionConfig[]	Optional section configs for grouping tokens inside the SwapTokenSelectModal.
defaultFromSymbol	string	Symbol of the token pre-selected as the source on first mount (e.g. "TON").
defaultToSymbol	string	Symbol of the token pre-selected as the target on first mount.
fiatSymbol	string	Fiat currency symbol displayed next to converted amounts. Defaults to "$".
defaultSlippage	number	Initial slippage tolerance in basis points (100 = 1%). Defaults to 100.

SwapWidgetRenderProps

Props accepted by SwapWidgetUI (and the children render-prop on SwapWidget). Combines the full SwapContextType with the standard <div> attributes forwarded to the wrapper element.

Field	Type	Description
tokens*	AppkitUIToken[]	Full list of available tokens for swapping
tokenSections	TokenSectionConfig[]	Optional section configs for grouping tokens in the selector
fromToken*	AppkitUIToken | null	Currently selected source token
toToken*	AppkitUIToken | null	Currently selected target token
fromAmount*	string	Amount the user wants to swap (string to preserve input UX)
toAmount*	string	Calculated receive amount from the current quote
fiatSymbol*	string	Fiat currency symbol for price display, e.g. ”$“
fromBalance*	string | undefined	User’s balance of the “from” token
toBalance*	string | undefined	User’s balance of the “to” token
isFromBalanceLoading*	boolean	True while the “from” balance is being fetched
isToBalanceLoading*	boolean	True while the “to” balance is being fetched
canSubmit*	boolean	Whether the user can proceed with the swap (checks balance, amount, quote)
quote*	GetSwapQuoteData | undefined	Raw swap quote from the provider
isQuoteLoading*	boolean	True while the quote is being fetched from the API
error*	string | null	Current validation or fetch error, null when everything is ok
slippage*	number	Slippage tolerance in basis points (100 = 1%)
swapProvider*	SwapProvider | undefined	Currently selected swap provider (defaults to the first registered one)
swapProviders*	SwapProvider[]	All registered swap providers
setSwapProviderId*	(providerId: string) => void	Updates the selected swap provider
setFromToken*	(token: AppkitUIToken) => void	Updates the source token
setToToken*	(token: AppkitUIToken) => void	Updates the target token
setFromAmount*	(amount: string) => void	Updates the swap amount
setSlippage*	(slippage: number) => void	Updates the slippage tolerance
onFlip*	() => void	Swaps source and target tokens
onMaxClick*	() => void	Sets the “from” amount to the maximum available balance
sendSwapTransaction*	() => Promise<void>	Executes the swap transaction
isSendingTransaction*	boolean	True while a transaction is being built or sent
isLowBalanceWarningOpen*	boolean	True when the built transaction outflow exceeds the user’s TON balance
lowBalanceMode*	'reduce' | 'topup'	reduce when the outgoing token is TON (user can fix by changing amount), topup otherwise.
lowBalanceRequiredTon*	string	Required TON amount for the pending operation, formatted as a decimal string. Empty when no pending op.
onLowBalanceChange*	() => void	Replace the input with a value that fits within the current TON balance and close the warning.
onLowBalanceCancel*	() => void	Dismiss the low-balance warning without changing the input.

UseBuildSwapTransactionParameters

Parameters accepted by useBuildSwapTransaction — TanStack Query mutation options.

type UseBuildSwapTransactionParameters = BuildSwapTransactionMutationOptions<context>;

UseBuildSwapTransactionReturnType

Return type of useBuildSwapTransaction — TanStack Query mutation result.

type UseBuildSwapTransactionReturnType = UseMutationResult<
    BuildSwapTransactionData,
    BuildSwapTransactionErrorType,
    BuildSwapTransactionVariables,
    context
>;

UseSwapProviderReturnType

Return type of useSwapProvider — [provider, setProviderId] tuple. provider is the default SwapProviderInterface (or undefined when none is registered). setProviderId calls setDefaultSwapProvider and emits provider:default-changed, which watchSwapProviders picks up.

type UseSwapProviderReturnType = readonly [GetSwapProviderReturnType | undefined, (providerId: string) => void];

UseSwapProvidersReturnType

Return type of useSwapProviders — array of every SwapProviderInterface currently registered on the AppKit instance.

type UseSwapProvidersReturnType = GetSwapProvidersReturnType;

UseSwapQuoteParameters

Parameters accepted by useSwapQuote — TanStack Query options (select, enabled, staleTime, …) plus the SwapQuoteParams fields (source/target tokens, amount, isReverseSwap flag) and an optional providerId / network override.

Field	Type	Description
amount	string	Amount of tokens to swap (incoming or outgoing depending on isReverseSwap)
from	SwapToken	Token to swap from.
to	SwapToken	Token to swap to.
network	Network	Network on which the swap will be executed.
slippageBps	number	Slippage tolerance in basis points (1 bp = 0.01%)
maxOutgoingMessages	number	Maximum number of outgoing messages
providerOptions	TProviderOptions = unknown	Provider-specific options.
isReverseSwap	boolean	If true, amount is the amount to receive (buy). If false, amount is the amount to spend (sell).
providerId	string	Provider to quote against. Defaults to the registered default swap provider.
query	QueryOptionsOverride	TanStack Query options forwarded to useQuery (enabled, staleTime, refetchInterval, select, …). queryKey and queryFn are managed by the wrapper.

UseSwapQuoteReturnType

Return type of useSwapQuote — TanStack Query result carrying data (SwapQuote), isLoading, error and the standard companions.

type UseSwapQuoteReturnType = UseQueryReturnType<
    selectData,
    GetSwapQuoteErrorType
>;

Transactions

UseSendTransactionParameters

Parameters accepted by useSendTransaction — TanStack Query mutation options.

type UseSendTransactionParameters = SendTransactionOptions<context>;

UseSendTransactionReturnType

Return type of useSendTransaction — TanStack Query mutation result.

type UseSendTransactionReturnType = UseMutationReturnType<
    SendTransactionData,
    SendTransactionErrorType,
    SendTransactionVariables,
    context,
    (
        variables: SendTransactionVariables,
        options?: MutateOptions<SendTransactionData, SendTransactionErrorType, SendTransactionVariables, context>,
    ) => void,
    MutateFunction<SendTransactionData, SendTransactionErrorType, SendTransactionVariables, context>
>;

UseTransactionStatusParameters

Parameters accepted by useTransactionStatus — boc xor normalizedHash plus optional network and TanStack Query overrides. Pair with query.refetchInterval to poll until the transaction completes.

type UseTransactionStatusParameters = GetTransactionStatusParameters &
    GetTransactionStatusQueryConfig<selectData>;

UseTransactionStatusReturnType

Return type of useTransactionStatus — TanStack Query result for the status read.

type UseTransactionStatusReturnType = UseQueryReturnType<
    selectData,
    GetTransactionStatusErrorType
>;

UseTransferTonParameters

Parameters accepted by useTransferTon — TanStack Query mutation options.

type UseTransferTonParameters = TransferTonOptions<context>;

UseTransferTonReturnType

Return type of useTransferTon — TanStack Query mutation result.

type UseTransferTonReturnType = UseMutationReturnType<
    TransferTonData,
    TransferTonErrorType,
    TransferTonVariables,
    context,
    (
        variables: TransferTonVariables,
        options?: MutateOptions<TransferTonData, TransferTonErrorType, TransferTonVariables, context>,
    ) => void,
    MutateFunction<TransferTonData, TransferTonErrorType, TransferTonVariables, context>
>;

UseWatchTransactionsByAddressParameters

Parameters accepted by useWatchTransactionsByAddress — same fields as WatchTransactionsByAddressOptions, all optional so callers can render the hook before the address is known.

type UseWatchTransactionsByAddressParameters = Partial<WatchTransactionsByAddressOptions>;

UseWatchTransactionsParameters

Parameters accepted by useWatchTransactions.

Field	Type	Description
onChange	(update: TransactionsUpdate) => void	Callback fired on every transactions update from the streaming provider.

UI

BlockProps

Props accepted by Block.

Field	Type	Description
direction	'row' | 'column'	Flex direction of the block. Defaults to 'column'.

ButtonProps

Props accepted by Button.

Field	Type	Description
size	ButtonSize	Size class applied to the button. Pass 'unset' to skip the size class entirely (no padding, no typography) — useful with variant="unstyled".
borderRadius	ButtonBorderRadius	Border radius token. Defaults to a size-dependent value (s → 2xl, m → l, l → xl).
variant	ButtonVariant	Visual variant. Use 'unstyled' to opt out of all built-in styling — the consumer is fully responsible for visuals via className. The Button still provides ref forwarding, disabled/loading plumbing, and icon/children rendering.
loading	boolean	When true, renders a spinner instead of icon/children and disables the button.
fullWidth	boolean	When true, the button stretches to fill its container width.
icon	ReactNode	Optional leading icon rendered before children when not loading.

CenteredAmountInputProps

Props accepted by CenteredAmountInput.

Field	Type	Description
value*	string	Controlled input value (decimal string).
onValueChange*	(value: string) => void	Called with the new string whenever the user edits the input.
ticker	string	Optional trailing ticker label (e.g., 'TON').
symbol	string	Optional leading currency symbol (e.g., '$').
placeholder	string	Placeholder shown when value is empty. Defaults to '0'.
disabled	boolean	When true, the underlying <input> is disabled.

CollapsibleProps

Props accepted by Collapsible.

Field	Type	Description
open*	boolean	When true, the content is expanded. When false, it is collapsed to zero height.

IconProps

Standard props for all icon components.

Icons render an <svg> whose dimensions are controlled by size. Color is inherited from currentColor, so style icons by setting color on a parent.

Field	Type	Description
size	number	Square size of the icon in pixels. Defaults to DEFAULT_ICON_SIZE.

InputContainerProps

Props accepted by Input.Container (also used by Input itself).

Field	Type	Description
size	InputSize	Size token applied to the input control(s) inside: `‘s'	'm'	'l’. Defaults to ’m’`.
variant	InputVariant	Visual variant: 'default' paints a filled field. 'unstyled' drops the chrome.
disabled	boolean	When true, descendant input controls are disabled.
error	boolean	When true, the field renders in error styling and Input.Caption switches to error text.
loading	boolean	When true, Input.Input renders a skeleton placeholder instead of an <input>.
resizable	boolean	When true, Input.Input scales its font down to fit the available width as the user types.
children*	ReactNode	Compound sub-components (header, field, control, caption).

InputControlProps

Props accepted by Input.Input — standard <input> props. Size, disabled, loading, and resizable behavior are inherited from the surrounding Input.Container.

type InputControlProps = ComponentProps<'input'>;

InputFieldProps

Props accepted by Input.Field.

Field	Type	Description
children*	ReactNode	Field content — typically slots and the input control laid out horizontally.

InputHeaderProps

Props accepted by Input.Header.

Field	Type	Description
children*	ReactNode	Header content — typically a Input.Title and optional trailing controls.

InputSlotProps

Props accepted by Input.Slot.

Field	Type	Description
side	'left' | 'right'	Which edge of the field the slot adheres to.

LogoProps

Props accepted by Logo.

Field	Type	Description
size	number	Square size in pixels for the rendered logo. Defaults to 30.
src	string	Image URL to render. While loading or on failure, the fallback is shown.
alt	string	Alt text passed to the underlying <img>. When fallback is not provided, its first character is shown as the fallback. If both are missing, no fallback is rendered.
fallback	string	Text shown in place of the image when src fails or is missing (defaults to the first character of alt).

LogoWithNetworkProps

Props accepted by LogoWithNetwork.

Field	Type	Description
size	number	Size of the main logo in pixels. Defaults to 30. The network badge is sized to size * 0.4.
src	string	Image source for the main logo.
alt	string	Alt text for the main logo.
fallback	string	Fallback text shown when the main logo image fails or is missing.
networkSrc	string	Image source for the network badge overlay. When omitted, the badge is not rendered.
networkAlt	string	Alt text for the network badge.

ModalProps

Props accepted by Modal.

Field	Type	Description
open	boolean	Controlled open state.
onOpenChange	(open: boolean) => void	Called whenever the open state changes (e.g., via the close button, overlay click, or Escape).
title	string	Optional title rendered in the modal header.
children	ReactNode	Modal body content.
className	string	Additional class name applied to the content container.
bodyClassName	string	Additional class name applied to the body container.

SelectContentProps

Props accepted by Select.Content.

Field	Type	Description
align	'start' | 'end'	Horizontal alignment relative to the trigger.
sideOffset	number	Gap between trigger and content in pixels.

SelectItemProps

Props accepted by Select.Item.

Field	Type	Description
value*	string	Value committed to Select.Root when this item is chosen.
disabled	boolean	When true, the item is not selectable and is excluded from keyboard navigation.

SelectRootProps

Props accepted by Select.Root.

Field	Type	Description
value	string	Controlled selected value.
defaultValue	string	Initial value when uncontrolled.
onValueChange	(value: string) => void	Called whenever the selected value changes.
open	boolean	Controlled open state.
defaultOpen	boolean	Initial open state when uncontrolled.
onOpenChange	(open: boolean) => void	Called whenever the open state changes.
disabled	boolean	When true, the trigger is non-interactive.
children*	ReactNode	Compound sub-components — Select.Trigger, Select.Content, Select.Item.

SelectTriggerProps

Props accepted by Select.Trigger — same as ButtonProps. The trigger inherits disabled from the surrounding root if set.

type SelectTriggerProps = ButtonProps;

SkeletonProps

Props accepted by Skeleton.

Field	Type	Description
width	string | number	Width of the placeholder. Accepts any valid CSS length or a number (interpreted as pixels).
height	string | number	Height of the placeholder. Accepts any valid CSS length or a number (interpreted as pixels).

TabsContentProps

Props accepted by TabsContent.

Field	Type	Description
value*	string	Value this panel is associated with — rendered only when the parent Tabs is on this value.
children*	ReactNode	Panel content.

TabsListProps

Props accepted by TabsList.

Field	Type	Description
children*	ReactNode	Tab triggers — typically one or more TabsTriggers.

TabsProps

Props accepted by Tabs.

Field	Type	Description
value	string	Controlled active tab value.
defaultValue	string	Initial active tab when uncontrolled. Defaults to ''.
onValueChange	(value: string) => void	Called whenever the active tab changes.
children*	ReactNode	Compound sub-components — typically TabsList (with TabsTriggers) followed by TabsContents.

TabsTriggerProps

Props accepted by TabsTrigger.

Field	Type	Description
value*	string	Value committed to the parent Tabs when this trigger is activated.
children*	ReactNode	Trigger label / content.

Wallets

UseAddressReturnType

Return type of useAddress — undefined when no wallet is selected.

type UseAddressReturnType = string | undefined;

UseConnectParameters

Parameters accepted by useConnect — TanStack Query mutation options (onSuccess, onError, onMutate, retry, …).

type UseConnectParameters = ConnectOptions<context>;

UseConnectReturnType

Return type of useConnect — TanStack Query mutation result with mutate/mutateAsync and the standard companions.

type UseConnectReturnType = UseMutationReturnType<
    ConnectData,
    ConnectErrorType,
    ConnectVariables,
    context,
    (
        variables: ConnectVariables,
        options?: MutateOptions<ConnectData, ConnectErrorType, ConnectVariables, context>,
    ) => void,
    MutateFunction<ConnectData, ConnectErrorType, ConnectVariables, context>
>;

UseConnectedWalletsReturnType

Return type of useConnectedWallets — same shape as GetConnectedWalletsReturnType.

type UseConnectedWalletsReturnType = GetConnectedWalletsReturnType;

UseDisconnectParameters

Parameters accepted by useDisconnect — TanStack Query mutation options.

type UseDisconnectParameters = DisconnectOptions<context>;

UseDisconnectReturnType

Return type of useDisconnect — TanStack Query mutation result.

type UseDisconnectReturnType = UseMutationReturnType<
    DisconnectData,
    DisconnectErrorType,
    DisconnectVariables,
    context,
    (
        variables: DisconnectVariables,
        options?: MutateOptions<DisconnectData, DisconnectErrorType, DisconnectVariables, context>,
    ) => void,
    MutateFunction<DisconnectData, DisconnectErrorType, DisconnectVariables, context>
>;

UseSelectedWalletReturnType

Return type of useSelectedWallet — [wallet, setWalletId] tuple. wallet is the active WalletInterface (or null). setWalletId calls setSelectedWalletId and emits wallets:selection-changed.

type UseSelectedWalletReturnType = readonly [GetSelectedWalletReturnType, (walletId: string | null) => void];

Constants

Crypto Onramp

DEFAULT_CHAINS

Default mapping of CAIP-2 chain identifiers to ChainInfo used by the crypto onramp widget. Consumers can override or extend this map via the chains prop on CryptoOnrampWidgetProvider.

const DEFAULT_CHAINS = {
    'eip155:1': { name: 'Ethereum' },
    'eip155:10': { name: 'Optimism' },
    'eip155:56': { name: 'BSC' },
    'eip155:137': { name: 'Polygon' },
    'eip155:8453': { name: 'Base' },
    'eip155:42161': {
        name: 'Arbitrum One',
        logo: 'https://cdn.layerswap.io/layerswap/networks/arbitrum_mainnet.png',
    },
    'eip155:43114': { name: 'Avalanche' },
    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': { name: 'Solana' },
    'bip122:000000000019d6689c085ae165831e93': { name: 'Bitcoin' },
};

UI

DEFAULT_ICON_SIZE

Default size in pixels (24) applied to icons when size is not provided.

const DEFAULT_ICON_SIZE = 24;