Alchemy Hello World smart contract project - front end Vite / React
The deployed app is hosted on Vercel - https://vite-hello-world-smart-contract.vercel.app/
- a React hook that is called after the component is rendered. If it has an empty array prop passed into it, will only be called on the component's first render.
- In this project we will load the current message stored in the smart contract, call our smart contract and wallet listeners and then update our UI to reflect whether a wallet is already connected.
- (Model - View - Controller) paradigm
- use a seperate file to contain all the functions to manage the logic, data and rules of our dApp
- then export those functions to our front-end (HelloWorld component)
- To read from a smart contract need the following:
- An API connection to the Ethereum blockchain
- A loaded instance of your smart contract
- A function to call your smart contract function
- A listener to watch for updates when the data you're reading from the smart contract changes
- Need an Alchemy Web3 key in our dApp to read from the blockchain
- run
npm install @alch/alchemy-web3 - Alchemy Web3 is a wrapper around Web3.js which provides enhanced API methods
- install the
dotenvpackage -npm install dotenv --save - use the Alchemy Websockets API key instead of HTTP API key as this will allow us to set up a listener that detects when the message stored in the smart contract changes
- use the API key to establish the Alchemy Web3 endpoint
- to load your smart contract, need the following:
- Contract address
- Contract ABI
- Both can be found on Etherscan as previously verified the contract
- Contract ABI is necessary for specifying which function a contract will invoke as well as ensuring the function will return data in the correct format.
- Copy the ABI and save as a JSON file in
contract-abi.json