0.1.1 • Published 1 month ago

message-saver v0.1.1

Weekly downloads
-
License
-
Repository
github
Last release
1 month ago

Message Saver Smart Contract

This project is a simple example on how to code a smart contract and interact with it with React.js

The project does a simple task, which is saving a message on a blockchain network and fetching it.

The contract is deployed on Alchemy using Sepolia network

Note: you must have an Alchemy account and a MetaMask wallet containing Sepolia Ether (test ether) to use the app online or you can run the app locally using Hardhat tool (see the details below).

Configuring MetaMask wallet to try the live version

  1. After making an account on Alchemy and a digital wallet on MetaMask, select the network dropdown (this will likely be the dropdown with “Ethereum Mainnet” listed). Do note that you will need to have enabled “Show test networks” in order to view the full list as per the below screenshot.

after_running_hardhat_node

  1. from the list, select Sepolia network.

selecting_sepolia_network

now, you should be able to see a MetaMask account which operates on Sepolia network

!new_sepolia_account

as you can see, there is no ether in the account! You can optain some fake ether from here by login into your Alchemy account and providing the private key of the MetaMask account which has been already created. After that, you will be ready to use the live verison of the project.

showing_private_key_sepolia

How To Run The App On Localhost

  1. on the project directory, run npx hardhat node Running the above command, you will get the RPC endpoint as well as a list of locally generated accounts. We will need the endpoint as well as the private keys for configuring Metamask.

after_running_hardhat_node

  1. now, we need to add a local network to Metamask. In a browser with Metamask installed, select the network dropdown (this will likely be the dropdown with “Ethereum Mainnet” listed). Do note that you will need to have enabled “Show test networks” in order to view the full list as per the below screenshot.

metamask_network_add

Select "Add Network" and a new tab will be opened in your browser listing types of networks to choose from. from the buttom of the page, click "add a new network manually"

browser_tab_after_add_network_btn_clicked

After that, will be greeted with a form requesting for the relevant network details. add_network_manually_form

In order to connect to our local network, we will be using the following:

Then click "save"

  1. now, we need to import test accounts. Upon starting up the local network, Hardhat has also funded a list of accounts with the native test ETH. In order to add these accounts to Metamask, we will need to add the private keys which were returned when we ran the npx hardhat node command.

With the private keys in hand, we can then select the accounts tab on Metamask (this is the colourful circle on top) which will display various options for connecting an account.

select_account_metamask

select "Add account or hardware wallet".

then select "Import account"

select_import_account

after that, Metamask will prompt you for the private key string. Paste the private keys from earlier, it should look something like this: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

paste_private_key

then click "Import" and once imported, an account with the corresponding address will have been added to Metamask. You should also be able to see a 10000 ETH in the imported account.

  1. now we need to deploy our smart contract.

On a NEW CONSOLE, run npx hardhat run .\scripts\deploy.ts --network localhost and should see a message saying: MessageSaver deployed to: (some address)

after_runnig_deploy_script

Make sure that the address which our contract has been deployed to matches the value of messageSaverAddress variable in ./src/helpers.ts file, unless, just make the value of the variable as the same as the contract address.

helpers_message_saver_var

  1. finally, run npm start command and a new tab will be opened in your browser so you can use the app.

local_app_in_browser

How To Run The Test Suite On Localhost

After running npx hardhat node command as above, you can run the test suite in ./test/MessageSaver.ts file by running npx hardhat test ON A SEPERATE CONSOLE

after_running_test_command