🔀 Merge pull request #8 from nekomeowww/master

✨ Seperated the different error messages, connected the link to avatar and reset functions, fixed the loading percentage sometimes became NaN

Author: nekomeowww

README.md

@@ -1,6 +1,6 @@
 <h1 align="center">ArweaveAvatar</h1>
 <p align="center">Avatar upload and manage for Arweave Identification</p>
-<p align="center"> Link at Permaweb: <a href="https://arweave.net/d9SXf_N32hAm3cygt1btmPC-7Dg460VhQEtW8I-cfvU">Online</a></p>
+<p align="center"> Link to Permaweb: <a href="https://arweave.net/SV9JcBCwCzCUt22pX2xN6BynKi8zdaTrQ57ytu-Vems">Online</a></p>
 <p align="center">
     <img src="https://github.com/AyakaLab/ArweaveAvatar/workflows/Node%20Build%20Test/badge.svg" />
     <img src="https://github.com/AyakaLab/ArweaveAvatar/workflows/Production%20CI%20Build%20Test/badge.svg" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "arweave-avatar",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Avatar upload and manage for Arweave Identification",
   "author": "Ayaka Neko <neko@ayaka.moe>",
   "private": true,

src/api/arweave.js

@@ -24,6 +24,7 @@ let arweave = {
       ar.transactions.get(txid).then(detail => {
         resolve(detail)
       }).catch(err => {
+        console.log(err)
         reject(err)
       })
     })
@@ -54,14 +55,20 @@ let arweave = {
         }
       }).then(async ids => {
         if (ids.length === 0) {
-          resolve(false)
+          resolve({ result: 'no image found' })
           return
         }
 
         let detail = await this.getTransactionDetail(ids[0]).catch((err) => {
-          resolve(err)
+          console.log(err)
+          resolve({ result: 'pending on confirm', error: err })
         })
 
+        if (!detail) {
+          resolve({ result: 'pending on upload' })
+          return
+        }
+
         ar.transactions.getData(detail.id, {decode: true, string: true}).then(data => {
           resolve(data)
         })

src/components/imgUpload/imgUpload.vue

@@ -266,7 +266,6 @@ export default {
       try {
         let res = { data: { code: 0 } }
         res.data.code = 0
-        console.log(file)
         this.setAvatarFile(file)
         if (res.data.code === 0 || res.data.code === 1) {
           this.$emit('doneImageUpload', {

src/pages/SetAvatar.vue

@@ -68,7 +68,7 @@ export default {
       imgUploadDone: 0,
       loading: true,
       loadingPct: 0,
-      loadingStatus: ''
+      loadingStatus: undefined
     }
   },
   computed: {
@@ -149,24 +149,55 @@ export default {
       }, 500)
 
       API.arweave.getAvatar(this.walletAddress).then(res => {
-        if (!res) {
+        if (res.result === 'no image found') {
           this.loadingStatus = 'exception'
           this.$message({
-            message: 'Avatar not Found or is Pending on confirmation',
+            message: 'No Avatar not Found',
             type: 'error',
-            duration: 4000
+            duration: 6000
           })
           clearInterval(intervalId)
-        }
-        this.avatar = res
-        clearInterval(intervalId)
-        this.loadingPct = 100
-
-        setTimeout(() => {
-          this.loading = false
-        }, 2000)
+          this.avatar = false
+          setTimeout(() => {
+            this.loading = false
+          }, 2000)
+        } else if (res.result === 'pending on confirm') {
+          this.loadingStatus = 'exception'
+          this.$message({
+            message: 'Avatar is pending on confirmation',
+            type: 'warning',
+            duration: 6000
+          })
+          console.log(res.result.error)
+          clearInterval(intervalId)
+          this.avatar = false
+          this.loadingPct = 100
+          setTimeout(() => {
+            this.loading = false
+          }, 2000)
+        } else if (res.result === 'pending on upload') {
+          this.loadingStatus = 'exception'
+          this.$message({
+            message: 'Avatar is pending on upload',
+            type: 'warning',
+            duration: 6000
+          })
+          clearInterval(intervalId)
+          this.avatar = false
+          this.loadingPct = 100
+          setTimeout(() => {
+            this.loading = false
+          }, 2000)
+        } else {
+          this.loadingStatus = 'success'
+          this.avatar = res
+          clearInterval(intervalId)
+          this.loadingPct = 100
 
-        return res
+          setTimeout(() => {
+            this.loading = false
+          }, 2000)
+        }
       })
     }, 2000)
   }

src/pages/Upload.vue

@@ -9,7 +9,7 @@
         <i class="el-icon-success" style="font-size: 10rem; color: #67C23A;"></i>
         <span>Upload Successful!</span>
         <span v-if="!upload && avatarLink !== ''" style="margin-top: 1rem;">Link to your avatar: <a :href="avatarLink">{{ avatarLink }}</a></span>
-        <img :src="getAvatar()" />
+        <img :src="getAvatar()" class="avatar"/>
       </div>
     </div>
     <Footer />
@@ -18,7 +18,7 @@
 
 <script>
 
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
@@ -36,19 +36,29 @@ export default {
     }
   },
   computed: {
-    ...mapState(['uploadPct', 'avatarLink', 'avatarAfterUpload'])
+    ...mapState(['uploadPct', 'avatarLink', 'avatarId', 'avatarAfterUpload'])
   },
   watch: {
     uploadPct (val) {
       this.pct = parseInt(val)
 
       if (val === 100) {
+        this.$message({
+          message: 'Your avatar will be available on next mine',
+          type: 'success',
+          duration: 6000
+        })
         this.upload = false
+      } else {
+        this.upload = true
+        this.pct = 0
       }
     }
   },
   methods: {
+    ...mapActions(['getAvatarFromId', 'uploadReset']),
     getAvatar () {
+      this.getAvatarFromId(this.avatarId)
       return this.avatarAfterUpload
     }
   },
@@ -60,10 +70,13 @@ export default {
     }
 
     if (this.uploadPct === 100) {
+      this.$message({
+        message: 'Your avatar will be available on next mine',
+        type: 'success',
+        duration: 6000
+      })
       this.upload = false
-      setTimeout(() => {
-        this.$router.push({ path: '/' })
-      }, 5000)
+      this.uploadReset()
     }
   }
 }
@@ -86,4 +99,10 @@ export default {
 .upload-progress {
   width: 70vw;
 }
+
+.avatar {
+  height: 250px;
+  width: 250px;
+  margin: 1rem auto;
+}
 </style>

src/store/index.js

@@ -23,8 +23,9 @@ export default new Vuex.Store({
     walletAddress: '',
     avatar: '',
     avatarFile: '',
-    uploadPct: '',
+    uploadPct: 0,
     avatarId: '',
+    avatarLink: '',
     avatarAfterUpload: ''
   },
   mutations: {
@@ -46,6 +47,9 @@ export default new Vuex.Store({
     setAvatarId (state, id) {
       state.avatarId = id
     },
+    setAvatarLink (state, link) {
+      state.avatarLink = link
+    },
     setAvatarAfterUpload (state, avatar) {
       state.avatarAfterUpload = avatar
     }
@@ -82,12 +86,13 @@ export default new Vuex.Store({
         while (!uploader.isComplete) {
           await uploader.uploadChunk()
           commit('setUploadPct', uploader.pctComplete)
+          console.log(`${uploader.pctComplete}% complete, ${uploader.uploadedChunks}/${uploader.totalChunks}`)
         }
 
         commit('setAvatarId', transaction.id)
+        commit('setAvatarLink', 'https://arweave.net/' + transaction.id)
 
-        const response = await ar.transactions.post(transaction)
-        console.log(response)
+        await ar.transactions.post(transaction)
       })
     },
     setAvatarId ({ commit }, id) {
@@ -97,6 +102,12 @@ export default new Vuex.Store({
       ar.transactions.getData(id, {decode: true, string: true}).then(data => {
         commit('setAvatarAfterUpload', data)
       })
+    },
+    uploadReset ({ commit }) {
+      commit('setAvatarAfterUpload', '')
+      commit('setAvatarLink', '')
+      commit('setAvatarId', '')
+      commit('setUploadPct', 0)
     }
   }
 })