fix: logo loading

src/modules/[chain]/staking/[validator].vue

@@ -56,7 +56,6 @@ staking
 const txs = ref({} as PaginatedTxs);
 
 blockchain.rpc.getTxsBySender(addresses.value.account).then((x) => {
-  console.log('txs', x);
   txs.value = x;
 });
 
@@ -78,14 +77,19 @@ const selfRate = computed(() => {
   }
   return '-';
 });
-
+const logo = (identity?: string) => {
+  if (!identity) return '';
+  const url = avatars.value[identity] || '';
+  return url.startsWith('http')
+    ? url
+    : `https://s3.amazonaws.com/keybase_processed_uploads/${url}`;
+};
 onMounted(() => {
   if (validator) {
     staking.fetchValidator(validator).then((res) => {
       v.value = res.validator;
       identity.value = res.validator?.description?.identity || '';
       if (identity.value && !avatars.value[identity.value]) {
-        console.log(identity.value, avatars);
         staking.keybase(identity.value).then((d) => {
           if (Array.isArray(d.them) && d.them.length > 0) {
             const uri = String(d.them[0]?.pictures?.primary?.url).replace(
@@ -144,9 +148,7 @@ onMounted(() => {
               <div class="w-24 rounded-lg">
                 <img
                   v-if="avatars[identity] !== 'undefined'"
-                  v-lazy="
+                  v-lazy="logo(identity)"
-                    `https://s3.amazonaws.com/keybase_processed_uploads/${avatars[identity]}`
-                  "
                   class="object-contain"
                 />
                 <Icon

src/modules/[chain]/staking/index.vue

@@ -58,8 +58,6 @@ async function fetchChange() {
   }
 }
 
-fetchChange();
-
 const changes = computed(() => {
   const changes = {} as Record<string, number>;
   Object.keys(latest.value).forEach((k) => {
@@ -92,12 +90,6 @@ const change24Color = (key?: Key) => {
   if (v < 0) return 'text-error';
 };
 
-const update = (m: DebuggerEvent) => {
-  if (m.key === 'validators') {
-    loadAvatars();
-  }
-};
-
 const list = computed(() => {
   return tab.value === 'active' ? staking.validators : unbondList.value;
   // return staking.validators
@@ -107,11 +99,13 @@ const loadAvatars = () => {
   // fetch avatar from keybase
   let promise = Promise.resolve();
   staking.validators.forEach((item) => {
+    console.log(item.description)
     promise = promise.then(
       () =>
         new Promise((resolve) => {
           const identity = item.description?.identity;
           if (identity && !avatars.value[identity]) {
+            console.log("loading:", identity)
             staking.keybase(identity).then((d) => {
               if (Array.isArray(d.them) && d.them.length > 0) {
                 const uri = String(d.them[0]?.pictures?.primary?.url).replace(
@@ -136,15 +130,6 @@ const loadAvatars = () => {
   });
 };
 
-staking.$subscribe((m, s) => {
-  if (Array.isArray(m.events)) {
-    m.events.forEach((x) => {
-      update(x);
-    });
-  } else {
-    update(m.events);
-  }
-});
 const logo = (identity?: string) => {
   if (!identity) return '';
   const url = avatars.value[identity] || '';
@@ -168,6 +153,10 @@ const rank = function (position: number) {
       return 'primary';
   }
 };
+
+fetchChange();
+loadAvatars();
+
 </script>
 <template>
   <div>