Skip to main content

Count on NEAR

Our counter example is a friendly decentralized app that stores a number and exposes methods to increment, decrement, and reset it.

img


Obtaining the Counter Exampleโ€‹

You have two options to start the Counter Example.

  1. You can use the app through GitHub Codespaces, which will open a web-based interactive environment.
  2. Clone the repository locally and use it from your computer.
CodespacesClone locally
Open in GitHub Codespaces๐ŸŒ https://github.com/near-examples/counters

Structure of the Exampleโ€‹

The example is divided in two main components:

  1. The smart contract, available in two flavors: Rust and JavaScript
  2. The frontend, that interacts with an already deployed contract.
โ”Œโ”€โ”€ sandbox-ts # sandbox testing
โ”‚ โ”œโ”€โ”€ src
โ”‚ โ”‚ โ””โ”€โ”€ main.ava.ts
โ”‚ โ”œโ”€โ”€ ava.config.cjs
โ”‚ โ””โ”€โ”€ package.json
โ”œโ”€โ”€ src # contract's code
โ”‚ โ””โ”€โ”€ contract.ts
โ”œโ”€โ”€ package.json # package manager
โ”œโ”€โ”€ README.md
โ””โ”€โ”€ tsconfig.json # test script

Frontendโ€‹

The counter example includes a frontend interface designed to interact seamlessly with an existing smart contract that has been deployed. This interface allows users to increase or decrease the counter as needed.


Running the Frontendโ€‹

To start the frontend you will need to install the dependencies and start the server.

cd frontend
yarn
yarn start

Go ahead and login with your NEAR account. If you don't have one, you will be able to create one in the moment. Once logged in, use the + and - buttons to increase and decrease the counter. Then, use the Gameboy buttons to reset it and make the counter blink an eye!

img Frontend of the Counter


Understanding the Frontendโ€‹

The frontend is composed by a single HTML file (/index.html). This file defines the components displayed in the screen.

The website's logic lives in /index.js, which communicates with the contract through /near-wallet.js. You will notice in /index.js the following code:

It indicates our app, when it starts, to check if the user is already logged in and execute either signedInFlow() or signedOutFlow().


Smart Contractโ€‹

The contract presents 4 methods: get_num, increment, decrement, and reset. The method get_num retrieves the current value, and the rest modify it.


Testing the Contractโ€‹

The contract readily includes a set of unit and sandbox testing to validate its functionality. To execute the tests, run the following commands:

cd contract-ts
yarn
yarn test
tip

The integration tests use a sandbox to create NEAR users and simulate interactions with the contract.


Deploying the Contract to the NEAR networkโ€‹

In order to deploy the contract you will need to create a NEAR account.

# Optional - create an account
near create-account <accountId> --useFaucet

# Deploy the contract
cd contract-ts
yarn build
near deploy <accountId> ./build/counter.wasm
tip

To interact with your contract from the frontend, simply replace the variable CONTRACT_NAME in the index.js file.


CLI: Interacting with the Contractโ€‹

To interact with the contract through the console, you can use the following commands

# Get the current number of the counter
near view counter.near-examples.testnet get_num

# Increment the counter
# Replace <accountId> with your account ID
near call counter.near-examples.testnet increment --accountId <accountId>

# Decrement the counter
# Replace <accountId> with your account ID
near call counter.near-examples.testnet decrement --accountId <accountId>

# Reset the counter to zero
# Replace <accountId> with your account ID
near call counter.near-examples.testnet reset --accountId <accountId>
tip

If you're using your own account, replace counter.near-examples.testnet with your accountId.


Moving Forwardโ€‹

A nice way to learn is by trying to expand the contract. Modify it by adding a parameter to increment and decrement, so the user can choose by how much to change the value. For this, you will need to use knowledge from the anatomy and storage sections.

Versioning for this article

At the time of this writing, this example works with the following versions:

  • near-cli: 4.0.13
  • node: 18.19.1
  • rustc: 1.77.0
Was this page helpful?