First you will need NodeJs. For the installation, to have the up-to-date installation procedure that suits your platform, it is best to refer to the online documentation of NodeJS https://nodejs.org/en/download

Once your installation is complete, open your terminal and enter the following command:

$ node -v

After the command, the terminal should return a similar result

v21.1.0

✅ NodeJS is now ready to use!

This project is a monorepo, which means it is a GIT project that contains multiple projects. In the root folder, you will find:

• The apps folder which contains the source code of the dApp in the web folder
• The contracts folder which contains the source code of the smart contract in the nft-claim folder

This project uses:

• NodeJS
• Yarn
• Typescript
• Vercel
• NextJS
• @proton/cli
• @proton/web-sdk
• @proton/js
• atomicassets
• Tailwind
• Daisyui

The dApp is a NextJS application written in Typescript.

Next.js allows you to create full-featured web applications by extending the latest features of React and integrating powerful JavaScript tools based on Rust for faster versions.

Typescript is a supercharged version of JavaScript. If you don't know anything about code, don't worry, I've done everything to make it easy for you to deploy the app with minimal effort.

In the root folder app/web/src, you will find a project.json file. This file allows you to configure:

• The title of your dApp for SEO
• The description of your dApp for SEO
• The color theme of your dApp See the list of available themes at https://daisyui.com/docs/themes/
• Date formatting
• The different links that should appear in the menu and footer
• The different interface texts

The environment variables in the app/web/.env file are information that will be compiled directly into the code when you deploy your application.

They are mainly used in this case to configure the connection with XPRNetwork and atomicassets.

First you have to create a free (for real) account on https://vercel.com/

Than on your terminal, reach the apps/web folder

$ cd absolute/path/to/project/**apps/web**

Than login to your vercel account, please follow the instruction on your terminal

$ vercel login

Now link the dApp code folder with vercel project

$ vercel pull 

The terminal will prompt some basic question, please follow the instruction on your terminal

To set up your account and link it to the smart contract, you will need:

• @proton/cli

CLI stands for Command Line Interface, it is a set of scripts that allow you to interact with the blockchain from your terminal. It is a NodeJS package that is installed globally, meaning it is available in your terminal from any folder.

To install it, enter the following command

$ npm i @proton/cli -g

Once the installation process is complete, check that the package is installed correctly

$ proton version

After the command, the terminal should return a similar result

0.1.93

✅ @proton/cli is now ready to use!

First, set the network you want to operate on

For the mainnet:

$ proton chain:set proton

For the testnet:

$ proton chain:set proton-test

After the command, the terminal should return a similar result

# For the mainnet
Success: Switched to chain proton
# For the testnet
Success: Switched to chain proton-test

For project management, I always use the same procedure to make sure to save the private information of my new account as soon as it is created.

1. Create a new key pair and save it to a file
2. Check if the account is available on the blockchain
3. Create the account on the blockchain
4. Add the private key to the secure storage of the CLI

First, navigate to the contracts folder in your terminal

$ cd absolute/path/to/project/**contracts/ntfclaim**

Enter the following command to generate a new key pair

# If you are on the mainnet
$ proton key:generate > mainnet.txt
# If you are on the testnet
$ proton key:generate > testnet.tx

Note that the use of > mainnet.txt does not return any result, it tells the terminal that the command output should be printed to a file named mainnet.txt (or testnet.txt)

Check that the file has been created successfully, it should look like this:

Before proceeding with this step, make sure that the account name you want to create does not already exist on the network you want to operate on. Enter the following command (replace youraccname with the account name you want to check)

$ proton account **youraccname**

If the account does not exist, your terminal will display an error similar to the following, which means that this name is available on the network you want to operate on.

(Use `node --trace-deprecation ...` to show where the warning was created)Error: unknown key (boost::tuples::tuple<bool, eosio::chain::name, boost::tuples::null_type, boost::tuples::null_type, boost::tuples::null_type, boost::tuples::null_type,boost::tuples::null_type, boost::tuples::null_type, boost::tuples::null_type, boost::tuples::null_type>): (0 quipuducu)

If the account exists, the terminal will return the following result:

Created:
Dec-08-2023, 12:35:05 AM

Permissions:
owner (=1):
 +1 PUB_K1_6xcoy2RFv4zrCJm7qaE3tHP2kPgQiFLZhv8g9i1mJY6fpf6iCa

    active (=1):
     +1 PUB_K1_6xcoy2RFv4zrCJm7qaE3tHP2kPgQiFLZhv8g9i1mJY6fpf6iCa
     +1 [email protected]

Resources:
 Type Used      Available Max       Delegated
 ──── ───────── ───────── ───────── ───────────
 RAM  278.04 KB 174.5 KB  452.54 KB
 CPU  862 µs    861.87 ms 863.11 ms 10.0000 SYS
 NET  112 Bytes 4.32 MB   4.32 MB   10.0000 SYS

This means that you need to choose another account name for the network you want to operate on.

To create the account on the blockchain, enter the following line in your terminal (replace youraccname with the account name you want to create)

$ proton account:create **youraccname**

The account creation process starts and asks you for the private key that should be linked to this account:

Enter private key for new account (leave empty to generate new key):

Copy and paste the private key (starting with PVT_K1_) from the file that was generated in step 1

The process continues and the terminal asks you to enter your email address

Enter email for verification code:

The process continues and the terminal asks you to provide the display name of the account. The display name does not need to comply with account name rules (a-z, 1-5), so you can be creative within reasonable limits 🙂

Enter display name for account:

The last step of the process is the code you received by email at the address you provided earlier.

Enter 6-digit verification code (sent to [email protected]):

The terminal should return the following result:

Account **youraccname** successfully created!

✅ Your account is now created!

To allow @proton/cli to interact with the blockchain, it needs to be provided with the private key for the network you want to operate on.

Enter the following command

$ proton key:add

The terminal will ask you to provide the private key following it. To do this, copy and paste the private key (starting with PVT_K1_) from the file generated in step 1.

Enter private key (starts with PVT_K1):

Once this is done, and if it is the first time you are using @proton/cli, you will be asked if you want to protect access to the private keys with a unique 32-character password. This is optional, but it is recommended

Please enter your 32 character password:

After completing this step, the terminal returns

Success: Added new private key for public key: PUB_K1_5v5Sk3iSrpjPs77KF9UThQfpHRe6g77EqhYfoDcXpSGhaVYhiz

✅ Your private key has been successfully added!

To be able to deploy the contract on the newly created account, you need to provision this account with RAM. To do this, you will need to:

1. Hold XPR tokens in this account or claim XPR faucets if it is a testnet account
2. Buy RAM

To do this, transfer XPR tokens from another account you own (this also works for the testnet), or use the Fiat-ramp to buy XPR tokens (mainnet only).

✅ Skip directly to step 2

To do this, follow the following process (replace youraccname with the account name you created)

$ proton faucet:claim XPR **youraccname**

If you have protected key access with a password:

Please enter your 32 character password:

Finally, the terminal returns:

Success: Faucet claimed

✅ You now have 1000 XPR tokens!

To acquire RAM, enter the following commands (replace youraccname with the RAM buyer's account name and the RAM beneficiary's account name, and 450000 with the number of bytes to be purchased (+/- 900 XPR, 1 byte = 0.002 XPR))

$ proton ram:buy **youraccname youraccname 450000**

If you have protected key access with a password:

Please enter your 32 character password:

Finally, the terminal returns:

Success: RAM Purchased

✅ Your account is now ready to receive the smart contract!

Here you need to be attentive, as several commands follow one another. If one of them is incorrect, you will need to restart this process:

First, make sure you are in the contract's folder

$ cd absolute/path/to/project/**contracts/ntfclaim**

Next, we will compile the contract:

$ npm run build

This should return a similar result

Build Starting ·····

Build progressing. Generating target files ······
Build Done. Targets generated. Target directory: target.

Now we will copy the compiled files to a new folder

$ rm -rf ./deploy && mkdir deploy && cd ./target && cp ./nftclaim.contract.wasm ./../deploy/nftclaim.contract.wasm && cp ./nftclaim.contract.abi ./../deploy/nftclaim.contract.abi

And now for the final step of our journey, we deploy the contract to the dedicated account!

$ cd ./deploy/ && proton contract:set **youraccname** ./

Your terminal should respond with something like this:

No issue with the existing contract found. Continuing.

If you have protected key access with a password:

Please enter your 32 character password:

And finally

get abi for eosio
get abi for eosio
WASM Successfully Deployed:
<https://testnet.explorer.xprnetwork.org/tx/7abf3e17a96965e3fadeb0ee1cf0328c01021bef39cc598d3448ff31084586b0?tab=traces>
get abi for eosio
get abi for eosio
ABI Successfully Deployed:
<https://testnet.explorer.xprnetwork.org/tx/c310cdc6238f850fbae77763a0c5958906a6d2803639585cb1f12665edeb152d?tab=traces>

If you deploy the contract a second time, you may encounter an error

Error: Inline actions already enabled

Don't worry about it, it's just @proton/cli applying a rule arbitrarily: on contracts, inline actions are only enabled on the first contract deployment, hence the error message.

✅ Your Smart contract is deployed!

Now verify if on your account on XPRNetwork explorer

Mainnet: https://explorer.xprnetwork.org/account/**youraccname Testnet**: https://testnet.explorer.xprnetwork.org/account/**youraccname**

You should see:

When the user claim an asset the smart contract iterate through a list of registered claimables templates to find a if a template could be minted at current time in the name of the account who claim from the dApp .

If the contract found claimables template, the minted asset is sent to the account who claim, if not an error is sent to the dApp.

Allow smart contract owner to register a claimable template for a defined time span.

Arguments

• templateId The template from atomicassets you want to allow mint.
• collectionName The collection name from atomicassets where the template belong.
• activeStartTime Epoch time where the mint of the asset starts.
• activeEndTime Epoch time where the mint of the asset ends.

Allow any one to claim a template mint if there is one active a time

Arguments

• account The account who claim an possibly active template.

The claimables table contains reference to the template that could be minted during a defined time span. Definition as follow:

Scope: global (youaccname)

Fields:

• templateId The template from atomicassets you want to allow mint
• collectionName The collection name from atomicassets where the template belong
• activeStartTime Epoch time where the mint of the asset starts
• activeEndTime Epoch time where the mint of the asset ends

The claims table contains reference of template minted by user to avoid multiple mint form a single account.

Scope: account

Fields:

• templateId The template from atomicassets who was minted
• mintedAssetId The produced asset id from atomicassets
• claimTime Epoch time where the mint of the asset has occured

Now you know how to use the Smart contract!