fix: functions issue in nft dapp

docs/quick-start/developers/nft-dapp/_command_interaction.md

@@ -0,0 +1,82 @@
+
+For this NFT contract, you don't need to write a separate contract. Instead, you'll use an already deployed Multi-Token Contract with the following functions.
+
+### 4.1 Creating an NFT Collection on MainChain
+
+Open your terminal and run:
+
+```bash
+aelf-command send JRmBduh4nXWi1aXgdUsj5gJrzeZb2LxmrAbf7W99faZSvoAaE -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io Create
+```
+
+- Replace the placeholder values with your actual details.
+
+:::tip
+ℹ️ Note: `JRmBduh4nXWi1aXgdUsj5gJrzeZb2LxmrAbf7W99faZSvoAaE` is the contract address of the Multi-Token Contract on **aelf Testnet Mainchain**.
+:::
+
+### 4.2 Validate TokenInfoExist on MainChain
+
+```bash
+aelf-command send JRmBduh4nXWi1aXgdUsj5gJrzeZb2LxmrAbf7W99faZSvoAaE -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io ValidateTokenInfoExists
+```
+
+:::tip
+ℹ️ Note: `transactionId` Note down the trasnactionId from the above transaction will be used in **step 3**.
+:::
+
+### 4.3 Create NFT Collection on dAppChain
+
+:::tip
+ℹ️ Note: This step cannot be executed via the command line interface (CLI).
+:::
+
+```bash
+aelf-command send ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io CrossChainCreateToken
+```
+
+```bash
+transactionBytes = Buffer.from(signedTx, "hex").toString("base64")
+```
+
+:::tip
+ℹ️ Note: Replace the placeholder values with your actual details.
+:::
+
+:::tip
+ℹ️ Note: `ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx` is the contract address of the Multi-Token Contract on **aelf Testnet dAppChain**.
+:::
+
+### 4.4 Create NFT Token on MainChain
+
+```bash
+aelf-command send JRmBduh4nXWi1aXgdUsj5gJrzeZb2LxmrAbf7W99faZSvoAaE -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io Create
+```
+
+### 4.5 Validate Nft Token on MainChain
+
+```bash
+aelf-command send JRmBduh4nXWi1aXgdUsj5gJrzeZb2LxmrAbf7W99faZSvoAaE -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io ValidateTokenInfoExists
+```
+
+### 4.6 Create NFT Token on dAppChain
+
+```bash
+aelf-command send ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io CrossChainCreateToken
+```
+
+```bash
+transactionBytes = Buffer.from(signedTx, "hex").toString("base64")
+```
+
+### 4.7 Issue NFT Token on dAppChain
+
+```bash
+aelf-command send ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io Issue
+```
+
+### 4.8 Transfer NFT
+
+```bash
+aelf-command send ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io Transfer
+```

docs/quick-start/developers/nft-dapp/_conclusion.md

@@ -0,0 +1,37 @@
+## 🎯 Conclusion
+
+🎊 Congratulations on successfully setting up your development environment and interacting with your deployed smart contract! 🎊 You've laid a strong foundation for creating innovative applications on the aelf blockchain. 🌟
+
+**📚 What You've Learned**
+
+Throughout this section, you've acquired essential skills in:
+
+- **🛠️ Setting Up Your Development Environment**: You installed necessary tools like the .NET SDK, aelf contract templates, and the aelf deploy tool to prepare for smart contract development.
+
+- **📦 Installing Node.js, Yarn, and aelf-command**: These tools enable efficient interaction with the aelf blockchain, facilitating wallet creation and transaction management.
+
+- **💡 Getting NFT Seed**: You learned how to obtain an NFT seed from the NFT Faucet, a critical step for creating NFT collections.
+
+- **🔧 Configuring Frontend Integration**: You cloned a frontend project and configured it to connect with your smart contract, allowing for seamless user interaction with your dApp.
+
+**🔍 Final Output**
+
+By now, you should have:
+
+- 📜 Successfully set up your development environment and installed all required packages.
+
+- 💻 Configured your frontend to interact with the NFT smart contract, enabling functionalities like creating and transferring NFTs.
+
+**➡️ What's Next?**
+
+With a solid understanding of environment setup and contract interaction, you're ready to explore more advanced aspects of blockchain development. Consider delving into:
+
+- **📊 Advanced Smart Contract Logic**: Enhance your contracts with complex features and security measures.
+
+- **🔒 Security Protocols**: Implement robust security protocols to safeguard your applications and smart contracts.
+
+- **🌐 Cross-Chain Interoperability**: Explore how aelf facilitates communication between different blockchains, broadening your development capabilities.
+
+Keep pushing the boundaries of blockchain technology with aelf. Your journey is just beginning, and the potential for innovation in decentralized applications is vast. 🚀
+
+Happy coding and building on the aelf blockchain! 😊

docs/quick-start/developers/nft-dapp/_configure_portkey_and_connect_wallet.md

@@ -0,0 +1,130 @@
+### Configure Portkey Provider & Write Connect Wallet Function
+
+We'll set up our Portkey provider to allow users to connect their Portkey wallets to our app and interact with the aelf smart contracts. We'll be interacting with the already deployed multi-token contract for this tutorial.
+
+**Step 1. Locate the File:**
+
+- Go to the `src/hooks/useNFTSmartContract.ts` file.
+
+**Step 2. Fetch the Smart Contract:**
+
+- Find the comment `//Step A - Function to fetch a smart contract based on the chain symbol and the contract address.`
+
+- Replace the existing **`fetchContract`** function with this updated code:
+
+```javascript title="useNFTSmartContract.ts"
+//Step A - Function to fetch a smart contract based on the chain symbol and the contract address
+const fetchContract = async (
+  symbol: "AELF" | "tDVW",
+  contractAddress: string
+) => {
+  try {
+    // If no provider is available, return null
+    if (!provider) return null;
+
+    // Fetch the chain information using the provider
+    const chain = await provider.getChain(symbol);
+    if (!chain) throw new Error("Chain not found");
+
+    // Get the smart contract instance from the chain
+    const contract = chain.getContract(contractAddress);
+
+    // Return the smart contract instance
+    return contract;
+  } catch (error) {
+    console.error("Error in fetchContract", { symbol, contractAddress, error });
+  }
+};
+```
+
+**Explanation:**
+
+- **`fetchContract`** **Function**: This function fetches a smart contract based on the given chain symbol (e.g., "AELF" or "tDVW") and the contract address.
+
+  - **Check Provider** : If no provider is available, the function returns null.
+  - **Fetch Chain** : The function fetches chain information using the provider.
+  - **Get Contract** : It retrieves the smart contract instance from the chain.
+  - **Error Handling** : If an error occurs, it logs the error to the console.
+
+**Step 3. Initialize and Fetch the Smart Contracts:**
+
+- Find the comment `// Step B - Effect hook to initialize and fetch the smart contracts when the provider changes.`
+
+- Replace the existing **`useEffect`** hook with this updated code:
+
+```javascript title="useNFTSmartContract.ts"
+// Step B -  Effect hook to initialize and fetch the smart contracts when the provider changes
+  useEffect(() => {
+    (async () => {
+      // Fetch the MainChain Testnet Contract
+      const mainChainContract = await fetchContract(
+        "AELF",
+        "JRmBduh4nXWi1aXgdUsj5gJrzeZb2LxmrAbf7W99faZSvoAaE"
+      );
+      setMainChainSmartContract(mainChainContract as IContract);
+
+      // Fetch the dAppChain Testnet Contract
+      const sideChainContract = await fetchContract(
+        "tDVW",
+        "ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx"
+      );
+      setSideChainSmartContract(sideChainContract as IContract);
+    })();
+  }, [provider]); // Dependency array ensures this runs when the provider changes
+```
+
+**Explanation:**
+
+- **`useEffect`** **Hook** : This hook initializes and fetches the smart contracts when the provider changes.
+
+  - **Check Provider** : If no provider is available, the function returns null.
+  - **Fetch Contracts** : It fetches and sets the smart contracts for the main chain, side chain, and cross chain.
+    - **MainChain Contract** : Fetches the MainChain Testnet Contract and sets it in the state.
+    - **dAppChain Contract** : Fetches the dAppChain Testnet Contract and sets it in the state.
+
+By following these steps, we'll configure the Portkey provider to connect users' wallets to your app and interact with the multi-token smart contract including NFT related functionalities. This setup will enable our frontend components to perform actions like `create NFTs`, `validate NFTs`, and `transfer NFTs`.
+
+### Configure Connect Wallet Function
+
+**Step 1: Locate the File**
+
+- Go to the `src/components/layout/header/index.tsx` file.
+
+**Step 2: Write the Connect Wallet Function**
+
+- The `header/index.tsx` file is the header of our NFT dApp. It allows users to connect their Portkey wallet with the NFT dApp.
+
+- Before users can interact with the smart contract, we need to write the `Connect Wallet` function.
+
+- Find the comment `// Step C - Connect Portkey Wallet`.
+
+- Replace the existing connect function with this code snippet:
+
+```javascript title="header/index.tsx"
+const connect = async (walletProvider?: IPortkeyProvider) => {
+  // Step C - Connect Portkey Wallet
+  const accounts = await (walletProvider ? walletProvider : provider)?.request({
+    method: MethodsBase.REQUEST_ACCOUNTS,
+  });
+  const account = accounts?.AELF && accounts?.AELF[0];
+  if (account) {
+    setCurrentWalletAddress(account.replace(/^ELF_/, "").replace(/_AELF$/, ""));
+    setIsConnected(true);
+  }
+  !walletProvider && toast.success("Successfully connected");
+};
+```
+
+**Explanation:**
+
+- **`connect`** **Function** : This function connects the user's Portkey wallet with the dApp.
+
+  - **Fetch Accounts** : It fetches the wallet accounts using the provider.
+  - **Log Accounts** : Logs the accounts to the console for debugging.
+  - **Set Wallet Address** : Sets the current wallet address state variable with the fetched account.
+  - **Update Connection Status** : Updates the state to indicate that the wallet is connected.
+  - **User Notification** : Displays an alert to notify the user that their wallet is successfully connected.
+
+In this code, we fetch the Portkey wallet account using the provider and update the wallet address state variable. An alert notifies the user that their wallet is successfully connected.
+
+With the Connect Wallet function defined, we're ready to write the remaining functions in the next steps.