add avatar to account

static/js/market.js

@@ -34,6 +34,7 @@ const market = async () => {
     data: function () {
       return {
         account: null,
+        accountMetadata: null,
         accountDialog: {
           show: false,
           data: {
@@ -106,6 +107,9 @@ const market = async () => {
         if (merchants && merchants.length) {
           this.pubkeys = new Set(merchants)
         }
+        if (this.account) {
+          this.pubkeys.add(this.account.pubkey)
+        }
         if (relays && relays.length) {
           this.relays = new Set([...defaultRelays, ...relays])
         } else {
@@ -243,6 +247,9 @@ const market = async () => {
             this.events.map(eventToObj).map(e => {
               if (e.kind == 0) {
                 this.profiles.set(e.pubkey, e.content)
+                if (e.pubkey == this.account.pubkey) {
+                  this.accountMetadata = this.profiles.get(this.account.pubkey)
+                }
                 return
               } else if (e.kind == 30018) {
                 //it's a product `d` is the prod. id

templates/nostrmarket/market.html

@@ -7,11 +7,19 @@
     </q-toolbar>
     <div>
       <div v-if="account" class="bg-transparent q-ma-md">
-        <!-- <q-avatar size="56px" class="q-mb-sm">
+        <q-avatar size="56px" class="q-mb-sm">
-          <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
+          <img
+            :src="accountMetadata?.picture || '/nostrmarket/static/images/blank-avatar.webp'"
+          />
         </q-avatar>
-        <div class="text-weight-bold">Razvan Stoenescu</div>
+        {%raw%}
-        <div>@rstoenescu</div> -->
+        <div class="text-weight-bold">
+          {{ `${account.pubkey.slice(0, 5)}...${account.pubkey.slice(-5)}` }}
+        </div>
+        <div v-if="accountMetadata && accountMetadata.name">
+          {{ accountMetadata.name }}
+        </div>
+        {%endraw%}
         <q-btn
           label="Delete data"
           class="q-mt-md"