In the previous part of this tutorial, we guided you through the process of creating a Calimero Network account and deploying a developer shard. Now that you have a private shard up and running, it's time to start building your first decentralized application (dApp) from the Calimero examples repository. In the second part of the tutorial, we will use the Tic Tac Toe game as an example to showcase how to deploy a smart contract, interact with it, and display the game board using Next.js. Let's get started!

Prerequisites

To get started, ensure that you have the following:

• A Calimero Network account
• A code editor like VSCode
• The Calimero examples repository cloned onto your local machine
• The NEAR CLI tool installed
• Node and npm installed in your machine
• The Rust and WASM toolchain installed

Step 1: Generate an auth token

Before deploying the Tic Tac Toe dApp on our private shard, we must first issue a Calimero auth token. This token will authenticate and authorize external applications to communicate with our shard. Calimero is a permissioned chain and it allows for granular control over the token's time to live and associated permissions.

To create an auth token, follow these steps:

1. Log in to your Calimero Network account.
2. Click on the Security dropdown in the left navigation menu.
3. Select Tokens.
4. Click on Create new token.
5. Choose a name for your auth token.
6. Select a duration for the token. For this demo, we will use a Perpetual token.
7. Configure the token's permissions by selecting the appropriate checkboxes. These checkboxes represent different types of permissions, such as read, write, and execute. In this case, we will select full-access. We'll cover permissions in more detail later in other tutorials.

1. Click on "Generate Token".
2. Once the token is issued, you can copy it to your clipboard or request to be sent to you via email.

Once you have created your auth token, be sure to store it in a secure location, as it will be required to communicate with your private shard. The token cannot be obtained afterwards, which means you’ll have to issue a new token if you forget its value. With your auth token in hand, we're ready to move on to the next step.

Step 2: Setting up the near CLI

Before deploying the contract we need to set up near-cli to make it work with a Calimero shard. For that we need to set the token value which will be passed with the requests showing that we have permissions to deploy contracts and make function calls. This can be done using the “near set-api-key” command of near-cli.

At the time of writing this post the near cli ignores the –nodeUrl option passed to the commands so we have to set it to the default node in the config which is https://rpc.testnet.near.org. This issue has been reported and we will update this tutorial as soon as a fixed version is released.

Open your terminal and run the following commands:

1. Set API key

1. Create a new keypair for the shard main account (if your shard name is 'demos-calimero-testnet', your main account is 'demos.calimero.testnet').

The previous command has generated a new keypair and stored it in ~/.near-credentials/ folder. After successfully running this command a public key it’s prompted in the terminal (ed25519:PUBLICKEY). Copy it and move to the final step.

1. Open Calimero console
2. Click on security
3. Click on accounts
4. Search the main account in the list and click on the three dots menu.
5. Click on Add public key

1. Paste the public key in the dialog

1. Click on Add public key

Great! We are now able to manage our resources in the shard using the CLI.

Step 3: Build and deploy the tictactoe smart contract

After successfully creating your account, it's time to move on to compiling your smart contract and deploying it on the Calimero shard. Calimero is built on top of NEAR and it’s compatible with the same tooling.

The tictactoe example includes the source code of a smart contract written in Rust. Before deploying it to your shard you’ll need to build it. Here's a step-by-step guide to help you through the process.

1. Open a terminal and go to the "tic-tac-toe/contracts/calimero-tictactoe/" folder in the calimero-examples repository that you cloned.

1. Build the wasm file for your contract

This command will create a wasm file in "/target/wasm32-unknown-unknown/release/tic_tac_toe.wasm" which contains the compiled smart contract code.

Check that your working directory is calimero-examples/tic-tac-toe/contracts/calimero-tictactoe. From here, you can follow the next steps in the tutorial to configure the contracts and deploy them to your private shard.

1. Create the contract account. In NEAR it’s possible to add code to the accounts for that create contract. You can arbitrarily name the sub-account id. Main accounts can create sub-accounts of themselves, helping to better organize related-accounts.

1. Deploy your NEAR contract

Step 4: Updating config file and starting up DAPP frontend

After creating your account on the Calimero shard, saving your credentials, building your contract wasm file, and successfully deploying it to the Calimero Shard, it's time to set up the frontend. To do this, you'll need to configure your connection settings in the "calimeroSdk.ts" file.

To access the connection configuration settings, open up the calimeroSdk.ts file. We recommend using environment variables to save these settings. Here's a breakdown of what each configuration property does:

1. calimeroUrl: this is an RPC endpoint used for syncing account and querying shard data and can be found on your Calimero Console dashboard page under endpoints table.

1. calimeroToken: auth token for the RPC node (use the token previously created from the console).

Once you've configured your connection settings, you're ready to navigate to the "UI" folder in the Tic Tac Toe example and run the following command from the terminal:

For the last step open up your browser and navigate to the http://localhost:3000 where you should see dApp login screen. You can check out how it looks on this url: https://calimero-tictactoe-demo.netlify.app

Congratulations!

You now have an application that can access shard contracts. However, this is just the beginning. The game is played privately within the shard. In the upcoming parts of this tutorial, we'll walk you through how to use the Calimero Rust SDK to create contracts that can call other contracts on the public chain and vice versa. So, stay tuned to learn how to utilize Calimero SDK's. By the end of the tutorial, you'll have a comprehensive understanding of how to leverage the Calimero shards to develop complex apps that can interact seamlessly with both the shard and public chain.

‍