Update for nftdapp
This commit is contained in:
elegant651
7275
nftbapp/frontend-nftdapp/package-lock.json
generated
7275
nftbapp/frontend-nftdapp/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -7,17 +7,22 @@
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"vue": "^2.5.21",
|
||||
"vue-axios": "^2.1.4",
|
||||
"caver-js": "^1.3.2",
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.2",
|
||||
"vuetify": "^1.4.1",
|
||||
"web3": "^0.20.6"
|
||||
"vuetify": "^2.2.18",
|
||||
"vuex": "^3.1.3",
|
||||
"axios": "^0.18.0",
|
||||
"vue-axios": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.1.1",
|
||||
"@vue/cli-service": "^3.1.1",
|
||||
"vue-template-compiler": "^2.5.21"
|
||||
"sass": "^1.19.0",
|
||||
"sass-loader": "^8.0.0",
|
||||
"vue-cli-plugin-vuetify": "^2.0.5",
|
||||
"vue-template-compiler": "^2.5.21",
|
||||
"vuetify-loader": "^1.3.0"
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
|
||||
@@ -8,6 +8,8 @@
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
||||
<title>frontend-nftdapp</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<v-app light>
|
||||
<v-toolbar fixed color="teal lighten-2" app dark :clipped-left="true">
|
||||
<v-app>
|
||||
<v-app-bar app clipped-left dense>
|
||||
<v-toolbar-title>NFT APP</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<a href="/wallet">Wallet</a>
|
||||
<a href="/upload">Upload</a>
|
||||
</div>
|
||||
</v-toolbar>
|
||||
</v-app-bar>
|
||||
<v-content class="contentWrapper">
|
||||
<v-container fluid>
|
||||
<router-view></router-view>
|
||||
@@ -19,10 +19,35 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'vuetify/dist/vuetify.min.css'
|
||||
|
||||
import { mapMutations } from 'vuex'
|
||||
import KlaytnService from './klaytn/klaytnService'
|
||||
|
||||
export default {
|
||||
name: 'app'
|
||||
name: 'app',
|
||||
|
||||
async mounted () {
|
||||
await this.connect()
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations('wallet', [
|
||||
'setKlaytn',
|
||||
'setIsConnectWallet',
|
||||
'setMyAddress'
|
||||
]),
|
||||
async connect () {
|
||||
const klaytn = new KlaytnService()
|
||||
this.setKlaytn(klaytn)
|
||||
const address = await klaytn.init()
|
||||
if (address) {
|
||||
this.setMyAddress(address)
|
||||
this.setIsConnectWallet(true)
|
||||
} else {
|
||||
this.setIsConnectWallet(false)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
1
nftbapp/frontend-nftdapp/src/assets/logo.svg
Normal file
1
nftbapp/frontend-nftdapp/src/assets/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||
|
After Width: | Height: | Size: 539 B |
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@@ -17,47 +17,52 @@
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import KlaytnService from '@/klaytn/klaytnService'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ciMyNFT: null,
|
||||
ciAuctions: null,
|
||||
return {
|
||||
auctions: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.ciAuctions = this.$web3.eth.contract(this.$config.AUCTIONS_ABI).at(this.$config.AUCTIONS_CA)
|
||||
this.ciMyNFT = this.$web3.eth.contract(this.$config.MYNFT_ABI).at(this.$config.MYNFT_CA)
|
||||
mounted() {
|
||||
this.getAuctions()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
getAuctions() {
|
||||
this.ciAuctions.getCount({}, (error, result) => {
|
||||
const count = result
|
||||
|
||||
for(let i=0; i<count; i++) {
|
||||
|
||||
this.ciAuctions.getAuctionById(i, {}, (err, result) => {
|
||||
|
||||
this.ciMyNFT.ownerOf(result[3], {}, (error, owner) => {
|
||||
|
||||
this.auctions.push({
|
||||
title: result[0],
|
||||
price: this.$web3.fromWei(result[1], 'ether'),
|
||||
image: 'https://gateway.ipfs.io/ipfs/'+result[2],
|
||||
tokenId: result[3],
|
||||
owner: owner,
|
||||
active: result[6],
|
||||
finalized: result[7]
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
const klaytn = new KlaytnService()
|
||||
klaytn.getAuctions((auctions) => {
|
||||
auctions.forEach(auction => {
|
||||
console.log(auction)
|
||||
})
|
||||
})
|
||||
|
||||
// this.ciAuctions.getCount({}, (error, result) => {
|
||||
// const count = result
|
||||
|
||||
// for(let i=0; i<count; i++) {
|
||||
|
||||
// this.ciAuctions.getAuctionById(i, {}, (err, result) => {
|
||||
|
||||
// this.ciMyNFT.ownerOf(result[3], {}, (error, owner) => {
|
||||
|
||||
// this.auctions.push({
|
||||
// title: result[0],
|
||||
// price: this.$web3.fromWei(result[1], 'ether'),
|
||||
// image: 'https://gateway.ipfs.io/ipfs/'+result[2],
|
||||
// tokenId: result[3],
|
||||
// owner: owner,
|
||||
// active: result[6],
|
||||
// finalized: result[7]
|
||||
// })
|
||||
// })
|
||||
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,13 +30,12 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import PostAuction from '@/components/PostAuction.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
account: null,
|
||||
contractInstance: null,
|
||||
return {
|
||||
file: null,
|
||||
tokenId: null,
|
||||
isRegistered: false,
|
||||
@@ -48,10 +47,13 @@ export default {
|
||||
PostAuction
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.account = await this.$getDefaultAccount()
|
||||
this.contractInstance = this.$web3.eth.contract(this.$config.MYNFT_ABI).at(this.$config.MYNFT_CA)
|
||||
|
||||
computed: {
|
||||
...mapGetters('wallet', [
|
||||
'klaytn',
|
||||
])
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.tokenId = this._getRandomInt(123456789,999999999)
|
||||
},
|
||||
|
||||
@@ -91,58 +93,19 @@ export default {
|
||||
if(!this.dataURI){
|
||||
alert("Fill in dataURI on the input")
|
||||
return
|
||||
}
|
||||
|
||||
this.contractInstance.registerUniqueToken(this.account, this.tokenId, this.dataURI, {
|
||||
from: this.account,
|
||||
gas: this.$config.GAS_AMOUNT
|
||||
}, (error, result) => {
|
||||
console.log("result",result)
|
||||
})
|
||||
}
|
||||
|
||||
this.watchTokenRegistered((error, result) => {
|
||||
if(!error) {
|
||||
alert("Token registered...!")
|
||||
this.isRegistered = true
|
||||
}
|
||||
})
|
||||
this.klaytn.registerUniqueToken(this.tokenId, this.dataURI, (receipt) => {
|
||||
alert(`Token registered...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
|
||||
this.isRegistered = true
|
||||
})
|
||||
},
|
||||
|
||||
transferToCA() {
|
||||
this.contractInstance.transferFrom(this.account, this.$config.AUCTIONS_CA, this.tokenId, {
|
||||
from: this.account,
|
||||
gas: this.$config.GAS_AMOUNT
|
||||
}, (error, result) => {
|
||||
console.log("result",result)
|
||||
})
|
||||
|
||||
this.watchTransfered((error, result) => {
|
||||
if(!error) alert("Token transfered to CA...!")
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
async watchTokenRegistered(cb) {
|
||||
const currentBlock = await this.getCurrentBlock()
|
||||
const eventWatcher = this.contractInstance.TokenRegistered({}, {fromBlock: currentBlock - 1, toBlock: 'latest'})
|
||||
eventWatcher.watch(cb)
|
||||
},
|
||||
|
||||
async watchTransfered(cb) {
|
||||
const currentBlock = await this.getCurrentBlock()
|
||||
const eventWatcher = this.contractInstance.Transfer({}, {fromBlock: currentBlock - 1, toBlock: 'latest'})
|
||||
eventWatcher.watch(cb)
|
||||
},
|
||||
|
||||
getCurrentBlock() {
|
||||
return new Promise((resolve, reject ) => {
|
||||
this.$web3.eth.getBlockNumber((err, blocknumber) => {
|
||||
if(!err) resolve(blocknumber)
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
this.klaytn.transferFrom(this.tokenId, (receipt) => {
|
||||
alert(`Token transfered to CA...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
<v-card class="cardG">
|
||||
<div>
|
||||
<p class="text-center address">
|
||||
{{account}} <span class="reftxt">(Address)</span>
|
||||
{{myaddress}} <span class="reftxt">(Address)</span>
|
||||
</p>
|
||||
<p class="text-center balance">
|
||||
{{balance}} Ether <span class="reftxt">(Balance)</span>
|
||||
{{balance}} Klay <span class="reftxt">(Balance)</span>
|
||||
</p>
|
||||
</div>
|
||||
</v-card>
|
||||
@@ -31,15 +31,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
account: '',
|
||||
balance: null,
|
||||
|
||||
ciMyNFT: null,
|
||||
ciAuctions: null,
|
||||
|
||||
return {
|
||||
auctionIds:[],
|
||||
toAddress: null,
|
||||
selectedAuction: null,
|
||||
@@ -53,37 +49,33 @@
|
||||
}
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.account = await this.$getDefaultAccount()
|
||||
computed: {
|
||||
...mapGetters('wallet', [
|
||||
'klaytn',
|
||||
'isConnectWallet',
|
||||
'myaddress',
|
||||
'balance'
|
||||
])
|
||||
},
|
||||
|
||||
this.$web3.eth.getBalance(this.account, (error, result) => {
|
||||
this.balance = this.$web3.fromWei(result, 'ether')
|
||||
})
|
||||
|
||||
this.ciMyNFT = this.$web3.eth.contract(this.$config.MYNFT_ABI).at(this.$config.MYNFT_CA)
|
||||
this.ciAuctions = this.$web3.eth.contract(this.$config.AUCTIONS_ABI).at(this.$config.AUCTIONS_CA)
|
||||
|
||||
this.getMyAuctions()
|
||||
async mounted() {
|
||||
this.getBalance()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getMyAuctions() {
|
||||
this.ciAuctions.getAuctionsOf(this.account, {from: this.account, gas: this.$config.GAS_AMOUNT}, (error, result) => {
|
||||
this.auctionIds = result
|
||||
})
|
||||
async getBalance () {
|
||||
if (this.myaddress) {
|
||||
const balance = await this.klaytn.getBalance(this.myaddress)
|
||||
this.setBalance(balance)
|
||||
}
|
||||
},
|
||||
|
||||
getAuctionById() {
|
||||
this.ciAuctions.getAuctionById(this.selectedAuction, {from: this.account, gas: this.$config.GAS_AMOUNT}, (error, result) => {
|
||||
console.log(result)
|
||||
this.auctionInfo.title = result[0]
|
||||
this.auctionInfo.price = this.$web3.fromWei(result[1], 'ether')
|
||||
this.auctionInfo.tokenId = result[3]
|
||||
async getMyAuctions() {
|
||||
this.auctionIds = await this.klaytn.getAuctionsOf(this.myaddress)
|
||||
},
|
||||
|
||||
this.ciMyNFT.ownerOf(result[3], {}, (error, owner) => {
|
||||
this.auctionInfo.owner = owner
|
||||
})
|
||||
})
|
||||
async getAuctionById() {
|
||||
this.auctionInfo = await this.klaytn.getAuctionById(this.selectedAuction)
|
||||
},
|
||||
|
||||
finalizeAuction() {
|
||||
@@ -91,29 +83,12 @@
|
||||
alert("please fill in to Address")
|
||||
return
|
||||
}
|
||||
|
||||
this.ciAuctions.finalizeAuction(this.selectedAuction, this.toAddress, {from: this.account, gas: this.$config.GAS_AMOUNT}, (error, result) => {
|
||||
console.log(result)
|
||||
})
|
||||
|
||||
this.watchFinalized((error, result) => {
|
||||
if(!error) alert("Auction finalized...!")
|
||||
})
|
||||
},
|
||||
|
||||
async watchFinalized(cb) {
|
||||
const currentBlock = await this.getCurrentBlock()
|
||||
const eventWatcher = this.ciAuctions.AuctionFinalized({}, {fromBlock: currentBlock - 1, toBlock: 'latest'})
|
||||
eventWatcher.watch(cb)
|
||||
},
|
||||
|
||||
getCurrentBlock() {
|
||||
return new Promise((resolve, reject ) => {
|
||||
this.$web3.eth.getBlockNumber((err, blocknumber) => {
|
||||
if(!err) resolve(blocknumber)
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
this.klaytn.finalizeAuction(this.selectedAuction, this.toAddress, (receipt) => {
|
||||
alert(`Auction finalized...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
|
||||
}, (error) => {
|
||||
console.error(error)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -24,14 +24,12 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
props: ['tokenid', 'metadata'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
account: null,
|
||||
contractInstance: null,
|
||||
|
||||
return {
|
||||
auction: {
|
||||
auctionTitle: '',
|
||||
price: null
|
||||
@@ -39,41 +37,29 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters('wallet', [
|
||||
'klaytn',
|
||||
])
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.account = await this.$getDefaultAccount()
|
||||
this.contractInstance = this.$web3.eth.contract(this.$config.AUCTIONS_ABI).at(this.$config.AUCTIONS_CA)
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async createAuction() {
|
||||
async createAuction() {
|
||||
if(!this.tokenid) {
|
||||
alert("Check for tokenId")
|
||||
return
|
||||
}
|
||||
|
||||
const price = this.$web3.toWei(this.auction.price, 'ether')
|
||||
this.contractInstance.createAuction(this.$config.MYNFT_CA, this.tokenid, this.auction.auctionTitle, this.metadata, price, {from: this.account, gas: this.$config.GAS_AMOUNT}, (error, transactionHash) => {
|
||||
console.log("txhash",transactionHash)
|
||||
})
|
||||
this.watchCreated((error, result) => {
|
||||
if(!error) alert("Creation completed...!")
|
||||
})
|
||||
},
|
||||
|
||||
async watchCreated(cb) {
|
||||
const currentBlock = await this.getCurrentBlock()
|
||||
const eventWatcher = this.contractInstance.AuctionCreated({}, {fromBlock: currentBlock - 1, toBlock: 'latest'})
|
||||
eventWatcher.watch(cb)
|
||||
},
|
||||
|
||||
getCurrentBlock() {
|
||||
return new Promise((resolve, reject ) => {
|
||||
this.$web3.eth.getBlockNumber((err, blocknumber) => {
|
||||
if(!err) resolve(blocknumber)
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
this.klaytn.createAuction(this.tokenid, this.auction.auctionTitle, this.metadata, auction.price, (receipt) => {
|
||||
alert(`Creation completed...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
|
||||
}, error => {
|
||||
alert(error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,12 +0,0 @@
|
||||
const MyNFT = require('./contracts/MyNFT')
|
||||
const Auctions = require('./contracts/Auctions')
|
||||
|
||||
export default {
|
||||
MYNFT_CA: '0x3cd92247e5331d3b51f6cbeff4e5d3ef420f1989',
|
||||
AUCTIONS_CA: '0x5ffc6ca35a7ee8ed33228b47b49c21310e67339c',
|
||||
|
||||
MYNFT_ABI: MyNFT.abi,
|
||||
AUCTIONS_ABI: Auctions.abi,
|
||||
|
||||
GAS_AMOUNT: 500000
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
36
nftbapp/frontend-nftdapp/src/klaytn/caver.js
Normal file
36
nftbapp/frontend-nftdapp/src/klaytn/caver.js
Normal file
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* 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'
|
||||
|
||||
const AuctionsABI = require('@/contracts/Auctions.json').abi
|
||||
const MyNFTABI = require('@/contracts/MyNFT.json').abi
|
||||
|
||||
const TEST_NET = 'https://api.baobab.klaytn.net:8651'
|
||||
|
||||
export const config = {
|
||||
rpcURL: TEST_NET
|
||||
}
|
||||
|
||||
const MYNFT_CA = '0xfd0d9aeaae3c10b1acd9db5a17f2ee2775493f64'
|
||||
const AUCTIONS_CA = '0x3a235ca1b8d08f2f5d6607f8b9f4fa33f540fed6'
|
||||
|
||||
const cav = new Caver(config.rpcURL)
|
||||
|
||||
const getMyNFTInstance = () => {
|
||||
const contractInstance = MyNFTABI
|
||||
&& MYNFT_CA
|
||||
&& new cav.klay.Contract(MyNFTABI, MYNFT_CA)
|
||||
return contractInstance
|
||||
}
|
||||
|
||||
const getAuctionsInstance = () => {
|
||||
const contractInstance = AuctionsABI
|
||||
&& AUCTIONS_CA
|
||||
&& new cav.klay.Contract(AuctionsABI, AUCTIONS_CA)
|
||||
return contractInstance
|
||||
}
|
||||
|
||||
export {cav, MYNFT_CA, AUCTIONS_CA, getMyNFTInstance, getAuctionsInstance}
|
||||
228
nftbapp/frontend-nftdapp/src/klaytn/klaytnService.js
Normal file
228
nftbapp/frontend-nftdapp/src/klaytn/klaytnService.js
Normal file
@@ -0,0 +1,228 @@
|
||||
import { cav, MYNFT_CA, AUCTIONS_CA, getMyNFTInstance, getAuctionsInstance } from './caver'
|
||||
|
||||
export default class KlaytnService {
|
||||
|
||||
constructor() {}
|
||||
|
||||
async init () {
|
||||
const walletFromSession = sessionStorage.getItem('walletInstance')
|
||||
|
||||
if (walletFromSession) {
|
||||
try {
|
||||
const address = JSON.parse(walletFromSession).address
|
||||
cav.klay.accounts.wallet.add(JSON.parse(walletFromSession))
|
||||
|
||||
return address
|
||||
} catch (e) {
|
||||
sessionStorage.removeItem('walletInstance')
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async getBlockNumber () {
|
||||
const blockNumber = await cav.klay.getBlockNumber()
|
||||
return blockNumber
|
||||
}
|
||||
|
||||
async getBalance (address) {
|
||||
const balance = await cav.klay.getBalance(address)
|
||||
return cav.utils.fromPeb(balance, "KLAY")
|
||||
}
|
||||
|
||||
async loginWithKeystore (keystore, password) {
|
||||
const { privateKey: privateKeyFromKeystore } = cav.klay.accounts.decrypt(keystore, password)
|
||||
await this.integrateWallet(privateKeyFromKeystore)
|
||||
return true
|
||||
}
|
||||
|
||||
integrateWallet (privateKey) {
|
||||
const walletInstance = cav.klay.accounts.privateKeyToAccount(privateKey)
|
||||
cav.klay.accounts.wallet.add(walletInstance)
|
||||
sessionStorage.setItem('walletInstance', JSON.stringify(walletInstance))
|
||||
return true
|
||||
}
|
||||
|
||||
removeWallet () {
|
||||
cav.klay.accounts.wallet.clear()
|
||||
sessionStorage.removeItem('walletInstance')
|
||||
return true
|
||||
}
|
||||
|
||||
getWallet () {
|
||||
if (cav.klay.accounts.wallet.length) {
|
||||
return cav.klay.accounts.wallet[0]
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
getAuctions (dispatch) {
|
||||
getAuctionsInstance().methods.getCount().call()
|
||||
.then(count => {
|
||||
if (!count) return []
|
||||
const auctions = []
|
||||
for (let i = count; i > 0; i--) {
|
||||
const auction = getAuctionsInstance().methods.getAuctionById(i).call()
|
||||
auctions.push(auction)
|
||||
}
|
||||
return Promise.all(auctions)
|
||||
})
|
||||
.then(auctions => {
|
||||
dispatch(auctions)
|
||||
})
|
||||
}
|
||||
|
||||
async getOwner (tokenId) {
|
||||
const owner = await getMyNFTInstance().methods.ownerOf(tokenId).call()
|
||||
return owner
|
||||
}
|
||||
|
||||
async getAuctionsOf (address) {
|
||||
const result = await getAuctionsInstance().methods.getAuctionsOf(address).call()
|
||||
return result
|
||||
}
|
||||
|
||||
async getAuctionById (auctionId) {
|
||||
const auction = await getAuctionsInstance().methods.getAuctionById(auctionId).call()
|
||||
const aucionInfo = {}
|
||||
auctionInfo.title = result[0]
|
||||
auctionInfo.price = cav.utils.fromPeb(result[1], "KLAY")
|
||||
auctionInfo.tokenId = result[3]
|
||||
auctionInfo.owner = await this.getOwner(result[3])
|
||||
|
||||
return auctionInfo
|
||||
}
|
||||
|
||||
createAuction (tokenId, title, metadata, price, dispatch, errorCb) {
|
||||
const walletInstance = cav.klay.accounts.wallet && cav.klay.accounts.wallet[0]
|
||||
|
||||
if (!walletInstance) {
|
||||
console.log('no walletInstance')
|
||||
return
|
||||
}
|
||||
|
||||
price = cav.utils.fromPeb(price, "KLAY")
|
||||
|
||||
const address = walletInstance.address
|
||||
getAuctionsInstance().methods.createAuction(MYNFT_CA, tokenId, title, metadata, price).send({
|
||||
from: address,
|
||||
gas: '100000000'
|
||||
})
|
||||
.once('transactionHash', (txHash) => {
|
||||
console.log(`
|
||||
Sending a transaction...
|
||||
txHash: ${txHash}
|
||||
`
|
||||
)
|
||||
})
|
||||
.once('receipt', (receipt) => {
|
||||
console.log(`
|
||||
Received receipt! (#${receipt.blockNumber} ,${receipt.transactionHash})
|
||||
`, receipt)
|
||||
|
||||
dispatch(receipt)
|
||||
})
|
||||
.once('error', (error) => {
|
||||
errorCb(error.message)
|
||||
})
|
||||
}
|
||||
|
||||
finalizeAuction (auctionId, toAddress, dispatch, errorCb) {
|
||||
const walletInstance = cav.klay.accounts.wallet && cav.klay.accounts.wallet[0]
|
||||
|
||||
if (!walletInstance) {
|
||||
console.log('no walletInstance')
|
||||
return
|
||||
}
|
||||
|
||||
const address = walletInstance.address
|
||||
getAuctionsInstance().methods.finalizeAuction(auctionId, toAddress).send({
|
||||
from: address,
|
||||
gas: '1000000'
|
||||
})
|
||||
.once('transactionHash', (txHash) => {
|
||||
console.log(`
|
||||
Sending a transaction...
|
||||
txHash: ${txHash}
|
||||
`
|
||||
)
|
||||
})
|
||||
.once('receipt', (receipt) => {
|
||||
console.log(`
|
||||
Received receipt! (#${receipt.blockNumber} ,${receipt.transactionHash})
|
||||
`, receipt)
|
||||
|
||||
dispatch(receipt)
|
||||
})
|
||||
.once('error', (error) => {
|
||||
errorCb(error.message)
|
||||
})
|
||||
}
|
||||
|
||||
registerUniqueToken (tokenId, dataURI, dispatch) {
|
||||
const walletInstance = cav.klay.accounts.wallet && cav.klay.accounts.wallet[0]
|
||||
|
||||
if (!walletInstance) {
|
||||
console.log('no walletInstance')
|
||||
return
|
||||
}
|
||||
|
||||
const address = walletInstance.address
|
||||
getMyNFTInstance().methods.registerUniqueToken(address, tokenId, dataURI).send({
|
||||
from: address,
|
||||
gas: '100000000',
|
||||
})
|
||||
.once('transactionHash', (txHash) => {
|
||||
console.log(`
|
||||
Sending a transaction...
|
||||
txHash: ${txHash}
|
||||
`
|
||||
)
|
||||
})
|
||||
.once('receipt', (receipt) => {
|
||||
console.log(`
|
||||
Received receipt! (#${receipt.blockNumber} ,${receipt.transactionHash})
|
||||
`, receipt)
|
||||
|
||||
dispatch(receipt)
|
||||
})
|
||||
.once('error', (error) => {
|
||||
errorCb(error.message)
|
||||
})
|
||||
}
|
||||
|
||||
transferFrom (tokenId) {
|
||||
const walletInstance = cav.klay.accounts.wallet && cav.klay.accounts.wallet[0]
|
||||
|
||||
if (!walletInstance) {
|
||||
console.log('no walletInstance')
|
||||
return
|
||||
}
|
||||
|
||||
const address = walletInstance.address
|
||||
getMyNFTInstance().methods.transferFrom(address, AUCTIONS_CA, tokenId).send({
|
||||
from: address,
|
||||
gas: '100000000',
|
||||
})
|
||||
.once('transactionHash', (txHash) => {
|
||||
console.log(`
|
||||
Sending a transaction...
|
||||
txHash: ${txHash}
|
||||
`
|
||||
)
|
||||
})
|
||||
.once('receipt', (receipt) => {
|
||||
console.log(`
|
||||
Received receipt! (#${receipt.blockNumber} ,${receipt.transactionHash})
|
||||
`, receipt)
|
||||
|
||||
dispatch(receipt)
|
||||
})
|
||||
.once('error', (error) => {
|
||||
errorCb(error.message)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -1,39 +1,18 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
import Vuetify from 'vuetify'
|
||||
import vuetify from './plugins/vuetify';
|
||||
import axios from 'axios'
|
||||
import VueAxios from 'vue-axios'
|
||||
import Web3 from 'web3'
|
||||
|
||||
import Config from './config'
|
||||
|
||||
Vue.use(Vuetify)
|
||||
Vue.use(VueAxios, axios)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.mixin({
|
||||
created() {
|
||||
const web3js = window.web3
|
||||
if(typeof web3js !== 'undefined') {
|
||||
this.$web3 = new Web3(web3js.currentProvider)
|
||||
}
|
||||
|
||||
this.$getDefaultAccount = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$web3.eth.getAccounts((err, data) => {
|
||||
if(!err) resolve(data[0])
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
this.$config = Config
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App),
|
||||
store,
|
||||
vuetify,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
7
nftbapp/frontend-nftdapp/src/plugins/vuetify.js
Normal file
7
nftbapp/frontend-nftdapp/src/plugins/vuetify.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import Vue from 'vue';
|
||||
import Vuetify from 'vuetify/lib';
|
||||
|
||||
Vue.use(Vuetify);
|
||||
|
||||
export default new Vuetify({
|
||||
});
|
||||
12
nftbapp/frontend-nftdapp/src/store/index.js
Normal file
12
nftbapp/frontend-nftdapp/src/store/index.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
import wallet from '@/store/modules/wallet'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
modules: {
|
||||
wallet
|
||||
}
|
||||
})
|
||||
41
nftbapp/frontend-nftdapp/src/store/modules/wallet.js
Normal file
41
nftbapp/frontend-nftdapp/src/store/modules/wallet.js
Normal file
@@ -0,0 +1,41 @@
|
||||
|
||||
const state = {
|
||||
klaytn: null,
|
||||
isConnectWallet: false,
|
||||
myaddress: '',
|
||||
balance: 0
|
||||
}
|
||||
|
||||
const getters = {
|
||||
klaytn: (state) => state.klaytn,
|
||||
isConnectWallet: (state) => state.isConnectWallet,
|
||||
myaddress: (state) => state.myaddress,
|
||||
balance: (state) => state.balance
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
setKlaytn(state, klaytn) {
|
||||
state.klaytn = klaytn
|
||||
},
|
||||
setIsConnectWallet(state, isConnected) {
|
||||
state.isConnectWallet = isConnected
|
||||
},
|
||||
setMyAddress(state, address) {
|
||||
state.myaddress = address
|
||||
},
|
||||
setBalance(state, balance) {
|
||||
state.balance = balance
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
}
|
||||
5
nftbapp/frontend-nftdapp/vue.config.js
Normal file
5
nftbapp/frontend-nftdapp/vue.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
"transpileDependencies": [
|
||||
"vuetify"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user