1.7 KiB
1.7 KiB
This Project demo use of different methods to interate with smart contract in front-end.
1. HTML / JS
2. NextJS / React and "raw" ethers - full control and flexibility
3. NextJS & "web3-react" - balance between flexibility and ease of use
4. NextJS & "react-moralis - build quickly and leverage additional backend services
5. NextJS & "web3Modal" - simple solution focused primarily on wallet connections
6. NextJS & "useDapp" - structured, simplified approach for common dApp patterns
7. NextJS & "wagimi" - balance between flexibility and ease of use
1. HTML / JS
Import packages
* yarn add ethers
Make sure installed correct version, v5.7.2
Setup Localhost Blockchain
* anvil / yarn hardhat node
* copy network RPC URL
* anvil => http://127.0.0.1:8545
* Insert MetaMask a new Network (Or switch to correct localhost)
* Insert Account with private key (Or switch to correct account)
Start deploy local contract into anvil
* forge script script/DeploySimpleStorage.s.sol --rpc-url http://127.0.0.1:8545 --broadcast --account hoelee
* Get the SimpleStorage contract address - 0x441A9fA049f92C063b9133328D990dC58cc3D5c3
* Get the ABI
* anvil located at out/SimpleStorage.sol, find the value with key "abi"
* hardhat located at deployments/localhost/SimpleStorage.json, find "abi"
* Browser cannot access require("ethers");
* need install browserify - yarn add browserify
* yarn browserify pages/1/indexProperCatch.js --standalone bundle -o pages/1/dist/bundle.js
If MetaMask Prompt Error - Reset Account
* Due to localhost node restarted, nonce start from 0 again.
Default Connected to Sepolia Testnet
2. test