transfer ERC-20 token
This commit is contained in:
commit
5921a62812
GPG Key ID:
8DB0D22BC1217D33
47
README.md
Normal file
47
README.md
Normal file
@ -0,0 +1,47 @@
|
||||
# Faucet Webpage
|
||||
|
||||
A simple webpage for Sepolia Testnet's faucet.
|
||||
|
||||
It's HW1 for 1112 NCNU CSIE "Principles and Practice of Blockchains"
|
||||
|
||||
link to Metamask and create a transaction to the smart contract to get SepoliaETH.
|
||||
|
||||
|
||||
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### fill in your smart contract's address
|
||||
|
||||
```sh
|
||||
cp .env.example .env
|
||||
vim .env
|
||||
'''
|
||||
VITE_BANK_ADDR = "YOUR BANK ADDRESS"
|
||||
'''
|
||||
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Notice
|
||||
|
||||
Now, I am not sure of difference between `window.ethereum` & `web3`
|
||||
|
||||
I use `window.ethereum` to send transaction, check accounts, check network and use `web3` to encode ABI.
|
||||
|
||||
I am not sure whether it's a suitable implementation
|
||||
BIN
docs/Screenshot_20230226_025506.png
Normal file
BIN
docs/Screenshot_20230226_025506.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
23
index.html
Normal file
23
index.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="" />
|
||||
<title>ERC20 Token</title>
|
||||
<!-- Favicon-->
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<!-- Font Awesome icons (free version)-->
|
||||
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
|
||||
<!-- Google fonts-->
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
|
||||
<!-- Core theme CSS (includes Bootstrap)-->
|
||||
<link href="css/styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
7543
package-lock.json
generated
Normal file
7543
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
package.json
Normal file
22
package.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "web",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@metamask/detect-provider": "^2.0.0",
|
||||
"bootstrap": "^5.2.3",
|
||||
"dotenv": "^16.0.3",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6",
|
||||
"web3": "^1.8.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"vite": "^4.1.3"
|
||||
}
|
||||
}
|
||||
11509
public/css/styles.css
Normal file
11509
public/css/styles.css
Normal file
File diff suppressed because it is too large
Load Diff
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
27
src/App.vue
Normal file
27
src/App.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import { RouterLink, RouterView } from "vue-router";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Navigation-->
|
||||
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
|
||||
<div class="container">
|
||||
<router-link class="navbar-brand" to="/">ERC20</router-link>
|
||||
<button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
Menu
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item mx-0 mx-lg-1"><router-link class="nav-link py-3 px-0 px-lg-3 rounded" to="/">Withdraw</router-link></li>
|
||||
<li class="nav-item mx-0 mx-lg-1"><router-link class="nav-link py-3 px-0 px-lg-3 rounded" to="/manage">Management</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<br><br><br>
|
||||
<br><br><br>
|
||||
|
||||
<RouterView />
|
||||
</template>
|
||||
162
src/assets/bank_abi.json
Normal file
162
src/assets/bank_abi.json
Normal file
@ -0,0 +1,162 @@
|
||||
[
|
||||
{
|
||||
"inputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "constructor"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{
|
||||
"indexed": false,
|
||||
"internalType": "address",
|
||||
"name": "atm",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "AddATM",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [],
|
||||
"name": "Destroy",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{
|
||||
"indexed": false,
|
||||
"internalType": "address",
|
||||
"name": "from",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": false,
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"indexed": false,
|
||||
"internalType": "uint256",
|
||||
"name": "balance",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "NoMoney",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{
|
||||
"indexed": false,
|
||||
"internalType": "address",
|
||||
"name": "from",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": false,
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"indexed": false,
|
||||
"internalType": "uint256",
|
||||
"name": "balance",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "Withdraw",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "atms",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "destroy",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "owner",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"stateMutability": "payable",
|
||||
"type": "receive",
|
||||
"payable": true
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "getATMs",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "address[]",
|
||||
"name": "",
|
||||
"type": "address[]"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "atm",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "addATM",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "withdraw",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
}
|
||||
]
|
||||
74
src/assets/base.css
Normal file
74
src/assets/base.css
Normal file
@ -0,0 +1,74 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition: color 0.5s, background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
35
src/assets/main.css
Normal file
35
src/assets/main.css
Normal file
@ -0,0 +1,35 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
289
src/assets/wtjtoken.json
Normal file
289
src/assets/wtjtoken.json
Normal file
@ -0,0 +1,289 @@
|
||||
[
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "initialSupply",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "constructor"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "address",
|
||||
"name": "owner",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "address",
|
||||
"name": "spender",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": false,
|
||||
"internalType": "uint256",
|
||||
"name": "value",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "Approval",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "address",
|
||||
"name": "from",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "address",
|
||||
"name": "to",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": false,
|
||||
"internalType": "uint256",
|
||||
"name": "value",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "Transfer",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "owner",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "spender",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "allowance",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "spender",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "approve",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "bool",
|
||||
"name": "",
|
||||
"type": "bool"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "account",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "balanceOf",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "spender",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "subtractedValue",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "decreaseAllowance",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "bool",
|
||||
"name": "",
|
||||
"type": "bool"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "spender",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "addedValue",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "increaseAllowance",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "bool",
|
||||
"name": "",
|
||||
"type": "bool"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "name",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "string",
|
||||
"name": "",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "symbol",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "string",
|
||||
"name": "",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "totalSupply",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "to",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "transfer",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "bool",
|
||||
"name": "",
|
||||
"type": "bool"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "from",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "to",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "transferFrom",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "bool",
|
||||
"name": "",
|
||||
"type": "bool"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "decimals",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint8",
|
||||
"name": "",
|
||||
"type": "uint8"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function",
|
||||
"constant": true
|
||||
}
|
||||
]
|
||||
10
src/main.js
Normal file
10
src/main.js
Normal file
@ -0,0 +1,10 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
20
src/router/index.js
Normal file
20
src/router/index.js
Normal file
@ -0,0 +1,20 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import FaucetView from '../views/FaucetView.vue'
|
||||
import ManageView from '../views/ManageView.vue'
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: FaucetView
|
||||
},
|
||||
{
|
||||
path: '/manage',
|
||||
name: 'management',
|
||||
component: ManageView
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
194
src/views/FaucetView.vue
Normal file
194
src/views/FaucetView.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<script>
|
||||
import detectEthereumProvider from '@metamask/detect-provider'
|
||||
import Web3 from 'web3';
|
||||
import tokenABI from '@/assets/wtjtoken.json';
|
||||
|
||||
export default {
|
||||
name: 'MyComponent',
|
||||
data() {
|
||||
return {
|
||||
msg: '',
|
||||
linked: false,
|
||||
amount: "0",
|
||||
contract_address: "",
|
||||
token: null,
|
||||
token_name: "",
|
||||
token_symbol: "",
|
||||
token_balance: "0",
|
||||
token_decimal: "1",
|
||||
address: "",
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
var web3 = new Web3(window.ethereum);
|
||||
// this.bankAddr = import.meta.env.VITE_BANK_ADDR;
|
||||
if(ethereum.isConnected()){
|
||||
this.linked = true;
|
||||
this.detectMetamask();
|
||||
this.update();
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
update() {
|
||||
var web3 = new Web3(window.ethereum);
|
||||
var contin = true;
|
||||
this.get_info()
|
||||
console.log("update");
|
||||
},
|
||||
|
||||
async detectMetamask() {
|
||||
this.msg = "Detecting..."
|
||||
const provider = await detectEthereumProvider()
|
||||
if (provider) {
|
||||
this.msg = "Detect Metamask."
|
||||
const chainId = await ethereum.request({method: 'eth_chainId'})
|
||||
if(chainId == 1337){ // Sepolia 1337
|
||||
const account = await ethereum.request({ method: 'eth_requestAccounts' });
|
||||
this.msg += "> Network which you connected is Sepolia. @ " + account[0]
|
||||
this.linked = true
|
||||
}else{
|
||||
this.msg += "> But the network which you connected isn't Sepolia, this faucet only accept Sepolia address"
|
||||
}
|
||||
} else {
|
||||
this.msg = "ERROR: no Metamask"
|
||||
}
|
||||
},
|
||||
|
||||
async get_info() {
|
||||
const web3 = new Web3(window.ethereum);
|
||||
console.log(this.contract_address);
|
||||
|
||||
try{
|
||||
this.token = new web3.eth.Contract(tokenABI, this.contract_address);
|
||||
this.token_name = await this.token.methods.name().call();
|
||||
this.token_symbol = await this.token.methods.symbol().call();
|
||||
|
||||
const account = await ethereum.request({ method: 'eth_requestAccounts' });
|
||||
this.token_balance = await this.token.methods.balanceOf(account[0]).call();
|
||||
|
||||
let decimal = await this.token.methods.decimals().call();
|
||||
this.token_decimal = decimal
|
||||
// this.decimal = Math.pow(10, decimal);
|
||||
console.log(this.token_decimal);
|
||||
}catch(error){
|
||||
this.token_name = "ERROR";
|
||||
this.token_symbol = "ERROR";
|
||||
}
|
||||
},
|
||||
|
||||
async transfer() {
|
||||
const web3 = new Web3()
|
||||
const encodeFunctionCall = web3.eth.abi.encodeFunctionCall({
|
||||
name: "transfer",
|
||||
type: "function",
|
||||
inputs: [{
|
||||
type: "address",
|
||||
name: "to"
|
||||
},
|
||||
{
|
||||
type: "uint256",
|
||||
name: "amount"
|
||||
}]
|
||||
}, [this.address, web3.utils.toBN(this.amount * Math.pow(10, this.token_decimal))])
|
||||
console.log(this.token.options.address)
|
||||
const transactionParameters = {
|
||||
from: ethereum.selectedAddress,
|
||||
to: this.token.options.address, // smart contract's address
|
||||
data: encodeFunctionCall,
|
||||
value: '0x00',
|
||||
}
|
||||
console.log(encodeFunctionCall)
|
||||
console.log(transactionParameters)
|
||||
|
||||
const txHash = await ethereum.request({
|
||||
method: 'eth_sendTransaction',
|
||||
params: [transactionParameters]
|
||||
})
|
||||
|
||||
console.log(txHash)
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<section class="page-section portfolio" id="portfolio">
|
||||
<div class="container">
|
||||
<!-- Portfolio Section Heading-->
|
||||
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">ERC20 LINK</h2>
|
||||
<!-- Icon Divider-->
|
||||
<div class="divider-custom">
|
||||
<div class="divider-custom-line"></div>
|
||||
<div class="divider-custom-icon"><i class="fa-brands fa-ethereum"></i></div>
|
||||
<div class="divider-custom-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- Portfolio Grid Items-->
|
||||
<div class="row justify-content-center">
|
||||
<p>{{ msg }}</p>
|
||||
<template v-if='!linked'>
|
||||
<button class='btn btn-info' v-on:click="detectMetamask"> link to Metamask </button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<input type='text' class="form-control" v-model="contract_address" placeholder="Token's Contract Address">
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button class='btn btn-info' v-on:click="get_info"> GET </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<p>Token Name: {{token_name}}({{token_symbol}}) </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-if='token_name!="" && token_name!="ERROR"'>
|
||||
<br><br>
|
||||
<hr>
|
||||
<br><br>
|
||||
|
||||
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">{{token_name}}({{token_symbol}})</h2>
|
||||
<div class="divider-custom">
|
||||
<div class="divider-custom-line"></div>
|
||||
<div class="divider-custom-icon"><i class="fa-brands fa-ethereum"></i></div>
|
||||
<div class="divider-custom-line"></div>
|
||||
</div>
|
||||
|
||||
<h3>Transfer</h3>
|
||||
You have {{token_balance/Math.pow(10, token_decimal)}} {{token_symbol}} (<a href="#" v-on:click="update">Refresh</a>)
|
||||
<br><br>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<input type='text' class="form-control" v-model="address" placeholder="Receiver's address">
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<input type='number' class="form-control" v-model="amount" v-bind:placeholder="'Amount (float). Decimals: '+token_decimal">
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button class='btn btn-info' v-on:click="transfer"> Transfer {{amount}} {{token_symbol}} ({{amount * Math.pow(10, token_decimal)}}單位)</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
243
src/views/ManageView.vue
Normal file
243
src/views/ManageView.vue
Normal file
@ -0,0 +1,243 @@
|
||||
<script>
|
||||
import detectEthereumProvider from '@metamask/detect-provider'
|
||||
import Web3 from 'web3';
|
||||
import bankABI from '@/assets/bank_abi.json';
|
||||
|
||||
export default {
|
||||
name: 'ManageView',
|
||||
data() {
|
||||
return {
|
||||
msg: "",
|
||||
linked: false,
|
||||
account: "",
|
||||
owner: "",
|
||||
atms: [],
|
||||
atmsBalance: [],
|
||||
bankAddr: "",
|
||||
bankBalance: -1,
|
||||
show: false,
|
||||
amount: 1
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
var web3 = new Web3(window.ethereum);
|
||||
this.bankAddr = import.meta.env.VITE_BANK_ADDR;
|
||||
var bank = new web3.eth.Contract(bankABI, this.bankAddr);
|
||||
var owner = await bank.methods.owner().call();
|
||||
this.owner = owner.toLowerCase();
|
||||
var atms = await bank.methods.getATMs().call();
|
||||
this.atms = atms;
|
||||
if(ethereum.isConnected()){
|
||||
this.linked = true;
|
||||
this.detectMetamask();
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.update();
|
||||
|
||||
},
|
||||
methods: {
|
||||
update() {
|
||||
var web3 = new Web3(window.ethereum);
|
||||
|
||||
var contin = true;
|
||||
|
||||
web3.eth.getBalance(this.bankAddr, (err, result) => {
|
||||
if(web3.utils.fromWei(result) != this.bankBalance)
|
||||
contin = false;
|
||||
this.bankBalance = web3.utils.fromWei(result);
|
||||
})
|
||||
for(let i=0; i<this.atms.length; i++){
|
||||
web3.eth.getBalance(this.atms[i], (err, result) => {
|
||||
if(web3.utils.fromWei(result) != this.atmsBalance[i])
|
||||
contin = false;
|
||||
this.atmsBalance[i] = web3.utils.fromWei(result);
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
async detectMetamask() {
|
||||
this.msg = "Detecting..."
|
||||
const provider = await detectEthereumProvider()
|
||||
if (provider) {
|
||||
this.msg = "Detect Metamask. "
|
||||
const chainId = await ethereum.request({method: 'eth_chainId'})
|
||||
if(chainId == 1337){
|
||||
const account = await ethereum.request({ method: 'eth_requestAccounts' });
|
||||
this.account = account[0];
|
||||
this.msg += "> Network which you connected is Sepolia.";
|
||||
this.linked = true
|
||||
}else{
|
||||
this.msg += "> But the network which you connected isn't Sepolia, this faucet only accept Sepolia address"
|
||||
}
|
||||
} else {
|
||||
this.msg = "ERROR: no Metamask"
|
||||
}
|
||||
},
|
||||
async destroyBank() {
|
||||
var web3 = new Web3(window.ethereum);
|
||||
const encodeFunctionCall = web3.eth.abi.encodeFunctionCall({
|
||||
name: "destroy",
|
||||
type: "function",
|
||||
inputs: []
|
||||
}, []);
|
||||
console.log(encodeFunctionCall);
|
||||
const transactionParameters = {
|
||||
from: ethereum.selectedAddress,
|
||||
to: this.bankAddr, // smart contract's address
|
||||
data: encodeFunctionCall,
|
||||
value: '0x00',
|
||||
};
|
||||
const txHash = await ethereum.request({
|
||||
method: 'eth_sendTransaction',
|
||||
params: [transactionParameters]
|
||||
});
|
||||
console.log(txHash);
|
||||
},
|
||||
async destroyATM(index){
|
||||
console.log(index)
|
||||
var web3 = new Web3(window.ethereum);
|
||||
const encodeFunctionCall = web3.eth.abi.encodeFunctionCall({
|
||||
name: "destroy",
|
||||
type: "function",
|
||||
inputs: []
|
||||
}, []);
|
||||
const transactionParameters = {
|
||||
from: ethereum.selectedAddress,
|
||||
to: this.atms[index], // smart contract's address
|
||||
data: encodeFunctionCall,
|
||||
value: '0x00',
|
||||
};
|
||||
const txHash = await ethereum.request({
|
||||
method: 'eth_sendTransaction',
|
||||
params: [transactionParameters]
|
||||
});
|
||||
},
|
||||
async transfer() {
|
||||
var eth = this.amount.toString();
|
||||
|
||||
var web3 = new Web3(window.ethereum);
|
||||
var wei = web3.utils.toWei(eth, 'ether');
|
||||
const transactionParameters = {
|
||||
from: ethereum.selectedAddress,
|
||||
to: this.bankAddr, // smart contract's address
|
||||
value: '0x'+BigInt(wei).toString(16),
|
||||
};
|
||||
const txHash = await ethereum.request({
|
||||
method: 'eth_sendTransaction',
|
||||
params: [transactionParameters]
|
||||
});
|
||||
},
|
||||
showModel() {
|
||||
if(this.show == false){
|
||||
this.show = true;
|
||||
}else{
|
||||
this.transfer();
|
||||
this.show = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<section class="page-section portfolio" id="portfolio">
|
||||
<div class="container">
|
||||
<!-- Portfolio Section Heading-->
|
||||
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Management</h2>
|
||||
<!-- Icon Divider-->
|
||||
<div class="divider-custom">
|
||||
<div class="divider-custom-line"></div>
|
||||
<div class="divider-custom-icon"><i class="fa-brands fa-ethereum"></i></div>
|
||||
<div class="divider-custom-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- Portfolio Grid Items-->
|
||||
<div class="row justify-content-center">
|
||||
<p>{{ msg }}</p>
|
||||
<template v-if='!linked'>
|
||||
<button class='btn btn-info' v-on:click="detectMetamask"> link to Metamask </button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
Your address: {{ this.account }}
|
||||
Bank Owner: {{ this.owner }}
|
||||
<template v-if="this.account == this.owner">
|
||||
<p style="color: blue">You are owner</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p style="color: red">You are not owner</p>
|
||||
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<hr>
|
||||
<br><br>
|
||||
|
||||
<template v-if='linked && this.account == this.owner'>
|
||||
<div class="row justify-content-center">
|
||||
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Bank</h2>
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Address</th>
|
||||
<th scope="col">Balance</th>
|
||||
<th scope="col">Destroy</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ bankAddr }}</td>
|
||||
<td>{{ bankBalance }} ETH</td>
|
||||
<td><button class="btn btn-danger" v-on:click="destroyBank">Destroy</button>
|
||||
<input type="number" v-if="show" v-model="amount" placeholder="ETH">
|
||||
<button class="btn btn-primary" v-on:click="showModel">Transfer</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<br><br>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">ATM List</h2>
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Address</th>
|
||||
<th scope="col">Balance</th>
|
||||
<th scope="col">Destroy</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="i in atms.length">
|
||||
<tr>
|
||||
<td>{{ atms[i-1] }}</td>
|
||||
<td>{{ atmsBalance[i-1] }} ETH</td>
|
||||
<td><button class="btn btn-danger" v-on:click="destroyATM(i-1)">Destroy</button></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<br><button class='btn btn-info' v-on:click='update'>Update</button>
|
||||
</template>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
14
vite.config.js
Normal file
14
vite.config.js
Normal file
@ -0,0 +1,14 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user