Interacting with Smart Contracts
DapDap Developer: Interacting with Smart Contracts
DapDap streamlines your interaction with smart contracts across Ethereum Layer-2 networks by utilising NEAR JS. This section introduces how developers can create decentralised and secure applications for the DapDap gateway that read from and write to smart contracts.
Introduction to Smart Contract Interaction
At DapDap, we enable direct interaction with a myriad of smart contracts deployed on Layer-2 solutions. Let's explore how to craft an app that leverages a NEAR smart contract for storing and retrieving data.
The Smart Contract Example
We'll use a basic "Hello World" smart contract deployed on NEAR, accessible at hello.world-example.near
. It offers two functionalities:
set_greeting(greeting: string): void
- Accepts a greeting, storing it within the contract's state.get_greeting(): string
- Retrieves the currently stored greeting.
Fetching Data from the Contract
Your DapDap component can interact with different blockchains, dApps, and component using NEAR's built-in BOS API. Let's see how to create an application that reads and stores a greeting from a NEAR smart contract.
Example fetching the greeting:
Assuming the contract is storing "Hello"
, this will render a simple:
Utilising the NEAR JS library integrated within DapDap, connecting to and querying the NEAR network becomes effortless.
Changing the Greeting
To modify the greeting, we simply need to use Near.call
to call the set_greeting
method. This however, requires us to have a frontend in which the user can input the new greeting.
Lets create it in two steps:
Build the HTML that will be rendered
Add the logic to handle the function call
1. HTML Components
Use the following code to create a simple frontend, composed by a title, an input form to change the greeting, and a button to submit the change.
Relevant HTML There are two important things to notice in the code above:
onChange & onClick: We have prepared our
<input>
and<button>
to act when something happens. Particularly, we will build two methods: one when the input changes, and one when the button is pressed.context.accountId: We check if
context.accountId
is set, which tells us if the user has logged in using their NEAR account, and thus can interact with NEAR contracts. :::
2. Handling User's Input
Having our component's view ready, we now need to define the logic for when the user inputs a new greeting and presses the Submit
button. This is, we need to define the onInputChange
and onBtnClick
methods.
onInputChange
When the user inputs a new greeting, we want to store it somewhere until the Submit
button is pressed, for this, we can use the application's State.
In BOS, the state is initialized through State.init
, updated with State.update
, and accessed through the state
variable (notice the lowercase). Lets store the new greeting in the App's state:
onBtnClick
The only thing left to do, is to handle when the user clicks the Submit
button. What we want is to check if the user changed the greeting, and submit it to the contract.
Complete Your DapDap App
Following this section, you'll have set up the foundation for smart contract interactions within the DapDap gateway.
This example underpins the flexibility and power of combining NEAR's blockchain technology with DapDap's cohesive and user-friendly platform. We have deployed a complete version of this example on the NEAR blockchain, so you can see its code and play with it.
Code: Check the code of this example at the near.social code page.
Try It: Interact with the application at the near.social page.
For the ultimate final state, ie., deploying the version of your app on DapDap gateway, please reach out our Lead Developer @pikapika987 on telegram
Last updated