vbalien/BappTutorial
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update process for nftbapp

Browse Source
This commit is contained in:
elegant651
2020-03-25 16:58:38 +09:00
parent 8072a65374
commit 6a95428c6b
6 changed files with 129 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nftbapp/frontend-nftbapp/src/App.vue
View File

@@ -32,8 +32,7 @@ export default {
methods: {
...mapMutations('wallet', [
'setKlaytn',
'setIsConnectWallet',
'setKlaytn',
'setMyAddress'
]),
async connect () {
@@ -42,9 +41,6 @@ export default {
const address = await klaytn.init()
if (address) {
this.setMyAddress(address)
this.setIsConnectWallet(true)
} else {
this.setIsConnectWallet(false)
}
},
}

34
nftbapp/frontend-nftbapp/src/components/Marketplace.vue
View File

@@ -32,37 +32,11 @@ export default {
},
methods: {
getAuctions() {
async getAuctions() {
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]
// })
// })
// })
// }
// })
klaytn.getAuctions((auctions) => {
this.auctions = auctions
})
}
}
}

32
nftbapp/frontend-nftbapp/src/components/MyUpload.vue
View File

@@ -10,8 +10,8 @@
type="file"
@change="captureFile" />
<v-btn @click="uploadImg" outline color="teal">UploadImg</v-btn>
<img :src="uploadedImg()" width="300" />
<v-btn @click="uploadImg" outlined color="teal">UploadImg</v-btn>
<img :src="uploadedImg" width="300" />
<v-text-field
v-model="dataURI"
@@ -19,14 +19,16 @@
required
></v-text-field>
<v-btn @click="submit" outline color="teal">Submit</v-btn>
<v-btn @click="submit" outlined color="teal">Submit</v-btn>
<div v-show="isRegistered">
<v-btn @click="transferToCA" outline color="teal">TransferToCA</v-btn>
<v-divider />
<v-btn @click="transferToCA" class="ma-4" outlined color="teal">TransferToCA</v-btn>
<v-divider />
</div>
</v-form>
</v-form>
<PostAuction v-bind:tokenid="tokenId" v-bind:metadata="dataURI" />
<PostAuction :tokenid="tokenId" :metadata="dataURI" />
</div>
</template>
<script>
@@ -50,7 +52,15 @@ export default {
computed: {
...mapGetters('wallet', [
'klaytn',
])
]),
uploadedImg(){
if (this.dataURI) {
return 'https://gateway.ipfs.io/ipfs/'+this.dataURI
} else {
return ''
}
},
},
async mounted() {
@@ -80,15 +90,11 @@ export default {
url: '/api/v0/add',
data: formData,
headers: {'Content-Type': 'multipart/form-data'}
}).then((response)=> {
this.dataURI = response.data.Hash
}).then((response)=> {
this.dataURI = response.data.Hash
})
},
uploadedImg(){
return 'https://gateway.ipfs.io/ipfs/'+this.dataURI
},
submit() {
if(!this.dataURI){
alert("Fill in dataURI on the input")

100
nftbapp/frontend-nftbapp/src/components/MyWallet.vue
View File

@@ -1,14 +1,27 @@
<template>
<div class="containWrap">
<v-card class="cardG">
<div>
<p class="text-center address">
{{myaddress}} <span class="reftxt">(Address)</span>
</p>
<p class="text-center balance">
{{balance}} Klay <span class="reftxt">(Balance)</span>
</p>
</div>
<template v-if="isConnectWallet">
<div>
<p class="text-center address">
{{myaddress}} <span class="reftxt">(Address)</span>
</p>
<p class="text-center balance">
{{balance}} Klay <span class="reftxt">(Balance)</span>
</p>
</div>
</template>
<template v-else>
<v-text-field
v-model="privateKey"
label="Private Key"
type="password"
solo
required
></v-text-field>
<v-btn outlined class="btnSubmit" @click="this.handleAddWallet">CONNECT WALLET</v-btn>
</template>
</v-card>
<h2>Transfer</h2>
@@ -16,7 +29,7 @@
<div v-show="selectedAuction">
<h3>Auction Info</h3>
<div>Title: {{auctionInfo.title}}</div>
<div>Price: {{auctionInfo.price}} Ether</div>
<div>Price: {{auctionInfo.price}} KLAY</div>
<div>TokenId: {{auctionInfo.tokenId}}</div>
<div>Owner: {{auctionInfo.owner}}</div>
</div>
@@ -27,11 +40,24 @@
required
></v-text-field>
<v-btn @click="finalizeAuction" outline color="teal">Finalize</v-btn>
<v-btn @click="finalizeAuction" outlined color="teal">Finalize</v-btn>
<v-snackbar
v-model="snackbar" top>
{{ snackbarMsg }}
<v-btn
color="pink"
text
@click="snackbar = false"
>
Close
</v-btn>
</v-snackbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { mapGetters, mapMutations } from 'vuex'
import KlaytnService from '@/klaytn/klaytnService'
export default {
data() {
@@ -45,13 +71,18 @@ import { mapGetters } from 'vuex'
price: 0,
tokenId: '',
owner: ''
}
},
snackbar: false,
snackbarMsg: '',
klaytn: null,
privateKey: null,
}
},
computed: {
...mapGetters('wallet', [
'klaytn',
...mapGetters('wallet', [
'isConnectWallet',
'myaddress',
'balance'
@@ -59,18 +90,45 @@ import { mapGetters } from 'vuex'
},
async mounted() {
this.getBalance()
this.klaytn = new KlaytnService()
await this.klaytn.init()
await this.getWalletInfo()
await this.getMyAuctions()
},
methods: {
async getBalance () {
if (this.myaddress) {
const balance = await this.klaytn.getBalance(this.myaddress)
this.setBalance(balance)
}
...mapMutations('wallet', [
'setIsConnectWallet',
'setMyAddress',
'setBalance'
]),
async handleAddWallet () {
try {
if(this.privateKey) {
await this.klaytn.integrateWallet(this.privateKey)
this.getWalletInfo()
}
} catch (e) {
this.snackbarMsg = `private key doesn't match.`
this.snackbar = true
}
},
async getMyAuctions() {
async getWalletInfo () {
const walletInstance = this.klaytn.getWallet()
if(walletInstance && walletInstance.address) {
this.setMyAddress(walletInstance.address)
const balance = await this.klaytn.getBalance(walletInstance.address)
this.setBalance(balance)
this.setIsConnectWallet(true)
} else {
this.setIsConnectWallet(false)
}
},
async getMyAuctions() {
this.auctionIds = await this.klaytn.getAuctionsOf(this.myaddress)
},

5
nftbapp/frontend-nftbapp/src/components/PostAuction.vue
View File

@@ -16,10 +16,11 @@
v-model="auction.price"
placeholder="e.g. 1"
label="Price"
type="number"
persistent-hint
></v-text-field>
<v-btn @click="createAuction()" outline color="teal">Create Auction</v-btn>
<v-btn @click="createAuction" outlined color="teal">Create Auction</v-btn>
</v-form>
</div>
</template>
@@ -54,7 +55,7 @@ export default {
return
}
this.klaytn.createAuction(this.tokenid, this.auction.auctionTitle, this.metadata, auction.price, (receipt) => {
this.klaytn.createAuction(this.tokenid, this.auction.auctionTitle, this.metadata, this.auction.price, (receipt) => {
alert(`Creation completed...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
}, error => {
alert(error)

29
nftbapp/frontend-nftbapp/src/klaytn/klaytnService.js
View File

@@ -58,16 +58,33 @@ export default class KlaytnService {
getAuctions (dispatch) {
getAuctionsInstance().methods.getCount().call()
.then(count => {
.then(count => {
if (!count) return []
const auctions = []
for (let i = count; i > 0; i--) {
for (let i = count-1; i >= 0; i--) {
const auction = getAuctionsInstance().methods.getAuctionById(i).call()
auctions.push(auction)
}
return Promise.all(auctions)
})
.then(auctions => {
auctions = auctions.map(async auction => {
const auctionInfo = {}
auctionInfo.title = auction[0]
auctionInfo.price = cav.utils.fromPeb(auction[1], "KLAY")
auctionInfo.image = 'https://gateway.ipfs.io/ipfs/' + auction[2]
auctionInfo.tokenId = auction[3]
auctionInfo.owner = await this.getOwner(auction[3])
auctionInfo.active = auction[6]
auctionInfo.finalized = auction[7]
return auctionInfo
})
return Promise.all(auctions)
})
.then(async auctions => {
dispatch(auctions)
})
}
@@ -83,8 +100,8 @@ export default class KlaytnService {
}
async getAuctionById (auctionId) {
const auction = await getAuctionsInstance().methods.getAuctionById(auctionId).call()
const aucionInfo = {}
const result = await getAuctionsInstance().methods.getAuctionById(auctionId).call()
const auctionInfo = {}
auctionInfo.title = result[0]
auctionInfo.price = cav.utils.fromPeb(result[1], "KLAY")
auctionInfo.tokenId = result[3]
@@ -101,7 +118,7 @@ export default class KlaytnService {
return
}
price = cav.utils.fromPeb(price, "KLAY")
price = cav.utils.toPeb(price, "KLAY")
const address = walletInstance.address
getAuctionsInstance().methods.createAuction(MYNFT_CA, tokenId, title, metadata, price).send({
@@ -191,7 +208,7 @@ export default class KlaytnService {
})
}
transferFrom (tokenId) {
transferFrom (tokenId, dispatch, errorCb) {
const walletInstance = cav.klay.accounts.wallet && cav.klay.accounts.wallet[0]
if (!walletInstance) {