Refactor codes
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
# frontend-nftdapp
|
# frontend-nftbapp
|
||||||
|
|
||||||
## Project setup
|
## Project setup
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "frontend-nftdapp",
|
"name": "frontend-nftbapp",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but frontend-nftdapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong>We're sorry but frontend-nftbapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app>
|
||||||
<v-app-bar app clipped-left dense>
|
<v-app-bar app clipped-left dense>
|
||||||
<v-toolbar-title>NFT APP</v-toolbar-title>
|
<v-toolbar-title>NFT BAPP</v-toolbar-title>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
|
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
@@ -26,7 +26,7 @@ import KlaytnService from './klaytn/klaytnService'
|
|||||||
export default {
|
export default {
|
||||||
name: 'app',
|
name: 'app',
|
||||||
|
|
||||||
async mounted () {
|
async created () {
|
||||||
await this.connect()
|
await this.connect()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -76,13 +76,13 @@ import KlaytnService from '@/klaytn/klaytnService'
|
|||||||
snackbar: false,
|
snackbar: false,
|
||||||
snackbarMsg: '',
|
snackbarMsg: '',
|
||||||
|
|
||||||
klaytn: null,
|
|
||||||
privateKey: null,
|
privateKey: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters('wallet', [
|
...mapGetters('wallet', [
|
||||||
|
'klaytn',
|
||||||
'isConnectWallet',
|
'isConnectWallet',
|
||||||
'myaddress',
|
'myaddress',
|
||||||
'balance'
|
'balance'
|
||||||
@@ -90,15 +90,19 @@ import KlaytnService from '@/klaytn/klaytnService'
|
|||||||
},
|
},
|
||||||
|
|
||||||
async mounted() {
|
async mounted() {
|
||||||
this.klaytn = new KlaytnService()
|
const klaytn = new KlaytnService()
|
||||||
await this.klaytn.init()
|
this.setKlaytn(klaytn)
|
||||||
|
const address = await klaytn.init()
|
||||||
|
|
||||||
|
if (address) {
|
||||||
await this.getWalletInfo()
|
await this.getWalletInfo()
|
||||||
await this.getMyAuctions()
|
await this.getMyAuctions()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations('wallet', [
|
...mapMutations('wallet', [
|
||||||
|
'setKlaytn',
|
||||||
'setIsConnectWallet',
|
'setIsConnectWallet',
|
||||||
'setMyAddress',
|
'setMyAddress',
|
||||||
'setBalance'
|
'setBalance'
|
||||||
|
|||||||
@@ -44,10 +44,6 @@ export default {
|
|||||||
])
|
])
|
||||||
},
|
},
|
||||||
|
|
||||||
async mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
async createAuction() {
|
async createAuction() {
|
||||||
if(!this.tokenid) {
|
if(!this.tokenid) {
|
||||||
|
|||||||
@@ -1,8 +1,3 @@
|
|||||||
/**
|
|
||||||
* caver-js library helps making connection with klaytn node.
|
|
||||||
* You can connect to specific klaytn node by setting 'rpcURL' value.
|
|
||||||
* default rpcURL is 'https://api.baobab.klaytn.net:8651'.
|
|
||||||
*/
|
|
||||||
import Caver from 'caver-js'
|
import Caver from 'caver-js'
|
||||||
|
|
||||||
const AuctionsABI = require('@/contracts/Auctions.json').abi
|
const AuctionsABI = require('@/contracts/Auctions.json').abi
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# bet-dapp
|
# numbergame-bapp
|
||||||
|
|
||||||
## Project setup
|
## Project setup
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -38,9 +38,6 @@ export default {
|
|||||||
])
|
])
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted () {
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
clickNumber (event) {
|
clickNumber (event) {
|
||||||
console.log('betting number', event.target.innerHTML, this.amount)
|
console.log('betting number', event.target.innerHTML, this.amount)
|
||||||
|
|||||||
@@ -50,10 +50,10 @@ export default {
|
|||||||
this.setIsConnectWallet(false)
|
this.setIsConnectWallet(false)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async getBalance () {
|
async getBalance () {
|
||||||
if (this.myaddress) {
|
if (this.myaddress) {
|
||||||
const balance = await this.klaytn.getBalance(this.myaddress)
|
const balance = await this.klaytn.getBalance(this.myaddress)
|
||||||
console.log(this.myaddress, balance)
|
|
||||||
this.setBalance(balance)
|
this.setBalance(balance)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -47,7 +47,6 @@ import { mapGetters, mapMutations } from 'vuex'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
data: () => ({
|
data: () => ({
|
||||||
// accessType: 'keystore',
|
|
||||||
keystore: null,
|
keystore: null,
|
||||||
password: '',
|
password: '',
|
||||||
privateKey: null,
|
privateKey: null,
|
||||||
@@ -73,7 +72,6 @@ export default {
|
|||||||
fileReader.onload = (e) => {
|
fileReader.onload = (e) => {
|
||||||
try {
|
try {
|
||||||
if (!this.checkValidKeystore(e.target.result)) {
|
if (!this.checkValidKeystore(e.target.result)) {
|
||||||
// If key store file is invalid, show message "Invalid keystore file."
|
|
||||||
alert('Invalid keystore file.')
|
alert('Invalid keystore file.')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -90,11 +88,9 @@ export default {
|
|||||||
|
|
||||||
async handleAddWallet () {
|
async handleAddWallet () {
|
||||||
try {
|
try {
|
||||||
// Access type2: access thorugh private key
|
|
||||||
if(this.privateKey) {
|
if(this.privateKey) {
|
||||||
await this.klaytn.integrateWallet(this.privateKey)
|
await this.klaytn.integrateWallet(this.privateKey)
|
||||||
} else {
|
} else {
|
||||||
// Access type1: access through keystore + password
|
|
||||||
await this.klaytn.loginWithKeystore(this.keystore, this.password)
|
await this.klaytn.loginWithKeystore(this.keystore, this.password)
|
||||||
}
|
}
|
||||||
this.getWalletInfo()
|
this.getWalletInfo()
|
||||||
|
|||||||
@@ -1,8 +1,4 @@
|
|||||||
/**
|
|
||||||
* caver-js library helps making connection with klaytn node.
|
|
||||||
* You can connect to specific klaytn node by setting 'rpcURL' value.
|
|
||||||
* default rpcURL is 'https://api.baobab.klaytn.net:8651'.
|
|
||||||
*/
|
|
||||||
import Caver from 'caver-js'
|
import Caver from 'caver-js'
|
||||||
|
|
||||||
const deployedABI = require('./deployedABI.json')
|
const deployedABI = require('./deployedABI.json')
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ export default class KlaytnService {
|
|||||||
async init () {
|
async init () {
|
||||||
const walletFromSession = sessionStorage.getItem('walletInstance')
|
const walletFromSession = sessionStorage.getItem('walletInstance')
|
||||||
|
|
||||||
// If 'walletInstance' value exists, add it to caver's wallet
|
|
||||||
if (walletFromSession) {
|
if (walletFromSession) {
|
||||||
try {
|
try {
|
||||||
const address = JSON.parse(walletFromSession).address
|
const address = JSON.parse(walletFromSession).address
|
||||||
@@ -15,8 +14,6 @@ export default class KlaytnService {
|
|||||||
|
|
||||||
return address
|
return address
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// If value in sessionStorage is invalid wallet instance,
|
|
||||||
// remove it from sessionStorage.
|
|
||||||
sessionStorage.removeItem('walletInstance')
|
sessionStorage.removeItem('walletInstance')
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,13 +8,13 @@ contract TodoFeed {
|
|||||||
mapping(uint256 => TodoData) public todoMap;
|
mapping(uint256 => TodoData) public todoMap;
|
||||||
|
|
||||||
struct TodoData {
|
struct TodoData {
|
||||||
uint256 todoId; // Unique token id
|
uint256 todoId;
|
||||||
address owner;
|
address owner;
|
||||||
string title;
|
string title;
|
||||||
bytes photo; // Image source encoded in uint 8 array format
|
bytes photo;
|
||||||
uint256 timestamp; // Uploaded time
|
uint256 timestamp;
|
||||||
bool isVerified; // check if is verified, default false.
|
bool isVerified;
|
||||||
address verifier; // verifier address
|
address verifier;
|
||||||
}
|
}
|
||||||
|
|
||||||
function writeTodo(string title, bytes photo) public {
|
function writeTodo(string title, bytes photo) public {
|
||||||
|
|||||||
@@ -97,7 +97,7 @@ export default {
|
|||||||
async mounted () {
|
async mounted () {
|
||||||
await this.connect()
|
await this.connect()
|
||||||
|
|
||||||
await this.getFeeds()
|
this.getFeeds()
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
@@ -145,7 +145,6 @@ export default {
|
|||||||
this.snackbar = true
|
this.snackbar = true
|
||||||
|
|
||||||
this.getFeeds()
|
this.getFeeds()
|
||||||
this.getBalance()
|
|
||||||
|
|
||||||
this.showWriteBox = false
|
this.showWriteBox = false
|
||||||
},
|
},
|
||||||
@@ -156,7 +155,6 @@ export default {
|
|||||||
this.snackbar = true
|
this.snackbar = true
|
||||||
|
|
||||||
this.getFeeds()
|
this.getFeeds()
|
||||||
this.getBalance()
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -164,6 +162,8 @@ export default {
|
|||||||
this.klaytn.getFeeds((feed) => {
|
this.klaytn.getFeeds((feed) => {
|
||||||
this.setTodos(feed)
|
this.setTodos(feed)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
this.getBalance()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
<v-col cols="16">
|
<v-col cols="16">
|
||||||
<h2>Integrated</h2>
|
<h2>Integrated</h2>
|
||||||
<div class="address">{{walletInstance.address}}</div>
|
<div class="address">{{walletInstance.address}}</div>
|
||||||
<v-btn outlined class="btnSubmit mt-3" @click="this.handleRemoveWallet">REMOVE WALLEt</v-btn>
|
<v-btn outlined class="btnSubmit mt-3" @click="this.handleRemoveWallet">REMOVE WALLET</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
@@ -65,7 +65,6 @@ export default {
|
|||||||
snackbar: false,
|
snackbar: false,
|
||||||
errorTxt: '',
|
errorTxt: '',
|
||||||
|
|
||||||
// accessType: 'keystore',
|
|
||||||
keystore: null,
|
keystore: null,
|
||||||
password: '',
|
password: '',
|
||||||
privateKey: null,
|
privateKey: null,
|
||||||
@@ -83,10 +82,6 @@ export default {
|
|||||||
'setBalance'
|
'setBalance'
|
||||||
]),
|
]),
|
||||||
|
|
||||||
validate () {
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
handleImport (e) {
|
handleImport (e) {
|
||||||
const keystore = e.target.files[0]
|
const keystore = e.target.files[0]
|
||||||
|
|
||||||
@@ -94,7 +89,6 @@ export default {
|
|||||||
fileReader.onload = (e) => {
|
fileReader.onload = (e) => {
|
||||||
try {
|
try {
|
||||||
if (!this.checkValidKeystore(e.target.result)) {
|
if (!this.checkValidKeystore(e.target.result)) {
|
||||||
// If key store file is invalid, show message "Invalid keystore file."
|
|
||||||
this.errorTxt = 'Invalid keystore file.'
|
this.errorTxt = 'Invalid keystore file.'
|
||||||
this.snackbar = true
|
this.snackbar = true
|
||||||
return
|
return
|
||||||
@@ -113,11 +107,9 @@ export default {
|
|||||||
|
|
||||||
async handleAddWallet () {
|
async handleAddWallet () {
|
||||||
try {
|
try {
|
||||||
// Access type2: access thorugh private key
|
|
||||||
if(this.privateKey) {
|
if(this.privateKey) {
|
||||||
await this.klaytn.integrateWallet(this.privateKey)
|
await this.klaytn.integrateWallet(this.privateKey)
|
||||||
} else {
|
} else {
|
||||||
// Access type1: access through keystore + password
|
|
||||||
await this.klaytn.loginWithKeystore(this.keystore, this.password)
|
await this.klaytn.loginWithKeystore(this.keystore, this.password)
|
||||||
}
|
}
|
||||||
this.getWalletInfo()
|
this.getWalletInfo()
|
||||||
|
|||||||
@@ -85,8 +85,6 @@ export default {
|
|||||||
try {
|
try {
|
||||||
this.isLoading = true
|
this.isLoading = true
|
||||||
await this.klaytn.writeTodo(this.title, this.imgFile, (receipt) => {
|
await this.klaytn.writeTodo(this.title, this.imgFile, (receipt) => {
|
||||||
console.log(receipt)
|
|
||||||
|
|
||||||
const snackbarMsg = `Complete.. blocknumber: #${receipt.blockNumber} , ${receipt.transactionHash}`
|
const snackbarMsg = `Complete.. blocknumber: #${receipt.blockNumber} , ${receipt.transactionHash}`
|
||||||
|
|
||||||
this.$emit('success-write', snackbarMsg)
|
this.$emit('success-write', snackbarMsg)
|
||||||
@@ -99,7 +97,6 @@ export default {
|
|||||||
})
|
})
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e)
|
console.error(e)
|
||||||
|
|
||||||
this.isLoading = false
|
this.isLoading = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,3 @@
|
|||||||
/**
|
|
||||||
* caver-js library helps making connection with klaytn node.
|
|
||||||
* You can connect to specific klaytn node by setting 'rpcURL' value.
|
|
||||||
* default rpcURL is 'https://api.baobab.klaytn.net:8651'.
|
|
||||||
*/
|
|
||||||
import Caver from 'caver-js'
|
import Caver from 'caver-js'
|
||||||
|
|
||||||
const deployedABI = require('./deployedABI.json')
|
const deployedABI = require('./deployedABI.json')
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ export default class KlaytnService {
|
|||||||
async init () {
|
async init () {
|
||||||
const walletFromSession = sessionStorage.getItem('walletInstance')
|
const walletFromSession = sessionStorage.getItem('walletInstance')
|
||||||
|
|
||||||
// If 'walletInstance' value exists, add it to caver's wallet
|
|
||||||
if (walletFromSession) {
|
if (walletFromSession) {
|
||||||
try {
|
try {
|
||||||
const address = JSON.parse(walletFromSession).address
|
const address = JSON.parse(walletFromSession).address
|
||||||
@@ -15,8 +14,6 @@ export default class KlaytnService {
|
|||||||
|
|
||||||
return address
|
return address
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// If value in sessionStorage is invalid wallet instance,
|
|
||||||
// remove it from sessionStorage.
|
|
||||||
sessionStorage.removeItem('walletInstance')
|
sessionStorage.removeItem('walletInstance')
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user