Building a Simple Clicker Game on Osmosis Testnet
Last updated
Was this helpful?
Last updated
Was this helpful?
This tutorial introduces you to interact with All That Node product to deploy Wasm smart contract to Osmosis Testnet (osmo-test-4), and to create a simple clicker game. You might be able to test the things that we are going to build on the .
Sign up to All That Node (ATN) and secure your account
Install Git on your computer
install [rustup](<https://rustup.rs/>)
Rust is the main programming language used for CosmWasm smart contracts. While WASM smart contracts can theoretically be written in any programming language, CosmWasm libraries and tooling work best with Rust.
Then run the following commands:
Run the following and choose option #2 (Client Node) and #2 (Testnet) in order.
Now you have successfully completed setting up an Osmosis client node in Testnet. In order to use osmosisd from the cli, either reload your terminal or refresh your profile with : ‘source ~/.profile’
To begin, use the following command to generate a wallet for deployment.
The address of the wallet can be found through the osmosisd keys show -a wallet .
After requesting the faucet, use the command below to check the balance.
Let's download the code with the following command:
To deploy smart contracts, you must compile the code and make it an executable wasm binary file. We will compile the wasm contract with stable toolchain.
Compile using the command below:
After this compiles, it should produce a file in target/wasm32-unknown-unknown/release/my_first_contract.wasm. If you check the size of the file by using the ls -lh command, it shows around 1.8M. This is a release build, but not stripped of all unneeded code. To produce a much smaller version, you can run this which tells the compiler to strip all unused code out:
This produces a file about 155K. To reduce gas costs, the binary size should be as small as possible. This will result in a less costly deployment, and lower fees on every interaction.
Also, if you don’t use compilation optimization, CosmWasm smart contract will not be deployed well due to exceeds limit error.
Binary file will be at artifacts/my_first_contract.wasm folder and its size will be about 130K, which is more smaller than when only RUTFLAGS was used.
We require the RPC Endpoint address of the Osmosis Testnet in order to distribute the produced Wasm binary code, and we will utilize the reliable RPC endpoint given by All That Node (ATN).
To begin, navigate to the protocol's Osmosis page and choose New Project to establish the project that will get the API key.
Then you can see the projects on DASHBOARD that you have just created. To enter, click the Osmosis tab.
The API key and Testnet endpoint may then be verified as follows:
The $NODE variable contains the RPC endpoint address of the Osmosis Testnet for ease of deployment, and the $TXFLAG variable saves the following gas cost information: At this stage, you must copy and paste your API keys after the RPC endpoint location.
Now, post the code to the chain and use the following command to extract the CODE_ID: If the $CODE_ID value is logged normally, the upload was successful.
We're going to use osmosisd. To create an instance of a contract, set the initial state and run the instantiate command.
If the run was successful, you can check the deployment in Osmosis Explorer by searching for the output txhash value.
As a result of looking for transactions in Osmosis Explorer using hash values.
Let us now test how well the contract we works without any hurdles. To begin, use the command below to obtain the address of the deployed contract.
If you use the get count query to examine the value, you will see the original state {"data":{"count":2}} written in its entirety.
By running the get_count query again after the transaction below has failed, you can see that the value has increased by one from the previous count value.
After the transaction below is lost, check the value again through the get_count query to confirm that the count value has been reset to the specified value.
Let's now look at how to communicate smart contracts placed on the Osmosis Testnet using CosmJS on the front end via a simple Clicker game.
The Clicker game is a basic game in which you click the CosmWasm symbol that appears on the screen for 15 seconds to get a score, and then you drop a transaction to the contract to record the score once the game is done.
You may play the game yourself by inspecting the completed code in the Step 3 branch of the repo below. Check this medium article (warning! in Korean) contains a full discussion of each implementation phase.
The Keplr wallet is a wallet that supports the Cosmos ecosystem's interchain.
src/wallet/connect.js contains the code for adding a network to the Keplr wallet.
Check the keplr object to determine if the extension is installed, then connect to the Osmosis Testnet network using the window.keplr.experimentalSuggestChain function. You may now obtain network information after adding a network to your Keplr wallet.
The window.keplr.enable(chainId:string) function allows the website to request access to the wallet from Keplr for user authorization, and then collect the wallet's detailed information to generate the Client.
Finally, provide the wallet's information value to the parent component that ran the method connectWallet. When React.js delivers a value from a child component to a parent, the parent can drop the function to props, and the child can pass the value to a function factor. The getInfo method may be found in src/App.js.
ChainInfo that must be passed as a factor in window.keplr.experimentalSuggestChain can be found in src/wallet/network_info.js. This information is required to be communicated except that the Optional annotation has been processed, otherwise an error will occur.
src/App.js implements the Network Connection button on the main screen.
When you click the Osmosis Testnet button, it changes to DISCONNECT and a PLAY button is generated to take you to the gameplay screen, which displays the linked wallet's address and balance underneath.
App.js manages the client, address, balance, chainId state with useState, and when using the connectWallet function, give over the getInfo function along with the factor and store it with setState.
You can find the address of the contract we published to Osmosis Testnet previously in the src/contract/address.js file.
To query CosmJS, use the queryContractSmart() function. To conduct the query, the method is sent with the contract's address and message as a factor, and the resultant count number may be obtained using result.count. The code that fires the get count query can be found in src/contract/get_count.js.
Because the reset and increment transactions modify the internal state of the contract, you must pay the gas cost.
You may execute a transaction by sending the execute() method along with the wallet address to pay for the gas, the contract address, the message, and the gas cost as a component. src/contract/reset.js contains the code that sends the reset transaction.
We previously used src/App.js to send the play button to the /play location.
First, add the router from the src/index.js file so that when you connect to the /play URL, the play screen shows.
src/pages/play.js implements the play screen that shows when you connect to the /play location. The final play page that we will use is as follows.
The previous and current scores are displayed in the upper left corner, while the time remaining is displayed in the top right corner. In the center, there is a GAME START button, which turns to TRANSACTION after the game is over.
The symbol exists in the game container, appears at the start of the game, and then disappears. While the transaction is ongoing, a loading message is displayed.
When the GAME START button is pushed, the count value acquired by calling the get_count function is shown in Previous Score, and the reset method is called to reset the contract's 'count' value to zero.
To communicate with the smart contract, you must first have client. When the screen is first shown using the useEffect function, use the chainId information from the App.js screen to connect to the wallet and construct 'client'. To use the information supplied from App.js to state, you must use the 'useLocation' function.
When the GAME START button is pushed, the startGame function reads the contract's count value using the previously created get_count method and puts it in the previousScore. Then, using the reset function, change the contract's count value to zero.
Begin the game after communicating with the contract. When the game begins, the time setting of 15 seconds should be reduced by one second each second. To implement the feature, use the setInterval method.
The next time you click the CosmWasm symbol that displays when the game starts, your score will be increased by one and the technique will be executed to randomize the next location. And let's make the game stop after all 15 seconds have passed and the clock reaches zero.
Set the icon's location in a randomized fashion by utilizing the setTargetPosition and Math.random methods and increasing the current score by one.
Using the useEffect function that detects a change in the time value, set the icon to disappear when time goes to zero and display the game end alarm window.
And use the clearInterval method to stop the continuously running 'setInterval' function
Create the submitScore method, which is called when you click the TRANSACTION button after the previous game has finished. Run increment as many times as the user's score, and after the increment transaction is complete, read the contract's count value again through the get_count function and update it to previousScore.
Since the contract's count value was reset to zero in the preceding requirement No. 2, the contract's count value is the score acquired by the user when the increment method is called.
After all contact with the contract has been completed, set the gameOver value to false and the zeroed time value back to 15 seconds to allow the game to be continued.
You can now use AllThatNode and CosmJS to publish Wasm Smart Contracts on the Osmosis Testnet and interface with Smart Contracts deployed on the front end through a simple clicker game.
Download your own IDE - recommend
First, .
You can easily set up an Osmosis Testnet environment using the .
To receive a free airdrop from Osmosis Testnet for testing purposes, you must first join Osmosis Discord. Meanwhile, utilizing the AllThatNode faucet makes your developer life much easier. Go to this link, enter your wallet address, and then click the Claim Your Tokens button. If you succeed, you may be able to obtain a transaction value.
We'll use a straightforward counter contract code. The code is kept in the following .
You can do further optimization using . rust-optimizer produces reproducible builds of CosmWasm smart contracts and does heavy optimization on the build size, using binary stripping and wasm-opt.
In Osmosis Testnet, there are two ways to establish a contract instance: using osmosisd or using the GUI at .
Let's get started by installing the extension and making an account. By default, there is no test net on the linked network when you launch the Keplr wallet. To add a network that is not available by default, you must call a separate method at the frontend, pass the network's configuration value as an argument, and then request addition.
The function SigningCosmWasmClient.connectWithSigner() returns the with the RPC endpoint address and OfflineSigner as a factor retrieved from Keplr. The 'client' serves as an interface with the network.
The whole code may be obtained in .
