Creating a Frontend
Now that we have successfully created a contract, it's time to build a frontend to provide a user-friendly interface for interacting with it. Up until now, we have been using the CLI to send transactions and view the contract's state. However, frontends offer a more intuitive way for end users to interact with the contract. They can display all the relevant information in one place, allow users to make calls with a simple button click, and only require a wallet as a prerequisite.
Frontend structure
Navigate to the auction frontend.
cd frotends/01-frontend
Here we have a simple Next.js frontend that we'll walk through to understand the basics of creating a frontend for a NEAR smart contract.
For starters, let's take a look at how the code in the frontend is structured by doing a quick overview of the important files.
File | Description |
---|---|
_app.js | Responsible for rending the page, initiates the wallet object and adds it to global context |
index.js | The main page where the project's components are loaded into and contains most of the logic for the application like viewing the state of the contract and logic for placing a bid |
near.js | Contains the wallet class that has methods to interact with the wallet and blockchain |
context.js | Holds the global context - the wallet object and the signed-in account ID - that can be accessed anywhere |
config.js | Specifies the account ID of the auction contract |
Navigation.jsx | A component that contains a button to sign users in and out of wallets |
Bid.jsx | A component allowing a user to make a bid |
LastBid.jsx | A component that displays the highest bid and when the highest bid will next refresh |
Timer.jsx | A component that shows how long till the auction is over, or, if over, displays a button to claim the auction and then states the auction is over |
Specifying the contract
We have a config file that specifies the contract name of the auction that the frontend will interact with. There has been an example auction contract deployed and specified already but feel free to change the contract to your own auction contract you deployed.
- config.js
Loading...