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:
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:
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:
✋ 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.