112 lines
2.6 KiB
Vue
112 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<v-form class="form" ref="form">
|
|
<v-text-field
|
|
v-model="tokenId"
|
|
label="Unique ID">
|
|
</v-text-field>
|
|
|
|
<input
|
|
type="file"
|
|
@change="captureFile" />
|
|
|
|
<v-btn @click="uploadImg" outline color="teal">UploadImg</v-btn>
|
|
<img :src="uploadedImg()" width="300" />
|
|
|
|
<v-text-field
|
|
v-model="dataURI"
|
|
label="Data URI"
|
|
required
|
|
></v-text-field>
|
|
|
|
<v-btn @click="submit" outline color="teal">Submit</v-btn>
|
|
|
|
<div v-show="isRegistered">
|
|
<v-btn @click="transferToCA" outline color="teal">TransferToCA</v-btn>
|
|
</div>
|
|
</v-form>
|
|
|
|
<PostAuction v-bind:tokenid="tokenId" v-bind:metadata="dataURI" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import PostAuction from '@/components/PostAuction.vue'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
file: null,
|
|
tokenId: null,
|
|
isRegistered: false,
|
|
dataURI: null
|
|
}
|
|
},
|
|
|
|
components: {
|
|
PostAuction
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters('wallet', [
|
|
'klaytn',
|
|
])
|
|
},
|
|
|
|
async mounted() {
|
|
this.tokenId = this._getRandomInt(123456789,999999999)
|
|
},
|
|
|
|
methods: {
|
|
_getRandomInt(min, max) {
|
|
return Math.floor(Math.random() * (max - min + 1)) + min
|
|
},
|
|
captureFile(event) {
|
|
event.stopPropagation()
|
|
this.file = event.target.files[0]
|
|
},
|
|
|
|
async uploadImg() {
|
|
if(!this.file){
|
|
alert("Please put the file on input.")
|
|
return
|
|
}
|
|
|
|
const formData = new FormData()
|
|
formData.append('file', this.file)
|
|
this.axios({
|
|
method: 'post',
|
|
baseURL: 'https://ipfs.infura.io:5001',
|
|
url: '/api/v0/add',
|
|
data: formData,
|
|
headers: {'Content-Type': 'multipart/form-data'}
|
|
}).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")
|
|
return
|
|
}
|
|
|
|
this.klaytn.registerUniqueToken(this.tokenId, this.dataURI, (receipt) => {
|
|
alert(`Token registered...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
|
|
this.isRegistered = true
|
|
})
|
|
},
|
|
|
|
transferToCA() {
|
|
this.klaytn.transferFrom(this.tokenId, (receipt) => {
|
|
alert(`Token transfered to CA...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script> |