almost full nav

src/views/DraftEditor.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="template-container">
     <div class="connect-buttons">
-      <button @click="connectWallet" :disabled="walletInit">{{ walletInit ? "Connected" : "Connect Wallet" }}</button>
+      <button @click="connectWallet"  v-if=!walletInit>Connect Wallet</button>
+      <router-link v-else :to="`/` + address">
+        <button >My Profile</button>
+      </router-link>
       <a href="https://app.osmosis.zone/?to=JKL&from=OSMO" target="_blank">
         <button>Get Jackal</button>
       </a>
@@ -39,21 +42,23 @@
 
   const CKE = CKEditor.component
   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()
+      address.value = bStore.getJackalAddress()
       return
     }
 
     await bStore.initWallet("keplr").catch(alert)
     walletInit.value = bStore.isWalletInit()
+    address.value = bStore.getJackalAddress()
   }
 
 </script>

src/views/UserPage.vue

@@ -3,8 +3,19 @@
     <div class="main-container">
       <main>
         <section>
-          <div ref="shell" >
-            <span class="loader"></span>
+          <div>
+            <span v-if="!worx.length" class="loader"></span>
+            <div v-else>
+              <h1>{{ address }}'s Worx</h1>
+              <ul class="work-list">
+                <li  v-for="item in worx">
+<!--                  /%address%/item-->
+                  <router-link :to="`/` + address + `/` + item">
+                    <h2>{{ item }}</h2>
+                  </router-link>
+                </li>
+              </ul>
+            </div>
           </div>
         </section>
         <aside>
@@ -17,26 +28,39 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue'
+  import { onMounted, Ref, ref } from 'vue'
   import { useRoute } from 'vue-router'
+  import { bStore } from '@/store/main.ts'
 
-  const shell = ref<HTMLElement | null>(null)
   const peoples = ref<HTMLElement | null>(null)
   const route = useRoute()
 
-  async function requestData(owner: string): Promise<string> {
+  const worx:Ref<string[]> = ref([])
+
+  const address = route.params.user
+
+  async function requestData(owner: string): Promise<any> {
     const url = `https://jackal.link/p/${owner}/beacon/worx`
     return fetch(url)
-      .then(resp => resp.text())
+      .then(resp => resp.json())
       .catch(err => {
         throw err
       })
   }
 
+  async function updateWorx(owner: string) {
+    console.log(owner)
+    const data = await requestData(owner).catch(alert)
+    console.log(data)
+    for (const k in data) {
+      worx.value.unshift(k)
+    }
+  }
+
   onMounted(async () => {
     console.log(route.params)
-    if (shell.value && route.params.user?.length) {
-      shell.value.innerHTML = await requestData(route.params.user as string) || ''
+    if (route.params.user?.length) {
+      await updateWorx(route.params.user as string)
     }
   })
 
@@ -75,6 +99,12 @@
   }
 
 
+  .work-list {
+    list-style: none;
+    padding-left: 0px;
+    margin: 0px;
+  }
+