Reuse images for other documentation#111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
WalterBlueu merged 1 commit into from
Oct 17, 2022
Merged

Reuse images for other documentation #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 .../openzeppelin-example-wallet-faucet01.png → .gitbook/assets/example-faucet01.png
View file
Open in desktop
File renamed without changes
0 .../openzeppelin-example-wallet-faucet02.png → .gitbook/assets/example-faucet02.png
View file
Open in desktop
File renamed without changes
0 .../openzeppelin-example-wallet-faucet03.png → .gitbook/assets/example-faucet03.png
View file
Open in desktop
File renamed without changes
0 ...k/assets/openzeppelin-example-compile.png → ...assets/example-openzeppelin-compile01.png
View file
Open in desktop
File renamed without changes
0 ...ets/openzeppelin-example-createfile03.png → ...ssets/example-openzeppelin-createfile.png
View file
Open in desktop
File renamed without changes
0 .../assets/openzeppelin-example-deploy02.png → .../assets/example-openzeppelin-deploy01.png
View file
Open in desktop
File renamed without changes
0 .../assets/openzeppelin-example-deploy03.png → .../assets/example-openzeppelin-deploy02.png
View file
Open in desktop
File renamed without changes
0 .../assets/openzeppelin-example-deploy04.png → .../assets/example-openzeppelin-deploy03.png
View file
Open in desktop
File renamed without changes
0 ...ok/assets/openzeppelin-example-flat02.png → ...ok/assets/example-openzeppelin-flat01.png
View file
Open in desktop
File renamed without changes
0 ...ok/assets/openzeppelin-example-header.png → ...ok/assets/example-openzeppelin-header.png
View file
Open in desktop
File renamed without changes
0 ...ssets/openzeppelin-example-interact01.png → ...ssets/example-openzeppelin-interact01.png
View file
Open in desktop
File renamed without changes
0 ...ssets/openzeppelin-example-interact02.png → ...ssets/example-openzeppelin-interact02.png
View file
Open in desktop
File renamed without changes
0 ...ssets/openzeppelin-example-interact03.png → ...ssets/example-openzeppelin-interact03.png
View file
Open in desktop
File renamed without changes
0 ...ssets/openzeppelin-example-interact04.png → ...ssets/example-openzeppelin-interact04.png
View file
Open in desktop
File renamed without changes
0 .../assets/openzeppelin-example-nft-logo.png → .../assets/example-openzeppelin-nft-logo.png
View file
Open in desktop
File renamed without changes
0 .../assets/openzeppelin-example-verify01.png → .../assets/example-openzeppelin-verify01.png
View file
Open in desktop
File renamed without changes
0 .../assets/openzeppelin-example-verify02.png → .../assets/example-openzeppelin-verify02.png
View file
Open in desktop
File renamed without changes
0 .../assets/openzeppelin-example-verify03.png → .../assets/example-openzeppelin-verify03.png
View file
Open in desktop
File renamed without changes
0 .../assets/openzeppelin-example-verify04.png → .../assets/example-openzeppelin-verify04.png
View file
Open in desktop
File renamed without changes
0 ...s/openzeppelin-example-wallet-token02.png → ...s/example-openzeppelin-wallet-token01.png
View file
Open in desktop
File renamed without changes
0 ...s/openzeppelin-example-wallet-token03.png → ...s/example-openzeppelin-wallet-token02.png
View file
Open in desktop
File renamed without changes
0 ...ok/assets/openzeppelin-example-wizard.png → ...ok/assets/example-openzeppelin-wizard.png
View file
Open in desktop
File renamed without changes
0 .../assets/openzeppelin-example-deploy01.png → .gitbook/assets/example-remix-connect01.png
View file
Open in desktop
File renamed without changes
0 ...ets/openzeppelin-example-createfile01.png → ...ook/assets/example-remix-createfile01.png
View file
Open in desktop
File renamed without changes
0 ...ets/openzeppelin-example-createfile02.png → ...ook/assets/example-remix-createfile02.png
View file
Open in desktop
File renamed without changes
0 ...ok/assets/openzeppelin-example-flat01.png → .gitbook/assets/example-remix-flattener.png
View file
Open in desktop
File renamed without changes
0 ...s/openzeppelin-example-wallet-token01.png → .gitbook/assets/example-xdcpay.png
View file
Open in desktop
File renamed without changes
32 changes: 16 additions & 16 deletions how-to/openzeppelin.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ keywords:
- erc721
---

![OpenZeppelin logo](../.gitbook/assets/openzeppelin-example-header.png)
![OpenZeppelin logo](https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-header.png)

# Overview

Expand All@@ -43,7 +43,7 @@ OpenZeppelin is a “battle-tested” open-source framework comprised of reusabl
OpenZeppelin's [Contracts Wizard](https://wizard.openzeppelin.com/) as an interactive smart contract generator is the easiest way to get started building smart contracts based on OpenZeppelin's components.

<p align="center">
<img width=70% src="../.gitbook/assets/openzeppelin-example-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
<img width=70% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
</p>

Select the kind of contract that you want, set your parameters and desired features, and the Wizard will generate all of the code necessary. The resulting code is ready to be compiled and deployed, or it can serve as a starting point and be customized further.
Expand All@@ -57,15 +57,15 @@ ERC721 is a standard for **non-fungible tokens** and is defined in the [EIP-721
## Create the contract

<p align="center">
<img width=50% src="../.gitbook/assets/openzeppelin-example-nft-logo.png" alt="Joe's Free Voucher image"/>
<img width=50% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-nft-logo.png" alt="Joe's Free Voucher image"/>
</p>

Joe has a Pizza shop and for the opening day, he wants to create a one-time free voucher for each client that show with her web3 wallet.

Make a simple non-fungible token contract that can be paused and minted only by the owner, we gonna use OpenZeppelin's ERC721 contract for this. Open [Remix IDE](https://remix.xinfin.network/), and let's start creating a new Solidity file named `PizzaFreeVoucher.sol` in the contracts folder:

<p align="center">
<img width=30% src="../.gitbook/assets/openzeppelin-example-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile03.png" alt="How to create a new file in Remix IDE"/>
<img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-createfile.png" alt="How to create a new file in Remix IDE"/>
</p>

Most of the OpenZeppelin contracts are expected to be used via inheritance: you will inherit from them when writing your contracts. Here is a possible code for the contract, copy this code below for your `PizzaFreeVoucher.sol`:
Expand DownExpand Up@@ -141,7 +141,7 @@ With `contract PizzaFreeVoucher is ERC721, Pausable, Ownable, ERC721Burnable` we
We just need to compile the Solidity file, by changing the Remix tab to `Solidity Compiler` or just hitting `Ctrl + S` in the editor.

<p align="center">
<img width=40% src="../.gitbook/assets/openzeppelin-example-compile.png" alt="Compile contract"/>
<img width=40% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-compile01.png" alt="Compile contract"/>
</p>

## Deploy the contract
Expand All@@ -153,19 +153,19 @@ For this tutorial, we gonna deploy the contract using a web3 wallet compatible w
Visit the [XDC Apothem network faucet](https://faucet.apothem.network/), enter the public address of your account, and `Request 1000 XDC`. After the success message from the faucet, you can confirm if you have 1000 XDC tokens transferred to your wallet.

<p align="center">
<img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet03.png" alt="Apothem Network Faucet"/>
<img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet03.png" alt="Apothem Network Faucet"/>
</p>

Now that we have gas, deploy the contract we previously create. Just change to deploy tab on your Remix IDE, set the environment to `Injected Provider`, and connect Remix with your *XDCPay* account. Select the `PizzaFreeVoucher` contract and click on `Deploy`.

<p align="center">
<img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy01.png" alt="Deploy"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy02.png" alt="Deploy"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy03.png" alt="Deploy"/>
<img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-connect01.png" alt="Deploy"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy01.png" alt="Deploy"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy02.png" alt="Deploy"/>
</p>

After that, you should see a pop-up notification to accept/deny the deployment transaction, accept by clicking on `Submit`.

<p align="center">
<img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy04.png" alt="Verify"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify01.png" alt="Verify"/>
<img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy03.png" alt="Verify"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify01.png" alt="Verify"/>
</p>

Wait for the blockchain confirmation in the `Transactions` tab of your wallet. You can now copy the transaction hash `0xe487f01b027172ce171f5980e465307da5bdb66a0425904ff8f48f25f797b15d` :partying_face::partying_face:
Expand All@@ -175,13 +175,13 @@ Wait for the blockchain confirmation in the `Transactions` tab of your wallet. Y
Open the [**XDC Apothem Network Explorer**](https://explorer.apothem.network/) and search for the previously copied hash. Here, at explorer, we can check all the transactions that occur on the network, including the deployment of our contract. Check the `To` address, should be your contract address (starting with `xdc...`).

<p align="center">
<img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify02.png" alt="Verify"/>
<img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify02.png" alt="Verify"/>
</p>

Search for the contract address on the explorer, we can see that the contract isn't verified. Click on `Verify and Publish` that will open the verification page.

<p align="center">
<img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify03.png" alt="Verify"/>
<img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify03.png" alt="Verify"/>
</p>

Now, we have to submit the source code, name, address, and compiler version of the contract. With this, the final user can confirm if the contract was been verified or not, but also interact with it directly on the explorer.
Expand All@@ -191,25 +191,25 @@ Now, we have to submit the source code, name, address, and compiler version of t
On the bottom-left corner in Remix, open `Plugin Manager` and install the `Flattener` plugin. Change to `Flattener` tab on the left navigation bar and click on `contracts/Flattern PizzaFreeVoucher.sol` (this will copy the flat code to your clipboard).

<p align="center">
<img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat01.png" alt="Flat the source code"/> <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat02.png" alt="Flat the source code"/>
<img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-flattener.png" alt="Flat the source code"/> <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-flat01.png" alt="Flat the source code"/>
</p>

Back to the verification page, paste this code, and fill in the rest of the information. Finally, click `Submit`.

<p align="center">
<img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify04.png" alt="Verify"/>
<img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify04.png" alt="Verify"/>
</p>

Once the contract is verified, just navigate to `Contract` > `Read Contract` tab, and here you can perform reading actions, such as getting the balance of an account, getting the contract owner, etc.

<p align="center">
<img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact01.png" alt="Interact"/>
<img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact01.png" alt="Interact"/>
</p>

Let's mint our first non-fungible token by changing to the `Write Contract` tab. First, connect your web3 wallet by clicking on the `Connect to Web3` button and then call the `SafeMint` method with the address that gonna receive the NFT.

<p align="center">
<img width=50% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact03.png" alt="Interact"/>
<img width=50% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact03.png" alt="Interact"/>
</p>

Accept the action by submitting the transaction :rocket:
Expand All@@ -219,13 +219,13 @@ Accept the action by submitting the transaction :rocket:
If the mint transaction was confirmed, congratulations! The target address now has one free pizza voucher.

<p align="center">
<img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact04.png" alt="Interact"/>
<img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact04.png" alt="Interact"/>
</p>

You can pick the voucher contract address (`xdcF26E1ac69D9e173C96848FbD1bBE8759f5C71106`) and add it to the list of *XDCPay*'s tokens.

<p align="center">
<img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token02.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token03.png" alt="Confirm wallet"/>
<img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-xdcpay.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token02.png" alt="Confirm wallet"/>
</p>

Now you can see the voucher NFT in your wallet :rocket::rocket:
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Reuse images for other documentation#111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

WalterBlueu
merged 1 commit into

from

Oct 17, 2022
 Merged


Reuse images for other documentation
#111
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


0
.../openzeppelin-example-wallet-faucet01.png → .gitbook/assets/example-faucet01.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet02.png → .gitbook/assets/example-faucet02.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet03.png → .gitbook/assets/example-faucet03.png

View file


Open in desktop


File renamed without changes


0
...k/assets/openzeppelin-example-compile.png → ...assets/example-openzeppelin-compile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile03.png → ...ssets/example-openzeppelin-createfile.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy02.png → .../assets/example-openzeppelin-deploy01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy03.png → .../assets/example-openzeppelin-deploy02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy04.png → .../assets/example-openzeppelin-deploy03.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat02.png → ...ok/assets/example-openzeppelin-flat01.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-header.png → ...ok/assets/example-openzeppelin-header.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact01.png → ...ssets/example-openzeppelin-interact01.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact02.png → ...ssets/example-openzeppelin-interact02.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact03.png → ...ssets/example-openzeppelin-interact03.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact04.png → ...ssets/example-openzeppelin-interact04.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-nft-logo.png → .../assets/example-openzeppelin-nft-logo.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify01.png → .../assets/example-openzeppelin-verify01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify02.png → .../assets/example-openzeppelin-verify02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify03.png → .../assets/example-openzeppelin-verify03.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify04.png → .../assets/example-openzeppelin-verify04.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token02.png → ...s/example-openzeppelin-wallet-token01.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token03.png → ...s/example-openzeppelin-wallet-token02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-wizard.png → ...ok/assets/example-openzeppelin-wizard.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy01.png → .gitbook/assets/example-remix-connect01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile01.png → ...ook/assets/example-remix-createfile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile02.png → ...ook/assets/example-remix-createfile02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat01.png → .gitbook/assets/example-remix-flattener.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token01.png → .gitbook/assets/example-xdcpay.png

View file


Open in desktop


File renamed without changes


32 changes: 16 additions & 16 deletions
how-to/openzeppelin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ keywords:
 - erc721
---

![OpenZeppelin logo](../.gitbook/assets/openzeppelin-example-header.png)
![OpenZeppelin logo](https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-header.png)

# Overview

Expand All@@ -43,7 +43,7 @@ OpenZeppelin is a “battle-tested” open-source framework comprised of reusabl
OpenZeppelin's [Contracts Wizard](https://wizard.openzeppelin.com/) as an interactive smart contract generator is the easiest way to get started building smart contracts based on OpenZeppelin's components.

<p align="center">
 <img width=70% src="../.gitbook/assets/openzeppelin-example-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
 <img width=70% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
</p>

Select the kind of contract that you want, set your parameters and desired features, and the Wizard will generate all of the code necessary. The resulting code is ready to be compiled and deployed, or it can serve as a starting point and be customized further.
Expand All@@ -57,15 +57,15 @@ ERC721 is a standard for **non-fungible tokens** and is defined in the [EIP-721
## Create the contract

<p align="center">
 <img width=50% src="../.gitbook/assets/openzeppelin-example-nft-logo.png" alt="Joe's Free Voucher image"/>
 <img width=50% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-nft-logo.png" alt="Joe's Free Voucher image"/>
</p>

Joe has a Pizza shop and for the opening day, he wants to create a one-time free voucher for each client that show with her web3 wallet.

Make a simple non-fungible token contract that can be paused and minted only by the owner, we gonna use OpenZeppelin's ERC721 contract for this. Open [Remix IDE](https://remix.xinfin.network/), and let's start creating a new Solidity file named `PizzaFreeVoucher.sol` in the contracts folder:

<p align="center">
 <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile03.png" alt="How to create a new file in Remix IDE"/>
 <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-createfile.png" alt="How to create a new file in Remix IDE"/>
</p>

Most of the OpenZeppelin contracts are expected to be used via inheritance: you will inherit from them when writing your contracts. Here is a possible code for the contract, copy this code below for your `PizzaFreeVoucher.sol`:
Expand DownExpand Up@@ -141,7 +141,7 @@ With `contract PizzaFreeVoucher is ERC721, Pausable, Ownable, ERC721Burnable` we
We just need to compile the Solidity file, by changing the Remix tab to `Solidity Compiler` or just hitting `Ctrl + S` in the editor.

<p align="center">
 <img width=40% src="../.gitbook/assets/openzeppelin-example-compile.png" alt="Compile contract"/>
 <img width=40% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-compile01.png" alt="Compile contract"/>
</p>

## Deploy the contract
Expand All@@ -153,19 +153,19 @@ For this tutorial, we gonna deploy the contract using a web3 wallet compatible w
Visit the [XDC Apothem network faucet](https://faucet.apothem.network/), enter the public address of your account, and `Request 1000 XDC`. After the success message from the faucet, you can confirm if you have 1000 XDC tokens transferred to your wallet.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet03.png" alt="Apothem Network Faucet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet03.png" alt="Apothem Network Faucet"/>
</p>

Now that we have gas, deploy the contract we previously create. Just change to deploy tab on your Remix IDE, set the environment to `Injected Provider`, and connect Remix with your *XDCPay* account. Select the `PizzaFreeVoucher` contract and click on `Deploy`.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy01.png" alt="Deploy"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy02.png" alt="Deploy"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy03.png" alt="Deploy"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-connect01.png" alt="Deploy"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy01.png" alt="Deploy"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy02.png" alt="Deploy"/>
</p>

After that, you should see a pop-up notification to accept/deny the deployment transaction, accept by clicking on `Submit`.

<p align="center">
 <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy04.png" alt="Verify"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify01.png" alt="Verify"/>
 <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy03.png" alt="Verify"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify01.png" alt="Verify"/>
</p>

Wait for the blockchain confirmation in the `Transactions` tab of your wallet. You can now copy the transaction hash `0xe487f01b027172ce171f5980e465307da5bdb66a0425904ff8f48f25f797b15d` :partying_face::partying_face:
Expand All@@ -175,13 +175,13 @@ Wait for the blockchain confirmation in the `Transactions` tab of your wallet. Y
Open the [**XDC Apothem Network Explorer**](https://explorer.apothem.network/) and search for the previously copied hash. Here, at explorer, we can check all the transactions that occur on the network, including the deployment of our contract. Check the `To` address, should be your contract address (starting with `xdc...`).

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify02.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify02.png" alt="Verify"/>
</p>

Search for the contract address on the explorer, we can see that the contract isn't verified. Click on `Verify and Publish` that will open the verification page.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify03.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify03.png" alt="Verify"/>
</p>

Now, we have to submit the source code, name, address, and compiler version of the contract. With this, the final user can confirm if the contract was been verified or not, but also interact with it directly on the explorer.
Expand All@@ -191,25 +191,25 @@ Now, we have to submit the source code, name, address, and compiler version of t
On the bottom-left corner in Remix, open `Plugin Manager` and install the `Flattener` plugin. Change to `Flattener` tab on the left navigation bar and click on `contracts/Flattern PizzaFreeVoucher.sol` (this will copy the flat code to your clipboard).

<p align="center">
 <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat01.png" alt="Flat the source code"/> <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat02.png" alt="Flat the source code"/>
 <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-flattener.png" alt="Flat the source code"/> <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-flat01.png" alt="Flat the source code"/>
</p>

Back to the verification page, paste this code, and fill in the rest of the information. Finally, click `Submit`.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify04.png" alt="Verify"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify04.png" alt="Verify"/>
</p>

Once the contract is verified, just navigate to `Contract` > `Read Contract` tab, and here you can perform reading actions, such as getting the balance of an account, getting the contract owner, etc.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact01.png" alt="Interact"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact01.png" alt="Interact"/>
</p>

Let's mint our first non-fungible token by changing to the `Write Contract` tab. First, connect your web3 wallet by clicking on the `Connect to Web3` button and then call the `SafeMint` method with the address that gonna receive the NFT.

<p align="center">
 <img width=50% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact03.png" alt="Interact"/>
 <img width=50% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact03.png" alt="Interact"/>
</p>

Accept the action by submitting the transaction :rocket:
Expand All@@ -219,13 +219,13 @@ Accept the action by submitting the transaction :rocket:
If the mint transaction was confirmed, congratulations! The target address now has one free pizza voucher.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact04.png" alt="Interact"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact04.png" alt="Interact"/>
</p>

You can pick the voucher contract address (`xdcF26E1ac69D9e173C96848FbD1bBE8759f5C71106`) and add it to the list of *XDCPay*'s tokens.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token02.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token03.png" alt="Confirm wallet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-xdcpay.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token02.png" alt="Confirm wallet"/>
</p>

Now you can see the voucher NFT in your wallet :rocket::rocket:
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Reuse images for other documentation#111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

WalterBlueu
merged 1 commit into

from

Oct 17, 2022
 Merged


Reuse images for other documentation
#111
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


0
.../openzeppelin-example-wallet-faucet01.png → .gitbook/assets/example-faucet01.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet02.png → .gitbook/assets/example-faucet02.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet03.png → .gitbook/assets/example-faucet03.png

View file


Open in desktop


File renamed without changes


0
...k/assets/openzeppelin-example-compile.png → ...assets/example-openzeppelin-compile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile03.png → ...ssets/example-openzeppelin-createfile.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy02.png → .../assets/example-openzeppelin-deploy01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy03.png → .../assets/example-openzeppelin-deploy02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy04.png → .../assets/example-openzeppelin-deploy03.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat02.png → ...ok/assets/example-openzeppelin-flat01.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-header.png → ...ok/assets/example-openzeppelin-header.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact01.png → ...ssets/example-openzeppelin-interact01.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact02.png → ...ssets/example-openzeppelin-interact02.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact03.png → ...ssets/example-openzeppelin-interact03.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact04.png → ...ssets/example-openzeppelin-interact04.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-nft-logo.png → .../assets/example-openzeppelin-nft-logo.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify01.png → .../assets/example-openzeppelin-verify01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify02.png → .../assets/example-openzeppelin-verify02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify03.png → .../assets/example-openzeppelin-verify03.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify04.png → .../assets/example-openzeppelin-verify04.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token02.png → ...s/example-openzeppelin-wallet-token01.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token03.png → ...s/example-openzeppelin-wallet-token02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-wizard.png → ...ok/assets/example-openzeppelin-wizard.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy01.png → .gitbook/assets/example-remix-connect01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile01.png → ...ook/assets/example-remix-createfile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile02.png → ...ook/assets/example-remix-createfile02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat01.png → .gitbook/assets/example-remix-flattener.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token01.png → .gitbook/assets/example-xdcpay.png

View file


Open in desktop


File renamed without changes


32 changes: 16 additions & 16 deletions
how-to/openzeppelin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ keywords:
 - erc721
---

![OpenZeppelin logo](../.gitbook/assets/openzeppelin-example-header.png)
![OpenZeppelin logo](https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-header.png)

# Overview

Expand All@@ -43,7 +43,7 @@ OpenZeppelin is a “battle-tested” open-source framework comprised of reusabl
OpenZeppelin's [Contracts Wizard](https://wizard.openzeppelin.com/) as an interactive smart contract generator is the easiest way to get started building smart contracts based on OpenZeppelin's components.

<p align="center">
 <img width=70% src="../.gitbook/assets/openzeppelin-example-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
 <img width=70% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
</p>

Select the kind of contract that you want, set your parameters and desired features, and the Wizard will generate all of the code necessary. The resulting code is ready to be compiled and deployed, or it can serve as a starting point and be customized further.
Expand All@@ -57,15 +57,15 @@ ERC721 is a standard for **non-fungible tokens** and is defined in the [EIP-721
## Create the contract

<p align="center">
 <img width=50% src="../.gitbook/assets/openzeppelin-example-nft-logo.png" alt="Joe's Free Voucher image"/>
 <img width=50% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-nft-logo.png" alt="Joe's Free Voucher image"/>
</p>

Joe has a Pizza shop and for the opening day, he wants to create a one-time free voucher for each client that show with her web3 wallet.

Make a simple non-fungible token contract that can be paused and minted only by the owner, we gonna use OpenZeppelin's ERC721 contract for this. Open [Remix IDE](https://remix.xinfin.network/), and let's start creating a new Solidity file named `PizzaFreeVoucher.sol` in the contracts folder:

<p align="center">
 <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile03.png" alt="How to create a new file in Remix IDE"/>
 <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-createfile.png" alt="How to create a new file in Remix IDE"/>
</p>

Most of the OpenZeppelin contracts are expected to be used via inheritance: you will inherit from them when writing your contracts. Here is a possible code for the contract, copy this code below for your `PizzaFreeVoucher.sol`:
Expand DownExpand Up@@ -141,7 +141,7 @@ With `contract PizzaFreeVoucher is ERC721, Pausable, Ownable, ERC721Burnable` we
We just need to compile the Solidity file, by changing the Remix tab to `Solidity Compiler` or just hitting `Ctrl + S` in the editor.

<p align="center">
 <img width=40% src="../.gitbook/assets/openzeppelin-example-compile.png" alt="Compile contract"/>
 <img width=40% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-compile01.png" alt="Compile contract"/>
</p>

## Deploy the contract
Expand All@@ -153,19 +153,19 @@ For this tutorial, we gonna deploy the contract using a web3 wallet compatible w
Visit the [XDC Apothem network faucet](https://faucet.apothem.network/), enter the public address of your account, and `Request 1000 XDC`. After the success message from the faucet, you can confirm if you have 1000 XDC tokens transferred to your wallet.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet03.png" alt="Apothem Network Faucet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet03.png" alt="Apothem Network Faucet"/>
</p>

Now that we have gas, deploy the contract we previously create. Just change to deploy tab on your Remix IDE, set the environment to `Injected Provider`, and connect Remix with your *XDCPay* account. Select the `PizzaFreeVoucher` contract and click on `Deploy`.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy01.png" alt="Deploy"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy02.png" alt="Deploy"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy03.png" alt="Deploy"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-connect01.png" alt="Deploy"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy01.png" alt="Deploy"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy02.png" alt="Deploy"/>
</p>

After that, you should see a pop-up notification to accept/deny the deployment transaction, accept by clicking on `Submit`.

<p align="center">
 <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy04.png" alt="Verify"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify01.png" alt="Verify"/>
 <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy03.png" alt="Verify"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify01.png" alt="Verify"/>
</p>

Wait for the blockchain confirmation in the `Transactions` tab of your wallet. You can now copy the transaction hash `0xe487f01b027172ce171f5980e465307da5bdb66a0425904ff8f48f25f797b15d` :partying_face::partying_face:
Expand All@@ -175,13 +175,13 @@ Wait for the blockchain confirmation in the `Transactions` tab of your wallet. Y
Open the [**XDC Apothem Network Explorer**](https://explorer.apothem.network/) and search for the previously copied hash. Here, at explorer, we can check all the transactions that occur on the network, including the deployment of our contract. Check the `To` address, should be your contract address (starting with `xdc...`).

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify02.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify02.png" alt="Verify"/>
</p>

Search for the contract address on the explorer, we can see that the contract isn't verified. Click on `Verify and Publish` that will open the verification page.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify03.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify03.png" alt="Verify"/>
</p>

Now, we have to submit the source code, name, address, and compiler version of the contract. With this, the final user can confirm if the contract was been verified or not, but also interact with it directly on the explorer.
Expand All@@ -191,25 +191,25 @@ Now, we have to submit the source code, name, address, and compiler version of t
On the bottom-left corner in Remix, open `Plugin Manager` and install the `Flattener` plugin. Change to `Flattener` tab on the left navigation bar and click on `contracts/Flattern PizzaFreeVoucher.sol` (this will copy the flat code to your clipboard).

<p align="center">
 <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat01.png" alt="Flat the source code"/> <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat02.png" alt="Flat the source code"/>
 <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-flattener.png" alt="Flat the source code"/> <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-flat01.png" alt="Flat the source code"/>
</p>

Back to the verification page, paste this code, and fill in the rest of the information. Finally, click `Submit`.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify04.png" alt="Verify"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify04.png" alt="Verify"/>
</p>

Once the contract is verified, just navigate to `Contract` > `Read Contract` tab, and here you can perform reading actions, such as getting the balance of an account, getting the contract owner, etc.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact01.png" alt="Interact"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact01.png" alt="Interact"/>
</p>

Let's mint our first non-fungible token by changing to the `Write Contract` tab. First, connect your web3 wallet by clicking on the `Connect to Web3` button and then call the `SafeMint` method with the address that gonna receive the NFT.

<p align="center">
 <img width=50% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact03.png" alt="Interact"/>
 <img width=50% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact03.png" alt="Interact"/>
</p>

Accept the action by submitting the transaction :rocket:
Expand All@@ -219,13 +219,13 @@ Accept the action by submitting the transaction :rocket:
If the mint transaction was confirmed, congratulations! The target address now has one free pizza voucher.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact04.png" alt="Interact"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact04.png" alt="Interact"/>
</p>

You can pick the voucher contract address (`xdcF26E1ac69D9e173C96848FbD1bBE8759f5C71106`) and add it to the list of *XDCPay*'s tokens.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token02.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token03.png" alt="Confirm wallet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-xdcpay.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token02.png" alt="Confirm wallet"/>
</p>

Now you can see the voucher NFT in your wallet :rocket::rocket:
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Reuse images for other documentation#111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

WalterBlueu
merged 1 commit into

from

Oct 17, 2022
 Merged


Reuse images for other documentation
#111
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


0
.../openzeppelin-example-wallet-faucet01.png → .gitbook/assets/example-faucet01.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet02.png → .gitbook/assets/example-faucet02.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet03.png → .gitbook/assets/example-faucet03.png

View file


Open in desktop


File renamed without changes


0
...k/assets/openzeppelin-example-compile.png → ...assets/example-openzeppelin-compile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile03.png → ...ssets/example-openzeppelin-createfile.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy02.png → .../assets/example-openzeppelin-deploy01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy03.png → .../assets/example-openzeppelin-deploy02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy04.png → .../assets/example-openzeppelin-deploy03.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat02.png → ...ok/assets/example-openzeppelin-flat01.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-header.png → ...ok/assets/example-openzeppelin-header.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact01.png → ...ssets/example-openzeppelin-interact01.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact02.png → ...ssets/example-openzeppelin-interact02.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact03.png → ...ssets/example-openzeppelin-interact03.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact04.png → ...ssets/example-openzeppelin-interact04.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-nft-logo.png → .../assets/example-openzeppelin-nft-logo.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify01.png → .../assets/example-openzeppelin-verify01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify02.png → .../assets/example-openzeppelin-verify02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify03.png → .../assets/example-openzeppelin-verify03.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify04.png → .../assets/example-openzeppelin-verify04.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token02.png → ...s/example-openzeppelin-wallet-token01.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token03.png → ...s/example-openzeppelin-wallet-token02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-wizard.png → ...ok/assets/example-openzeppelin-wizard.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy01.png → .gitbook/assets/example-remix-connect01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile01.png → ...ook/assets/example-remix-createfile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile02.png → ...ook/assets/example-remix-createfile02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat01.png → .gitbook/assets/example-remix-flattener.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token01.png → .gitbook/assets/example-xdcpay.png

View file


Open in desktop


File renamed without changes


32 changes: 16 additions & 16 deletions
how-to/openzeppelin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ keywords:
 - erc721
---

![OpenZeppelin logo](../.gitbook/assets/openzeppelin-example-header.png)
![OpenZeppelin logo](https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-header.png)

# Overview

Expand All@@ -43,7 +43,7 @@ OpenZeppelin is a “battle-tested” open-source framework comprised of reusabl
OpenZeppelin's [Contracts Wizard](https://wizard.openzeppelin.com/) as an interactive smart contract generator is the easiest way to get started building smart contracts based on OpenZeppelin's components.

<p align="center">
 <img width=70% src="../.gitbook/assets/openzeppelin-example-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
 <img width=70% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
</p>

Select the kind of contract that you want, set your parameters and desired features, and the Wizard will generate all of the code necessary. The resulting code is ready to be compiled and deployed, or it can serve as a starting point and be customized further.
Expand All@@ -57,15 +57,15 @@ ERC721 is a standard for **non-fungible tokens** and is defined in the [EIP-721
## Create the contract

<p align="center">
 <img width=50% src="../.gitbook/assets/openzeppelin-example-nft-logo.png" alt="Joe's Free Voucher image"/>
 <img width=50% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-nft-logo.png" alt="Joe's Free Voucher image"/>
</p>

Joe has a Pizza shop and for the opening day, he wants to create a one-time free voucher for each client that show with her web3 wallet.

Make a simple non-fungible token contract that can be paused and minted only by the owner, we gonna use OpenZeppelin's ERC721 contract for this. Open [Remix IDE](https://remix.xinfin.network/), and let's start creating a new Solidity file named `PizzaFreeVoucher.sol` in the contracts folder:

<p align="center">
 <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile03.png" alt="How to create a new file in Remix IDE"/>
 <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-createfile.png" alt="How to create a new file in Remix IDE"/>
</p>

Most of the OpenZeppelin contracts are expected to be used via inheritance: you will inherit from them when writing your contracts. Here is a possible code for the contract, copy this code below for your `PizzaFreeVoucher.sol`:
Expand DownExpand Up@@ -141,7 +141,7 @@ With `contract PizzaFreeVoucher is ERC721, Pausable, Ownable, ERC721Burnable` we
We just need to compile the Solidity file, by changing the Remix tab to `Solidity Compiler` or just hitting `Ctrl + S` in the editor.

<p align="center">
 <img width=40% src="../.gitbook/assets/openzeppelin-example-compile.png" alt="Compile contract"/>
 <img width=40% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-compile01.png" alt="Compile contract"/>
</p>

## Deploy the contract
Expand All@@ -153,19 +153,19 @@ For this tutorial, we gonna deploy the contract using a web3 wallet compatible w
Visit the [XDC Apothem network faucet](https://faucet.apothem.network/), enter the public address of your account, and `Request 1000 XDC`. After the success message from the faucet, you can confirm if you have 1000 XDC tokens transferred to your wallet.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet03.png" alt="Apothem Network Faucet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet03.png" alt="Apothem Network Faucet"/>
</p>

Now that we have gas, deploy the contract we previously create. Just change to deploy tab on your Remix IDE, set the environment to `Injected Provider`, and connect Remix with your *XDCPay* account. Select the `PizzaFreeVoucher` contract and click on `Deploy`.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy01.png" alt="Deploy"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy02.png" alt="Deploy"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy03.png" alt="Deploy"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-connect01.png" alt="Deploy"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy01.png" alt="Deploy"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy02.png" alt="Deploy"/>
</p>

After that, you should see a pop-up notification to accept/deny the deployment transaction, accept by clicking on `Submit`.

<p align="center">
 <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy04.png" alt="Verify"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify01.png" alt="Verify"/>
 <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy03.png" alt="Verify"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify01.png" alt="Verify"/>
</p>

Wait for the blockchain confirmation in the `Transactions` tab of your wallet. You can now copy the transaction hash `0xe487f01b027172ce171f5980e465307da5bdb66a0425904ff8f48f25f797b15d` :partying_face::partying_face:
Expand All@@ -175,13 +175,13 @@ Wait for the blockchain confirmation in the `Transactions` tab of your wallet. Y
Open the [**XDC Apothem Network Explorer**](https://explorer.apothem.network/) and search for the previously copied hash. Here, at explorer, we can check all the transactions that occur on the network, including the deployment of our contract. Check the `To` address, should be your contract address (starting with `xdc...`).

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify02.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify02.png" alt="Verify"/>
</p>

Search for the contract address on the explorer, we can see that the contract isn't verified. Click on `Verify and Publish` that will open the verification page.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify03.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify03.png" alt="Verify"/>
</p>

Now, we have to submit the source code, name, address, and compiler version of the contract. With this, the final user can confirm if the contract was been verified or not, but also interact with it directly on the explorer.
Expand All@@ -191,25 +191,25 @@ Now, we have to submit the source code, name, address, and compiler version of t
On the bottom-left corner in Remix, open `Plugin Manager` and install the `Flattener` plugin. Change to `Flattener` tab on the left navigation bar and click on `contracts/Flattern PizzaFreeVoucher.sol` (this will copy the flat code to your clipboard).

<p align="center">
 <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat01.png" alt="Flat the source code"/> <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat02.png" alt="Flat the source code"/>
 <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-flattener.png" alt="Flat the source code"/> <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-flat01.png" alt="Flat the source code"/>
</p>

Back to the verification page, paste this code, and fill in the rest of the information. Finally, click `Submit`.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify04.png" alt="Verify"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify04.png" alt="Verify"/>
</p>

Once the contract is verified, just navigate to `Contract` > `Read Contract` tab, and here you can perform reading actions, such as getting the balance of an account, getting the contract owner, etc.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact01.png" alt="Interact"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact01.png" alt="Interact"/>
</p>

Let's mint our first non-fungible token by changing to the `Write Contract` tab. First, connect your web3 wallet by clicking on the `Connect to Web3` button and then call the `SafeMint` method with the address that gonna receive the NFT.

<p align="center">
 <img width=50% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact03.png" alt="Interact"/>
 <img width=50% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact03.png" alt="Interact"/>
</p>

Accept the action by submitting the transaction :rocket:
Expand All@@ -219,13 +219,13 @@ Accept the action by submitting the transaction :rocket:
If the mint transaction was confirmed, congratulations! The target address now has one free pizza voucher.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact04.png" alt="Interact"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact04.png" alt="Interact"/>
</p>

You can pick the voucher contract address (`xdcF26E1ac69D9e173C96848FbD1bBE8759f5C71106`) and add it to the list of *XDCPay*'s tokens.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token02.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token03.png" alt="Confirm wallet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-xdcpay.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token02.png" alt="Confirm wallet"/>
</p>

Now you can see the voucher NFT in your wallet :rocket::rocket:
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Reuse images for other documentation#111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

WalterBlueu
merged 1 commit into

from

Oct 17, 2022
 Merged


Reuse images for other documentation
#111
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


0
.../openzeppelin-example-wallet-faucet01.png → .gitbook/assets/example-faucet01.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet02.png → .gitbook/assets/example-faucet02.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet03.png → .gitbook/assets/example-faucet03.png

View file


Open in desktop


File renamed without changes


0
...k/assets/openzeppelin-example-compile.png → ...assets/example-openzeppelin-compile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile03.png → ...ssets/example-openzeppelin-createfile.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy02.png → .../assets/example-openzeppelin-deploy01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy03.png → .../assets/example-openzeppelin-deploy02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy04.png → .../assets/example-openzeppelin-deploy03.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat02.png → ...ok/assets/example-openzeppelin-flat01.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-header.png → ...ok/assets/example-openzeppelin-header.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact01.png → ...ssets/example-openzeppelin-interact01.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact02.png → ...ssets/example-openzeppelin-interact02.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact03.png → ...ssets/example-openzeppelin-interact03.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact04.png → ...ssets/example-openzeppelin-interact04.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-nft-logo.png → .../assets/example-openzeppelin-nft-logo.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify01.png → .../assets/example-openzeppelin-verify01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify02.png → .../assets/example-openzeppelin-verify02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify03.png → .../assets/example-openzeppelin-verify03.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify04.png → .../assets/example-openzeppelin-verify04.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token02.png → ...s/example-openzeppelin-wallet-token01.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token03.png → ...s/example-openzeppelin-wallet-token02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-wizard.png → ...ok/assets/example-openzeppelin-wizard.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy01.png → .gitbook/assets/example-remix-connect01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile01.png → ...ook/assets/example-remix-createfile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile02.png → ...ook/assets/example-remix-createfile02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat01.png → .gitbook/assets/example-remix-flattener.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token01.png → .gitbook/assets/example-xdcpay.png

View file


Open in desktop


File renamed without changes


32 changes: 16 additions & 16 deletions
how-to/openzeppelin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ keywords:
 - erc721
---

![OpenZeppelin logo](../.gitbook/assets/openzeppelin-example-header.png)
![OpenZeppelin logo](https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-header.png)

# Overview

Expand All@@ -43,7 +43,7 @@ OpenZeppelin is a “battle-tested” open-source framework comprised of reusabl
OpenZeppelin's [Contracts Wizard](https://wizard.openzeppelin.com/) as an interactive smart contract generator is the easiest way to get started building smart contracts based on OpenZeppelin's components.

<p align="center">
 <img width=70% src="../.gitbook/assets/openzeppelin-example-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
 <img width=70% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
</p>

Select the kind of contract that you want, set your parameters and desired features, and the Wizard will generate all of the code necessary. The resulting code is ready to be compiled and deployed, or it can serve as a starting point and be customized further.
Expand All@@ -57,15 +57,15 @@ ERC721 is a standard for **non-fungible tokens** and is defined in the [EIP-721
## Create the contract

<p align="center">
 <img width=50% src="../.gitbook/assets/openzeppelin-example-nft-logo.png" alt="Joe's Free Voucher image"/>
 <img width=50% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-nft-logo.png" alt="Joe's Free Voucher image"/>
</p>

Joe has a Pizza shop and for the opening day, he wants to create a one-time free voucher for each client that show with her web3 wallet.

Make a simple non-fungible token contract that can be paused and minted only by the owner, we gonna use OpenZeppelin's ERC721 contract for this. Open [Remix IDE](https://remix.xinfin.network/), and let's start creating a new Solidity file named `PizzaFreeVoucher.sol` in the contracts folder:

<p align="center">
 <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile03.png" alt="How to create a new file in Remix IDE"/>
 <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-createfile.png" alt="How to create a new file in Remix IDE"/>
</p>

Most of the OpenZeppelin contracts are expected to be used via inheritance: you will inherit from them when writing your contracts. Here is a possible code for the contract, copy this code below for your `PizzaFreeVoucher.sol`:
Expand DownExpand Up@@ -141,7 +141,7 @@ With `contract PizzaFreeVoucher is ERC721, Pausable, Ownable, ERC721Burnable` we
We just need to compile the Solidity file, by changing the Remix tab to `Solidity Compiler` or just hitting `Ctrl + S` in the editor.

<p align="center">
 <img width=40% src="../.gitbook/assets/openzeppelin-example-compile.png" alt="Compile contract"/>
 <img width=40% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-compile01.png" alt="Compile contract"/>
</p>

## Deploy the contract
Expand All@@ -153,19 +153,19 @@ For this tutorial, we gonna deploy the contract using a web3 wallet compatible w
Visit the [XDC Apothem network faucet](https://faucet.apothem.network/), enter the public address of your account, and `Request 1000 XDC`. After the success message from the faucet, you can confirm if you have 1000 XDC tokens transferred to your wallet.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet03.png" alt="Apothem Network Faucet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet03.png" alt="Apothem Network Faucet"/>
</p>

Now that we have gas, deploy the contract we previously create. Just change to deploy tab on your Remix IDE, set the environment to `Injected Provider`, and connect Remix with your *XDCPay* account. Select the `PizzaFreeVoucher` contract and click on `Deploy`.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy01.png" alt="Deploy"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy02.png" alt="Deploy"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy03.png" alt="Deploy"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-connect01.png" alt="Deploy"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy01.png" alt="Deploy"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy02.png" alt="Deploy"/>
</p>

After that, you should see a pop-up notification to accept/deny the deployment transaction, accept by clicking on `Submit`.

<p align="center">
 <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy04.png" alt="Verify"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify01.png" alt="Verify"/>
 <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy03.png" alt="Verify"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify01.png" alt="Verify"/>
</p>

Wait for the blockchain confirmation in the `Transactions` tab of your wallet. You can now copy the transaction hash `0xe487f01b027172ce171f5980e465307da5bdb66a0425904ff8f48f25f797b15d` :partying_face::partying_face:
Expand All@@ -175,13 +175,13 @@ Wait for the blockchain confirmation in the `Transactions` tab of your wallet. Y
Open the [**XDC Apothem Network Explorer**](https://explorer.apothem.network/) and search for the previously copied hash. Here, at explorer, we can check all the transactions that occur on the network, including the deployment of our contract. Check the `To` address, should be your contract address (starting with `xdc...`).

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify02.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify02.png" alt="Verify"/>
</p>

Search for the contract address on the explorer, we can see that the contract isn't verified. Click on `Verify and Publish` that will open the verification page.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify03.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify03.png" alt="Verify"/>
</p>

Now, we have to submit the source code, name, address, and compiler version of the contract. With this, the final user can confirm if the contract was been verified or not, but also interact with it directly on the explorer.
Expand All@@ -191,25 +191,25 @@ Now, we have to submit the source code, name, address, and compiler version of t
On the bottom-left corner in Remix, open `Plugin Manager` and install the `Flattener` plugin. Change to `Flattener` tab on the left navigation bar and click on `contracts/Flattern PizzaFreeVoucher.sol` (this will copy the flat code to your clipboard).

<p align="center">
 <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat01.png" alt="Flat the source code"/> <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat02.png" alt="Flat the source code"/>
 <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-flattener.png" alt="Flat the source code"/> <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-flat01.png" alt="Flat the source code"/>
</p>

Back to the verification page, paste this code, and fill in the rest of the information. Finally, click `Submit`.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify04.png" alt="Verify"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify04.png" alt="Verify"/>
</p>

Once the contract is verified, just navigate to `Contract` > `Read Contract` tab, and here you can perform reading actions, such as getting the balance of an account, getting the contract owner, etc.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact01.png" alt="Interact"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact01.png" alt="Interact"/>
</p>

Let's mint our first non-fungible token by changing to the `Write Contract` tab. First, connect your web3 wallet by clicking on the `Connect to Web3` button and then call the `SafeMint` method with the address that gonna receive the NFT.

<p align="center">
 <img width=50% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact03.png" alt="Interact"/>
 <img width=50% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact03.png" alt="Interact"/>
</p>

Accept the action by submitting the transaction :rocket:
Expand All@@ -219,13 +219,13 @@ Accept the action by submitting the transaction :rocket:
If the mint transaction was confirmed, congratulations! The target address now has one free pizza voucher.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact04.png" alt="Interact"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact04.png" alt="Interact"/>
</p>

You can pick the voucher contract address (`xdcF26E1ac69D9e173C96848FbD1bBE8759f5C71106`) and add it to the list of *XDCPay*'s tokens.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token02.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token03.png" alt="Confirm wallet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-xdcpay.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token02.png" alt="Confirm wallet"/>
</p>

Now you can see the voucher NFT in your wallet :rocket::rocket:
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Reuse images for other documentation#111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

WalterBlueu
merged 1 commit into

from

Oct 17, 2022
 Merged


Reuse images for other documentation
#111
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


0
.../openzeppelin-example-wallet-faucet01.png → .gitbook/assets/example-faucet01.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet02.png → .gitbook/assets/example-faucet02.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet03.png → .gitbook/assets/example-faucet03.png

View file


Open in desktop


File renamed without changes


0
...k/assets/openzeppelin-example-compile.png → ...assets/example-openzeppelin-compile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile03.png → ...ssets/example-openzeppelin-createfile.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy02.png → .../assets/example-openzeppelin-deploy01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy03.png → .../assets/example-openzeppelin-deploy02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy04.png → .../assets/example-openzeppelin-deploy03.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat02.png → ...ok/assets/example-openzeppelin-flat01.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-header.png → ...ok/assets/example-openzeppelin-header.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact01.png → ...ssets/example-openzeppelin-interact01.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact02.png → ...ssets/example-openzeppelin-interact02.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact03.png → ...ssets/example-openzeppelin-interact03.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact04.png → ...ssets/example-openzeppelin-interact04.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-nft-logo.png → .../assets/example-openzeppelin-nft-logo.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify01.png → .../assets/example-openzeppelin-verify01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify02.png → .../assets/example-openzeppelin-verify02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify03.png → .../assets/example-openzeppelin-verify03.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify04.png → .../assets/example-openzeppelin-verify04.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token02.png → ...s/example-openzeppelin-wallet-token01.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token03.png → ...s/example-openzeppelin-wallet-token02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-wizard.png → ...ok/assets/example-openzeppelin-wizard.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy01.png → .gitbook/assets/example-remix-connect01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile01.png → ...ook/assets/example-remix-createfile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile02.png → ...ook/assets/example-remix-createfile02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat01.png → .gitbook/assets/example-remix-flattener.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token01.png → .gitbook/assets/example-xdcpay.png

View file


Open in desktop


File renamed without changes


32 changes: 16 additions & 16 deletions
how-to/openzeppelin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ keywords:
 - erc721
---

![OpenZeppelin logo](../.gitbook/assets/openzeppelin-example-header.png)
![OpenZeppelin logo](https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-header.png)

# Overview

Expand All@@ -43,7 +43,7 @@ OpenZeppelin is a “battle-tested” open-source framework comprised of reusabl
OpenZeppelin's [Contracts Wizard](https://wizard.openzeppelin.com/) as an interactive smart contract generator is the easiest way to get started building smart contracts based on OpenZeppelin's components.

<p align="center">
 <img width=70% src="../.gitbook/assets/openzeppelin-example-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
 <img width=70% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
</p>

Select the kind of contract that you want, set your parameters and desired features, and the Wizard will generate all of the code necessary. The resulting code is ready to be compiled and deployed, or it can serve as a starting point and be customized further.
Expand All@@ -57,15 +57,15 @@ ERC721 is a standard for **non-fungible tokens** and is defined in the [EIP-721
## Create the contract

<p align="center">
 <img width=50% src="../.gitbook/assets/openzeppelin-example-nft-logo.png" alt="Joe's Free Voucher image"/>
 <img width=50% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-nft-logo.png" alt="Joe's Free Voucher image"/>
</p>

Joe has a Pizza shop and for the opening day, he wants to create a one-time free voucher for each client that show with her web3 wallet.

Make a simple non-fungible token contract that can be paused and minted only by the owner, we gonna use OpenZeppelin's ERC721 contract for this. Open [Remix IDE](https://remix.xinfin.network/), and let's start creating a new Solidity file named `PizzaFreeVoucher.sol` in the contracts folder:

<p align="center">
 <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile03.png" alt="How to create a new file in Remix IDE"/>
 <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-createfile.png" alt="How to create a new file in Remix IDE"/>
</p>

Most of the OpenZeppelin contracts are expected to be used via inheritance: you will inherit from them when writing your contracts. Here is a possible code for the contract, copy this code below for your `PizzaFreeVoucher.sol`:
Expand DownExpand Up@@ -141,7 +141,7 @@ With `contract PizzaFreeVoucher is ERC721, Pausable, Ownable, ERC721Burnable` we
We just need to compile the Solidity file, by changing the Remix tab to `Solidity Compiler` or just hitting `Ctrl + S` in the editor.

<p align="center">
 <img width=40% src="../.gitbook/assets/openzeppelin-example-compile.png" alt="Compile contract"/>
 <img width=40% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-compile01.png" alt="Compile contract"/>
</p>

## Deploy the contract
Expand All@@ -153,19 +153,19 @@ For this tutorial, we gonna deploy the contract using a web3 wallet compatible w
Visit the [XDC Apothem network faucet](https://faucet.apothem.network/), enter the public address of your account, and `Request 1000 XDC`. After the success message from the faucet, you can confirm if you have 1000 XDC tokens transferred to your wallet.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet03.png" alt="Apothem Network Faucet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet03.png" alt="Apothem Network Faucet"/>
</p>

Now that we have gas, deploy the contract we previously create. Just change to deploy tab on your Remix IDE, set the environment to `Injected Provider`, and connect Remix with your *XDCPay* account. Select the `PizzaFreeVoucher` contract and click on `Deploy`.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy01.png" alt="Deploy"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy02.png" alt="Deploy"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy03.png" alt="Deploy"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-connect01.png" alt="Deploy"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy01.png" alt="Deploy"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy02.png" alt="Deploy"/>
</p>

After that, you should see a pop-up notification to accept/deny the deployment transaction, accept by clicking on `Submit`.

<p align="center">
 <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy04.png" alt="Verify"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify01.png" alt="Verify"/>
 <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy03.png" alt="Verify"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify01.png" alt="Verify"/>
</p>

Wait for the blockchain confirmation in the `Transactions` tab of your wallet. You can now copy the transaction hash `0xe487f01b027172ce171f5980e465307da5bdb66a0425904ff8f48f25f797b15d` :partying_face::partying_face:
Expand All@@ -175,13 +175,13 @@ Wait for the blockchain confirmation in the `Transactions` tab of your wallet. Y
Open the [**XDC Apothem Network Explorer**](https://explorer.apothem.network/) and search for the previously copied hash. Here, at explorer, we can check all the transactions that occur on the network, including the deployment of our contract. Check the `To` address, should be your contract address (starting with `xdc...`).

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify02.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify02.png" alt="Verify"/>
</p>

Search for the contract address on the explorer, we can see that the contract isn't verified. Click on `Verify and Publish` that will open the verification page.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify03.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify03.png" alt="Verify"/>
</p>

Now, we have to submit the source code, name, address, and compiler version of the contract. With this, the final user can confirm if the contract was been verified or not, but also interact with it directly on the explorer.
Expand All@@ -191,25 +191,25 @@ Now, we have to submit the source code, name, address, and compiler version of t
On the bottom-left corner in Remix, open `Plugin Manager` and install the `Flattener` plugin. Change to `Flattener` tab on the left navigation bar and click on `contracts/Flattern PizzaFreeVoucher.sol` (this will copy the flat code to your clipboard).

<p align="center">
 <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat01.png" alt="Flat the source code"/> <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat02.png" alt="Flat the source code"/>
 <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-flattener.png" alt="Flat the source code"/> <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-flat01.png" alt="Flat the source code"/>
</p>

Back to the verification page, paste this code, and fill in the rest of the information. Finally, click `Submit`.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify04.png" alt="Verify"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify04.png" alt="Verify"/>
</p>

Once the contract is verified, just navigate to `Contract` > `Read Contract` tab, and here you can perform reading actions, such as getting the balance of an account, getting the contract owner, etc.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact01.png" alt="Interact"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact01.png" alt="Interact"/>
</p>

Let's mint our first non-fungible token by changing to the `Write Contract` tab. First, connect your web3 wallet by clicking on the `Connect to Web3` button and then call the `SafeMint` method with the address that gonna receive the NFT.

<p align="center">
 <img width=50% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact03.png" alt="Interact"/>
 <img width=50% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact03.png" alt="Interact"/>
</p>

Accept the action by submitting the transaction :rocket:
Expand All@@ -219,13 +219,13 @@ Accept the action by submitting the transaction :rocket:
If the mint transaction was confirmed, congratulations! The target address now has one free pizza voucher.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact04.png" alt="Interact"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact04.png" alt="Interact"/>
</p>

You can pick the voucher contract address (`xdcF26E1ac69D9e173C96848FbD1bBE8759f5C71106`) and add it to the list of *XDCPay*'s tokens.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token02.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token03.png" alt="Confirm wallet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-xdcpay.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token02.png" alt="Confirm wallet"/>
</p>

Now you can see the voucher NFT in your wallet :rocket::rocket:
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Reuse images for other documentation#111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

WalterBlueu
merged 1 commit into

from

Oct 17, 2022
 Merged


Reuse images for other documentation
#111
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


0
.../openzeppelin-example-wallet-faucet01.png → .gitbook/assets/example-faucet01.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet02.png → .gitbook/assets/example-faucet02.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet03.png → .gitbook/assets/example-faucet03.png

View file


Open in desktop


File renamed without changes


0
...k/assets/openzeppelin-example-compile.png → ...assets/example-openzeppelin-compile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile03.png → ...ssets/example-openzeppelin-createfile.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy02.png → .../assets/example-openzeppelin-deploy01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy03.png → .../assets/example-openzeppelin-deploy02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy04.png → .../assets/example-openzeppelin-deploy03.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat02.png → ...ok/assets/example-openzeppelin-flat01.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-header.png → ...ok/assets/example-openzeppelin-header.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact01.png → ...ssets/example-openzeppelin-interact01.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact02.png → ...ssets/example-openzeppelin-interact02.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact03.png → ...ssets/example-openzeppelin-interact03.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact04.png → ...ssets/example-openzeppelin-interact04.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-nft-logo.png → .../assets/example-openzeppelin-nft-logo.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify01.png → .../assets/example-openzeppelin-verify01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify02.png → .../assets/example-openzeppelin-verify02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify03.png → .../assets/example-openzeppelin-verify03.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify04.png → .../assets/example-openzeppelin-verify04.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token02.png → ...s/example-openzeppelin-wallet-token01.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token03.png → ...s/example-openzeppelin-wallet-token02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-wizard.png → ...ok/assets/example-openzeppelin-wizard.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy01.png → .gitbook/assets/example-remix-connect01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile01.png → ...ook/assets/example-remix-createfile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile02.png → ...ook/assets/example-remix-createfile02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat01.png → .gitbook/assets/example-remix-flattener.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token01.png → .gitbook/assets/example-xdcpay.png

View file


Open in desktop


File renamed without changes


32 changes: 16 additions & 16 deletions
how-to/openzeppelin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ keywords:
 - erc721
---

![OpenZeppelin logo](../.gitbook/assets/openzeppelin-example-header.png)
![OpenZeppelin logo](https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-header.png)

# Overview

Expand All@@ -43,7 +43,7 @@ OpenZeppelin is a “battle-tested” open-source framework comprised of reusabl
OpenZeppelin's [Contracts Wizard](https://wizard.openzeppelin.com/) as an interactive smart contract generator is the easiest way to get started building smart contracts based on OpenZeppelin's components.

<p align="center">
 <img width=70% src="../.gitbook/assets/openzeppelin-example-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
 <img width=70% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
</p>

Select the kind of contract that you want, set your parameters and desired features, and the Wizard will generate all of the code necessary. The resulting code is ready to be compiled and deployed, or it can serve as a starting point and be customized further.
Expand All@@ -57,15 +57,15 @@ ERC721 is a standard for **non-fungible tokens** and is defined in the [EIP-721
## Create the contract

<p align="center">
 <img width=50% src="../.gitbook/assets/openzeppelin-example-nft-logo.png" alt="Joe's Free Voucher image"/>
 <img width=50% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-nft-logo.png" alt="Joe's Free Voucher image"/>
</p>

Joe has a Pizza shop and for the opening day, he wants to create a one-time free voucher for each client that show with her web3 wallet.

Make a simple non-fungible token contract that can be paused and minted only by the owner, we gonna use OpenZeppelin's ERC721 contract for this. Open [Remix IDE](https://remix.xinfin.network/), and let's start creating a new Solidity file named `PizzaFreeVoucher.sol` in the contracts folder:

<p align="center">
 <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile03.png" alt="How to create a new file in Remix IDE"/>
 <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-createfile.png" alt="How to create a new file in Remix IDE"/>
</p>

Most of the OpenZeppelin contracts are expected to be used via inheritance: you will inherit from them when writing your contracts. Here is a possible code for the contract, copy this code below for your `PizzaFreeVoucher.sol`:
Expand DownExpand Up@@ -141,7 +141,7 @@ With `contract PizzaFreeVoucher is ERC721, Pausable, Ownable, ERC721Burnable` we
We just need to compile the Solidity file, by changing the Remix tab to `Solidity Compiler` or just hitting `Ctrl + S` in the editor.

<p align="center">
 <img width=40% src="../.gitbook/assets/openzeppelin-example-compile.png" alt="Compile contract"/>
 <img width=40% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-compile01.png" alt="Compile contract"/>
</p>

## Deploy the contract
Expand All@@ -153,19 +153,19 @@ For this tutorial, we gonna deploy the contract using a web3 wallet compatible w
Visit the [XDC Apothem network faucet](https://faucet.apothem.network/), enter the public address of your account, and `Request 1000 XDC`. After the success message from the faucet, you can confirm if you have 1000 XDC tokens transferred to your wallet.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet03.png" alt="Apothem Network Faucet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet03.png" alt="Apothem Network Faucet"/>
</p>

Now that we have gas, deploy the contract we previously create. Just change to deploy tab on your Remix IDE, set the environment to `Injected Provider`, and connect Remix with your *XDCPay* account. Select the `PizzaFreeVoucher` contract and click on `Deploy`.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy01.png" alt="Deploy"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy02.png" alt="Deploy"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy03.png" alt="Deploy"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-connect01.png" alt="Deploy"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy01.png" alt="Deploy"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy02.png" alt="Deploy"/>
</p>

After that, you should see a pop-up notification to accept/deny the deployment transaction, accept by clicking on `Submit`.

<p align="center">
 <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy04.png" alt="Verify"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify01.png" alt="Verify"/>
 <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy03.png" alt="Verify"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify01.png" alt="Verify"/>
</p>

Wait for the blockchain confirmation in the `Transactions` tab of your wallet. You can now copy the transaction hash `0xe487f01b027172ce171f5980e465307da5bdb66a0425904ff8f48f25f797b15d` :partying_face::partying_face:
Expand All@@ -175,13 +175,13 @@ Wait for the blockchain confirmation in the `Transactions` tab of your wallet. Y
Open the [**XDC Apothem Network Explorer**](https://explorer.apothem.network/) and search for the previously copied hash. Here, at explorer, we can check all the transactions that occur on the network, including the deployment of our contract. Check the `To` address, should be your contract address (starting with `xdc...`).

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify02.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify02.png" alt="Verify"/>
</p>

Search for the contract address on the explorer, we can see that the contract isn't verified. Click on `Verify and Publish` that will open the verification page.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify03.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify03.png" alt="Verify"/>
</p>

Now, we have to submit the source code, name, address, and compiler version of the contract. With this, the final user can confirm if the contract was been verified or not, but also interact with it directly on the explorer.
Expand All@@ -191,25 +191,25 @@ Now, we have to submit the source code, name, address, and compiler version of t
On the bottom-left corner in Remix, open `Plugin Manager` and install the `Flattener` plugin. Change to `Flattener` tab on the left navigation bar and click on `contracts/Flattern PizzaFreeVoucher.sol` (this will copy the flat code to your clipboard).

<p align="center">
 <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat01.png" alt="Flat the source code"/> <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat02.png" alt="Flat the source code"/>
 <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-flattener.png" alt="Flat the source code"/> <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-flat01.png" alt="Flat the source code"/>
</p>

Back to the verification page, paste this code, and fill in the rest of the information. Finally, click `Submit`.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify04.png" alt="Verify"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify04.png" alt="Verify"/>
</p>

Once the contract is verified, just navigate to `Contract` > `Read Contract` tab, and here you can perform reading actions, such as getting the balance of an account, getting the contract owner, etc.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact01.png" alt="Interact"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact01.png" alt="Interact"/>
</p>

Let's mint our first non-fungible token by changing to the `Write Contract` tab. First, connect your web3 wallet by clicking on the `Connect to Web3` button and then call the `SafeMint` method with the address that gonna receive the NFT.

<p align="center">
 <img width=50% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact03.png" alt="Interact"/>
 <img width=50% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact03.png" alt="Interact"/>
</p>

Accept the action by submitting the transaction :rocket:
Expand All@@ -219,13 +219,13 @@ Accept the action by submitting the transaction :rocket:
If the mint transaction was confirmed, congratulations! The target address now has one free pizza voucher.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact04.png" alt="Interact"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact04.png" alt="Interact"/>
</p>

You can pick the voucher contract address (`xdcF26E1ac69D9e173C96848FbD1bBE8759f5C71106`) and add it to the list of *XDCPay*'s tokens.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token02.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token03.png" alt="Confirm wallet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-xdcpay.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token02.png" alt="Confirm wallet"/>
</p>

Now you can see the voucher NFT in your wallet :rocket::rocket:
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Reuse images for other documentation#111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

WalterBlueu
merged 1 commit into

from

Oct 17, 2022
 Merged


Reuse images for other documentation
#111
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


0
.../openzeppelin-example-wallet-faucet01.png → .gitbook/assets/example-faucet01.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet02.png → .gitbook/assets/example-faucet02.png

View file


Open in desktop


File renamed without changes


0
.../openzeppelin-example-wallet-faucet03.png → .gitbook/assets/example-faucet03.png

View file


Open in desktop


File renamed without changes


0
...k/assets/openzeppelin-example-compile.png → ...assets/example-openzeppelin-compile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile03.png → ...ssets/example-openzeppelin-createfile.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy02.png → .../assets/example-openzeppelin-deploy01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy03.png → .../assets/example-openzeppelin-deploy02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy04.png → .../assets/example-openzeppelin-deploy03.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat02.png → ...ok/assets/example-openzeppelin-flat01.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-header.png → ...ok/assets/example-openzeppelin-header.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact01.png → ...ssets/example-openzeppelin-interact01.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact02.png → ...ssets/example-openzeppelin-interact02.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact03.png → ...ssets/example-openzeppelin-interact03.png

View file


Open in desktop


File renamed without changes


0
...ssets/openzeppelin-example-interact04.png → ...ssets/example-openzeppelin-interact04.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-nft-logo.png → .../assets/example-openzeppelin-nft-logo.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify01.png → .../assets/example-openzeppelin-verify01.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify02.png → .../assets/example-openzeppelin-verify02.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify03.png → .../assets/example-openzeppelin-verify03.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-verify04.png → .../assets/example-openzeppelin-verify04.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token02.png → ...s/example-openzeppelin-wallet-token01.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token03.png → ...s/example-openzeppelin-wallet-token02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-wizard.png → ...ok/assets/example-openzeppelin-wizard.png

View file


Open in desktop


File renamed without changes


0
.../assets/openzeppelin-example-deploy01.png → .gitbook/assets/example-remix-connect01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile01.png → ...ook/assets/example-remix-createfile01.png

View file


Open in desktop


File renamed without changes


0
...ets/openzeppelin-example-createfile02.png → ...ook/assets/example-remix-createfile02.png

View file


Open in desktop


File renamed without changes


0
...ok/assets/openzeppelin-example-flat01.png → .gitbook/assets/example-remix-flattener.png

View file


Open in desktop


File renamed without changes


0
...s/openzeppelin-example-wallet-token01.png → .gitbook/assets/example-xdcpay.png

View file


Open in desktop


File renamed without changes


32 changes: 16 additions & 16 deletions
how-to/openzeppelin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ keywords:
 - erc721
---

![OpenZeppelin logo](../.gitbook/assets/openzeppelin-example-header.png)
![OpenZeppelin logo](https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-header.png)

# Overview

Expand All@@ -43,7 +43,7 @@ OpenZeppelin is a “battle-tested” open-source framework comprised of reusabl
OpenZeppelin's [Contracts Wizard](https://wizard.openzeppelin.com/) as an interactive smart contract generator is the easiest way to get started building smart contracts based on OpenZeppelin's components.

<p align="center">
 <img width=70% src="../.gitbook/assets/openzeppelin-example-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
 <img width=70% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wizard.png" alt="OpenZeppelin Contracts Wizard"/>
</p>

Select the kind of contract that you want, set your parameters and desired features, and the Wizard will generate all of the code necessary. The resulting code is ready to be compiled and deployed, or it can serve as a starting point and be customized further.
Expand All@@ -57,15 +57,15 @@ ERC721 is a standard for **non-fungible tokens** and is defined in the [EIP-721
## Create the contract

<p align="center">
 <img width=50% src="../.gitbook/assets/openzeppelin-example-nft-logo.png" alt="Joe's Free Voucher image"/>
 <img width=50% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-nft-logo.png" alt="Joe's Free Voucher image"/>
</p>

Joe has a Pizza shop and for the opening day, he wants to create a one-time free voucher for each client that show with her web3 wallet.

Make a simple non-fungible token contract that can be paused and minted only by the owner, we gonna use OpenZeppelin's ERC721 contract for this. Open [Remix IDE](https://remix.xinfin.network/), and let's start creating a new Solidity file named `PizzaFreeVoucher.sol` in the contracts folder:

<p align="center">
 <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="../.gitbook/assets/openzeppelin-example-createfile03.png" alt="How to create a new file in Remix IDE"/>
 <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile01.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-createfile02.png" alt="How to create a new file in Remix IDE"/> <img width=30% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-createfile.png" alt="How to create a new file in Remix IDE"/>
</p>

Most of the OpenZeppelin contracts are expected to be used via inheritance: you will inherit from them when writing your contracts. Here is a possible code for the contract, copy this code below for your `PizzaFreeVoucher.sol`:
Expand DownExpand Up@@ -141,7 +141,7 @@ With `contract PizzaFreeVoucher is ERC721, Pausable, Ownable, ERC721Burnable` we
We just need to compile the Solidity file, by changing the Remix tab to `Solidity Compiler` or just hitting `Ctrl + S` in the editor.

<p align="center">
 <img width=40% src="../.gitbook/assets/openzeppelin-example-compile.png" alt="Compile contract"/>
 <img width=40% src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-compile01.png" alt="Compile contract"/>
</p>

## Deploy the contract
Expand All@@ -153,19 +153,19 @@ For this tutorial, we gonna deploy the contract using a web3 wallet compatible w
Visit the [XDC Apothem network faucet](https://faucet.apothem.network/), enter the public address of your account, and `Request 1000 XDC`. After the success message from the faucet, you can confirm if you have 1000 XDC tokens transferred to your wallet.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-faucet03.png" alt="Apothem Network Faucet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet01.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet02.png" alt="Apothem Network Faucet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-faucet03.png" alt="Apothem Network Faucet"/>
</p>

Now that we have gas, deploy the contract we previously create. Just change to deploy tab on your Remix IDE, set the environment to `Injected Provider`, and connect Remix with your *XDCPay* account. Select the `PizzaFreeVoucher` contract and click on `Deploy`.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy01.png" alt="Deploy"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy02.png" alt="Deploy"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy03.png" alt="Deploy"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-connect01.png" alt="Deploy"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy01.png" alt="Deploy"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy02.png" alt="Deploy"/>
</p>

After that, you should see a pop-up notification to accept/deny the deployment transaction, accept by clicking on `Submit`.

<p align="center">
 <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-deploy04.png" alt="Verify"/> <img width=35% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify01.png" alt="Verify"/>
 <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-deploy03.png" alt="Verify"/> <img width=35% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify01.png" alt="Verify"/>
</p>

Wait for the blockchain confirmation in the `Transactions` tab of your wallet. You can now copy the transaction hash `0xe487f01b027172ce171f5980e465307da5bdb66a0425904ff8f48f25f797b15d` :partying_face::partying_face:
Expand All@@ -175,13 +175,13 @@ Wait for the blockchain confirmation in the `Transactions` tab of your wallet. Y
Open the [**XDC Apothem Network Explorer**](https://explorer.apothem.network/) and search for the previously copied hash. Here, at explorer, we can check all the transactions that occur on the network, including the deployment of our contract. Check the `To` address, should be your contract address (starting with `xdc...`).

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify02.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify02.png" alt="Verify"/>
</p>

Search for the contract address on the explorer, we can see that the contract isn't verified. Click on `Verify and Publish` that will open the verification page.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify03.png" alt="Verify"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify03.png" alt="Verify"/>
</p>

Now, we have to submit the source code, name, address, and compiler version of the contract. With this, the final user can confirm if the contract was been verified or not, but also interact with it directly on the explorer.
Expand All@@ -191,25 +191,25 @@ Now, we have to submit the source code, name, address, and compiler version of t
On the bottom-left corner in Remix, open `Plugin Manager` and install the `Flattener` plugin. Change to `Flattener` tab on the left navigation bar and click on `contracts/Flattern PizzaFreeVoucher.sol` (this will copy the flat code to your clipboard).

<p align="center">
 <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat01.png" alt="Flat the source code"/> <img width=40% valign="middle" src="../.gitbook/assets/openzeppelin-example-flat02.png" alt="Flat the source code"/>
 <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-remix-flattener.png" alt="Flat the source code"/> <img width=40% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-flat01.png" alt="Flat the source code"/>
</p>

Back to the verification page, paste this code, and fill in the rest of the information. Finally, click `Submit`.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-verify04.png" alt="Verify"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-verify04.png" alt="Verify"/>
</p>

Once the contract is verified, just navigate to `Contract` > `Read Contract` tab, and here you can perform reading actions, such as getting the balance of an account, getting the contract owner, etc.

<p align="center">
 <img width=60% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact01.png" alt="Interact"/>
 <img width=60% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact01.png" alt="Interact"/>
</p>

Let's mint our first non-fungible token by changing to the `Write Contract` tab. First, connect your web3 wallet by clicking on the `Connect to Web3` button and then call the `SafeMint` method with the address that gonna receive the NFT.

<p align="center">
 <img width=50% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact03.png" alt="Interact"/>
 <img width=50% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact02.png" alt="Interact"/> <img width=25% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact03.png" alt="Interact"/>
</p>

Accept the action by submitting the transaction :rocket:
Expand All@@ -219,13 +219,13 @@ Accept the action by submitting the transaction :rocket:
If the mint transaction was confirmed, congratulations! The target address now has one free pizza voucher.

<p align="center">
 <img width=70% valign="middle" src="../.gitbook/assets/openzeppelin-example-interact04.png" alt="Interact"/>
 <img width=70% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-interact04.png" alt="Interact"/>
</p>

You can pick the voucher contract address (`xdcF26E1ac69D9e173C96848FbD1bBE8759f5C71106`) and add it to the list of *XDCPay*'s tokens.

<p align="center">
 <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token02.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="../.gitbook/assets/openzeppelin-example-wallet-token03.png" alt="Confirm wallet"/>
 <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-xdcpay.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token01.png" alt="Confirm wallet"/> <img width=30% valign="middle" src="https://raw.githubusercontent.com/XDC-Community/docs/main/.gitbook/assets/example-openzeppelin-wallet-token02.png" alt="Confirm wallet"/>
</p>

Now you can see the voucher NFT in your wallet :rocket::rocket:
Loading