bitpro가 원문에서 글자만 모은 내용이에요. 표·그림·수식은 빠지거나 깨질 수 있어요. 전체 41쪽 중 37쪽
unction
getNFTData
retrieves NFT data from the user's wallet.
Calls Fetch Function:
It calls the
fetchUserNftData
function with the
currentWalletAddress
parameters.
Handles Result:
It checks the result:
If the result is not "error", it updates the state with the fetched NFT data by calling
setUserNfts(result)
.
Updates Loading State:
Regardless of the result, it sets the loading state to false by calling
setLoading(false)
.
Step 4: Call fetchUserNftData Functions on Profile Page
go to the
src/pages/profile/index.tsx
file.
The
profile/index.tsx
file contains the Home Page of NFT dApp
Find the comment
// get NFT Data from User's wallet
.
Replace the existing
getNFTData
function with this code snippet:
profile/index.tsx
// get NFT Data from User's wallet
const
getNFTData
=
async
(
)
=>
{
const
result
=
await
fetchUserNftData
(
currentWalletAddress
as
string
)
;
if
(
result
!==
"error"
)
{
setUserNfts
(
result
)
;
}
setLoading
(
false
)
;
}
;
Here's what the function does:
Fetches NFT Data:
The function
getNFTData
retrieves NFT data from the user's wallet.
Calls Fetch Function:
It calls the
fetchUserNftData
function with the
currentWalletAddress
parameters.
Handles Result:
It checks the result:
If the result is not "error", it updates the state with the fetched NFT data by calling
setUserNfts(result)
.
Updates Loading State:
Regardless of the result, it sets the loading state to false by calling
setLoading(false)
.
Transfer NFT Token
As we have completed
Create
and
Fetch NFT
so now it's time to
Transfer NFT
.
So now let's
Transfer NFT
to other wallet now.
Step 1: Locate the File
go to the
src/pages/transfer-nft/index.tsx
file. This file is the
Transfer NFT
page where users can enter details like the
address
,
amount
and
memo
.
Step 2: Prepare Form for Transfer NFT
Find the comment
// Configure NFT Transfer Form
.
Replace the form variable with this code snippet:
transfer-nft/index.tsx
// Configure NFT Transfer Form
const
form
=
useForm
<
z
.
infer
<
typeof
formSchema
>>
(
{
resolver
:
zodResolver
(
formSchema
)
,
defaultValues
:
{
address
:
""
,
amount
:
"0"
,
memo
:
""
,
}
,
}
)
;
Here's what the function does:
Initializes a new form variable with default values needed to transfer a nft.
Fields include:
address
,
amount
, and
memo
.
Now your form is ready for users to fill in the necessary details for their NFTs Transfer function Interaction.
Step 3: Create NFT Transfer Function
Find the comment
// Transfer NFT to Other Wallet
.
Replace the form variable with this code snippet:
transfer-nft/index.tsx
// Transfer NFT to Other Wallet
const
transferNftToOtherAccount
=
async
(
values
:
{
address
:
string
;
amount
:
string
;
memo
:
string
;
}
)
=>
{
if
(
Number
(
values
.
amount
)
>
Number
(
nftBalance
)
)
{
toast
.
error
(
"Amount must be Less than or Equal to Supply Balance"
)
;
return
;
}
const
transferNFTLoadingId
=
toast
.
loading
(
"Transfer Transaction Executing"
)
;
try
{
const
transferNtfInput
=
{
to
:
values
.
address
,
symbol
:
nftSymbol
,
amount
:
+
values
.
amount
,
memo
:
values
.
memo
,
}
;
await
sideChainSmartContract
?.
callSendMethod
(
"Transfer"
,
currentWalletAddress
,
transferNtfInput
)
;
toast
.
update
(
transferNFTLoadingId
,
{
render
:
"NFT Transferred Successfully!"
,
type
:
"success"
,
isLoading
:
false
,
}
)
;
removeNotification
(
transferNFTLoadingId
)
;
await
delay
(
3000
)
;
handleReturnClick
(
)
;
}
catch
(
error
)
{
if
(
error
instanceof
Error
)
{
toast
.
error
(
error
.
message
)
;
}
else
{
toast
.
error
(
"An unexpected error occurred."
)
;
}
}
;
}
;
Here's what the function does:
Transfers NFT to Another Wallet:
The function
transferNftToOtherAccount
transfers a specified amount of an NFT to another wallet.
Parameters:
It takes a
values
object containing:
address
: The destination wallet 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 usePort 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!
🎯 Conclusion
🎉 Congratulations on completing the advanced NFT dApp tutorial with AEIndexer on the aelf blockchain! 🎉 You've successfully mastered not only the fundamentals of NFT development but also the sophisticated techniques of data indexing and multi-layered interactions. 🌟
📚 What You've Learned
Through this advanced tutorial, you’ve gained expertise in:
🛠️ Setting Up Your Development Environment
: Prepared a robust foundation for smooth development and deployment processes.
📂 Creating and Configuring AEIndexer
:Learned
to set up AeIndexer in AeFinder to manage and index NFT data efficiently.
🖋️ Developing NFT AeIndexer
: Built a structured, scalable project with customized files for NFT indexing and optimized data organization.
🚀 Deploying AeIndexer
: Deployed and integrated the AeIndexer to enhance querying capabilities within your dApp.
🔍 Querying Indexed Data
: Enabled fast and accurate retrieval of NFT-related data using indexed results.
🌱 Obtaining NFT Seed
: Familiarized yourself with the NFT Faucet for initializing NFT creation.
💻 Smart Contract Interaction through Frontend
: Configured your dApp for end-to-end functionality, including wallet connection, form-based NFT creation, and token transfers.
🔍 Final Output
By the end of this journey, you’ve accomplished:
🌐 Successfully creating and deploying an AEIndexer for seamless NFT data indexing.
🎨 Developing and interacting with NFT collections and tokens through a fully configured frontend.
⚡ Optimizing dApp performance with efficient querying of indexed blockchain data..
➡️ What's Next?
With a firm grasp of advanced indexing and NFT development, you're ready to push the boundaries of blockchain technology even further. Consider exploring:
📊 Advanced Data Indexing Strategies
: Scale your AEIndexer to support complex queries and large datasets.
🔒 Enhanced Smart Contract Logic
: Strengthen your contracts with innovative features and robust security protocols.
🌐 Cross-Chain NFT Interoperability
: Expand your dApp’s functionality by exploring how aelf connects blockchains seamlessly.
Your journey in blockchain innovation is just beginning. Keep experimenting, building, and shaping the future of decentralized applications with aelf! 🚀
Happy coding and indexing! 😊
Step 1 - Setting up your development environment
Step 2 - Create AeIndexer in AeFinder
Step 3 - Develop NFT AeIndexer
Download the Development Template
Project Structure
Setting Up the Files for NFT AeIndexer
Updated Project Structure
Building code
Step 4 - Deploy AeIndexer
Step 5 - Query indexed data
Step 6 - Getting NFT Seed
Step 7 - Interact with Smart Contract through frontend dApp
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
🎯 Conclusion
## /quick-start/node-operators/simulating-a-bp-node
On this page
Description
: A guide for simulating a block producer (BP) election and running BP nodes in a local environment within the aelf blockchain ecosystem.
Purpose
: To instruct developers on how to set up, configure, and manage multiple nodes, participate in BP elections, and perform key operations for local environment simulations.
Set up a Full Node
To simulate BP nodes in a local environment, you need to set up at least three nodes, as a single node cannot become a BP. BP elections occur every 7 days, but for this tutorial, we'll change the term to 120 seconds. Follow the steps below:
Find the
appsettings.json
file in
/.../src/AElf.Launcher
and configure the public keys of the three nodes:
appsettings.json
"Consensus"
:
{
"InitialMinerList"
:
[
"04884d9563b3b67a5*****526dd489e3805211cba710d956718*****"
,
"045670526219d7315*****8629891b0617ab605e646ae78961c*****"
,
"046a5913eae5fee3d*****3826beb2b7109b5141679a1927338*****"
]
,
"MiningInterval"
:
4000
,
"StartTimestamp"
:
0
,
"PeriodSeconds"
:
120
,
"MinerIncreaseInterval"
:
31536000
}
Change
PeriodSeconds
from 604800 to 120 for a 2-minute election term.
Shut down nodes and delete all Redis data. Restart your multi-nodes.
Become a Candidate Node
Stake 100,000 ELF to join the node election. Ensure you have enough balance by checking with:
Terminal
aelf-command call AElf.ContractNames.Token GetBalance
'{"symbol": "ELF", "owner": "YOUR_ADDRESS"}'
If balance < 100,005 ELF, transfer ELF tokens using:
Terminal
aelf-command send AElf.ContractNames.Token Transfer
'{"symbol": "ELF", "to": "YOUR_ADDRESS", "amount": "10000000000000"}'
Announce your candidacy:
Terminal
aelf-command send AElf.ContractNames.Election AnnounceElection
'{"value": "YOUR_ADDRESS"}'
-a
YOUR_ADDRESS
Check candidate information:
Terminal
aelf-command call AElf.ContractNames.Election GetCandidateInformation
'{"value":"YOUR_PUBLIC_KEY"}'
Users Vote for Nodes
Create a user account:
Terminal
aelf-command create
Transfer ELF to the new account for voting (e.g., 2000 ELF):
Terminal
aelf-command send AElf.ContractNames.Token Transfer
'{"symbol": "ELF", "to": "USER_ADDRESS", "amount": "200000000000"}'
Check balance of the new account:
Terminal
aelf-command call AElf.ContractNames.Token GetBalance
'{"symbol": "ELF", "owner": "USER_ADDRESS"}'
Vote for the candidate node (e.g., 20 ELF):
Terminal
aelf-command send AElf.ContractNames.Election Vote
'{"candidatePubkey":"CANDIDATE_PUBLIC_KEY","amount":2000000000,"endTimestamp":{"seconds":1600271999,"nanos":999000}}'
-a
USER_ADDRESS
Check candidate votes:
Terminal
aelf-command call AElf.ContractNames.Election GetCandidateVote
'{"value":"CANDIDATE_PUBLIC_KEY"}'
Become a BP
The top 2N+1 candidate nodes are elected as BPs in the next term. Get the list of current BPs:
Terminal
aelf-command call AElf.ContractNames.Consensus GetCurrentMinerPubkeyList
'{}'
Add More BPs
Repeat the steps to add more BPs. No need to edit
appsettings.json
again. When candidate nodes exceed the max BPs, they replace genesis nodes, which cannot participate in elections again.
Proceed to
contract deployment
and
DApp development
guides for more details.
Set up a Full Node
Add More BPs
## /quick-start/node-operators/set-up-a-node-on-testnet
On this page
Description
: Instructions for setting up and running an aelf testnet node using Docker or binaries, including database setup and configuration.
Purpose
: To provide detailed guidance on configuring, deploying, and maintaining an aelf testnet node, facilitating testing and development of decentralized applications.
You can run an aelf node using Docker (recommended) or GitHub binaries.
Before starting, install the necessary tools and frameworks. Detailed instructions are in the
environment setup
section.
Steps to Set Up a Node:
Download and load the database snapshot.
Download template settings and Docker run script.
Modify appsettings as needed.
Run and check the node.
Minimum Configuration:
c5.large or N2 instance: 2 vCPU, 4GiB RAM, 800GiB storage, 5 Mbps internet bandwidth
Recommended Configuration:
c5.xlarge or N2 instance: 4 vCPU, 8GiB RAM, 800GiB storage, 100 Mbps internet bandwidth
Note:
For testing or dApp deployment, run a dAppChain node only. Use the same configuration for multiple nodes on both MainChain and dAppChain.
Time Syncing:
Ensure your server is time-synced via NTP to avoid syncing issues.
Setup the Database
We support Redis and SSDB. For testnet, we use SSDB snapshots. Configure two SSDB instances: one for chain database and one for state database.
Import the Snapshot Data
Download Snapshot:
mkdir
snapshot
cd
snapshot
curl
-O
-s
https://aelf-node.s3-ap-southeast-1.amazonaws.com/snapshot/testnet/download-mainchain-db.sh
sh
download-mainchain-db.sh
Restore Chain Database:
tar
xvzf aelf-testnet-mainchain-chaindb-*.tar.gz
stop your chain database insta프로젝트로 돌아가기
