Project Objectives – by building this project you will:
- Connect HTML/JavaScript pages to a deployed smart contract with Web3.js.
- Send a transaction (
send) and read data (call) from the browser. - Keep the user’s account address between pages with jQuery and the js-cookie library.
Synopsis
In this project you learn how to store a user’s account address (the “hashcode” of a blockchain account) after the user registers on a login page, and how to reuse that address on other web pages for Web3.js scripting with the help of jQuery cookies. The second page lets the user store a number in a smart contract and then read its square and cube from the contract.
Pre-Requisite
- Ethereum smart contracts and the Solidity language (Chapters 1–24).
- JavaScript for the Web3.js library – see the Web3.js course.
- Ganache – a local development blockchain (RPC at
http://127.0.0.1:7545) with unlocked test accounts. - Remix & VS Code – editors, compilers and terminals.
External Links and Libraries
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script> <script src="node_modules/web3/dist/web3.min.js"></script> <!-- installed with: npm install web3 -->
Ganache has since been archived by its maintainer; the same steps work with other local development chains such as Hardhat Network or Anvil (change the RPC URL).
Project Files
| File | Role |
|---|---|
Solidity File (DataBank) | Stores a number with setDigit(uint); returns it squared and cubed with the view functions getSquare() and getCube(). |
| index.html | Registration page. Saves the entered account address and user name in cookies userhashcode and username (valid for 7 days) and opens numbersystem.html. If the cookie already exists, the user is redirected straight away. |
| numbersystem.html | Reads the cookies, shows the user, connects Web3.js to Ganache, creates the contract object from its ABI and address, sends setDigit from the saved address and calls getSquare/getCube. |
How It Works
1. RegisterUser enters account address & name
2. Cookies
Cookies.set('userhashcode', …, {expires: 7})3. Connect
new Web3(new Web3.providers.HttpProvider(…7545))4. Write
methods.setDigit(n).send({from: address})5. Read
methods.getSquare().call()- send() creates a transaction that changes state and costs gas; it needs a
fromaccount. Ganache can sign for its own unlocked accounts. - call() runs a view function locally on the node and returns a value without a transaction.
- The ABI (copied from Remix after compiling) tells Web3.js how to encode calls and decode results.
How to Run
- Start Ganache (or another local chain) and note the RPC URL and an account address.
- In Remix choose the external/custom provider for that RPC URL, then compile and deploy DataBank; copy its ABI and contract address.
- In
numbersystem.html, paste the ABI and address intonew web3.eth.Contract(ABI, ADDRESS). - Install Web3.js (
npm install web3) and openindex.htmlthrough a local web server. - Register with a Ganache account address, enter a number, click Set, then Results.
Going Further : Production Considerations
- Cookies are not authentication. Anyone can type any address into the form. In a real dApp the user proves ownership by connecting a wallet (e.g. MetaMask) that signs transactions.
- Unlocked accounts exist only on development chains. On testnets and mainnet, transactions must be signed by the user’s wallet.
getCube()reverts on overflow for very large inputs (checked arithmetic, Chapter 6).
Connecting through a browser wallet (Web3.js)
const web3 = new Web3(window.ethereum); // wallet as provider
const [account] = await window.ethereum.request({ method: 'eth_requestAccounts' });
const dataBank = new web3.eth.Contract(ABI, CONTRACT_ADDRESS);
await dataBank.methods.setDigit(5).send({ from: account }); // wallet asks to sign
const square = await dataBank.methods.getSquare().call(); // 25
Key Takeaways
- Web3.js needs a provider, the contract ABI and the contract address.
send()writes (transaction, gas);call()reads (free).- Cookies can carry data between pages, but real dApps identify users through wallet signatures.
Video : Project 6 : Solidity with Web3.js and jQuery Cookies
Resource Files
Question / Answer (15 questions)
Answer : Web3.js is a JavaScript library that lets web pages and Node.js applications communicate with an Ethereum node through JSON-RPC – reading data, sending transactions and calling smart contracts.
Answer : A provider (connection to a node or wallet), the contract’s ABI and the contract’s address.
Answer : It stores the user’s account address and name in browser cookies on the registration page so that numbersystem.html can read them and use the same address for contract calls.
Answer : Seven days, because they are created with
{expires : 7}.Answer : The page immediately redirects to numbersystem.html, so a registered user does not need to register again.
Answer : An HTTP provider pointing to Ganache at
http://127.0.0.1:7545, a local development blockchain.Answer : send() creates a signed transaction that can change contract state and costs gas; call() executes a function locally on the node without a transaction and returns its result, typically for view or pure functions.
Answer : Ganache keeps its test accounts unlocked, so the node can sign transactions for them. On real networks the user’s wallet must sign.
Answer : 16 and 64 respectively.
Answer : They read the stored digit but do not modify state, so they can be called with call() at no cost.
Answer : From the Solidity compiler – in Remix it can be copied from the compilation details after compiling the contract.
Answer : Anyone can type or edit a cookie value, so it does not prove ownership of the address. Real dApps ask the user to connect a wallet and sign transactions or messages.
Answer : By calling
window.ethereum.request({ method: 'eth_requestAccounts' }), which prompts the user to connect and returns the selected account address.Answer : Other local Ethereum development networks such as Hardhat Network or Anvil (Foundry); only the RPC URL in the provider needs to change.
Answer : A new deployment gets a new contract address (and possibly a new ABI if the code changed), so the address and ABI in numbersystem.html must be updated.
MCQ Test : Check Your Understanding (5 questions)
Select an option and press Check Answer, or answer all questions and press Submit Test to see your score. Each answer comes with an explanation.
Bibliography/References
The notes, questions and MCQs on this page are original explanations written for this course. The works listed below were consulted and are cited for attribution and further reading. Product names, logos and trademarks belong to their respective owners. Short quotations, where used, are marked and attributed.
- ChainSafe Systems. (n.d.). Web3.js Documentation. https://docs.web3js.org/
- js-cookie contributors. (n.d.). js-cookie: A simple, lightweight JavaScript API for handling browser cookies. GitHub. https://github.com/js-cookie/js-cookie
- Truffle Suite (ConsenSys). (n.d.). Ganache – personal Ethereum blockchain for development (product archived by its maintainer). https://archive.trufflesuite.com/ganache/
- ethereum.org. (n.d.). Introduction to dapps. Ethereum Developer Documentation. https://ethereum.org/en/developers/docs/dapps/
- Solidity Team. (n.d.). Contract ABI Specification. Solidity Documentation. https://docs.soliditylang.org/en/latest/abi-spec.html
- Remix Project. (n.d.). Remix IDE Documentation. https://remix-ide.readthedocs.io/en/latest/