165 lines
No EOL
4.7 KiB
Markdown
165 lines
No EOL
4.7 KiB
Markdown
Practical 1
|
|
|
|
Setting up environment
|
|
- We need to connect our machine to etherium network.
|
|
- To able to do transaction to etherium network we need to pay fees called gas which is distributed to miners
|
|
- As buying ether is so expensive we can connect to test network instead of main network for learning purpose.
|
|
- So to turn our browser into node for the test network use the metamask extenstion
|
|
- get free ethers for sepolia network from these faucets https://faucetlink.to/sepolia
|
|
- to use polygon amoy test network use this to add in metamask config
|
|
https://support.polygon.technology/support/solutions/articles/82000907114-how-to-add-amoy-network-in-your-wallet-
|
|
```text
|
|
Network Name: POLYGON AMOY TESTNET
|
|
New RPC URL: https://rpc-amoy.polygon.technology/
|
|
Chain ID: 80002
|
|
Currency Symbol: MATIC
|
|
Block Explorer URL: https://www.oklink.com/amoy
|
|
```
|
|
faucet for polygon amoy : https://faucet.polygon.technology/
|
|
- to buy real one
|
|
https://medium.com/prepo/setting-up-metamask-and-getting-eth-matic-on-polygon-step-by-step-guide-fd55147a0f05
|
|
|
|
### Coding
|
|
- Use remix.etherium.org IDE
|
|
Create a file named `Bank.sol`
|
|
```sol
|
|
// SPDX-License-Identifier: MIT
|
|
pragma solidity 0.8.25;
|
|
|
|
contract Bank {
|
|
int bal;
|
|
|
|
constructor() public {
|
|
bal = 1;
|
|
}
|
|
|
|
function getBalance() view public returns(int) {
|
|
return bal;
|
|
}
|
|
|
|
function withdraw(int amt) public {
|
|
bal = bal - amt;
|
|
}
|
|
|
|
function deposit(int amt) public {
|
|
bal = bal + amt;
|
|
}
|
|
}
|
|
```
|
|
- This Bank.sol should be under contracts folder. This file is to be compiled
|
|
- Also the file named `deploy_with_web3.ts` should be in scripts folder which will deploy it
|
|
```js
|
|
// This script can be used to deploy the "Storage" contract using Web3 library.
|
|
// Please make sure to compile "./contracts/1_Storage.sol" file before running this script.
|
|
// And use Right click -> "Run" from context menu of the file to run the script. Shortcut: Ctrl+Shift+S
|
|
|
|
import { deploy } from './web3-lib'
|
|
|
|
(async () => {
|
|
try {
|
|
const result = await deploy('Bank', [])
|
|
console.log(`address: ${result.address}`)
|
|
} catch (e) {
|
|
console.log(e.message)
|
|
}
|
|
})()
|
|
```
|
|
- Now run it like this
|
|
|
|
- switch to injected metamask instead of remix vm to deploy transaction on our network
|
|
|
|
|
|
### Front end
|
|
Instead of running it and using it inside remix lets create a separate front end
|
|
- Two things are required ie ABI from compiler section and Address of Bank(not ours) from 'Deploy and run transaction' section.
|
|
- Now create html file and type
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<div class="">
|
|
<input type="text" id="amount">
|
|
<p id="balance"></p>
|
|
<button id="deposit">Deposit</button>
|
|
<button id="withdraw">Withdraw</button>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.34/dist/web3.min.js"></script>
|
|
|
|
|
|
<script>
|
|
let contract;
|
|
|
|
|
|
web3= new Web3(web3.currentProvider);
|
|
// web3= new Web3(ethereum);
|
|
|
|
// initialize ABI and address first
|
|
|
|
// Contract method will accept 2 parameters ie ABI and contract
|
|
contract = new web3.eth.Contract(ABI,address);
|
|
|
|
// as getBalance is a function so we need to call it and use the call method for that which will return the promise
|
|
contract.methods.getBalance().call().then( (bal)=>{
|
|
console.log('balance')
|
|
document.querySelector("#balance").innerHTML= bal;
|
|
} )
|
|
|
|
depositBtn.addEventListener('click',async()=>{
|
|
let amt=0;
|
|
amt = parseInt(inputEle.value);
|
|
|
|
await window.ethereum.enable();
|
|
// this will return all the promise of accounts of metamask
|
|
web3.eth.getAccounts().then( accounts=>{
|
|
|
|
console.log('accounts: ',accounts)
|
|
// taking first account
|
|
const acc = accounts[0];
|
|
|
|
// instead of using call method send method is used
|
|
return contract.methods.deposit(amt).send({from : acc});
|
|
} )
|
|
.then(data=>{
|
|
console.log('data: ',data)
|
|
})
|
|
.catch(err=>{
|
|
console.log('err: ',err)
|
|
})
|
|
})
|
|
|
|
withdrawBtn.addEventListener('click',async()=>{
|
|
let amt=0;
|
|
amt = parseInt(inputEle.value);
|
|
|
|
await window.ethereum.enable();
|
|
// this will return all the promise of accounts of metamask
|
|
web3.eth.getAccounts().then( accounts=>{
|
|
|
|
console.log('accounts: ',accounts)
|
|
// taking first account
|
|
const acc = accounts[0];
|
|
|
|
// instead of using call method send method is used
|
|
return contract.methods.withdraw(amt).send({from : acc});
|
|
} )
|
|
.then(data=>{
|
|
console.log('data: ',data)
|
|
})
|
|
.catch(err=>{
|
|
console.log('err: ',err)
|
|
})
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
|