NEAR Documentation
  • Concepts
  • Develop
  • Tools
  • Tutorials
  • Community
  • Tokens
  • Stake
  • Integrate
  • GitHub

›Examples

Basics

  • Getting Started
  • Create Account
  • Hackathon Guide

Front-end

  • Introduction
  • API Library
  • RPC Endpoints

Smart Contracts

  • Overview
  • AssemblyScript

    • Introduction
    • AS SDK

    Rust

    • Introduction
    • Rust SDK

Running A Node

  • Running a node
  • Running a node (Windows)

NEAR <> ETH

    EVM

    • Network Status
    • Simple EVM Script
    • Truffle
    • Web3 Provider
    • Proxy RPC Server
    • Local Setup
    • Testing Contracts

    Examples

    • Pet Shop
Edit

The NEAR Pet Shop example


Before you can interact with this dApp, please make sure you have a NEAR betanet account. (Note that after the NEAR mainnet launch, betanet underwent a hard fork to "start fresh" so accounts created earlier in 2020 will need to be recreated.) Please create an account following the instructions at:

https://wallet.betanet.near.org

Then visit the NEAR Pet Shop live on betanet here:

https://near-examples.github.io/near-pet-shop

You'll see this on the webpage:

At the top of the NEAR Pet Shop there are three dogs open for adoption and one that's already adopted. The user has not logged in yet

There are a total of 16 pets in a grid, associated with the 16 Ethereum addresses returned from getAdopters. In this screenshot, the rightmost dog named Melissa has been adopted. The button under Melissa says "Success" while the other dogs in that row say "Adopt." Note that the buttons are disabled. This is because the user hasn't logged in yet. We won't be able to click the buttons to adopt until we're logged in and can sign transactions, but we're able to tell which dogs are adopted by instantiating NearProvider as "read-only" to fetch the state. (More on this in the documentation for NEAR Web3 Provider.)

Clicking the Login button in the upper right hand corner will redirect to the NEAR Wallet (for betanet) and ask you to approve creating a function-call access key. Follow the directions, approving the creation of this key, and you'll be redirected back to the NEAR Pet Shop page. This time, however, you're logged in using a special private key which now lives in the browser's local storage. Using your browser's developer tools, you can see the key:

Screenshot from the developer tools of a chrome browser showing the function-call access private key

Access keys are beyond the scope of this article, but are covered in the documentation and are a powerful feature of NEAR.

When the page reloaded after being redirected from NEAR Wallet, the NearProvider was instantiated with the betanet account as the masterAccountId, allowing the read/write of state using signed transactions. Once logged in, the "Adopt" buttons are enabled and the dogs open for adoption can be adopted.

The app.js file connects the web front-end to the contract in the NEAR EVM via NEAR Web3 Provider. It's a rather short file and worth a look. The calls to access and mutate state are the same as the code from the evm-simple example. The only code snippet we'll cover is the instantiation, as that differs from the previous example:

Snippet from NEAR Pet Shop showing the instantiation of the NearProvider in read-only mode, also using browser's local storage as the key store

✋ Quick note: the code screenshot above links to GitHub projects at the latest commit when this was written.

Note the read-only and signed modes for NEAR Web3 Provider. This also highlights the key store type of BrowserLocalStorageKeyStore, which is how we ended up saving that key in local storage.

Compile and deploy the contract with the following command, replacing you.betanet with your betanet account:

export NEAR_MASTER_ACCOUNT=you.betanet
truffle migrate --network near_betanet

This section has covered using NEAR Web3 Provider on the front-end, using read-only and signed instantiations, and deploying the contract. Finally, for the most up-to-date instructions, please visit the repository's README.

Last updated on 2/10/2021 by Josh
← Testing Contracts
  • Wallet
  • Explorer
  • Examples
  • Forum
  • Twitter
  • GitHub
  • Discord
  • Telegram
  • WeChat
  • YouTube

Developers

  • Overview
  • Technology
  • GitHub
  • Bounties
  • Grants

Community

  • Forum
  • Events
  • Contributor Program
  • Guild Program
  • Startup Accelerator
  • Bounties
  • Tokens

About

  • Team
  • Careers
  • Backers
  • Press Kit
  • Brand Guidelines
  • Privacy Policy

2020 NEAR Protocol|All rights reserved|hello@near.org|Privacy Policy