Hello World !
This week was spent about making a full stack Dapp based out of my previous voting app and while doing so here is what I learnt about making a full stack web3 dapp.
Github : N/A [the link be shared once the project is completed]
First and foremost, folder structure is important and thus today's explanation will be through the lens of folders and files. But before diving into that, please note that I installed react using npm create vite@latest, now, Dapp explanation proceeds as follows :
1) folder -> src/constant
It contains abi.json. In the context of dApps, the abi.json is essential for interacting with a smart contract. The abi.json acts as the bridge between two binary program modules, in this case, our front-end application and the deployed smart contract on the blockchain. This is same as was used previously when demonstarting the use for ether.js .
2) folder -> src/context [web3Provider.jsx , web3Context.jsx]
The web3Context.jsx file just have the context used for passing state varibales in web3provider.jsx. In web3Provider.jsx we will get children (wait for some minutes to know from where we'll pass the children) , make const [web3State,setWeb3State]=useState({ contractInstance:null, selectedAccount:null, chainId:null}) and set values in it using button which will further call getWeb3State.jsx from src/utils to get values for state variables.
Big picture is, it will get some children and return state variables wraping children.
3) folder -> src/utils [getWeb3State.jsx , handleAccountChange.jsx , handleChainChange.jsx]
the main file here be getWeb3State.jsx which will manage opening metamask in browser and making sure we get account details (using handleAccountChange.jsx) and chainId (using handleChainChange.jsx). from it.
Now the main file of project, App.jsx will have some component (we will work on this in coming week) wrapped in Web3Provider (plot twist this component be it's children).
That's all for this week folks.
We will complete this project in upcoming week (atleast try to complete)
Stay tuned for more.
Top comments (0)