diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue index d0f45ea3..071d7ddd 100644 --- a/src/modules/[chain]/staking/[validator].vue +++ b/src/modules/[chain]/staking/[validator].vue @@ -79,6 +79,7 @@ const selfRate = computed(() => { } return '-'; }); + const logo = (identity?: string) => { if (!identity) return ''; const url = avatars.value[identity] || ''; @@ -86,25 +87,44 @@ const logo = (identity?: string) => { ? url : `https://s3.amazonaws.com/keybase_processed_uploads/${url}`; }; + +const fetchAvatar = (identity: string) => { + // fetch avatar from keybase + return new Promise((resolve) => { + staking + .keybase(identity) + .then((d) => { + if (Array.isArray(d.them) && d.them.length > 0) { + const uri = String(d.them[0]?.pictures?.primary?.url).replace( + 'https://s3.amazonaws.com/keybase_processed_uploads/', + '' + ); + + avatars.value[identity] = uri; + resolve(); + } else throw new Error(`failed to fetch avatar for ${identity}.`); + }) + .catch((error) => { + // console.error(error); // uncomment this if you want the user to see if the avatar failed to load. + resolve(); + }); + }); +}; + +const loadAvatar = (identity: string) => { + // fetches avatar from keybase and stores it in localStorage + fetchAvatar(identity).then(() => { + localStorage.setItem('avatars', JSON.stringify(avatars.value)); + }); +}; + 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]) { - 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( - 'https://s3.amazonaws.com/keybase_processed_uploads/', - '' - ); - if (uri) { - avatars.value[identity.value] = uri; - localStorage.setItem('avatars', JSON.stringify(avatars.value)); - } - } - }); - } + if (identity.value && !avatars.value[identity.value]) loadAvatar(identity.value); + const prefix = valoperToPrefix(v.value.operator_address) || ''; addresses.value.hex = consensusPubkeyToHexAddress( v.value.consensus_pubkey @@ -184,13 +204,18 @@ function pageload(p: number) {
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue index 2d260734..e93aa69d 100644 --- a/src/modules/[chain]/staking/index.vue +++ b/src/modules/[chain]/staking/index.vue @@ -141,39 +141,52 @@ const list = computed(() => { return unbondList.value.map((x, i) => ({v: x, rank: 'primary', logo: logo(x.description.identity)})); }); +const fetchAvatar = (identity: string) => { + // fetch avatar from keybase + return new Promise((resolve) => { + staking + .keybase(identity) + .then((d) => { + if (Array.isArray(d.them) && d.them.length > 0) { + const uri = String(d.them[0]?.pictures?.primary?.url).replace( + 'https://s3.amazonaws.com/keybase_processed_uploads/', + '' + ); + + avatars.value[identity] = uri; + resolve(); + } else throw new Error(`failed to fetch avatar for ${identity}`); + }) + .catch((error) => { + // console.error(error); // uncomment this if you want the user to see which avatars failed to load. + resolve(); + }); + }); +}; + +const loadAvatar = (identity: string) => { + // fetches avatar from keybase and stores it in localStorage + fetchAvatar(identity).then(() => { + localStorage.setItem('avatars', JSON.stringify(avatars.value)); + }); +}; + const loadAvatars = () => { - // fetch avatar from keybase - let promise = Promise.resolve(); - staking.validators.forEach((item) => { - promise = promise.then( - () => - new Promise((resolve) => { - const identity = item.description?.identity; - if (identity && !avatars.value[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( - 'https://s3.amazonaws.com/keybase_processed_uploads/', - '' - ); - if (uri) { - avatars.value[identity] = uri; - localStorage.setItem( - 'avatars', - JSON.stringify(avatars.value) - ); - } - } - resolve(); - }); - } else { - resolve(); - } - }) - ); - }); + // fetches all avatars from keybase and stores it in localStorage + const promises = staking.validators.map((validator) => { + const identity = validator.description?.identity; + + // Here we also check whether we haven't already fetched the avatar + if (identity && !avatars.value[identity]) { + return fetchAvatar(identity); + } else { + return Promise.resolve(); + } + }); + + Promise.all(promises).then(() => + localStorage.setItem('avatars', JSON.stringify(avatars.value)) + ); }; const logo = (identity?: string) => { @@ -313,7 +326,7 @@ loadAvatars(); style="max-width: 300px" >