payonce goodness

package.json

@@ -44,7 +44,7 @@
   "dependencies": {
     "@ckeditor/ckeditor5-vue": "^5.1.0",
     "@jackallabs/ck5-custom": "file:jackallabs-ck5-custom-0.0.0.tgz",
-    "@jackallabs/jackal.js": "^2.2.0",
+    "@jackallabs/jackal.js": "^2.3.0",
     "vite-plugin-node-stdlib-browser": "^0.2.1",
     "vue": "^3.3.4",
     "vue-router": "^4.1.6"

src/components/DraftDocuments.vue

@@ -1,22 +1,32 @@
 <template>
-  <div class="background-blocker" v-if="shouldDraftName || shouldPubName" @click.self="cancel">
+  <div class="background-blocker" v-if="shouldDraftName || shouldPubName || error.length" @click.self="cancel">
     <div id="name-modal" class="modal" v-if="shouldDraftName">
       <h2>Save Draft</h2>
       <div id="draft-name"><label>
         Draft Name:
         <input type="text" required v-model="saveDraftFileName" />
       </label></div>
+      <span class="cost">Cost to save: <span class="colorful">{{ cost.toFixed(3) }} JKL</span></span>
+      <span class="error colorful" v-if="balance < cost">You don't have enough JKL to save</span>
       <div id="draft-buttons">
-        <button id="btn-save" @click="saveDraft">Save</button>
+        <button id="btn-save" @click="saveDraft" :disabled="balance < cost">Save</button>
         <button id="btn-cancel" @click="cancel">Cancel</button>
       </div>
     </div>
+    <div id="error-modal" class="modal" v-if="error.length">
+      <h2>Upload Error</h2>
+      <span class="cost">This file failed to save, please try again.</span>
+      <div id="draft-buttons">
+        <button id="btn-cancel" @click="cancel">Okay</button>
+      </div>
+    </div>
     <div id="publish-modal" class="modal" v-if="shouldPubName">
       <h2>Publish Document</h2>
       <div id="draft-name"><label>
         Published Name:
         <input type="text" required v-model="saveDraftFileName" />
       </label></div>
+      <span class="cost">Cost to publish: <span class="colorful">{{ cost.toFixed(3) }}jkl</span></span>
       <div id="draft-buttons">
         <button id="btn-save" @click="publishFile">Save</button>
         <button id="btn-cancel" @click="cancel">Cancel</button>
@@ -46,8 +56,7 @@
 <script setup lang="ts">
   import { bStore } from '@/store/main.ts'
 
-  import { ref, onMounted, Ref } from 'vue'
-  import { FolderHandler } from '@jackallabs/jackal.js'
+  import { ref, onMounted, Ref, computed } from 'vue'
 
   const shouldDraftName = ref(false)
   const shouldPubName = ref(false)
@@ -59,17 +68,37 @@
 
   const files: Ref<string[]> = ref([])
 
+  const cost = ref(0)
+
+  const error = ref('')
+
+  const balance = computed(() => {
+    return bStore.getJackalBalance()
+  })
+
+  async function updatePrice () {
+
+    const count = props.content.toString().length
+    const m = await bStore.getPrice(count)
+    cost.value = m / 1000000;
+
+    await bStore.updateJackalBalance()
+  }
+
   function cancel () {
     shouldDraftName.value = false
     shouldPubName.value = false
+    error.value = ''
   }
 
   function openSaveDraft () {
     shouldDraftName.value = true
+    updatePrice()
   }
 
   function openPubDraft () {
     shouldPubName.value = true
+    updatePrice()
   }
 
   function refreshDrafts () {
@@ -81,13 +110,18 @@
     refreshDrafts()
   })
 
+  function fail(err:string) {
+    cancel()
+    error.value = err
+  }
+
   async function saveDraft () {
     if (saveDraftFileName.value.length == 0) {
       alert('must enter name')
       return
     }
     loading.value = true
-    await bStore.saveDraft(saveDraftFileName.value, props.content).catch(alert)
+    await bStore.saveDraft(saveDraftFileName.value, props.content).catch(fail)
     cancel()
     refreshDrafts()
     loading.value = false
@@ -99,7 +133,7 @@
       return
     }
     loading.value = true
-    await bStore.publishFinal(saveDraftFileName.value, props.content).catch(alert)
+    await bStore.publishFinal(saveDraftFileName.value, props.content).catch(fail)
     cancel()
     refreshDrafts()
     loading.value = false
@@ -197,12 +231,17 @@
     z-index: 100;
   }
 
+
+  .error {
+    margin-top: 10px;
+  }
+
   .modal {
     background-color: #fafafa;
     width: 40vw;
     max-width: 432px;
     height: 20vh;
-    min-height: 200px;
+    min-height: 260px;
     position: absolute;
     top: 50vh;
     left: 50vw;
@@ -216,7 +255,9 @@
     border-left: var(--beacon-color) solid 16px;
     border-top: black solid 1px;
     border-right: black solid 1px;
-
+    a:hover {
+      text-decoration: underline;
+    }
 
   }
 
@@ -240,5 +281,19 @@
     font-size: 2rem;
   }
 
+  .cost {
+    margin-top: 10px;
+  }
+
+  .colorful {
+    color: var(--beacon-color);
+    font-weight: bold;
+  }
+
+  .colorful:hover {
+    color: var(--beacon-color);
+  }
+
+
 
 </style>

src/store/main.ts

@@ -1,4 +1,5 @@
 import type {
+  ICoin,
   IFileDownloadHandler,
   IFileIo,
   IFolderHandler,
@@ -39,6 +40,8 @@ interface IBStore {
   isFileIoInit (): boolean
 
   isRnsInit (): boolean
+
+  getPrice (bytes:number): Promise<number>
 }
 
 class BStore implements IBStore {
@@ -47,6 +50,7 @@ class BStore implements IBStore {
   private globalRns: IRnsHandler | null
   private jackalAddress: string
   private ownedRns: IRnsOwnedHashMap | null
+  private jackalBalance: number
 
   private workspaceFolder: IFolderHandler | null
   private draftsFolder: IFolderHandler | null
@@ -57,6 +61,7 @@ class BStore implements IBStore {
     this.globalFileIo = null
     this.globalRns = null
     this.jackalAddress = ''
+    this.jackalBalance = 0
 
     this.ownedRns = null
     this.workspaceFolder = null
@@ -77,6 +82,7 @@ class BStore implements IBStore {
       this.globalRns = await this.globalWallet.makeRnsHandler()
       this.loadAvailableRns()
     }
+    await this.updateJackalBalance()
     await this.prepWorkspace()
   }
 
@@ -88,6 +94,16 @@ class BStore implements IBStore {
     return this.jackalAddress
   }
 
+  getJackalBalance (): number {
+    return this.jackalBalance
+  }
+
+  async updateJackalBalance (): Promise<void> {
+    const s:ICoin = await this.globalWallet?.getJackalBalance()
+    console.log(s)
+    this.jackalBalance = s.amount / 1000000.0
+  }
+
   getWorkspaceFolder (): FolderHandler {
     if (!this.workspaceFolder) {
       throw Error('no workspace')
@@ -193,7 +209,7 @@ class BStore implements IBStore {
       key: fileName,
       uploadable: await handler.getForPublicUpload()
     }
-    await this.globalFileIo.staggeredUploadFiles(upload, this.workspaceFolder, { complete: 0, timer: 0 })
+    await this.globalFileIo.staggeredUploadFiles(upload, this.workspaceFolder, { complete: 0, timer: 0 }, true) //TODO: change payonce for v4
     await this.fetchWorkspaceFolder()
   }
 
@@ -248,6 +264,16 @@ class BStore implements IBStore {
   isRnsInit (): boolean {
     return !!this.globalRns
   }
+
+  async getPrice (bytes:number): Promise<number> {
+    const request: any = {
+      bytes: bytes, // * 3, // TODO: v4 will fix this
+      duration: "1752000h",
+    };
+    const res:any = await this.globalWallet?.getQueryHandler().storageQuery.queryPriceCheck(request)
+    const price:number = res.value.price;
+    return price
+  }
 }
 
 export const bStore = new BStore()

src/views/DraftEditor.vue

@@ -5,6 +5,7 @@
       <router-link v-else :to="`/` + address">
         <button>My Profile</button>
       </router-link>
+<!--      <span class="balance" v-if=walletInit>{{ balance.toFixed(3) }} JKL</span>-->
       <a href="https://app.osmosis.zone/?to=JKL&from=OSMO" target="_blank">
         <button>Get Jackal</button>
       </a>
@@ -45,11 +46,15 @@
   const editorData = ref('')
   const address = ref(bStore.getJackalAddress())
 
+
+
   const walletInit = ref(bStore.isWalletInit())
   const setEditorText = function(s: string) {
     editorData.value = s
   }
 
+
+
   async function connectWallet () {
     if (bStore.isWalletInit()) {
       walletInit.value = bStore.isWalletInit()
@@ -60,6 +65,7 @@
     await bStore.initWallet('keplr').catch(alert)
     walletInit.value = bStore.isWalletInit()
     address.value = bStore.getJackalAddress()
+    await bStore.updateJackalBalance()
   }
 
 </script>
@@ -164,4 +170,11 @@
     transform: translate(-50%, -50%);
   }
 
+  .balance {
+    border: lightblue solid 3px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0px 10px;
+  }
+
 </style>

src/views/UserPage.vue

@@ -4,11 +4,12 @@
       <main id="user-main">
         <!--        <section>-->
         <div>
-          <span v-if="!worx.length" class="loader"></span>
+          <span v-if="(!worx.length) && !empty" class="loader"></span>
           <div v-else>
             <h1 id="work-title">
               {{ address.length > 20 ? address.toString().substring(0, 10) + '...' + address.toString().substring(10, 20) : convertToTitleCase(address.toString())
               }}'s Beams</h1>
+            <span class="no-beams" v-if="empty">User has no beams</span>
             <ul class="work-list">
               <li class="work-item" v-for="item in worx">
                 <router-link :to="`/` + address + `/` + item.name">
@@ -36,6 +37,8 @@
 
   const worx: Ref<any[]> = ref([])
 
+  const empty = ref(false)
+
   const address = route.params.user
 
   function convertToTitleCase (str: string) {
@@ -55,20 +58,21 @@
   }
 
   async function updateWorx (owner: string) {
-    console.log(owner)
-    const data = await requestData(owner).catch(alert)
-    console.log(data)
-    for (const k in data) {
-      const d = data[k]
-
-      const date = new Date(d)
-      const options: any = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }
+    const options: any = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }
+    requestData(owner).then((data) => {
+      for (const k in data) {
+        const d = data[k]
+        const date = new Date(d)
+        const s = date.toLocaleDateString('en-us', options)
+
+        worx.value.unshift({ name: k, date: s })
+      }
+      console.log(worx.value)
+    }).catch(() => {
+      console.log("user has no works")
+      empty.value = true
+    })
 
-      const s = date.toLocaleDateString('en-us', options)
-
-      worx.value.unshift({ name: k, date: s })
-    }
-    console.log(worx.value)
 
   }
 
@@ -160,5 +164,8 @@
     border-bottom: black solid 8px;
   }
 
+  .no-beams {
+    font-size: 1.7rem;
+  }
 
 </style>