We're going to add a login button that uses
near-api-js to login with NEAR.
Below is the workflow of logging in:
- User clicks the login button
near-api-jscreates a private key in the browser
- A redirect to NEAR Wallet occurs, passing the public key. NEAR Wallet (often) has a full-access key capable of the
AddKeyaction. The user follows a wizard, ultimately authorizing the creation of a new key.
src directory we'll look at:
We won't go over every change, but instead point to the new logic.
First we set up a
It's then used in React:
Once logged in, that
WalletConnection object will be tied to the logged-in user, and they'll use that key to sign transactions and interact with the contract.
Transactions that redirect to NEAR Wallet
In our improved crossword puzzle, the function-call access key for the logged-in user will be signing a transaction to submit their solution.
You may notice, however, that sometimes you'll be redirected to NEAR Wallet, and other times you aren't.
This goes back to an earlier rule we mentioned: function-call access keys cannot send NEAR. They cannot perform the
If a function call requires even 1 yoctoNEAR, NEAR Wallet (or any other wallet containing a full-access key) is required to sign the transaction.
The frontend code contains a check to see if the user has completed the crossword puzzle successfully. In there we'll add logic to call the
submit_solution function on the smart contract.
It's not a bad idea to wrap these type of calls in try…catch blocks to properly handle any errors that come from the blockchain.
These errors can be quite helpful to the developer and the end user.
In the previous chapter, the frontend had a hardcoded file containing information about the clues for a simple crossword puzzle. In this chapter, we've given the coordinates and details about the clues, but the frontend needs to fetch this information.
We're going to modify the logic surrounding our view-only call to
get_unsolved_puzzles on the contract. This method now returns the clue information, so we've implemented a function that puts it in the proper format for React to construct the crossword puzzle.
This is a tutorial about Rust smart contract development, so we won't focus on the details of this, but know we've added the function
mungeBlockchainCrossword. This allows us to keep adding custom crossword puzzles and have the frontend be dynamic.
We'll also make other minor changes like adding a page for when there are no puzzles available, and adding a loading screen.
If you've been following this guide closely, you'll likely just need to start the React app with:
As a helpful reminder, below has the steps necessary to recreate the subaccount, build the contract, deploy the subaccount, and call methods on the contract:
For fun, try interacting with the smart contract using the React frontend and the CLI. We can check the status of the puzzle using the CLI, solve the puzzle with the frontend, and check the status again.
Before and after solving the puzzle, run this command:
This will return our enum
PuzzleStatus. Before solving the puzzle it should print:
After you solve the crossword puzzle you'll see a screen with a link to NEAR Explorer to look at the details of the transaction. Notice we have our
Transfer Action in there:
That's it for this chapter! As a reminder the full code is available at: