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

Refactor codes

Browse Source
This commit is contained in:
elegant651
2020-04-04 12:28:37 +09:00
parent dd3033be9c
commit 6c51a302b9
20 changed files with 59 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nftbapp/frontend-nftbapp/README.md
View File

@@ -1,4 +1,4 @@
# frontend-nftdapp # frontend-nftbapp
## Project setup ## Project setup
``` ```

2
nftbapp/frontend-nftbapp/package.json
View File

@@ -1,5 +1,5 @@
{ {
"name": "frontend-nftdapp", "name": "frontend-nftbapp",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {

2
nftbapp/frontend-nftbapp/public/index.html
View File

@@ -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 -->

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

@@ -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,13 +26,13 @@ import KlaytnService from './klaytn/klaytnService'
export default { export default {
name: 'app', name: 'app',
async mounted () { async created () {
await this.connect() await this.connect()
}, },
methods: { methods: {
...mapMutations('wallet', [ ...mapMutations('wallet', [
'setKlaytn', 'setKlaytn',
'setMyAddress' 'setMyAddress'
]), ]),
async connect () { async connect () {

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

@@ -38,10 +38,10 @@ import PostAuction from '@/components/PostAuction.vue'
export default { export default {
data() { data() {
return { return {
file: null, file: null,
tokenId: null, tokenId: null,
isRegistered: false, isRegistered: false,
dataURI: null dataURI: null
} }
}, },
@@ -80,7 +80,7 @@ export default {
if(!this.file){ if(!this.file){
alert("Please put the file on input.") alert("Please put the file on input.")
return return
} }
const formData = new FormData() const formData = new FormData()
formData.append('file', this.file) formData.append('file', this.file)
@@ -104,14 +104,14 @@ export default {
this.klaytn.registerUniqueToken(this.tokenId, this.dataURI, (receipt) => { this.klaytn.registerUniqueToken(this.tokenId, this.dataURI, (receipt) => {
alert(`Token registered...! (#${receipt.blockNumber} ,${receipt.transactionHash})`) alert(`Token registered...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
this.isRegistered = true this.isRegistered = true
}) })
}, },
transferToCA() { transferToCA() {
this.klaytn.transferFrom(this.tokenId, (receipt) => { this.klaytn.transferFrom(this.tokenId, (receipt) => {
alert(`Token transfered to CA...! (#${receipt.blockNumber} ,${receipt.transactionHash})`) alert(`Token transfered to CA...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
}) })
} }
} }
} }

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

@@ -22,8 +22,8 @@
<v-btn outlined class="btnSubmit" @click="this.handleAddWallet">CONNECT WALLET</v-btn> <v-btn outlined class="btnSubmit" @click="this.handleAddWallet">CONNECT WALLET</v-btn>
</template> </template>
</v-card> </v-card>
<h2>Transfer</h2> <h2>Transfer</h2>
<v-select v-model="selectedAuction" :items="auctionIds" label="Asset" @change="getAuctionById"></v-select> <v-select v-model="selectedAuction" :items="auctionIds" label="Asset" @change="getAuctionById"></v-select>
<div v-show="selectedAuction"> <div v-show="selectedAuction">
@@ -75,14 +75,14 @@ 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()
await this.getWalletInfo() if (address) {
await this.getMyAuctions() await this.getWalletInfo()
}, await this.getMyAuctions()
}
},
methods: { methods: {
...mapMutations('wallet', [ ...mapMutations('wallet', [
'setKlaytn',
'setIsConnectWallet', 'setIsConnectWallet',
'setMyAddress', 'setMyAddress',
'setBalance' 'setBalance'
@@ -108,7 +112,7 @@ import KlaytnService from '@/klaytn/klaytnService'
if(this.privateKey) { if(this.privateKey) {
await this.klaytn.integrateWallet(this.privateKey) await this.klaytn.integrateWallet(this.privateKey)
this.getWalletInfo() this.getWalletInfo()
} }
} catch (e) { } catch (e) {
this.snackbarMsg = `private key doesn't match.` this.snackbarMsg = `private key doesn't match.`
this.snackbar = true this.snackbar = true
@@ -146,7 +150,7 @@ import KlaytnService from '@/klaytn/klaytnService'
alert(`Auction finalized...! (#${receipt.blockNumber} ,${receipt.transactionHash})`) alert(`Auction finalized...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
}, (error) => { }, (error) => {
console.error(error) console.error(error)
}) })
} }
} }

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

@@ -44,10 +44,6 @@ export default {
]) ])
}, },
async mounted() {
},
methods: { methods: {
async createAuction() { async createAuction() {
if(!this.tokenid) { if(!this.tokenid) {

5
nftbapp/frontend-nftbapp/src/klaytn/caver.js
View File

@@ -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

2
numbergame/README.md
View File

@@ -1,4 +1,4 @@
# bet-dapp # numbergame-bapp
## Project setup ## Project setup
``` ```

3
numbergame/src/components/betting-component.vue
View File

@@ -36,9 +36,6 @@ export default {
...mapGetters('wallet', [ ...mapGetters('wallet', [
'klaytn' 'klaytn'
]) ])
},
mounted () {
}, },
methods: { methods: {

4
numbergame/src/components/game-bapp.vue
View File

@@ -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)
} }
}, },

8
numbergame/src/components/wallet.vue
View File

@@ -46,8 +46,7 @@
import { mapGetters, mapMutations } from 'vuex' import { mapGetters, mapMutations } from 'vuex'
export default { export default {
data: () => ({ data: () => ({
// accessType: 'keystore',
keystore: null, keystore: null,
password: '', password: '',
privateKey: null, privateKey: null,
@@ -72,8 +71,7 @@ export default {
const fileReader = new FileReader() const fileReader = new FileReader()
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()

6
numbergame/src/klaytn/caver.js
View File

@@ -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
numbergame/src/klaytn/klaytnService.js
View File

@@ -6,17 +6,14 @@ 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
cav.klay.accounts.wallet.add(JSON.parse(walletFromSession)) cav.klay.accounts.wallet.add(JSON.parse(walletFromSession))
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
} }

12
todofeed/backend-todofeed/contracts/TodoFeed.sol
View File

@@ -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 {
@@ -54,7 +54,7 @@ contract TodoFeed {
todoMap[todoId].todoId, todoMap[todoId].todoId,
todoMap[todoId].owner, todoMap[todoId].owner,
todoMap[todoId].title, todoMap[todoId].title,
todoMap[todoId].photo, todoMap[todoId].photo,
todoMap[todoId].timestamp, todoMap[todoId].timestamp,
todoMap[todoId].isVerified, todoMap[todoId].isVerified,
todoMap[todoId].verifier); todoMap[todoId].verifier);

10
todofeed/front-todofeed/src/App.vue
View File

@@ -97,7 +97,7 @@ export default {
async mounted () { async mounted () {
await this.connect() await this.connect()
await this.getFeeds() this.getFeeds()
}, },
methods: { methods: {
@@ -144,8 +144,7 @@ export default {
this.snackbarMsg = msg this.snackbarMsg = msg
this.snackbar = true this.snackbar = true
this.getFeeds() this.getFeeds()
this.getBalance()
this.showWriteBox = false this.showWriteBox = false
}, },
@@ -155,8 +154,7 @@ export default {
this.snackbarMsg = `Complete.. blocknumber: #${receipt.blockNumber} , ${receipt.transactionHash}` this.snackbarMsg = `Complete.. blocknumber: #${receipt.blockNumber} , ${receipt.transactionHash}`
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()
} }
} }
} }

20
todofeed/front-todofeed/src/components/LoginBox.vue
View File

@@ -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>
@@ -64,8 +64,7 @@ export default {
data: () => ({ data: () => ({
snackbar: false, snackbar: false,
errorTxt: '', errorTxt: '',
// accessType: 'keystore',
keystore: null, keystore: null,
password: '', password: '',
privateKey: null, privateKey: null,
@@ -81,11 +80,7 @@ export default {
'setIsConnectWallet', 'setIsConnectWallet',
'setMyAddress', 'setMyAddress',
'setBalance' 'setBalance'
]), ]),
validate () {
},
handleImport (e) { handleImport (e) {
const keystore = e.target.files[0] const keystore = e.target.files[0]
@@ -93,8 +88,7 @@ export default {
const fileReader = new FileReader() const fileReader = new FileReader()
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
@@ -112,12 +106,10 @@ 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()

3
todofeed/front-todofeed/src/components/WriteBox.vue
View File

@@ -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
} }
} }

5
todofeed/front-todofeed/src/klaytn/caver.js
View File

@@ -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
todofeed/front-todofeed/src/klaytn/klaytnService.js
View File

@@ -6,17 +6,14 @@ 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
cav.klay.accounts.wallet.add(JSON.parse(walletFromSession)) cav.klay.accounts.wallet.add(JSON.parse(walletFromSession))
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
} }