From f93646a259c77af6a296e7cf3eb31aa600f6c65a Mon Sep 17 00:00:00 2001 From: salaheldinsoliman Date: Wed, 24 Jul 2024 18:43:49 +0200 Subject: [PATCH 1/6] feat: add cross chain tutorial part II Signed-off-by: salaheldinsoliman --- .../cross-chain-nft-marketplace-part-2.md | 297 ++++++++++++++++++ docs/build/isc/v1.1/sidebars.js | 2 +- .../cross-chain-nft-marketplace-part-2.md | 297 ++++++++++++++++++ docs/build/isc/v1.3/sidebars.js | 2 +- .../cross-chain-nft-marketplace-part-2.md | 297 ++++++++++++++++++ 5 files changed, 893 insertions(+), 2 deletions(-) create mode 100644 docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md create mode 100644 docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md create mode 100644 docs/tutorials/cross-chain-nft-marketplace-part-2.md diff --git a/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md b/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md new file mode 100644 index 00000000000..38ad8b4d572 --- /dev/null +++ b/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md @@ -0,0 +1,297 @@ +# Cross-chain NFT Marketplace: Part II + +This is the second part of a three-part series that will guide you as you build a cross-chain NFT marketplace using IOTA EVM Smart Contracts. The marketplace will allow users to trade NFTs on the ShimmerEVM Testnet and BNB Testnet. + +[Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) already covered the setup of the project and the deployment of the NFT marketplace contract on the ShimmerEVM Testnet. + +In this part, we will manually bridge NFTs from the BNB Testnet to the Shimmer EVM Testnet and list them on the marketplace. + + + + +## Prerequisites + +- [Node.js](https://nodejs.org) >= v18.0 +- [Hardhat](https://hardhat.org) >= v2.0.0 +- [npx](https://www.npmjs.com/package/npx) >= v7.1.0. +- [Project setup from Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) + + +## Configuration + +In this part, we will add the configuration for the BNB Testnet to the `hardhat.config.js` file. The configuration will include the network name, the chain ID, the RPC URL, and the account private key. Update the `hardhat.config.js` from part 1 of the turtorial as follows: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/hardhat.config.js +``` + + +## Contracts + +We will need the contracts responsible for sending and receiving NFTs across chains. The contracts are as follows: + + +### MyERC721.sol + +A standard ERC721-compatible contract that allows minting and transferring of NFTs, used as an example for the tutorial. This contract is to be deployed on the BNB Testnet, and the NFTs minted will be bridged to the ShimmerEVM Testnet. + +The full contract code is as follows: + +```solidity reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyERC721.sol +``` + + +### MyProxyONFT721.sol +An instance of `ProxyONFT` that will be deployed on the BNB Testnet and will be responsible for sending NFTs from the BNB Testnet to the ShimmerEVM Testnet. + +the full contract code is as follows: + +```solidity reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyProxyONFT721.sol +``` + + +### MyONFT721.sol +An instance of `ONFT721` that will be deployed on the ShimmerEVM Testnet and will be responsible for receiving NFTs from the BNB Testnet. + +However, for convienience, our `ONFT721` instance will override the [_nonblockingLzReceive](https://github.com/LayerZero-Labs/solidity-examples/blob/cdc93994911829b1348f6ac18000000a43432ef1/contracts/token/onft721/ONFT721Core.sol#L103) function, in order to automatically mint the received NFTs to the receiver. + +This is how it looked like originally: +```solidity + function _nonblockingLzReceive( + uint16 _srcChainId, + bytes memory _srcAddress, + uint64, /*_nonce*/ + bytes memory _payload + ) internal virtual override { + // decode and load the toAddress + (bytes memory toAddressBytes, uint[] memory tokenIds) = abi.decode(_payload, (bytes, uint[])); + + address toAddress; + assembly { + toAddress := mload(add(toAddressBytes, 20)) + } + + uint nextIndex = _creditTill(_srcChainId, toAddress, 0, tokenIds); + if (nextIndex < tokenIds.length) { + // not enough gas to complete transfers, store to be cleared in another tx + bytes32 hashedPayload = keccak256(_payload); + storedCredits[hashedPayload] = StoredCredit(_srcChainId, toAddress, nextIndex, true); + emit CreditStored(hashedPayload, _payload); + } + + emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); + } +``` +As you can notice, the function only credits the receiver with the NFTs, but does not mint them. The reciever has to call the `clearCredit` function to mint the NFTs. `clearCredit` is a function that loops through the credited NFTs and mints them to the receiver. + +To avoid the need for the receiver to call `clearCredit`, we will override the `_nonblockingLzReceive` function to automatically mint the NFTs to the receiver. Here is the updated function: + +```solidity + function _nonblockingLzReceive( + uint16 _srcChainId, + bytes memory _srcAddress, + uint64, /*_nonce*/ + bytes memory _payload + ) internal virtual override { + // decode and load the toAddress + (bytes memory toAddressBytes, uint[] memory tokenIds) = abi.decode(_payload, (bytes, uint[])); + + address toAddress; + assembly { + toAddress := mload(add(toAddressBytes, 20)) + } + + // mint the tokens + for (uint i = 0; i < tokenIds.length; i++) { + _creditTo(0, toAddress, tokenIds[i]); + } + + uint nextIndex = _creditTill(_srcChainId, toAddress, 0, tokenIds); + if (nextIndex < tokenIds.length) { + // not enough gas to complete transfers, store to be cleared in another tx + bytes32 hashedPayload = keccak256(_payload); + storedCredits[hashedPayload] = StoredCredit(_srcChainId, toAddress, nextIndex, true); + emit CreditStored(hashedPayload, _payload); + } + + emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); + } +``` +We added a loop that calls `_creditTo` for each NFT in the payload. `_creditTo` in turn calls `_mint` to mint the NFT to the receiver. + +The full contract code after the modification is as follows: + +```solidity reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyONFT721.sol +``` + + + +## Scripts + +We will add scripts that perform the following tasks, in order: + +1- Deploy the `MyERC721` contract to the BNB Testnet. +2- Mint an NFT using the `MyERC721` contract. +3- Deploy the `MyProxyONFT721` contract to the BNB Testnet. +4- Deploy the `MyONFT721` contract, the reciever, to the ShimmerEVM Testnet. +5- Configure the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. +6- Configure the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. +7- Send an NFT from the BNB Testnet to the ShimmerEVM Testnet. +8- List the received NFT on the NFT marketplace. + +Please note that the scripts are named according to the tasks they perform, and the chain they are intended to run on. For example, the script that deploys the `MyERC721` contract to the BNB Testnet is named `deploy_erc721_bnb.js`. + + +### deploy_erc721_bnb.js +This script will deploy the `MyERC721` contract to the BNB Tetnet, and save the contract's address to a file called `MyERC721_BNB.txt`. + + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_erc721_bnb.js +``` +You can run this script with the following command: + +```bash +npx hardhat run scripts/deploy_er721_bnb.js --network bnbTestnet +``` + +### mint_nft.js + +After you have deployed the `MyERC721` contract, you are ready to mint an NFT using the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/mint_nft.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/mint_nft.js --network bnbTestnet +``` +### deplpy_proxynftonft_bnb.js + +Next, deploy the `MyProxyONFT721` contract to the BNB Testnet and save its address in a file called `MyProxyONFT721_BNB.txt` using the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_proxyonft_bnb.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/deploy_proxyonft_bnb.js --network bnbTestnet +``` + +### deploy_onft721_shimmer.js + +Deploy the `MyONFT721` contract to the Shimmer EVM Testnet and save its address in a file called `MyONFT721_Shimmer.txt` using the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_onft_shimmer.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/deploy_onft_shimmer.js --network shimmerevm-testnet +``` + +### set_trusted_remote_bnb.js + +On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the `MyONFT721` contract as a trusted remote contract. This will allow the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_proxyonft_bnb.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_trusted_remote_bnb.js --network bnbTestnet +``` + +### set_trusted_remote_shimmer.js + +On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the `MyProxyONFT721` contract as a trusted remote contract. This will allow the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_onft_shimmer.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_trusted_remote_shimmer.js --network shimmerevm-testnet +``` + +### set_min_dest_gas_bnb.js + +On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the minimum gas required to send an NFT to the ShimmerEVM Testnet. This is necessary to ensure that the sender has enough gas to complete the transfer. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_bnb.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_min_dest_gas_bnb.js --network bnbTestnet +``` + +### set_min_dest_gas_shimmer.js + +On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the minimum gas required to receive an NFT from the BNB Testnet. This is necessary to ensure that the receiver has enough gas to complete the transfer. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_shimmer.js +``` + +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_min_dest_gas_shimmer.js --network shimmerevm-testnet +``` + + +### send_nft.js + +Finally, call the `MyProxyONFT721` contract on the BNB Testnet to send an NFT to the `MyONFT721` contract on the ShimmerEVM Testnet. This script approves the `MyProxyONFT721` contract to transfer the NFT and then sends the NFT to the `MyONFT721` contract. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/send_nft.js +``` + +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/send_nft.js --network bnbTestnet +``` +Please note that the script will take some time to complete, as it waits for the NFT to be received on the ShimmerEVM Testnet. + + + +### create_listing.js + +After approving the NFT transfer, let's list the NFT for sale on the marketplace by running the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/create_listing.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/create_listing.js --network shimmerevm-testnet +``` + +### buy_item.js + +Finally, let's buy the NFT by running the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/buy_item.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/buy_item.js --network shimmerevm-testnet +``` + + +## Conclusion +In the second part of this tutorial, we manually bridged an NFT from the BNB Testnet to the ShimmerEVM Testnet and listed it on the NFT marketplace. In the final part of the series, we will explore how to create a cross-chain swap contract that allows users to trade NFTs across chains. \ No newline at end of file diff --git a/docs/build/isc/v1.1/sidebars.js b/docs/build/isc/v1.1/sidebars.js index cbb41d49ece..e51825a7836 100644 --- a/docs/build/isc/v1.1/sidebars.js +++ b/docs/build/isc/v1.1/sidebars.js @@ -249,7 +249,7 @@ module.exports = { { type: 'category', label: 'Tutorials', - items: ['tutorials/cross-chain-nft-marketplace-part-1'], + items: ['tutorials/cross-chain-nft-marketplace-part-1', 'tutorials/cross-chain-nft-marketplace-part-2'], }, { type: 'category', diff --git a/docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md b/docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md new file mode 100644 index 00000000000..38ad8b4d572 --- /dev/null +++ b/docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md @@ -0,0 +1,297 @@ +# Cross-chain NFT Marketplace: Part II + +This is the second part of a three-part series that will guide you as you build a cross-chain NFT marketplace using IOTA EVM Smart Contracts. The marketplace will allow users to trade NFTs on the ShimmerEVM Testnet and BNB Testnet. + +[Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) already covered the setup of the project and the deployment of the NFT marketplace contract on the ShimmerEVM Testnet. + +In this part, we will manually bridge NFTs from the BNB Testnet to the Shimmer EVM Testnet and list them on the marketplace. + + + + +## Prerequisites + +- [Node.js](https://nodejs.org) >= v18.0 +- [Hardhat](https://hardhat.org) >= v2.0.0 +- [npx](https://www.npmjs.com/package/npx) >= v7.1.0. +- [Project setup from Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) + + +## Configuration + +In this part, we will add the configuration for the BNB Testnet to the `hardhat.config.js` file. The configuration will include the network name, the chain ID, the RPC URL, and the account private key. Update the `hardhat.config.js` from part 1 of the turtorial as follows: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/hardhat.config.js +``` + + +## Contracts + +We will need the contracts responsible for sending and receiving NFTs across chains. The contracts are as follows: + + +### MyERC721.sol + +A standard ERC721-compatible contract that allows minting and transferring of NFTs, used as an example for the tutorial. This contract is to be deployed on the BNB Testnet, and the NFTs minted will be bridged to the ShimmerEVM Testnet. + +The full contract code is as follows: + +```solidity reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyERC721.sol +``` + + +### MyProxyONFT721.sol +An instance of `ProxyONFT` that will be deployed on the BNB Testnet and will be responsible for sending NFTs from the BNB Testnet to the ShimmerEVM Testnet. + +the full contract code is as follows: + +```solidity reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyProxyONFT721.sol +``` + + +### MyONFT721.sol +An instance of `ONFT721` that will be deployed on the ShimmerEVM Testnet and will be responsible for receiving NFTs from the BNB Testnet. + +However, for convienience, our `ONFT721` instance will override the [_nonblockingLzReceive](https://github.com/LayerZero-Labs/solidity-examples/blob/cdc93994911829b1348f6ac18000000a43432ef1/contracts/token/onft721/ONFT721Core.sol#L103) function, in order to automatically mint the received NFTs to the receiver. + +This is how it looked like originally: +```solidity + function _nonblockingLzReceive( + uint16 _srcChainId, + bytes memory _srcAddress, + uint64, /*_nonce*/ + bytes memory _payload + ) internal virtual override { + // decode and load the toAddress + (bytes memory toAddressBytes, uint[] memory tokenIds) = abi.decode(_payload, (bytes, uint[])); + + address toAddress; + assembly { + toAddress := mload(add(toAddressBytes, 20)) + } + + uint nextIndex = _creditTill(_srcChainId, toAddress, 0, tokenIds); + if (nextIndex < tokenIds.length) { + // not enough gas to complete transfers, store to be cleared in another tx + bytes32 hashedPayload = keccak256(_payload); + storedCredits[hashedPayload] = StoredCredit(_srcChainId, toAddress, nextIndex, true); + emit CreditStored(hashedPayload, _payload); + } + + emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); + } +``` +As you can notice, the function only credits the receiver with the NFTs, but does not mint them. The reciever has to call the `clearCredit` function to mint the NFTs. `clearCredit` is a function that loops through the credited NFTs and mints them to the receiver. + +To avoid the need for the receiver to call `clearCredit`, we will override the `_nonblockingLzReceive` function to automatically mint the NFTs to the receiver. Here is the updated function: + +```solidity + function _nonblockingLzReceive( + uint16 _srcChainId, + bytes memory _srcAddress, + uint64, /*_nonce*/ + bytes memory _payload + ) internal virtual override { + // decode and load the toAddress + (bytes memory toAddressBytes, uint[] memory tokenIds) = abi.decode(_payload, (bytes, uint[])); + + address toAddress; + assembly { + toAddress := mload(add(toAddressBytes, 20)) + } + + // mint the tokens + for (uint i = 0; i < tokenIds.length; i++) { + _creditTo(0, toAddress, tokenIds[i]); + } + + uint nextIndex = _creditTill(_srcChainId, toAddress, 0, tokenIds); + if (nextIndex < tokenIds.length) { + // not enough gas to complete transfers, store to be cleared in another tx + bytes32 hashedPayload = keccak256(_payload); + storedCredits[hashedPayload] = StoredCredit(_srcChainId, toAddress, nextIndex, true); + emit CreditStored(hashedPayload, _payload); + } + + emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); + } +``` +We added a loop that calls `_creditTo` for each NFT in the payload. `_creditTo` in turn calls `_mint` to mint the NFT to the receiver. + +The full contract code after the modification is as follows: + +```solidity reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyONFT721.sol +``` + + + +## Scripts + +We will add scripts that perform the following tasks, in order: + +1- Deploy the `MyERC721` contract to the BNB Testnet. +2- Mint an NFT using the `MyERC721` contract. +3- Deploy the `MyProxyONFT721` contract to the BNB Testnet. +4- Deploy the `MyONFT721` contract, the reciever, to the ShimmerEVM Testnet. +5- Configure the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. +6- Configure the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. +7- Send an NFT from the BNB Testnet to the ShimmerEVM Testnet. +8- List the received NFT on the NFT marketplace. + +Please note that the scripts are named according to the tasks they perform, and the chain they are intended to run on. For example, the script that deploys the `MyERC721` contract to the BNB Testnet is named `deploy_erc721_bnb.js`. + + +### deploy_erc721_bnb.js +This script will deploy the `MyERC721` contract to the BNB Tetnet, and save the contract's address to a file called `MyERC721_BNB.txt`. + + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_erc721_bnb.js +``` +You can run this script with the following command: + +```bash +npx hardhat run scripts/deploy_er721_bnb.js --network bnbTestnet +``` + +### mint_nft.js + +After you have deployed the `MyERC721` contract, you are ready to mint an NFT using the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/mint_nft.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/mint_nft.js --network bnbTestnet +``` +### deplpy_proxynftonft_bnb.js + +Next, deploy the `MyProxyONFT721` contract to the BNB Testnet and save its address in a file called `MyProxyONFT721_BNB.txt` using the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_proxyonft_bnb.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/deploy_proxyonft_bnb.js --network bnbTestnet +``` + +### deploy_onft721_shimmer.js + +Deploy the `MyONFT721` contract to the Shimmer EVM Testnet and save its address in a file called `MyONFT721_Shimmer.txt` using the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_onft_shimmer.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/deploy_onft_shimmer.js --network shimmerevm-testnet +``` + +### set_trusted_remote_bnb.js + +On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the `MyONFT721` contract as a trusted remote contract. This will allow the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_proxyonft_bnb.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_trusted_remote_bnb.js --network bnbTestnet +``` + +### set_trusted_remote_shimmer.js + +On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the `MyProxyONFT721` contract as a trusted remote contract. This will allow the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_onft_shimmer.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_trusted_remote_shimmer.js --network shimmerevm-testnet +``` + +### set_min_dest_gas_bnb.js + +On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the minimum gas required to send an NFT to the ShimmerEVM Testnet. This is necessary to ensure that the sender has enough gas to complete the transfer. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_bnb.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_min_dest_gas_bnb.js --network bnbTestnet +``` + +### set_min_dest_gas_shimmer.js + +On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the minimum gas required to receive an NFT from the BNB Testnet. This is necessary to ensure that the receiver has enough gas to complete the transfer. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_shimmer.js +``` + +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_min_dest_gas_shimmer.js --network shimmerevm-testnet +``` + + +### send_nft.js + +Finally, call the `MyProxyONFT721` contract on the BNB Testnet to send an NFT to the `MyONFT721` contract on the ShimmerEVM Testnet. This script approves the `MyProxyONFT721` contract to transfer the NFT and then sends the NFT to the `MyONFT721` contract. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/send_nft.js +``` + +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/send_nft.js --network bnbTestnet +``` +Please note that the script will take some time to complete, as it waits for the NFT to be received on the ShimmerEVM Testnet. + + + +### create_listing.js + +After approving the NFT transfer, let's list the NFT for sale on the marketplace by running the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/create_listing.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/create_listing.js --network shimmerevm-testnet +``` + +### buy_item.js + +Finally, let's buy the NFT by running the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/buy_item.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/buy_item.js --network shimmerevm-testnet +``` + + +## Conclusion +In the second part of this tutorial, we manually bridged an NFT from the BNB Testnet to the ShimmerEVM Testnet and listed it on the NFT marketplace. In the final part of the series, we will explore how to create a cross-chain swap contract that allows users to trade NFTs across chains. \ No newline at end of file diff --git a/docs/build/isc/v1.3/sidebars.js b/docs/build/isc/v1.3/sidebars.js index cbb41d49ece..e51825a7836 100644 --- a/docs/build/isc/v1.3/sidebars.js +++ b/docs/build/isc/v1.3/sidebars.js @@ -249,7 +249,7 @@ module.exports = { { type: 'category', label: 'Tutorials', - items: ['tutorials/cross-chain-nft-marketplace-part-1'], + items: ['tutorials/cross-chain-nft-marketplace-part-1', 'tutorials/cross-chain-nft-marketplace-part-2'], }, { type: 'category', diff --git a/docs/tutorials/cross-chain-nft-marketplace-part-2.md b/docs/tutorials/cross-chain-nft-marketplace-part-2.md new file mode 100644 index 00000000000..38ad8b4d572 --- /dev/null +++ b/docs/tutorials/cross-chain-nft-marketplace-part-2.md @@ -0,0 +1,297 @@ +# Cross-chain NFT Marketplace: Part II + +This is the second part of a three-part series that will guide you as you build a cross-chain NFT marketplace using IOTA EVM Smart Contracts. The marketplace will allow users to trade NFTs on the ShimmerEVM Testnet and BNB Testnet. + +[Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) already covered the setup of the project and the deployment of the NFT marketplace contract on the ShimmerEVM Testnet. + +In this part, we will manually bridge NFTs from the BNB Testnet to the Shimmer EVM Testnet and list them on the marketplace. + + + + +## Prerequisites + +- [Node.js](https://nodejs.org) >= v18.0 +- [Hardhat](https://hardhat.org) >= v2.0.0 +- [npx](https://www.npmjs.com/package/npx) >= v7.1.0. +- [Project setup from Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) + + +## Configuration + +In this part, we will add the configuration for the BNB Testnet to the `hardhat.config.js` file. The configuration will include the network name, the chain ID, the RPC URL, and the account private key. Update the `hardhat.config.js` from part 1 of the turtorial as follows: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/hardhat.config.js +``` + + +## Contracts + +We will need the contracts responsible for sending and receiving NFTs across chains. The contracts are as follows: + + +### MyERC721.sol + +A standard ERC721-compatible contract that allows minting and transferring of NFTs, used as an example for the tutorial. This contract is to be deployed on the BNB Testnet, and the NFTs minted will be bridged to the ShimmerEVM Testnet. + +The full contract code is as follows: + +```solidity reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyERC721.sol +``` + + +### MyProxyONFT721.sol +An instance of `ProxyONFT` that will be deployed on the BNB Testnet and will be responsible for sending NFTs from the BNB Testnet to the ShimmerEVM Testnet. + +the full contract code is as follows: + +```solidity reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyProxyONFT721.sol +``` + + +### MyONFT721.sol +An instance of `ONFT721` that will be deployed on the ShimmerEVM Testnet and will be responsible for receiving NFTs from the BNB Testnet. + +However, for convienience, our `ONFT721` instance will override the [_nonblockingLzReceive](https://github.com/LayerZero-Labs/solidity-examples/blob/cdc93994911829b1348f6ac18000000a43432ef1/contracts/token/onft721/ONFT721Core.sol#L103) function, in order to automatically mint the received NFTs to the receiver. + +This is how it looked like originally: +```solidity + function _nonblockingLzReceive( + uint16 _srcChainId, + bytes memory _srcAddress, + uint64, /*_nonce*/ + bytes memory _payload + ) internal virtual override { + // decode and load the toAddress + (bytes memory toAddressBytes, uint[] memory tokenIds) = abi.decode(_payload, (bytes, uint[])); + + address toAddress; + assembly { + toAddress := mload(add(toAddressBytes, 20)) + } + + uint nextIndex = _creditTill(_srcChainId, toAddress, 0, tokenIds); + if (nextIndex < tokenIds.length) { + // not enough gas to complete transfers, store to be cleared in another tx + bytes32 hashedPayload = keccak256(_payload); + storedCredits[hashedPayload] = StoredCredit(_srcChainId, toAddress, nextIndex, true); + emit CreditStored(hashedPayload, _payload); + } + + emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); + } +``` +As you can notice, the function only credits the receiver with the NFTs, but does not mint them. The reciever has to call the `clearCredit` function to mint the NFTs. `clearCredit` is a function that loops through the credited NFTs and mints them to the receiver. + +To avoid the need for the receiver to call `clearCredit`, we will override the `_nonblockingLzReceive` function to automatically mint the NFTs to the receiver. Here is the updated function: + +```solidity + function _nonblockingLzReceive( + uint16 _srcChainId, + bytes memory _srcAddress, + uint64, /*_nonce*/ + bytes memory _payload + ) internal virtual override { + // decode and load the toAddress + (bytes memory toAddressBytes, uint[] memory tokenIds) = abi.decode(_payload, (bytes, uint[])); + + address toAddress; + assembly { + toAddress := mload(add(toAddressBytes, 20)) + } + + // mint the tokens + for (uint i = 0; i < tokenIds.length; i++) { + _creditTo(0, toAddress, tokenIds[i]); + } + + uint nextIndex = _creditTill(_srcChainId, toAddress, 0, tokenIds); + if (nextIndex < tokenIds.length) { + // not enough gas to complete transfers, store to be cleared in another tx + bytes32 hashedPayload = keccak256(_payload); + storedCredits[hashedPayload] = StoredCredit(_srcChainId, toAddress, nextIndex, true); + emit CreditStored(hashedPayload, _payload); + } + + emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); + } +``` +We added a loop that calls `_creditTo` for each NFT in the payload. `_creditTo` in turn calls `_mint` to mint the NFT to the receiver. + +The full contract code after the modification is as follows: + +```solidity reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyONFT721.sol +``` + + + +## Scripts + +We will add scripts that perform the following tasks, in order: + +1- Deploy the `MyERC721` contract to the BNB Testnet. +2- Mint an NFT using the `MyERC721` contract. +3- Deploy the `MyProxyONFT721` contract to the BNB Testnet. +4- Deploy the `MyONFT721` contract, the reciever, to the ShimmerEVM Testnet. +5- Configure the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. +6- Configure the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. +7- Send an NFT from the BNB Testnet to the ShimmerEVM Testnet. +8- List the received NFT on the NFT marketplace. + +Please note that the scripts are named according to the tasks they perform, and the chain they are intended to run on. For example, the script that deploys the `MyERC721` contract to the BNB Testnet is named `deploy_erc721_bnb.js`. + + +### deploy_erc721_bnb.js +This script will deploy the `MyERC721` contract to the BNB Tetnet, and save the contract's address to a file called `MyERC721_BNB.txt`. + + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_erc721_bnb.js +``` +You can run this script with the following command: + +```bash +npx hardhat run scripts/deploy_er721_bnb.js --network bnbTestnet +``` + +### mint_nft.js + +After you have deployed the `MyERC721` contract, you are ready to mint an NFT using the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/mint_nft.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/mint_nft.js --network bnbTestnet +``` +### deplpy_proxynftonft_bnb.js + +Next, deploy the `MyProxyONFT721` contract to the BNB Testnet and save its address in a file called `MyProxyONFT721_BNB.txt` using the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_proxyonft_bnb.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/deploy_proxyonft_bnb.js --network bnbTestnet +``` + +### deploy_onft721_shimmer.js + +Deploy the `MyONFT721` contract to the Shimmer EVM Testnet and save its address in a file called `MyONFT721_Shimmer.txt` using the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_onft_shimmer.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/deploy_onft_shimmer.js --network shimmerevm-testnet +``` + +### set_trusted_remote_bnb.js + +On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the `MyONFT721` contract as a trusted remote contract. This will allow the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_proxyonft_bnb.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_trusted_remote_bnb.js --network bnbTestnet +``` + +### set_trusted_remote_shimmer.js + +On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the `MyProxyONFT721` contract as a trusted remote contract. This will allow the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_onft_shimmer.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_trusted_remote_shimmer.js --network shimmerevm-testnet +``` + +### set_min_dest_gas_bnb.js + +On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the minimum gas required to send an NFT to the ShimmerEVM Testnet. This is necessary to ensure that the sender has enough gas to complete the transfer. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_bnb.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_min_dest_gas_bnb.js --network bnbTestnet +``` + +### set_min_dest_gas_shimmer.js + +On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the minimum gas required to receive an NFT from the BNB Testnet. This is necessary to ensure that the receiver has enough gas to complete the transfer. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_shimmer.js +``` + +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/set_min_dest_gas_shimmer.js --network shimmerevm-testnet +``` + + +### send_nft.js + +Finally, call the `MyProxyONFT721` contract on the BNB Testnet to send an NFT to the `MyONFT721` contract on the ShimmerEVM Testnet. This script approves the `MyProxyONFT721` contract to transfer the NFT and then sends the NFT to the `MyONFT721` contract. + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/send_nft.js +``` + +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/send_nft.js --network bnbTestnet +``` +Please note that the script will take some time to complete, as it waits for the NFT to be received on the ShimmerEVM Testnet. + + + +### create_listing.js + +After approving the NFT transfer, let's list the NFT for sale on the marketplace by running the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/create_listing.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/create_listing.js --network shimmerevm-testnet +``` + +### buy_item.js + +Finally, let's buy the NFT by running the following script: + +```javascript reference +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/buy_item.js +``` +You can run the script by executing the following command: + +```bash +npx hardhat run scripts/buy_item.js --network shimmerevm-testnet +``` + + +## Conclusion +In the second part of this tutorial, we manually bridged an NFT from the BNB Testnet to the ShimmerEVM Testnet and listed it on the NFT marketplace. In the final part of the series, we will explore how to create a cross-chain swap contract that allows users to trade NFTs across chains. \ No newline at end of file From 2fe36c0d933282249f547ba5ed87cc5810e036e2 Mon Sep 17 00:00:00 2001 From: salaheldinsoliman Date: Wed, 24 Jul 2024 18:53:36 +0200 Subject: [PATCH 2/6] fix: run yarn format Signed-off-by: salaheldinsoliman --- docs/build/isc/v1.1/sidebars.js | 5 ++++- docs/build/isc/v1.3/sidebars.js | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/build/isc/v1.1/sidebars.js b/docs/build/isc/v1.1/sidebars.js index e51825a7836..d83db436be5 100644 --- a/docs/build/isc/v1.1/sidebars.js +++ b/docs/build/isc/v1.1/sidebars.js @@ -249,7 +249,10 @@ module.exports = { { type: 'category', label: 'Tutorials', - items: ['tutorials/cross-chain-nft-marketplace-part-1', 'tutorials/cross-chain-nft-marketplace-part-2'], + items: [ + 'tutorials/cross-chain-nft-marketplace-part-1', + 'tutorials/cross-chain-nft-marketplace-part-2', + ], }, { type: 'category', diff --git a/docs/build/isc/v1.3/sidebars.js b/docs/build/isc/v1.3/sidebars.js index e51825a7836..d83db436be5 100644 --- a/docs/build/isc/v1.3/sidebars.js +++ b/docs/build/isc/v1.3/sidebars.js @@ -249,7 +249,10 @@ module.exports = { { type: 'category', label: 'Tutorials', - items: ['tutorials/cross-chain-nft-marketplace-part-1', 'tutorials/cross-chain-nft-marketplace-part-2'], + items: [ + 'tutorials/cross-chain-nft-marketplace-part-1', + 'tutorials/cross-chain-nft-marketplace-part-2', + ], }, { type: 'category', From 02ac21a39eb4801bf486a44761466424d578bd6b Mon Sep 17 00:00:00 2001 From: salaheldinsoliman Date: Wed, 24 Jul 2024 19:14:34 +0200 Subject: [PATCH 3/6] fix: broken links Signed-off-by: salaheldinsoliman --- .../v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md | 2 +- .../v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md | 2 +- docs/tutorials/cross-chain-nft-marketplace-part-2.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md b/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md index 38ad8b4d572..4642247ff3c 100644 --- a/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md +++ b/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md @@ -163,7 +163,7 @@ npx hardhat run scripts/deploy_er721_bnb.js --network bnbTestnet After you have deployed the `MyERC721` contract, you are ready to mint an NFT using the following script: ```javascript reference -https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/mint_nft.js +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/mint_nft_bnb.js ``` You can run the script by executing the following command: diff --git a/docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md b/docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md index 38ad8b4d572..4642247ff3c 100644 --- a/docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md +++ b/docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md @@ -163,7 +163,7 @@ npx hardhat run scripts/deploy_er721_bnb.js --network bnbTestnet After you have deployed the `MyERC721` contract, you are ready to mint an NFT using the following script: ```javascript reference -https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/mint_nft.js +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/mint_nft_bnb.js ``` You can run the script by executing the following command: diff --git a/docs/tutorials/cross-chain-nft-marketplace-part-2.md b/docs/tutorials/cross-chain-nft-marketplace-part-2.md index 38ad8b4d572..4642247ff3c 100644 --- a/docs/tutorials/cross-chain-nft-marketplace-part-2.md +++ b/docs/tutorials/cross-chain-nft-marketplace-part-2.md @@ -163,7 +163,7 @@ npx hardhat run scripts/deploy_er721_bnb.js --network bnbTestnet After you have deployed the `MyERC721` contract, you are ready to mint an NFT using the following script: ```javascript reference -https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/mint_nft.js +https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/mint_nft_bnb.js ``` You can run the script by executing the following command: From d5cffc31f2db3fd9bfb81c646e7bbbc521a1a11b Mon Sep 17 00:00:00 2001 From: salaheldinsoliman <49910731+salaheldinsoliman@users.noreply.github.com> Date: Thu, 25 Jul 2024 12:59:06 +0200 Subject: [PATCH 4/6] Apply suggestions from code review Co-authored-by: Lucas Tortora <85233773+lucas-tortora@users.noreply.github.com> --- .../cross-chain-nft-marketplace-part-2.md | 62 +++++++++++-------- docs/build/isc/v1.1/sidebars.js | 18 +++++- 2 files changed, 52 insertions(+), 28 deletions(-) diff --git a/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md b/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md index 4642247ff3c..fc2017cd63a 100644 --- a/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md +++ b/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md @@ -2,9 +2,9 @@ This is the second part of a three-part series that will guide you as you build a cross-chain NFT marketplace using IOTA EVM Smart Contracts. The marketplace will allow users to trade NFTs on the ShimmerEVM Testnet and BNB Testnet. -[Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) already covered the setup of the project and the deployment of the NFT marketplace contract on the ShimmerEVM Testnet. +[Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) already covered the project's setup and the deployment of the NFT marketplace contract on the ShimmerEVM Testnet. -In this part, we will manually bridge NFTs from the BNB Testnet to the Shimmer EVM Testnet and list them on the marketplace. +In this part, you will manually bridge NFTs from the BNB Testnet to the Shimmer EVM Testnet and list them on the marketplace. @@ -19,7 +19,7 @@ In this part, we will manually bridge NFTs from the BNB Testnet to the Shimmer E ## Configuration -In this part, we will add the configuration for the BNB Testnet to the `hardhat.config.js` file. The configuration will include the network name, the chain ID, the RPC URL, and the account private key. Update the `hardhat.config.js` from part 1 of the turtorial as follows: +In this part, you will add the configuration for the BNB Testnet to the `hardhat.config.js` file. The configuration will include the network name, the chain ID, the RPC URL, and the account private key. Update the `hardhat.config.js` from part 1 of the tutorial as follows: ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/hardhat.config.js @@ -28,12 +28,12 @@ https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/hard ## Contracts -We will need the contracts responsible for sending and receiving NFTs across chains. The contracts are as follows: +You will need the following contracts, that will send and receive NFTs across chains: ### MyERC721.sol -A standard ERC721-compatible contract that allows minting and transferring of NFTs, used as an example for the tutorial. This contract is to be deployed on the BNB Testnet, and the NFTs minted will be bridged to the ShimmerEVM Testnet. +The tutorial uses a standard ERC721-compatible contract that allows minting and transferring NFTs as an example. You should deploy this contract on the BNB Testnet, and the minted NFTs will be bridged to the ShimmerEVM Testnet. The full contract code is as follows: @@ -41,23 +41,24 @@ The full contract code is as follows: https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyERC721.sol ``` - ### MyProxyONFT721.sol -An instance of `ProxyONFT` that will be deployed on the BNB Testnet and will be responsible for sending NFTs from the BNB Testnet to the ShimmerEVM Testnet. -the full contract code is as follows: +An instance of `ProxyONFT` that you will deploy on the BNB Testnet and will be responsible for sending NFTs from the BNB Testnet to the ShimmerEVM Testnet. + +The full contract code is as follows: ```solidity reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyProxyONFT721.sol ``` - ### MyONFT721.sol -An instance of `ONFT721` that will be deployed on the ShimmerEVM Testnet and will be responsible for receiving NFTs from the BNB Testnet. -However, for convienience, our `ONFT721` instance will override the [_nonblockingLzReceive](https://github.com/LayerZero-Labs/solidity-examples/blob/cdc93994911829b1348f6ac18000000a43432ef1/contracts/token/onft721/ONFT721Core.sol#L103) function, in order to automatically mint the received NFTs to the receiver. +An instance of `ONFT721` that you will deploy on the ShimmerEVM Testnet and will be responsible for receiving NFTs from the BNB Testnet. + +However, for ONFT721, this `ONFT721` instance will override the [_nonblockingLzReceive](https://github.com/LayerZero-Labs/solidity-examples/blob/cdc93994911829b1348f6ac18000000a43432ef1/contracts/token/onft721/ONFT721Core.sol#L103) function, in order to automatically mint the received NFTs to the receiver. + +This is how it looked originally: -This is how it looked like originally: ```solidity function _nonblockingLzReceive( uint16 _srcChainId, @@ -84,11 +85,11 @@ This is how it looked like originally: emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); } ``` -As you can notice, the function only credits the receiver with the NFTs, but does not mint them. The reciever has to call the `clearCredit` function to mint the NFTs. `clearCredit` is a function that loops through the credited NFTs and mints them to the receiver. +As you can notice, the function only credits the receiver with the NFTs but does not mint them. The receiver has to call the `clearCredit` function to mint the NFTs. `clearCredit` loops through the credited NFTs and mints them to the receiver. -To avoid the need for the receiver to call `clearCredit`, we will override the `_nonblockingLzReceive` function to automatically mint the NFTs to the receiver. Here is the updated function: +To avoid the need for the receiver to call `clearCredit`, you should override the `_nonblockingLzReceive` function to automatically mint the NFTs to the receiver. Here is the updated function: -```solidity +```solidity {16-18} function _nonblockingLzReceive( uint16 _srcChainId, bytes memory _srcAddress, @@ -119,7 +120,7 @@ To avoid the need for the receiver to call `clearCredit`, we will override the ` emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); } ``` -We added a loop that calls `_creditTo` for each NFT in the payload. `_creditTo` in turn calls `_mint` to mint the NFT to the receiver. +This contract has an added loop that calls `_creditTo` for each NFT in the payload. `_creditTo` in turn calls `_mint` to mint the NFT to the receiver. The full contract code after the modification is as follows: @@ -131,7 +132,7 @@ https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/cont ## Scripts -We will add scripts that perform the following tasks, in order: +You will add scripts that perform the following tasks in order: 1- Deploy the `MyERC721` contract to the BNB Testnet. 2- Mint an NFT using the `MyERC721` contract. @@ -142,7 +143,11 @@ We will add scripts that perform the following tasks, in order: 7- Send an NFT from the BNB Testnet to the ShimmerEVM Testnet. 8- List the received NFT on the NFT marketplace. -Please note that the scripts are named according to the tasks they perform, and the chain they are intended to run on. For example, the script that deploys the `MyERC721` contract to the BNB Testnet is named `deploy_erc721_bnb.js`. +:::note + +The scripts are named according to the tasks they perform and the chain they are intended to run on. For example, the script that deploys the `MyERC721` contract to the BNB Testnet is named `deploy_erc721_bnb.js`. + +::: ### deploy_erc721_bnb.js @@ -198,7 +203,7 @@ npx hardhat run scripts/deploy_onft_shimmer.js --network shimmerevm-testnet ### set_trusted_remote_bnb.js -On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the `MyONFT721` contract as a trusted remote contract. This will allow the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. +On the BNB Testnet, call the `MyProxyONFT721` contract to set the `MyONFT721` contract as a trusted remote contract. This will allow the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_proxyonft_bnb.js ``` @@ -210,7 +215,7 @@ npx hardhat run scripts/set_trusted_remote_bnb.js --network bnbTestnet ### set_trusted_remote_shimmer.js -On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the `MyProxyONFT721` contract as a trusted remote contract. This will allow the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. +On the ShimmerEVM Testnet, call the `MyONFT721` contract to set the `MyProxyONFT721` contract as a trusted remote contract. This will allow the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_onft_shimmer.js @@ -223,7 +228,7 @@ npx hardhat run scripts/set_trusted_remote_shimmer.js --network shimmerevm-testn ### set_min_dest_gas_bnb.js -On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the minimum gas required to send an NFT to the ShimmerEVM Testnet. This is necessary to ensure that the sender has enough gas to complete the transfer. +On the BNB Testnet, call the `MyProxyONFT721` contract to set the minimum gas required to send an NFT to the ShimmerEVM Testnet. This is ensures that the sender has enough gas to complete the transfer. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_bnb.js @@ -236,7 +241,7 @@ npx hardhat run scripts/set_min_dest_gas_bnb.js --network bnbTestnet ### set_min_dest_gas_shimmer.js -On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the minimum gas required to receive an NFT from the BNB Testnet. This is necessary to ensure that the receiver has enough gas to complete the transfer. +On the ShimmerEVM Testnet, call the `MyONFT721` contract to set the minimum gas required to receive an NFT from the BNB Testnet. This is necessary to ensure that the receiver has enough gas to complete the transfer. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_shimmer.js @@ -262,13 +267,18 @@ You can run the script by executing the following command: ```bash npx hardhat run scripts/send_nft.js --network bnbTestnet ``` -Please note that the script will take some time to complete, as it waits for the NFT to be received on the ShimmerEVM Testnet. + +:::note + +The script will take some time to complete, as it waits for the NFT to be received on the ShimmerEVM Testnet. + +::: ### create_listing.js -After approving the NFT transfer, let's list the NFT for sale on the marketplace by running the following script: +After approving the NFT transfer, you list the NFT for sale on the marketplace by running the following script: ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/create_listing.js @@ -281,7 +291,7 @@ npx hardhat run scripts/create_listing.js --network shimmerevm-testnet ### buy_item.js -Finally, let's buy the NFT by running the following script: +Finally, you can buy the NFT by running the following script: ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/buy_item.js @@ -294,4 +304,4 @@ npx hardhat run scripts/buy_item.js --network shimmerevm-testnet ## Conclusion -In the second part of this tutorial, we manually bridged an NFT from the BNB Testnet to the ShimmerEVM Testnet and listed it on the NFT marketplace. In the final part of the series, we will explore how to create a cross-chain swap contract that allows users to trade NFTs across chains. \ No newline at end of file +In the second part of this tutorial, you manually bridged an NFT from the BNB Testnet to the ShimmerEVM Testnet and listed it on the NFT marketplace. The final part of the series will explore how to create a cross-chain swap contract that allows users to trade NFTs across chains. \ No newline at end of file diff --git a/docs/build/isc/v1.1/sidebars.js b/docs/build/isc/v1.1/sidebars.js index d83db436be5..13151399685 100644 --- a/docs/build/isc/v1.1/sidebars.js +++ b/docs/build/isc/v1.1/sidebars.js @@ -250,8 +250,22 @@ module.exports = { type: 'category', label: 'Tutorials', items: [ - 'tutorials/cross-chain-nft-marketplace-part-1', - 'tutorials/cross-chain-nft-marketplace-part-2', + { + type: 'category', + label: 'Cross-chain NFT Marketplace', + items: [ + { + type: 'doc', + label: 'Part I', + id: 'tutorials/cross-chain-nft-marketplace-part-1', + }, + { + type: 'doc', + label: 'Part II', + id: 'tutorials/cross-chain-nft-marketplace-part-2', + }, + ] + } ], }, { From fdc9039bcdf84d3c8e44d2294d466b364f89a468 Mon Sep 17 00:00:00 2001 From: salaheldinsoliman Date: Thu, 25 Jul 2024 13:12:32 +0200 Subject: [PATCH 5/6] add links to script headers Signed-off-by: salaheldinsoliman --- .../cross-chain-nft-marketplace-part-2.md | 18 ++--- .../cross-chain-nft-marketplace-part-2.md | 80 +++++++++++-------- .../cross-chain-nft-marketplace-part-2.md | 80 +++++++++++-------- 3 files changed, 99 insertions(+), 79 deletions(-) diff --git a/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md b/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md index fc2017cd63a..7425920898f 100644 --- a/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md +++ b/docs/build/isc/v1.1/docs/tutorials/cross-chain-nft-marketplace-part-2.md @@ -134,14 +134,14 @@ https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/cont You will add scripts that perform the following tasks in order: -1- Deploy the `MyERC721` contract to the BNB Testnet. -2- Mint an NFT using the `MyERC721` contract. -3- Deploy the `MyProxyONFT721` contract to the BNB Testnet. -4- Deploy the `MyONFT721` contract, the reciever, to the ShimmerEVM Testnet. -5- Configure the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. -6- Configure the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. -7- Send an NFT from the BNB Testnet to the ShimmerEVM Testnet. -8- List the received NFT on the NFT marketplace. +1. Deploy the `MyERC721` contract to the BNB Testnet. [deploy_erc721_bnb.js](#deploy_erc721_bnbjs) +2. Mint an NFT using the `MyERC721` contract. [mint_nft.js](#mint_nftjs) +3. Deploy the `MyProxyONFT721` contract to the BNB Testnet. [deploy_proxyonft_bnb.js](#deploy_proxyonft_bnbjs) +4. Deploy the `MyONFT721` contract, the receiver, to the ShimmerEVM Testnet. [deploy_onft721_shimmer.js](#deploy_onft721_shimmerjs) +5. Configure the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. [set_trusted_remote_bnb.js](#set_trusted_remote_bnbjs) +6. Configure the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. [set_trusted_remote_shimmer.js](#set_trusted_remote_shimmerjs) +7. Send an NFT from the BNB Testnet to the ShimmerEVM Testnet. [send_nft_bnb_to_shimmer.js](#send_nftjs) +8. List the received NFT on the NFT marketplace. [list_nft_marketplace.js](#create_listingjs) :::note @@ -175,7 +175,7 @@ You can run the script by executing the following command: ```bash npx hardhat run scripts/mint_nft.js --network bnbTestnet ``` -### deplpy_proxynftonft_bnb.js +### deploy_proxyonft_bnb.js Next, deploy the `MyProxyONFT721` contract to the BNB Testnet and save its address in a file called `MyProxyONFT721_BNB.txt` using the following script: diff --git a/docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md b/docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md index 4642247ff3c..7425920898f 100644 --- a/docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md +++ b/docs/build/isc/v1.3/docs/tutorials/cross-chain-nft-marketplace-part-2.md @@ -2,9 +2,9 @@ This is the second part of a three-part series that will guide you as you build a cross-chain NFT marketplace using IOTA EVM Smart Contracts. The marketplace will allow users to trade NFTs on the ShimmerEVM Testnet and BNB Testnet. -[Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) already covered the setup of the project and the deployment of the NFT marketplace contract on the ShimmerEVM Testnet. +[Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) already covered the project's setup and the deployment of the NFT marketplace contract on the ShimmerEVM Testnet. -In this part, we will manually bridge NFTs from the BNB Testnet to the Shimmer EVM Testnet and list them on the marketplace. +In this part, you will manually bridge NFTs from the BNB Testnet to the Shimmer EVM Testnet and list them on the marketplace. @@ -19,7 +19,7 @@ In this part, we will manually bridge NFTs from the BNB Testnet to the Shimmer E ## Configuration -In this part, we will add the configuration for the BNB Testnet to the `hardhat.config.js` file. The configuration will include the network name, the chain ID, the RPC URL, and the account private key. Update the `hardhat.config.js` from part 1 of the turtorial as follows: +In this part, you will add the configuration for the BNB Testnet to the `hardhat.config.js` file. The configuration will include the network name, the chain ID, the RPC URL, and the account private key. Update the `hardhat.config.js` from part 1 of the tutorial as follows: ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/hardhat.config.js @@ -28,12 +28,12 @@ https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/hard ## Contracts -We will need the contracts responsible for sending and receiving NFTs across chains. The contracts are as follows: +You will need the following contracts, that will send and receive NFTs across chains: ### MyERC721.sol -A standard ERC721-compatible contract that allows minting and transferring of NFTs, used as an example for the tutorial. This contract is to be deployed on the BNB Testnet, and the NFTs minted will be bridged to the ShimmerEVM Testnet. +The tutorial uses a standard ERC721-compatible contract that allows minting and transferring NFTs as an example. You should deploy this contract on the BNB Testnet, and the minted NFTs will be bridged to the ShimmerEVM Testnet. The full contract code is as follows: @@ -41,23 +41,24 @@ The full contract code is as follows: https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyERC721.sol ``` - ### MyProxyONFT721.sol -An instance of `ProxyONFT` that will be deployed on the BNB Testnet and will be responsible for sending NFTs from the BNB Testnet to the ShimmerEVM Testnet. -the full contract code is as follows: +An instance of `ProxyONFT` that you will deploy on the BNB Testnet and will be responsible for sending NFTs from the BNB Testnet to the ShimmerEVM Testnet. + +The full contract code is as follows: ```solidity reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyProxyONFT721.sol ``` - ### MyONFT721.sol -An instance of `ONFT721` that will be deployed on the ShimmerEVM Testnet and will be responsible for receiving NFTs from the BNB Testnet. -However, for convienience, our `ONFT721` instance will override the [_nonblockingLzReceive](https://github.com/LayerZero-Labs/solidity-examples/blob/cdc93994911829b1348f6ac18000000a43432ef1/contracts/token/onft721/ONFT721Core.sol#L103) function, in order to automatically mint the received NFTs to the receiver. +An instance of `ONFT721` that you will deploy on the ShimmerEVM Testnet and will be responsible for receiving NFTs from the BNB Testnet. + +However, for ONFT721, this `ONFT721` instance will override the [_nonblockingLzReceive](https://github.com/LayerZero-Labs/solidity-examples/blob/cdc93994911829b1348f6ac18000000a43432ef1/contracts/token/onft721/ONFT721Core.sol#L103) function, in order to automatically mint the received NFTs to the receiver. + +This is how it looked originally: -This is how it looked like originally: ```solidity function _nonblockingLzReceive( uint16 _srcChainId, @@ -84,11 +85,11 @@ This is how it looked like originally: emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); } ``` -As you can notice, the function only credits the receiver with the NFTs, but does not mint them. The reciever has to call the `clearCredit` function to mint the NFTs. `clearCredit` is a function that loops through the credited NFTs and mints them to the receiver. +As you can notice, the function only credits the receiver with the NFTs but does not mint them. The receiver has to call the `clearCredit` function to mint the NFTs. `clearCredit` loops through the credited NFTs and mints them to the receiver. -To avoid the need for the receiver to call `clearCredit`, we will override the `_nonblockingLzReceive` function to automatically mint the NFTs to the receiver. Here is the updated function: +To avoid the need for the receiver to call `clearCredit`, you should override the `_nonblockingLzReceive` function to automatically mint the NFTs to the receiver. Here is the updated function: -```solidity +```solidity {16-18} function _nonblockingLzReceive( uint16 _srcChainId, bytes memory _srcAddress, @@ -119,7 +120,7 @@ To avoid the need for the receiver to call `clearCredit`, we will override the ` emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); } ``` -We added a loop that calls `_creditTo` for each NFT in the payload. `_creditTo` in turn calls `_mint` to mint the NFT to the receiver. +This contract has an added loop that calls `_creditTo` for each NFT in the payload. `_creditTo` in turn calls `_mint` to mint the NFT to the receiver. The full contract code after the modification is as follows: @@ -131,18 +132,22 @@ https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/cont ## Scripts -We will add scripts that perform the following tasks, in order: +You will add scripts that perform the following tasks in order: + +1. Deploy the `MyERC721` contract to the BNB Testnet. [deploy_erc721_bnb.js](#deploy_erc721_bnbjs) +2. Mint an NFT using the `MyERC721` contract. [mint_nft.js](#mint_nftjs) +3. Deploy the `MyProxyONFT721` contract to the BNB Testnet. [deploy_proxyonft_bnb.js](#deploy_proxyonft_bnbjs) +4. Deploy the `MyONFT721` contract, the receiver, to the ShimmerEVM Testnet. [deploy_onft721_shimmer.js](#deploy_onft721_shimmerjs) +5. Configure the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. [set_trusted_remote_bnb.js](#set_trusted_remote_bnbjs) +6. Configure the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. [set_trusted_remote_shimmer.js](#set_trusted_remote_shimmerjs) +7. Send an NFT from the BNB Testnet to the ShimmerEVM Testnet. [send_nft_bnb_to_shimmer.js](#send_nftjs) +8. List the received NFT on the NFT marketplace. [list_nft_marketplace.js](#create_listingjs) + +:::note -1- Deploy the `MyERC721` contract to the BNB Testnet. -2- Mint an NFT using the `MyERC721` contract. -3- Deploy the `MyProxyONFT721` contract to the BNB Testnet. -4- Deploy the `MyONFT721` contract, the reciever, to the ShimmerEVM Testnet. -5- Configure the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. -6- Configure the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. -7- Send an NFT from the BNB Testnet to the ShimmerEVM Testnet. -8- List the received NFT on the NFT marketplace. +The scripts are named according to the tasks they perform and the chain they are intended to run on. For example, the script that deploys the `MyERC721` contract to the BNB Testnet is named `deploy_erc721_bnb.js`. -Please note that the scripts are named according to the tasks they perform, and the chain they are intended to run on. For example, the script that deploys the `MyERC721` contract to the BNB Testnet is named `deploy_erc721_bnb.js`. +::: ### deploy_erc721_bnb.js @@ -170,7 +175,7 @@ You can run the script by executing the following command: ```bash npx hardhat run scripts/mint_nft.js --network bnbTestnet ``` -### deplpy_proxynftonft_bnb.js +### deploy_proxyonft_bnb.js Next, deploy the `MyProxyONFT721` contract to the BNB Testnet and save its address in a file called `MyProxyONFT721_BNB.txt` using the following script: @@ -198,7 +203,7 @@ npx hardhat run scripts/deploy_onft_shimmer.js --network shimmerevm-testnet ### set_trusted_remote_bnb.js -On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the `MyONFT721` contract as a trusted remote contract. This will allow the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. +On the BNB Testnet, call the `MyProxyONFT721` contract to set the `MyONFT721` contract as a trusted remote contract. This will allow the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_proxyonft_bnb.js ``` @@ -210,7 +215,7 @@ npx hardhat run scripts/set_trusted_remote_bnb.js --network bnbTestnet ### set_trusted_remote_shimmer.js -On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the `MyProxyONFT721` contract as a trusted remote contract. This will allow the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. +On the ShimmerEVM Testnet, call the `MyONFT721` contract to set the `MyProxyONFT721` contract as a trusted remote contract. This will allow the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_onft_shimmer.js @@ -223,7 +228,7 @@ npx hardhat run scripts/set_trusted_remote_shimmer.js --network shimmerevm-testn ### set_min_dest_gas_bnb.js -On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the minimum gas required to send an NFT to the ShimmerEVM Testnet. This is necessary to ensure that the sender has enough gas to complete the transfer. +On the BNB Testnet, call the `MyProxyONFT721` contract to set the minimum gas required to send an NFT to the ShimmerEVM Testnet. This is ensures that the sender has enough gas to complete the transfer. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_bnb.js @@ -236,7 +241,7 @@ npx hardhat run scripts/set_min_dest_gas_bnb.js --network bnbTestnet ### set_min_dest_gas_shimmer.js -On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the minimum gas required to receive an NFT from the BNB Testnet. This is necessary to ensure that the receiver has enough gas to complete the transfer. +On the ShimmerEVM Testnet, call the `MyONFT721` contract to set the minimum gas required to receive an NFT from the BNB Testnet. This is necessary to ensure that the receiver has enough gas to complete the transfer. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_shimmer.js @@ -262,13 +267,18 @@ You can run the script by executing the following command: ```bash npx hardhat run scripts/send_nft.js --network bnbTestnet ``` -Please note that the script will take some time to complete, as it waits for the NFT to be received on the ShimmerEVM Testnet. + +:::note + +The script will take some time to complete, as it waits for the NFT to be received on the ShimmerEVM Testnet. + +::: ### create_listing.js -After approving the NFT transfer, let's list the NFT for sale on the marketplace by running the following script: +After approving the NFT transfer, you list the NFT for sale on the marketplace by running the following script: ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/create_listing.js @@ -281,7 +291,7 @@ npx hardhat run scripts/create_listing.js --network shimmerevm-testnet ### buy_item.js -Finally, let's buy the NFT by running the following script: +Finally, you can buy the NFT by running the following script: ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/buy_item.js @@ -294,4 +304,4 @@ npx hardhat run scripts/buy_item.js --network shimmerevm-testnet ## Conclusion -In the second part of this tutorial, we manually bridged an NFT from the BNB Testnet to the ShimmerEVM Testnet and listed it on the NFT marketplace. In the final part of the series, we will explore how to create a cross-chain swap contract that allows users to trade NFTs across chains. \ No newline at end of file +In the second part of this tutorial, you manually bridged an NFT from the BNB Testnet to the ShimmerEVM Testnet and listed it on the NFT marketplace. The final part of the series will explore how to create a cross-chain swap contract that allows users to trade NFTs across chains. \ No newline at end of file diff --git a/docs/tutorials/cross-chain-nft-marketplace-part-2.md b/docs/tutorials/cross-chain-nft-marketplace-part-2.md index 4642247ff3c..7425920898f 100644 --- a/docs/tutorials/cross-chain-nft-marketplace-part-2.md +++ b/docs/tutorials/cross-chain-nft-marketplace-part-2.md @@ -2,9 +2,9 @@ This is the second part of a three-part series that will guide you as you build a cross-chain NFT marketplace using IOTA EVM Smart Contracts. The marketplace will allow users to trade NFTs on the ShimmerEVM Testnet and BNB Testnet. -[Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) already covered the setup of the project and the deployment of the NFT marketplace contract on the ShimmerEVM Testnet. +[Part I](https://wiki.iota.org/isc/tutorials/cross-chain-nft-marketplace-part-1/) already covered the project's setup and the deployment of the NFT marketplace contract on the ShimmerEVM Testnet. -In this part, we will manually bridge NFTs from the BNB Testnet to the Shimmer EVM Testnet and list them on the marketplace. +In this part, you will manually bridge NFTs from the BNB Testnet to the Shimmer EVM Testnet and list them on the marketplace. @@ -19,7 +19,7 @@ In this part, we will manually bridge NFTs from the BNB Testnet to the Shimmer E ## Configuration -In this part, we will add the configuration for the BNB Testnet to the `hardhat.config.js` file. The configuration will include the network name, the chain ID, the RPC URL, and the account private key. Update the `hardhat.config.js` from part 1 of the turtorial as follows: +In this part, you will add the configuration for the BNB Testnet to the `hardhat.config.js` file. The configuration will include the network name, the chain ID, the RPC URL, and the account private key. Update the `hardhat.config.js` from part 1 of the tutorial as follows: ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/hardhat.config.js @@ -28,12 +28,12 @@ https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/hard ## Contracts -We will need the contracts responsible for sending and receiving NFTs across chains. The contracts are as follows: +You will need the following contracts, that will send and receive NFTs across chains: ### MyERC721.sol -A standard ERC721-compatible contract that allows minting and transferring of NFTs, used as an example for the tutorial. This contract is to be deployed on the BNB Testnet, and the NFTs minted will be bridged to the ShimmerEVM Testnet. +The tutorial uses a standard ERC721-compatible contract that allows minting and transferring NFTs as an example. You should deploy this contract on the BNB Testnet, and the minted NFTs will be bridged to the ShimmerEVM Testnet. The full contract code is as follows: @@ -41,23 +41,24 @@ The full contract code is as follows: https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyERC721.sol ``` - ### MyProxyONFT721.sol -An instance of `ProxyONFT` that will be deployed on the BNB Testnet and will be responsible for sending NFTs from the BNB Testnet to the ShimmerEVM Testnet. -the full contract code is as follows: +An instance of `ProxyONFT` that you will deploy on the BNB Testnet and will be responsible for sending NFTs from the BNB Testnet to the ShimmerEVM Testnet. + +The full contract code is as follows: ```solidity reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/contracts/MyProxyONFT721.sol ``` - ### MyONFT721.sol -An instance of `ONFT721` that will be deployed on the ShimmerEVM Testnet and will be responsible for receiving NFTs from the BNB Testnet. -However, for convienience, our `ONFT721` instance will override the [_nonblockingLzReceive](https://github.com/LayerZero-Labs/solidity-examples/blob/cdc93994911829b1348f6ac18000000a43432ef1/contracts/token/onft721/ONFT721Core.sol#L103) function, in order to automatically mint the received NFTs to the receiver. +An instance of `ONFT721` that you will deploy on the ShimmerEVM Testnet and will be responsible for receiving NFTs from the BNB Testnet. + +However, for ONFT721, this `ONFT721` instance will override the [_nonblockingLzReceive](https://github.com/LayerZero-Labs/solidity-examples/blob/cdc93994911829b1348f6ac18000000a43432ef1/contracts/token/onft721/ONFT721Core.sol#L103) function, in order to automatically mint the received NFTs to the receiver. + +This is how it looked originally: -This is how it looked like originally: ```solidity function _nonblockingLzReceive( uint16 _srcChainId, @@ -84,11 +85,11 @@ This is how it looked like originally: emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); } ``` -As you can notice, the function only credits the receiver with the NFTs, but does not mint them. The reciever has to call the `clearCredit` function to mint the NFTs. `clearCredit` is a function that loops through the credited NFTs and mints them to the receiver. +As you can notice, the function only credits the receiver with the NFTs but does not mint them. The receiver has to call the `clearCredit` function to mint the NFTs. `clearCredit` loops through the credited NFTs and mints them to the receiver. -To avoid the need for the receiver to call `clearCredit`, we will override the `_nonblockingLzReceive` function to automatically mint the NFTs to the receiver. Here is the updated function: +To avoid the need for the receiver to call `clearCredit`, you should override the `_nonblockingLzReceive` function to automatically mint the NFTs to the receiver. Here is the updated function: -```solidity +```solidity {16-18} function _nonblockingLzReceive( uint16 _srcChainId, bytes memory _srcAddress, @@ -119,7 +120,7 @@ To avoid the need for the receiver to call `clearCredit`, we will override the ` emit ReceiveFromChain(_srcChainId, _srcAddress, toAddress, tokenIds); } ``` -We added a loop that calls `_creditTo` for each NFT in the payload. `_creditTo` in turn calls `_mint` to mint the NFT to the receiver. +This contract has an added loop that calls `_creditTo` for each NFT in the payload. `_creditTo` in turn calls `_mint` to mint the NFT to the receiver. The full contract code after the modification is as follows: @@ -131,18 +132,22 @@ https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/cont ## Scripts -We will add scripts that perform the following tasks, in order: +You will add scripts that perform the following tasks in order: + +1. Deploy the `MyERC721` contract to the BNB Testnet. [deploy_erc721_bnb.js](#deploy_erc721_bnbjs) +2. Mint an NFT using the `MyERC721` contract. [mint_nft.js](#mint_nftjs) +3. Deploy the `MyProxyONFT721` contract to the BNB Testnet. [deploy_proxyonft_bnb.js](#deploy_proxyonft_bnbjs) +4. Deploy the `MyONFT721` contract, the receiver, to the ShimmerEVM Testnet. [deploy_onft721_shimmer.js](#deploy_onft721_shimmerjs) +5. Configure the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. [set_trusted_remote_bnb.js](#set_trusted_remote_bnbjs) +6. Configure the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. [set_trusted_remote_shimmer.js](#set_trusted_remote_shimmerjs) +7. Send an NFT from the BNB Testnet to the ShimmerEVM Testnet. [send_nft_bnb_to_shimmer.js](#send_nftjs) +8. List the received NFT on the NFT marketplace. [list_nft_marketplace.js](#create_listingjs) + +:::note -1- Deploy the `MyERC721` contract to the BNB Testnet. -2- Mint an NFT using the `MyERC721` contract. -3- Deploy the `MyProxyONFT721` contract to the BNB Testnet. -4- Deploy the `MyONFT721` contract, the reciever, to the ShimmerEVM Testnet. -5- Configure the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. -6- Configure the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. -7- Send an NFT from the BNB Testnet to the ShimmerEVM Testnet. -8- List the received NFT on the NFT marketplace. +The scripts are named according to the tasks they perform and the chain they are intended to run on. For example, the script that deploys the `MyERC721` contract to the BNB Testnet is named `deploy_erc721_bnb.js`. -Please note that the scripts are named according to the tasks they perform, and the chain they are intended to run on. For example, the script that deploys the `MyERC721` contract to the BNB Testnet is named `deploy_erc721_bnb.js`. +::: ### deploy_erc721_bnb.js @@ -170,7 +175,7 @@ You can run the script by executing the following command: ```bash npx hardhat run scripts/mint_nft.js --network bnbTestnet ``` -### deplpy_proxynftonft_bnb.js +### deploy_proxyonft_bnb.js Next, deploy the `MyProxyONFT721` contract to the BNB Testnet and save its address in a file called `MyProxyONFT721_BNB.txt` using the following script: @@ -198,7 +203,7 @@ npx hardhat run scripts/deploy_onft_shimmer.js --network shimmerevm-testnet ### set_trusted_remote_bnb.js -On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the `MyONFT721` contract as a trusted remote contract. This will allow the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. +On the BNB Testnet, call the `MyProxyONFT721` contract to set the `MyONFT721` contract as a trusted remote contract. This will allow the `MyProxyONFT721` contract to send NFTs to the `MyONFT721` contract. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_proxyonft_bnb.js ``` @@ -210,7 +215,7 @@ npx hardhat run scripts/set_trusted_remote_bnb.js --network bnbTestnet ### set_trusted_remote_shimmer.js -On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the `MyProxyONFT721` contract as a trusted remote contract. This will allow the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. +On the ShimmerEVM Testnet, call the `MyONFT721` contract to set the `MyProxyONFT721` contract as a trusted remote contract. This will allow the `MyONFT721` contract to receive NFTs from the `MyProxyONFT721` contract. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/deploy_onft_shimmer.js @@ -223,7 +228,7 @@ npx hardhat run scripts/set_trusted_remote_shimmer.js --network shimmerevm-testn ### set_min_dest_gas_bnb.js -On the BNB Testnet, make a call to the `MyProxyONFT721` contract to set the minimum gas required to send an NFT to the ShimmerEVM Testnet. This is necessary to ensure that the sender has enough gas to complete the transfer. +On the BNB Testnet, call the `MyProxyONFT721` contract to set the minimum gas required to send an NFT to the ShimmerEVM Testnet. This is ensures that the sender has enough gas to complete the transfer. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_bnb.js @@ -236,7 +241,7 @@ npx hardhat run scripts/set_min_dest_gas_bnb.js --network bnbTestnet ### set_min_dest_gas_shimmer.js -On the ShimmerEVM Testnet, make a call to the `MyONFT721` contract to set the minimum gas required to receive an NFT from the BNB Testnet. This is necessary to ensure that the receiver has enough gas to complete the transfer. +On the ShimmerEVM Testnet, call the `MyONFT721` contract to set the minimum gas required to receive an NFT from the BNB Testnet. This is necessary to ensure that the receiver has enough gas to complete the transfer. ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/set_min_dest_gas_shimmer.js @@ -262,13 +267,18 @@ You can run the script by executing the following command: ```bash npx hardhat run scripts/send_nft.js --network bnbTestnet ``` -Please note that the script will take some time to complete, as it waits for the NFT to be received on the ShimmerEVM Testnet. + +:::note + +The script will take some time to complete, as it waits for the NFT to be received on the ShimmerEVM Testnet. + +::: ### create_listing.js -After approving the NFT transfer, let's list the NFT for sale on the marketplace by running the following script: +After approving the NFT transfer, you list the NFT for sale on the marketplace by running the following script: ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/create_listing.js @@ -281,7 +291,7 @@ npx hardhat run scripts/create_listing.js --network shimmerevm-testnet ### buy_item.js -Finally, let's buy the NFT by running the following script: +Finally, you can buy the NFT by running the following script: ```javascript reference https://github.com/iota-community/ISC-Cross-Chain-NFT-Marketplace/blob/main/scripts/buy_item.js @@ -294,4 +304,4 @@ npx hardhat run scripts/buy_item.js --network shimmerevm-testnet ## Conclusion -In the second part of this tutorial, we manually bridged an NFT from the BNB Testnet to the ShimmerEVM Testnet and listed it on the NFT marketplace. In the final part of the series, we will explore how to create a cross-chain swap contract that allows users to trade NFTs across chains. \ No newline at end of file +In the second part of this tutorial, you manually bridged an NFT from the BNB Testnet to the ShimmerEVM Testnet and listed it on the NFT marketplace. The final part of the series will explore how to create a cross-chain swap contract that allows users to trade NFTs across chains. \ No newline at end of file From b50637fbc5a0e99217fa1c70dbba7c5e529624f8 Mon Sep 17 00:00:00 2001 From: salaheldinsoliman Date: Thu, 25 Jul 2024 13:14:58 +0200 Subject: [PATCH 6/6] format sidebar Signed-off-by: salaheldinsoliman --- docs/build/isc/v1.1/sidebars.js | 6 +++--- docs/build/isc/v1.3/sidebars.js | 18 ++++++++++++++++-- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/docs/build/isc/v1.1/sidebars.js b/docs/build/isc/v1.1/sidebars.js index 13151399685..e90b22142d2 100644 --- a/docs/build/isc/v1.1/sidebars.js +++ b/docs/build/isc/v1.1/sidebars.js @@ -250,7 +250,7 @@ module.exports = { type: 'category', label: 'Tutorials', items: [ - { + { type: 'category', label: 'Cross-chain NFT Marketplace', items: [ @@ -264,8 +264,8 @@ module.exports = { label: 'Part II', id: 'tutorials/cross-chain-nft-marketplace-part-2', }, - ] - } + ], + }, ], }, { diff --git a/docs/build/isc/v1.3/sidebars.js b/docs/build/isc/v1.3/sidebars.js index d83db436be5..e90b22142d2 100644 --- a/docs/build/isc/v1.3/sidebars.js +++ b/docs/build/isc/v1.3/sidebars.js @@ -250,8 +250,22 @@ module.exports = { type: 'category', label: 'Tutorials', items: [ - 'tutorials/cross-chain-nft-marketplace-part-1', - 'tutorials/cross-chain-nft-marketplace-part-2', + { + type: 'category', + label: 'Cross-chain NFT Marketplace', + items: [ + { + type: 'doc', + label: 'Part I', + id: 'tutorials/cross-chain-nft-marketplace-part-1', + }, + { + type: 'doc', + label: 'Part II', + id: 'tutorials/cross-chain-nft-marketplace-part-2', + }, + ], + }, ], }, {