How to work with NFTs using AppKit

import {
  useNft,
  useAddress,
} from '@ton/appkit-react';

export const NftCard = ({ nftAddress }) => {
  const address = useAddress();
  const {
    data: nft,
    isLoading,
    error,
  } = useNft({
    // NFT contract address
    address: nftAddress ?? '<NFT_CONTRACT_ADDRESS>',
  });

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

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

  return (
    <div>
      <p><em>NFT info</em></p>
      <p>Name: {nft?.info?.name}</p>
      <p>Collection: {nft?.collection?.name}</p>
      <p>Owner address: {nft?.ownerAddress?.toString()}</p>
      <p>Am I the owner: {address && nft?.ownerAddress === address ? 'yes' : 'no'}</p>
    </div>
  );
};

import {
  type AppKit,
  type NFT,
  getNft,
  getSelectedWallet,
} from '@ton/appkit';

async function fetchNft(
  /** Initialized AppKit instance */
  kit: AppKit,
  /** NFT contract address */
  nftAddress: string,
): Promise<NFT | null> {
  const selectedWallet = getSelectedWallet(kit);
  const nft = await getNft(kit, {
    address: nftAddress,
  });
  console.log('NFT info');
  console.log(`Name: ${nft?.info?.name}`);
  console.log(`Collection: ${nft?.collection?.name}`);
  console.log(`Owner address: ${nft?.ownerAddress?.toString()}`);
  console.log(
    `Am I the owner: ${nft?.ownerAddress === selectedWallet?.getAddress() ? 'yes' : 'no'}`
  );
  return nft;
}

import {
  useNftsByAddress,
  useAddress,
  // Helper function targeting the connected wallet
  useNfts,
} from '@ton/appkit-react';

export const NftListByAddress = () => {
  const address = useAddress();
  const {
    data: nfts,
    isLoading,
    error,
  } = useNftsByAddress({
    // TON wallet address of the NFT holder
    address: address ?? '<TON_WALLET_ADDRESS>',
  });

  // Alternatively, query the connected wallet directly
  // const { data: nfts, isLoading, error } = useNfts();

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

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

  return (
    <div>
      <p><em>NFTs</em></p>
      <ul>
        {nfts?.nfts.map((nft) => (
          <li key={nft.address}>
            {nft.info?.name}: {nft.info?.description ?? '—.'}
          </li>
        ))}
      </ul>
    </div>
  );
};

import {
  type AppKit,
  type NFT,
  getNftsByAddress,
  getSelectedWallet,
  // Helper function targeting the connected wallet
  getNfts,
} from '@ton/appkit';

async function fetchNftsByAddress(
  /** AppKit instance */
  kit: AppKit,
): Promise<NFT[]> {
  const selectedWallet = getSelectedWallet(kit);
  const response = await getNftsByAddress(kit, {
    address: selectedWallet?.getAddress() ?? '<TON_WALLET_ADDRESS>',
  });

  // Alternatively, query the connected wallet directly
  // const response = await getNfts();

  console.log('NFTs by address:', response.nfts.length);
  return response.nfts;
}

import {
  useNfts,
} from '@ton/appkit-react';

export const NftsCard = () => {
  const {
    data: nfts,
    isLoading,
    error,
    refetch,
  } = useNfts({
    // Only looks for up to 100 NFTs at a time
    limit: 100,
  });

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

  if (error) {
    return (
      <div>
        <p>Error: {error.message}</p>
        <button onClick={() => refetch()}>Try again</button>
      </div>
    );
  }

  return <div>NFTs by address: {nfts?.nfts.length}</div>;
};

// Not runnable: implement the updateNftGallery()
import {
  type AppKit,
  type NFT,
  getNfts,
} from '@ton/appkit';

/**
 * Starts the monitoring of a given wallet's NFT ownership,
 * calling `onNftsUpdate()` every `intervalMs` milliseconds
 *
 * @returns a function to stop monitoring
 */
export function startNftOwnershipMonitoring(
  kit: AppKit,
  onNftsUpdate: (nfts: NFT[]) => void,
  intervalMs: number = 10_000,
): () => void {
  let isRunning = true;

  const poll = async () => {
    while (isRunning) {
      // Only looks for up to 100 NFTs.
      // To get more, call the `getNfts()` function
      // multiple times with increasing offsets
      const nfts = await getNfts(kit, { limit: 100 });
      onNftsUpdate(nfts?.nfts ?? []);
      await new Promise((resolve) => setTimeout(resolve, intervalMs));
    }
  };

  // Start monitoring
  poll();

  // Return a cleanup function to stop monitoring
  return () => {
    isRunning = false;
  };
}

// Usage
const stopMonitoring = startNftOwnershipMonitoring(
  kit,
  // The updateNftGallery() function is exemplary and should
  // be replaced by an app function that refreshes the NFT gallery
  // displayed in the interface
  (balance) => updateNftGallery(balance),
);

// Stop monitoring once it is no longer needed
stopMonitoring();

import { useTransferNft } from '@ton/appkit-react';

export const SendNft = ({ recipientAddress, nftAddress }) => {
  const { mutate: transfer, isPending, error, data } = useTransferNft();

  const handleTransfer = () => {
    transfer({
      // New owner of the sent NFT.
      // For example: 'UQ...'
      recipientAddress,

      // NFT contract address.
      nftAddress,

      // (optional) Additional Toncoin sent to recipient.
      // An amount string in fractional units.
      // For example, '0.1' or '1' Toncoin.
      amount: '<FRACTIONAL_TONCOIN_AMOUNT>',

      // (optional) Comment string. Defaults to none if not provided.
      comment: 'Hello from AppKit!',
    });
  };

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

import {
  type AppKit,
  type Base64String,
  // Single-call transfer
  transferNft,
  // Two-step transfer: create a transaction object separately from sending it
  createTransferNftTransaction,
  sendTransaction,
} from '@ton/appkit';

async function sendNft(
  /** Initialized AppKit instance */
  kit: AppKit,
  /** Recipient's TON wallet address as a string */
  recipientAddress: string,
  /** NFT contract address */
  nftAddress: string,
  /**
   * Optional additional Toncoin sent to recipient.
   * An amount string in fractional units.
   * E.g., '0.1' or '1' Toncoin.
   */
  amount?: string,
  /** Optional comment string */
  comment?: string,
) {
  // Sign and send via TON Connect
  const result = await transferNft(kit, {
    recipientAddress,
    nftAddress,
    ...(amount && { amount }),
    ...(comment && { comment }),
  });
  console.log('Transaction sent:', result.boc);

  // Alternatively, build the transaction first with createTransferNftTransaction,
  // then pass the resulting object to the sendTransaction function.
}