Merge branch 'master' of ssh://gitea.snsd0805.com:10805/snsd0805/ERC-20-web
This commit is contained in:
commit
e7fe5ef748
GPG Key ID:
8DB0D22BC1217D33
@ -13,8 +13,8 @@ import { RouterLink, RouterView } from "vue-router";
|
|||||||
</button>
|
</button>
|
||||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||||
<ul class="navbar-nav ms-auto">
|
<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="/">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>
|
<!-- <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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,16 +7,26 @@ export default {
|
|||||||
name: 'MyComponent',
|
name: 'MyComponent',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
account: "",
|
||||||
msg: '',
|
msg: '',
|
||||||
linked: false,
|
linked: false,
|
||||||
amount: "0",
|
|
||||||
contract_address: "",
|
contract_address: "",
|
||||||
token: null,
|
token: null,
|
||||||
token_name: "",
|
token_name: "",
|
||||||
token_symbol: "",
|
token_symbol: "",
|
||||||
token_balance: "0",
|
token_balance: "0",
|
||||||
token_decimal: "1",
|
token_decimal: "1",
|
||||||
address: "",
|
|
||||||
|
transfer_address: "",
|
||||||
|
transfer_amount: "",
|
||||||
|
approve_address: "",
|
||||||
|
approve_amount: "",
|
||||||
|
approve_logs: {},
|
||||||
|
|
||||||
|
transfer_from_owner_addresss: "",
|
||||||
|
transfer_from_receiver_addresss: "",
|
||||||
|
transfer_from_amount: "",
|
||||||
|
transfer_from_logs: {},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async mounted() {
|
async mounted() {
|
||||||
@ -43,8 +53,9 @@ export default {
|
|||||||
if (provider) {
|
if (provider) {
|
||||||
this.msg = "Detect Metamask."
|
this.msg = "Detect Metamask."
|
||||||
const chainId = await ethereum.request({method: 'eth_chainId'})
|
const chainId = await ethereum.request({method: 'eth_chainId'})
|
||||||
if(chainId == 1337){ // Sepolia 1337
|
if(chainId == 11155111){ // Sepolia 1337
|
||||||
const account = await ethereum.request({ method: 'eth_requestAccounts' });
|
const account = await ethereum.request({ method: 'eth_requestAccounts' });
|
||||||
|
this.account = account[0];
|
||||||
this.msg += "> Network which you connected is Sepolia. @ " + account[0]
|
this.msg += "> Network which you connected is Sepolia. @ " + account[0]
|
||||||
this.linked = true
|
this.linked = true
|
||||||
}else{
|
}else{
|
||||||
@ -64,8 +75,7 @@ export default {
|
|||||||
this.token_name = await this.token.methods.name().call();
|
this.token_name = await this.token.methods.name().call();
|
||||||
this.token_symbol = await this.token.methods.symbol().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(this.account).call();
|
||||||
this.token_balance = await this.token.methods.balanceOf(account[0]).call();
|
|
||||||
|
|
||||||
let decimal = await this.token.methods.decimals().call();
|
let decimal = await this.token.methods.decimals().call();
|
||||||
this.token_decimal = decimal
|
this.token_decimal = decimal
|
||||||
@ -75,6 +85,45 @@ export default {
|
|||||||
this.token_name = "ERROR";
|
this.token_name = "ERROR";
|
||||||
this.token_symbol = "ERROR";
|
this.token_symbol = "ERROR";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// get approve events
|
||||||
|
try{
|
||||||
|
let events = await this.token.getPastEvents("Approval", {fromBlock: 0, toBlock: 'latest', filter: {owner: this.account}})
|
||||||
|
this.approve_logs = {};
|
||||||
|
for(let event of events){
|
||||||
|
this.approve_logs[event['returnValues']['spender']] = {
|
||||||
|
'owner': event['returnValues']['owner'],
|
||||||
|
'value': event['returnValues']['value'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for(let event in this.approve_logs){
|
||||||
|
let remain = await this.token.methods.allowance(this.account, event).call();
|
||||||
|
this.approve_logs[event]['remain'] = remain;
|
||||||
|
console.log(this.approve_logs[event])
|
||||||
|
}
|
||||||
|
}catch(error){
|
||||||
|
this.approve_logs = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
// get approve events
|
||||||
|
try{
|
||||||
|
let events = await this.token.getPastEvents("Approval", {fromBlock: 0, toBlock: 'latest', filter: {spender: this.account}})
|
||||||
|
this.transfer_from_logs = {};
|
||||||
|
for(let event of events){
|
||||||
|
this.transfer_from_logs[event['returnValues']['owner']] = {
|
||||||
|
'owner': event['returnValues']['owner'],
|
||||||
|
'value': event['returnValues']['value'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for(let event in this.transfer_from_logs){
|
||||||
|
let remain = await this.token.methods.allowance(event, this.account).call();
|
||||||
|
this.transfer_from_logs[event]['remain'] = remain;
|
||||||
|
}
|
||||||
|
}catch(error){
|
||||||
|
this.transfer_from_logs = {};
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
async transfer() {
|
async transfer() {
|
||||||
@ -90,7 +139,7 @@ export default {
|
|||||||
type: "uint256",
|
type: "uint256",
|
||||||
name: "amount"
|
name: "amount"
|
||||||
}]
|
}]
|
||||||
}, [this.address, web3.utils.toBN(this.amount * Math.pow(10, this.token_decimal))])
|
}, [this.transfer_address, web3.utils.toBN(this.transfer_amount)])
|
||||||
console.log(this.token.options.address)
|
console.log(this.token.options.address)
|
||||||
const transactionParameters = {
|
const transactionParameters = {
|
||||||
from: ethereum.selectedAddress,
|
from: ethereum.selectedAddress,
|
||||||
@ -98,18 +147,85 @@ export default {
|
|||||||
data: encodeFunctionCall,
|
data: encodeFunctionCall,
|
||||||
value: '0x00',
|
value: '0x00',
|
||||||
}
|
}
|
||||||
console.log(encodeFunctionCall)
|
|
||||||
console.log(transactionParameters)
|
|
||||||
|
|
||||||
const txHash = await ethereum.request({
|
const txHash = await ethereum.request({
|
||||||
method: 'eth_sendTransaction',
|
method: 'eth_sendTransaction',
|
||||||
params: [transactionParameters]
|
params: [transactionParameters]
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log(txHash)
|
this.transfer_amount = "";
|
||||||
|
this.transfer_address = "";
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
async approve() {
|
||||||
|
const web3 = new Web3()
|
||||||
|
const encodeFunctionCall = web3.eth.abi.encodeFunctionCall({
|
||||||
|
name: "approve",
|
||||||
|
type: "function",
|
||||||
|
inputs: [{
|
||||||
|
type: "address",
|
||||||
|
name: "spender"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "uint256",
|
||||||
|
name: "amount"
|
||||||
|
}]
|
||||||
|
}, [this.approve_address, web3.utils.toBN(this.approve_amount)])
|
||||||
|
console.log(this.token.options.address)
|
||||||
|
const transactionParameters = {
|
||||||
|
from: ethereum.selectedAddress,
|
||||||
|
to: this.token.options.address, // smart contract's address
|
||||||
|
data: encodeFunctionCall,
|
||||||
|
value: '0x00',
|
||||||
|
}
|
||||||
|
|
||||||
|
const txHash = await ethereum.request({
|
||||||
|
method: 'eth_sendTransaction',
|
||||||
|
params: [transactionParameters]
|
||||||
|
})
|
||||||
|
|
||||||
|
this.approve_amount = "";
|
||||||
|
this.approve_address = "";
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
async transferFrom() {
|
||||||
|
const web3 = new Web3()
|
||||||
|
const encodeFunctionCall = web3.eth.abi.encodeFunctionCall({
|
||||||
|
name: "transferFrom",
|
||||||
|
type: "function",
|
||||||
|
inputs: [{
|
||||||
|
type: "address",
|
||||||
|
name: "from"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "address",
|
||||||
|
name: "to"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "uint256",
|
||||||
|
name: "amount"
|
||||||
|
}]
|
||||||
|
}, [this.transfer_from_owner_addresss, this.transfer_from_receiver_addresss, web3.utils.toBN(this.transfer_from_amount)])
|
||||||
|
const transactionParameters = {
|
||||||
|
from: ethereum.selectedAddress,
|
||||||
|
to: this.token.options.address, // smart contract's address
|
||||||
|
data: encodeFunctionCall,
|
||||||
|
value: '0x00',
|
||||||
|
}
|
||||||
|
|
||||||
|
const txHash = await ethereum.request({
|
||||||
|
method: 'eth_sendTransaction',
|
||||||
|
params: [transactionParameters]
|
||||||
|
})
|
||||||
|
|
||||||
|
this.transfer_from_amount = "";
|
||||||
|
this.transfer_from_owner_addresss = "";
|
||||||
|
this.transfer_from_receiver_addresss = "";
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -143,6 +259,7 @@ export default {
|
|||||||
<div class="col-sm-4">
|
<div class="col-sm-4">
|
||||||
<button class='btn btn-info' v-on:click="get_info"> GET </button>
|
<button class='btn btn-info' v-on:click="get_info"> GET </button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -174,18 +291,135 @@ export default {
|
|||||||
<div>
|
<div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-10">
|
||||||
<input type='text' class="form-control" v-model="address" placeholder="Receiver's address">
|
<div class="form-group row">
|
||||||
|
<label for="inputPassword" class="col-sm-2 col-form-label">Receiver</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type='text' class="form-control" v-model="transfer_address" placeholder="Receiver's address">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label for="inputPassword" class="col-sm-2 col-form-label">Value</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type='number' class="form-control" v-model="transfer_amount" v-bind:placeholder="'(int) 個單位. Decimals: '+token_decimal">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-2">
|
||||||
<input type='number' class="form-control" v-model="amount" v-bind:placeholder="'Amount (float). Decimals: '+token_decimal">
|
<br><br>
|
||||||
|
<button class='btn btn-info' v-on:click="transfer"> Transfer {{transfer_amount}} 單位 ({{transfer_amount / Math.pow(10, token_decimal)}} {{token_symbol}})</button>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<h3>Approve</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-10">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label for="inputPassword" class="col-sm-2 col-form-label">Owner</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type='text' class="form-control" v-model="approve_address" placeholder="Spender's address">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label for="inputPassword" class="col-sm-2 col-form-label">Value</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type='number' class="form-control" v-model="approve_amount" v-bind:placeholder="'(int) 個單位. Decimals: '+token_decimal">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<br><br>
|
||||||
|
<button class='btn btn-info' v-on:click="approve"> Approve {{approve_amount}} 單位 ({{approve_amount / Math.pow(10, token_decimal)}} {{token_symbol}})</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<br>
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Spender</th>
|
||||||
|
<th scope="col">Value</th>
|
||||||
|
<th scope="col">{{token_symbol}} Token</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<template v-for="(event, index) of approve_logs">
|
||||||
|
<tr>
|
||||||
|
<th scope="row">{{index}}</th>
|
||||||
|
<td>{{event['value']}} 單位</td>
|
||||||
|
<td>{{event['value'] / Math.pow(10, token_decimal)}} {{token_symbol}} </td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<h3>TransferFrom</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-10">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label for="inputPassword" class="col-sm-2 col-form-label">Owner</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type='text' class="form-control" v-model="transfer_from_owner_addresss" placeholder="Owner's address">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label for="inputPassword" class="col-sm-2 col-form-label">Receiver</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type='text' class="form-control" v-model="transfer_from_receiver_addresss" placeholder="Receiver's address">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label for="inputPassword" class="col-sm-2 col-form-label">Value</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type='number' class="form-control" v-model="transfer_from_amount" v-bind:placeholder="'(int) 個單位. Decimals: '+token_decimal">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<br><br>
|
||||||
|
<button class='btn btn-info' v-on:click="transferFrom"> Transfer {{transfer_from_amount}} 單位 ({{transfer_from_amount / Math.pow(10, token_decimal)}} {{token_symbol}}) (From Owner)</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Owner</th>
|
||||||
|
<th scope="col">Value</th>
|
||||||
|
<th scope="col">{{token_symbol}} Token</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<template v-for="(event, index) of transfer_from_logs">
|
||||||
|
<tr>
|
||||||
|
<th scope="row">{{index}}</th>
|
||||||
|
<td>{{event['value']}} 單位</td>
|
||||||
|
<td>{{event['value'] / Math.pow(10, token_decimal)}} {{token_symbol}} </td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user