Update process for nftbapp

nftbapp/frontend-nftbapp/src/App.vue

@@ -32,8 +32,7 @@ export default {
 
   methods: {
     ...mapMutations('wallet', [
-      'setKlaytn',
+      'setKlaytn',      
-      'setIsConnectWallet',
       '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)
       }
     },
   }

nftbapp/frontend-nftbapp/src/components/Marketplace.vue

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

nftbapp/frontend-nftbapp/src/components/MyUpload.vue

@@ -10,8 +10,8 @@
         type="file"
         @change="captureFile" />
 
-      <v-btn @click="uploadImg" outline color="teal">UploadImg</v-btn>   
+      <v-btn @click="uploadImg" outlined color="teal">UploadImg</v-btn>   
-      <img :src="uploadedImg()" width="300" />
+      <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)=> {        
+      }).then((response)=> {
-        this.dataURI = response.data.Hash         
+        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")

nftbapp/frontend-nftbapp/src/components/MyWallet.vue

@@ -1,14 +1,27 @@
 <template>
   <div class="containWrap">      
       <v-card class="cardG">
-        <div>                 
+        <template v-if="isConnectWallet">
-          <p class="text-center address">
+          <div>
-             {{myaddress}} <span class="reftxt">(Address)</span>
+            <p class="text-center address">
-          </p>
+               {{myaddress}} <span class="reftxt">(Address)</span>
-          <p class="text-center balance">
+            </p>
-             {{balance}} Klay <span class="reftxt">(Balance)</span>
+            <p class="text-center balance">
-          </p>
+               {{balance}} Klay <span class="reftxt">(Balance)</span>
-        </div>
+            </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', [
+      ...mapGetters('wallet', [        
-        'klaytn',
         '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 () {
+      ...mapMutations('wallet', [        
-        if (this.myaddress) {
+        'setIsConnectWallet',
-          const balance = await this.klaytn.getBalance(this.myaddress)
+        'setMyAddress',
-          this.setBalance(balance)
+        '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)
       },
 

nftbapp/frontend-nftbapp/src/components/PostAuction.vue

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

nftbapp/frontend-nftbapp/src/klaytn/klaytnService.js

@@ -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 result = await getAuctionsInstance().methods.getAuctionById(auctionId).call()
-    const aucionInfo = {}
+    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) {