aelf 백서 전문

et address. amount : The amount of NFT to transfer. memo : An optional memo for the transfer. Checks Balance: It checks if the transfer amount is greater than the available nftBalance . If it is, it shows an error message and exits the function. Displays Loading Toast: It displays a loading toast notification indicating that the transfer transaction is executing. Prepares Transfer Data: It prepares the transfer data in the transferNtfInput object, which includes the destination address, NFT symbol, transfer amount, and memo. Executes Transfer: It calls the Transfer method on the side chain smart contract to execute the transfer. Success Handling: If the transfer is successful: It updates the toast notification to indicate success. It removes the loading notification. It waits for 3 seconds using await delay(3000) . It calls handleReturnClick to handle any post-transfer actions. Error Handling: If an error occurs during the transfer: It logs the error message to the console. It displays an error toast notification with the error message. Step 4: Configure on handle Submit Form Find the comment // Handle Transfer Submit Form . Replace the form variable with this code snippet: // Handle Transfer Submit Form function onSubmit ( values : z . infer < typeof formSchema > ) { transferNftToOtherAccount ( values ) ; } Here's what the function does: Handles Form Submission: The function onSubmit handles the submission of a transfer form. Parameters: It takes values , which is inferred from the formSchema and represents the form's data. Calls Transfer Function: It calls the transferNftToOtherAccount function with the form values to initiate the NFT transfer. Now that we've written all the necessary frontend functions and components, we're ready to run the NFT dApp application in the next step. Run Application In this step, we will run the NFT dApp application. To begin, run the following command on your terminal. Terminal npm run dev info ℹ️ Note: Ensure that you are running this command under the nft/2-dapp folder. You should observe the following as shown below. Upon clicking on the localhost URL , you should be directed to the NFTs landing page as shown below. tip If you are developing and testing this with GitHub codespace, you can use Port Forward to test the web server that is running in codespace, here is the link on how to use Port forward for codespace https://docs.github.com/en/codespaces/developing-in-a-codespace/forwarding-ports-in-your-codespace Usually codespace will automatically forward port, you should see a pop-up message at the bottom right of your codespace browser window as shown in the diagram below: Click the link to open the NFT dApp in the browser. Create Portkey Wallet info Portkey is the first AA wallet from aelf's ecosystem, migrating users, developers and projects from Web2 to Web3 with DID solution. Users can swiftly log into Portkey via their Web2 social info with no private keys or mnemonics required. Underpinned by social recovery and decentralized guardian design, Portkey safeguards users' assets from centralized control and theft. Portkey has a unique payment delegation mechanism which enables interested parties to function as delegatees to pay for user activities on users' behalf. This means that users can create accounts for free and fees for other usages may also be covered in Portkey. Portkey also provides crypto on/off-ramp services, allowing users to exchange fiat with crypto freely. It supports the storage and management of various digital assets such as tokens, NFTs, etc. The compatibility with multi-chains and seamless connection to all kinds of DApps makes Portkey a great way to enter the world of Web3. With DID solution as its core, Portkey provides both Portkey Wallet and Portkey SDKs. For more information, you may visit the official documentation for Portkey at https://doc.portkey.finance/ . Download the Chrome extension for Portkey from https://chromewebstore.google.com/detail/portkey-wallet/iglbgmakmggfkoidiagnhknlndljlolb . info The Portkey extension supports Chrome browser only (for now). Please ensure that you are using Chrome browser. You may download Chrome from https://www.google.com/intl/en_sg/chrome/ . Once you have downloaded the extension, you should see the following on your browser as shown below. Click on Get Start and you should see the following interface as shown below. Sign up Switch to aelf Testnet network by selecting it: danger Please make sure you are using aelf Testnet in order to be able to receive your testnet tokens from the Faucet. Proceed to sign up with a Google Account or your preferred login method and complete the necessary accounts creation prompts and you should observe the following interface once you have signed up. With that, you have successfully created your very first Portkey wallet within seconds. How easy was that? info It is highly recommended to pin the Portkey wallet extension for easier access and navigation to your Portkey wallet! Next, click on ‘Open Portkey’ and you should now observe the following as shown below. Connect Portkey Wallet Click on "Connect Wallet" to connect your Portkey wallet. The button will change to "Your Wallet Address" when the connection is successful. Create NFT Collection Click on "Create NFT Collection" button to create new NFT Collection. You will be redirect this create NFT Collection page Now you need NFT Seed for create the new collection. If you Don't have NFT Seed then please follow this steps to get it. Open you Portkey Wallet and you will find the NFT Seed on NFT Tab. Copy the Token Symbol and use it on Symbol field of Form Submission of Create Collection. Fill all other Necessary Fields like Token Name means (Collection Name) , Total Supply , Decimals . Click on Create Collection Button. You will get Transaction Request on your Portkey Wallet so Sign In the Transaction. After Sign In the Transaction, Please wait to complete these steps. It will take approx 3-4 minutes. NFT Collection Created Successfully On MainChain. Validating Token Successfully Executed. Collection was Created Successfully On dAppChain. Create NFT Token Once you done with create collection process the Now, It's time to Create NFT. info Please make sure the Symbol will be change to [your_symbol]-id . ie VARBFUXYTY-1 , VARBFUXYTY-2 , VARBFUXYTY-3 etc. It means you can only create Collection with id 0 like VARBFUXYTY-0 and for NFT Token Please use another integer as a id in Symbol. Fill all Necessary Fields in Create NFT Form like Token Name means (Collection Name) , Symbol means (NFT Symbol) , and Total Supply . Click on Create NFT Button. You will get Transaction Request on your Portkey Wallet so Sign In the Transaction for Create NFT as above you got for Create NFT Collection After Sign In the Transaction, Please wait to complete these steps. It will take approx 3-4 minutes. NFT Created Successfully on MainChain. Validating NFT Successfully Executed. NFT Created Successfully On dAppChain. You will get NFT on your Wallet! It can take sometimes to get into your wallet. After Successfully Create NFT, Now you redirected to Home page and as you can see you will get the NFT in your account. (It' take some time to store your NFT in your wallet so please reload the page multiple times till you get the NFT). You will also able you access you NFT data on your Profile Page . Transfer NFT Token Once you get NFT in your account like above image then it's time to transfer NFT to another account. Please Click on "Transfer NFT" Button. Now you will be redirected to Transfer NFT page . Please Fill all the Necessary Fields for Transfer NFT to another account like below image 👇. Click on Transfer NFT button. Your NFT Transfer Successfully to another account. success 🎉 Congratulations Learners! You have successfully built your NFT dApp and this is no mean feat! Step 4 - Interact with Deployed Multi-Token Smart Contract 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: 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 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). aelf-command send ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io CrossChainCreateToken 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 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 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 aelf-command send ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io CrossChainCreateToken transactionBytes = Buffer.from ( signedTx, "hex" ) .toString ( "base64" ) 4.7 Issue NFT Token on dAppChain aelf-command send ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io Issue 4.8 Transfer NFT aelf-command send ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx -a $WALLET_ADDRESS -p $WALLET_PASSWORD -e https://aelf-test-node.aelf.io Transfer 🎯 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! 😊 Step 1 - Setting up your development environment Step 2 - Getting NFT Seed Step 3 - Interact with aelf's multi-token contract Project Setup Configure Portkey Provider & Write Connect Wallet Function Configure Connect Wallet Function Configure Create NFT Form Code Create NFT Collection Create NFT Token Configure Submit Form Fetch NFT Data Transfer NFT Token Run Application Step 4 - Interact with Deployed Multi-Token Smart Contract 4.1 Creating an NFT Collection on MainChain 4.2 Validate TokenInfoExist on MainChain 4.3 Create NFT Collection on dAppChain 4.4 Create NFT Token on MainChain 4.5 Validate Nft Token on MainChain 4.6 Create NFT Token on dAppChain 4.7 Issue NFT Token on dAppChain 4.8 Transfer NFT 🎯 Conclusion ## /quick-start/developers/todo-dapp On this page Description : This contract is moderately complex, demonstrating task management functionalities such as creating, updating, and deleting tasks. It also includes features for task prioritization and user interaction. Purpose : To introduce you to task management systems in smart contracts, focusing on state management, user interactions, and contract updates for efficient handling of to-do tasks. Difficulty Level : Moderate Step 1 - Setting up your development environment Local Codespaces Basic knowledge of terminal commands IDE - Install VS Code Note for Apple Silicon users: Ensure that Rosetta is installed, if it is not, use the following command: Terminal softwareupdate --install-rosetta Install Required Packages Install dotnet 8.0.x SDK Install aelf contract templates Linux and macOs Windows Terminal dotnet new --install AElf.ContractTemplates Command Prompt dotnet new install AElf.ContractTemplates AELF.ContractTemplates contains various predefined templates for the ease of developing smart contracts on the aelf blockchain. Install aelf deploy tool Terminal dotnet tool install --global aelf.deploy aelf.deploy is a utility tool for deploying smart contracts on the aelf blockchain. Please remember to export PATH after installing aelf.deploy. info ℹ️ Note: If you have installed aelf.deploy and your terminal says that there is no such command available, please uninstall and install aelf.deploy. Install Node.js and Yarn Install Node.js Install Yarn Install aelf-command Linux and macOs Windows Terminal sudo npm i -g aelf-command Command Prompt npm i -g aelf-command aelf-command is a CLI tool for interacting with the aelf blockchain, enabling tasks like creating wallets and managing transactions. Provide required permissions while installing aelf-command globally. Visit aelf-devcontainer-template . Click the Use this template button. Choose Create a new repository . Enter a suitable repository name. Click Create repository . Within the GitHub interface of your new repository, click on Code . Select Codespaces . Click on the + sign to create a new Codespace. After some time, your workspace will load with the contents of the repository. You can now continue your development using GitHub Codespaces. Step 2 - Develop Smart Contract Start Your Smart Contract Project Open your Terminal . Enter the following command to generate a new project: Terminal mkdir todo-app cd todo-app dotnet new aelf -n ToDoApp Adding Your Smart Contract Code Now that we have a template todo list project, we can customise the template to incorporate our own contract logic. Let's start by implementing methods to handle the basic functionality of creating, editing, listing, deleting, and marking tasks as complete within the contract state. ToDo dApp includes the below functionalities like: Create a task (Name, category, description, createAt, updatedAt) Mark task as completed Delete a task List all the tasks Edit a task Enter this command in your Terminal . Terminal cd src Defining Methods and Messages Rename the proto file name hello_world_contract.proto inside folder Protobuf/contract/ to todo_app.proto : Terminal mv Protobuf/contract/hello_world_contract.proto Protobuf/contract/todo_app.proto The .proto file defines the structure and serialization of data, ensuring consistent communication and data exchange between the contract and external systems. Open the project with your IDE. The implementation of todo_app.proto file inside folder src/Protobuf/contract/ is as follows: todo_app.proto syntax = "proto3" ; import "aelf/options.proto" ; import "google/protobuf/empty.proto" ; import "google/protobuf/wrappers.proto" ; import "Protobuf/reference/acs12.proto" ; // The namespace of this class option csharp_namespace = "AElf.Contracts.ToDo" ; service ToDo { // The name of the state class the smart contract is going to use to access blockchain state option ( aelf . csharp_state ) = "AElf.Contracts.ToDo.ToDoState" ; option ( aelf . base ) = "Protobuf/reference/acs12.proto" ; rpc Initialize ( google . protobuf . Empty ) returns ( google . protobuf . Empty ) { } rpc CreateTask ( TaskInput ) returns ( google . protobuf . StringValue ) { } rpc UpdateTask ( TaskUpdateInput ) returns ( google . protobuf . Empty ) { } rpc DeleteTask ( google . protobuf . StringValue ) returns ( google . protobuf . Empty ) { } rpc ListTasks ( google . protobuf . StringValue ) returns ( TaskList ) { option ( aelf . is_view ) = true ; } rpc GetTask ( google . protobuf . StringValue ) returns ( Task ) { option ( aelf . is_view ) = true ; } rpc GetInitialStatus ( google . protobuf . Empty ) returns ( google . protobuf . BoolValue ) { option ( aelf . is_view ) = true ; } } // A message to represent a task message Task { string task_id = 1 ; string name = 2 ; string description = 3 ; string category = 4 ; string status = 5 ; string owner = 6 ; int64 created_at = 7 ; int64 updated_at = 8 ; } // Input for creating a task message TaskInput { string name = 1 ; string description = 2 ; string category = 3 ; } // Input for updating a task message TaskUpdateInput { string task_id = 1 ; string name = 2 ; string description = 3 ; string category = 4 ; string status = 5 ; } // List of tasks message TaskList { repeated Task tasks = 1 ; } rpc methods define the callable functions within the contract, allowing external systems to interact with the contract's logic. message represent the structured data exchanged between the contract and external systems. Define Contract States The implementation of the ToDo app state inside file src/ToDoAppState.cs is as follows: src/ToDoAppState.cs using AElf . Sdk . CSharp . State ; using AElf . Types ; namespace AElf . Contracts . ToDo { public class ToDoState : ContractState { public BoolState Initialized { get ; set ; } public SingletonState < Address > Owner { get ; set ; } public MappedState < string , Task > Tasks { get ; set ; } // Mapping of task ID to Task public MappedState < string , bool > TaskExistence { get ; set ; } // Mapping to track task existence public StringState TaskIds { get ; set ; } // Concatenated string of task IDs public Int32State TaskCounter { get ; set ; } // Counter for ge