feat(appkit): how to work with nfts

docs.json

@@ -141,7 +141,8 @@
               "ecosystem/appkit/overview",
               "ecosystem/appkit/init",
               "ecosystem/appkit/toncoin",
-              "ecosystem/appkit/jettons"
+              "ecosystem/appkit/jettons",
+              "ecosystem/appkit/nfts"
             ]
           },
           {

ecosystem/appkit/jettons.mdx

@@ -79,18 +79,18 @@ Each jetton holder has a dedicated jetton wallet contract. To resolve its addres
   ```tsx title="React" icon="react" expandable
   import {
     useJettonWalletAddress,
-    useSelectedWallet,
+    useAddress,
   } from '@ton/appkit-react';
 
   export const JettonWalletAddressCard = ({ jettonAddress }) => {
-    const [wallet, _] = useSelectedWallet();
+    const ownerAddress = useAddress();
     const {
       data: walletAddress,
       isLoading,
       error,
     } = useJettonWalletAddress({
       // TON wallet address of the jetton holder
-      ownerAddress: wallet?.getAddress() ?? '<TON_WALLET_ADDRESS>',
+      ownerAddress: ownerAddress ?? '<TON_WALLET_ADDRESS>',
 
       // Jetton master (minter) contract address
       jettonAddress,
@@ -145,7 +145,7 @@ USDT has a decimal precision of 6, meaning that the fractional balance string `'
 <Aside
   type="caution"
 >
-  Do not store the balance check results anywhere in the wallet service's state, as they become outdated quickly. For UI purposes, do [continuous balance monitoring](#continuous-balance-monitoring).
+  Do not store the balance check results anywhere in the application state, as they become outdated quickly. For UI purposes, do [continuous balance monitoring](#continuous-balance-monitoring).
 </Aside>
 
 #### Single jetton
@@ -156,18 +156,18 @@ Check the balance of a specific jetton for the connected TON wallet or an arbitr
   ```tsx title="React" icon="react"
   import {
     useJettonBalanceByAddress,
-    useSelectedWallet,
+    useAddress,
   } from '@ton/appkit-react';
 
   export const JettonBalanceCard = ({ jettonAddress }) => {
-    const [wallet, _] = useSelectedWallet();
+    const ownerAddress = useAddress();
     const {
       data: balance,
       isLoading,
       error,
     } = useJettonBalanceByAddress({
       // TON wallet address of the jetton holder
-      ownerAddress: wallet?.getAddress() ?? '<TON_WALLET_ADDRESS>',
+      ownerAddress: ownerAddress ?? '<TON_WALLET_ADDRESS>',
 
       // Jetton master (minter) contract address
       jettonAddress,
@@ -222,20 +222,20 @@ Retrieve every jetton held by the connected TON wallet or an arbitrary address:
   ```tsx title="React" icon="react"
   import {
     useJettonsByAddress,
-    useSelectedWallet,
+    useAddress,
     // Helper function targeting the connected wallet
     useJettons,
   } from '@ton/appkit-react';
 
   export const JettonListByAddress = () => {
-    const [wallet, _] = useSelectedWallet();
+    const address = useAddress();
     const {
       data: jettons,
       isLoading,
       error,
     } = useJettonsByAddress({
       // TON wallet address of the jetton holder
-      address: wallet?.getAddress() ?? '<TON_WALLET_ADDRESS>',
+      address: address ?? '<TON_WALLET_ADDRESS>',
     });
 
     // Alternatively, query the connected wallet directly
@@ -303,19 +303,19 @@ Modify the following example according to the application logic:
   ```tsx title="React" icon="react"
   import {
     useJettonBalanceByAddress,
-    useSelectedWallet,
+    useAddress,
   } from '@ton/appkit-react';
 
   export const JettonBalanceCard = ({ jettonAddress }) => {
-    const [wallet, _] = useSelectedWallet();
+    const ownerAddress = useAddress();
     const {
       data: balance,
       isLoading,
       error,
       refetch,
     } = useJettonBalanceByAddress({
       // TON wallet address of the jetton holder
-      ownerAddress: wallet?.getAddress() ?? '<TON_WALLET_ADDRESS>',
+      ownerAddress: ownerAddress ?? '<TON_WALLET_ADDRESS>',
 
       // Jetton master (minter) contract address
       jettonAddress,
@@ -412,6 +412,8 @@ Modify the following example according to the application logic:
   Mitigation: Verify the correct `decimals` value before calculating transfer amounts. For USDTs, the decimals value is 6.
 </Aside>
 
+Jetton transfers require various Toncoin [transaction fees](/foundations/fees). Before making a transfer, make sure there is enough Toncoin in the balance to cover the fees.
+
 Modify the following examples according to the application logic:
 
 <CodeGroup>
@@ -559,6 +561,17 @@ Modify the following examples according to the application logic:
   ```
 </CodeGroup>
 
+## Next steps
+
+<Columns cols={2}>
+  <Card
+    title="Work with NFTs"
+    icon="image"
+    horizontal="true"
+    href="/ecosystem/appkit/nfts"
+  />
+</Columns>
+
 ## See also
 
 Jettons: