cerc-io/cosmos-explorer
15
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add vue image lazyload

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-11 01:53:59 +08:00
parent 8e1e243111
commit e386988bdc
4 changed files with 158 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -35,6 +35,7 @@
"cross-fetch": "^3.1.5",
"daisyui": "^2.51.6",
"dayjs": "^1.11.7",
"lazy-load-vue3": "^1.3.0",
"long": "^5.2.1",
"md-editor-v3": "^2.8.1",
"numeral": "^2.0.6",

3
src/main.ts
View File

@ -11,6 +11,7 @@ import '@/plugins/vuetify/styles/styles.scss';
import '@/style.css';
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import LazyLoad from 'lazy-load-vue3';
// import router from "@/plugins/vuetify/router";
import router from './router';
import { useBaseStore } from './stores/useBaseStore';
@ -25,7 +26,7 @@ app.use(vuetify);
app.use(createPinia());
app.use(layoutsPlugin);
app.use(router);
app.use(LazyLoad, { component: true });
// Mount vue app
app.mount('#app');

79
src/modules/[chain]/staking/index.vue
View File

@ -22,48 +22,48 @@ onMounted(() => {
});
async function fetchChange() {
console.log('fetch changes')
let page = 0
console.log('fetch changes');
let page = 0;
let height = Number(base.latest?.block?.header?.height || 0)
let height = Number(base.latest?.block?.header?.height || 0);
if (height > 14400) {
height -= 14400
height -= 14400;
} else {
height = 1
height = 1;
}
// voting power in 24h ago
while (page < staking.validators.length && height > 0) {
await base.fetchValidatorByHeight(height, page).then(x => {
x.validators.forEach(v => {
yesterday.value[v.pub_key.key] = Number(v.voting_power)
})
})
page += 100
await base.fetchValidatorByHeight(height, page).then((x) => {
x.validators.forEach((v) => {
yesterday.value[v.pub_key.key] = Number(v.voting_power);
});
});
page += 100;
}
page = 0
page = 0;
// voting power for now
while (page < staking.validators.length) {
await base.fetchLatestValidators(page).then(x => {
x.validators.forEach(v => {
latest.value[v.pub_key.key] = Number(v.voting_power)
})
})
page += 100
await base.fetchLatestValidators(page).then((x) => {
x.validators.forEach((v) => {
latest.value[v.pub_key.key] = Number(v.voting_power);
});
});
page += 100;
}
}
fetchChange();
const changes = computed(() => {
const changes = {} as Record<string, number>
Object.keys(latest.value).forEach(k => {
const l = latest.value[k] || 0
const y = yesterday.value[k] || 0
changes[k] = l - y
})
return changes
})
const changes = {} as Record<string, number>;
Object.keys(latest.value).forEach((k) => {
const l = latest.value[k] || 0;
const y = yesterday.value[k] || 0;
changes[k] = l - y;
});
return changes;
});
const change24 = (key: Key) => {
const txt = key.key;
@ -71,7 +71,7 @@ const change24 = (key: Key) => {
// const o: number = yesterday.value[txt];
// // console.log( txt, n, o)
// return n > 0 && o > 0 ? n - o : 0;
return changes.value[txt]
return changes.value[txt];
};
const change24Text = (key?: Key) => {
@ -192,7 +192,7 @@ const rank = function (position: number) {
<table class="table w-full">
<thead>
<tr>
<th scope="col" style="width: 3rem;position: relative;">#</th>
<th scope="col" style="width: 3rem; position: relative">#</th>
<th scope="col">VALIDATOR</th>
<th scope="col" class="text-right">VOTING POWER</th>
<th scope="col" class="text-right">24h CHANGES</th>
@ -221,15 +221,23 @@ const rank = function (position: number) {
class="d-flex align-center overflow-hidden"
style="max-width: 400px"
>
<div class="avatar mr-4 relative w-9 rounded-full overflow-hidden">
<div class="w-9 rounded-full bg-gray-400 absolute opacity-10"></div>
<div
class="avatar mr-4 relative w-9 rounded-full overflow-hidden"
>
<div
class="w-9 rounded-full bg-gray-400 absolute opacity-10"
></div>
<div class="w-9 rounded-full">
<img
v-if="logo(v.description?.identity) !== ''"
:src="logo(v.description?.identity)"
v-lazy="logo(v.description?.identity)"
class="object-contain"
/>
<Icon v-else class="text-4xl" :icon="`mdi-help-circle-outline`"/>
<Icon
v-else
class="text-4xl"
:icon="`mdi-help-circle-outline`"
/>
</div>
</div>
@ -281,7 +289,8 @@ const rank = function (position: number) {
:class="change24Color(v.consensus_pubkey)"
>
{{ change24Text(v.consensus_pubkey) }}
<div v-if="v.jailed"
<div
v-if="v.jailed"
class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-error"
>
<span
@ -312,9 +321,7 @@ const rank = function (position: number) {
<div
class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-error mr-2"
>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"
></span>
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"></span>
Top 33%
</div>
<div

5
yarn.lock
View File

@ -5977,6 +5977,11 @@ knitwork@^1.0.0:
resolved "https://registry.npmjs.org/knitwork/-/knitwork-1.0.0.tgz"
integrity sha512-dWl0Dbjm6Xm+kDxhPQJsCBTxrJzuGl0aP9rhr+TG8D3l+GL90N8O8lYUi7dTSAN2uuDqCtNgb6aEuQH5wsiV8Q==
lazy-load-vue3@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/lazy-load-vue3/-/lazy-load-vue3-1.3.0.tgz#6aaf573d1d09626ac11fec6b2de9fd07c0130ac0"
integrity sha512-IcyeMiDZrxzuIqqwkYkC+6RRQBdm0yTR0onIj6NITrWd6LaUlzzRmbvAmuzGB0g4H1HeVm/Oa0FokxD2lz9UAA==
ledger-cosmos-js@^2.1.8:
version "2.1.8"
resolved "https://registry.yarnpkg.com/ledger-cosmos-js/-/ledger-cosmos-js-2.1.8.tgz#b409ecd1e77f630e6fb212a9f602fe5c6e8f054b"