diff --git a/src/components/charts/DonutChart.vue b/src/components/charts/DonutChart.vue index 3907848b..83572dc2 100644 --- a/src/components/charts/DonutChart.vue +++ b/src/components/charts/DonutChart.vue @@ -10,7 +10,7 @@ const baseStore = useBaseStore(); const expenseRationChartConfig = computed(() => { const theme = baseStore.theme; - getDonutChartConfig(theme, props.labels); + getDonutChartConfig(theme, props?.labels); }); diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue index 4b11ce00..70fc1535 100644 --- a/src/layouts/components/DefaultLayout.vue +++ b/src/layouts/components/DefaultLayout.vue @@ -152,7 +152,7 @@ const showDiscord = window.location.host.search('ping.pub') > -1; :to="item?.to" v-if="item?.title && !item?.children?.length && item?.to" @click="sidebarShow = false" - class=" cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]" + class="cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]" > -1; import { useBaseStore, useBlockchain, useWalletStore } from '@/stores'; import { Icon } from '@iconify/vue'; -import { ref, computed, } from 'vue'; +import { ref, computed } from 'vue'; const walletStore = useWalletStore(); const chainStore = useBlockchain(); @@ -38,7 +38,7 @@ const tipMsg = computed(() => {
Accounts Portfolio
Disconnect @@ -91,14 +91,14 @@ const tipMsg = computed(() => {
-
+
{{ tipMsg.msg }}
-
+
{{ tipMsg.msg }}
diff --git a/src/layouts/components/NavFooter.vue b/src/layouts/components/NavFooter.vue index d2ce34b2..b9f4a4b3 100644 --- a/src/layouts/components/NavFooter.vue +++ b/src/layouts/components/NavFooter.vue @@ -1,5 +1,8 @@ - diff --git a/src/modules/[chain]/account/[address].vue b/src/modules/[chain]/account/[address].vue index f3687a17..5bba75e8 100644 --- a/src/modules/[chain]/account/[address].vue +++ b/src/modules/[chain]/account/[address].vue @@ -164,7 +164,9 @@ loadAccount(props.address);
{{ format.formatToken(balanceItem) }}
-
≈${{ 0 }}
+
+ ≈${{ format.tokenValue(balanceItem) }} +
{{ format.formatToken(delegationItem?.balance) }}
-
≈${{ 0 }}
+
+ ≈${{ format.tokenValue(delegationItem?.balance) }} +
{{ format.formatToken(rewardItem) }}
-
≈${{ 0 }}
+
≈${{ format.tokenValue(rewardItem) }}
-
≈${{ 0 }}
+
+ ≈${{ + format.tokenValue({ + amount: String(unbondingTotal), + denom: stakingStore.params.bond_denom, + }) + }} +
Withdraw
-
+
@@ -460,8 +471,8 @@ loadAccount(props.address);
- {{ v.txhash }} - + {{ v.txhash }} +
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue index d26249e0..5dc4ad98 100644 --- a/src/modules/[chain]/index.vue +++ b/src/modules/[chain]/index.vue @@ -216,8 +216,9 @@ const color = computed(() => {
-
- {{ walletStore.currentAddress || 'Not Connected' }} +
+ {{ walletStore.currentAddress || 'Not Connected' }} + More diff --git a/src/modules/[chain]/uptime/index.vue b/src/modules/[chain]/uptime/index.vue index 8f4678a5..ca1bb420 100644 --- a/src/modules/[chain]/uptime/index.vue +++ b/src/modules/[chain]/uptime/index.vue @@ -2,10 +2,10 @@ import { ref, onMounted, computed, onUnmounted } from 'vue'; import { fromHex, toBase64 } from '@cosmjs/encoding'; import { - useFormatter, - useStakingStore, - useBaseStore, - useBlockchain, + useFormatter, + useStakingStore, + useBaseStore, + useBlockchain, } from '@/stores'; import UptimeBar from '@/components/UptimeBar.vue'; import type { Commit, SlashingParam, SigningInfo } from '@/types'; @@ -21,185 +21,242 @@ const latest = ref(0); const commits = ref([] as Commit[]); const keyword = ref(''); const live = ref(true); -const slashingParam = ref({} as SlashingParam) +const slashingParam = ref({} as SlashingParam); const signingInfo = ref({} as Record); -const filterOptout = ref(false) +const filterOptout = ref(false); // filter validators by keywords const validators = computed(() => { - if (keyword) - return stakingStore.validators.filter( - (x) => x.description.moniker.indexOf(keyword.value) > -1 - ); - return stakingStore.validators; + if (keyword) + return stakingStore.validators.filter( + (x) => x.description.moniker.indexOf(keyword.value) > -1 + ); + return stakingStore.validators; }); const list = computed(() => { - const window = Number(slashingParam.value.signed_blocks_window || 0) - const vset = validators.value.map(v => { - const signing = signingInfo.value[consensusPubkeyToHexAddress(v.consensus_pubkey)] - return { - v, - signing, - hex: toBase64(fromHex(consensusPubkeyToHexAddress(v.consensus_pubkey))), - uptime: signing && window > 0 ? (window - Number(signing.missed_blocks_counter)) / window : undefined - } - }) - return filterOptout.value ? vset.filter(x => x.signing) : vset -}) + const window = Number(slashingParam.value.signed_blocks_window || 0); + const vset = validators.value.map((v) => { + const signing = + signingInfo.value[consensusPubkeyToHexAddress(v.consensus_pubkey)]; + return { + v, + signing, + hex: toBase64(fromHex(consensusPubkeyToHexAddress(v.consensus_pubkey))), + uptime: + signing && window > 0 + ? (window - Number(signing.missed_blocks_counter)) / window + : undefined, + }; + }); + return filterOptout.value ? vset.filter((x) => x.signing) : vset; +}); onMounted(() => { - live.value = true; + live.value = true; - baseStore.fetchLatest().then(l => { - let b = l - if (baseStore.recents?.findIndex(x => x.block_id.hash === l.block_id.hash) > -1) { - b = baseStore.recents?.at(0) || l - } - latest.value = Number(b.block.header.height); - commits.value.unshift(b.block.last_commit); - const height = Number(b.block.header?.height || 0); - if (height > 50) { - // constructs sequence for loading blocks - let promise = Promise.resolve(); - for (let i = height - 1; i > height - 50; i -= 1) { - promise = promise.then( - () => - new Promise((resolve, reject) => { - if (live.value && commits2.value.length < 50) { - // continue only if the page is living - baseStore.fetchBlock(i).then((x) => { - commits.value.unshift(x.block.last_commit); - resolve(); - }); - } - }) - ); - } - } + baseStore.fetchLatest().then((l) => { + let b = l; + if ( + baseStore.recents?.findIndex((x) => x.block_id.hash === l.block_id.hash) > + -1 + ) { + b = baseStore.recents?.at(0) || l; + } + latest.value = Number(b.block.header.height); + commits.value.unshift(b.block.last_commit); + const height = Number(b.block.header?.height || 0); + if (height > 50) { + // constructs sequence for loading blocks + let promise = Promise.resolve(); + for (let i = height - 1; i > height - 50; i -= 1) { + promise = promise.then( + () => + new Promise((resolve, reject) => { + if (live.value && commits2.value.length < 50) { + // continue only if the page is living + baseStore.fetchBlock(i).then((x) => { + commits.value.unshift(x.block.last_commit); + resolve(); + }); + } + }) + ); + } + } + }); + + chainStore.rpc.getSlashingSigningInfos().then((x) => { + x.info?.forEach((i) => { + signingInfo.value[valconsToBase64(i.address)] = i; }); + }); - chainStore.rpc.getSlashingSigningInfos().then((x) => { - x.info?.forEach((i) => { - signingInfo.value[valconsToBase64(i.address)] = i; - }); - }); - - chainStore.rpc.getSlashingParams().then(x => { - slashingParam.value = x.params - }) + chainStore.rpc.getSlashingParams().then((x) => { + slashingParam.value = x.params; + }); }); const commits2 = computed(() => { - const la = baseStore.recents.map(b => b.block.last_commit) - const all = [...commits.value, ...la] - return all.length > 50 ? all.slice(all.length - 50) : all -}) + const la = baseStore.recents.map((b) => b.block.last_commit); + const all = [...commits.value, ...la]; + return all.length > 50 ? all.slice(all.length - 50) : all; +}); onUnmounted(() => { - live.value = false; + live.value = false; }); //const tab = ref(window.location.hash.search("block")>-1?"2":"3") -const tab = ref("2") +const tab = ref('2'); function changeTab(v: string) { - tab.value = v + tab.value = v; } { @@ -210,6 +267,8 @@ function changeTab(v: string) { } - + diff --git a/src/modules/[chain]/widget/index.vue b/src/modules/[chain]/widget/index.vue index 41557b84..d728df97 100644 --- a/src/modules/[chain]/widget/index.vue +++ b/src/modules/[chain]/widget/index.vue @@ -20,7 +20,7 @@ const hdPath = computed(() => {

Initial Setting

-
+
Endpoint diff --git a/src/modules/wallet/accounts.vue b/src/modules/wallet/accounts.vue index 73ffe9ee..a375cee0 100644 --- a/src/modules/wallet/accounts.vue +++ b/src/modules/wallet/accounts.vue @@ -6,132 +6,155 @@ import { fromBech32, toBase64, toBech32, toHex } from '@cosmjs/encoding'; import { Icon } from '@iconify/vue'; import { computed } from 'vue'; import { ref } from 'vue'; -import { scanLocalKeys, type AccountEntry, scanCompatibleAccounts, type LocalKey } from './utils'; +import { + scanLocalKeys, + type AccountEntry, + scanCompatibleAccounts, + type LocalKey, +} from './utils'; -const dashboard = useDashboard() -const format = useFormatter() -const editable = ref(false) // to edit addresses -const sourceAddress = ref('') // -const selectedSource = ref({} as LocalKey) // +const dashboard = useDashboard(); +const format = useFormatter(); +const editable = ref(false); // to edit addresses +const sourceAddress = ref(''); // +const selectedSource = ref({} as LocalKey); // function toggleEdit() { - editable.value = !editable.value + editable.value = !editable.value; } -const conf = ref(JSON.parse(localStorage.getItem("imported-addresses") || "{}") as Record) -const balances = ref({} as Record) -const delegations = ref({} as Record) +const conf = ref( + JSON.parse(localStorage.getItem('imported-addresses') || '{}') as Record< + string, + AccountEntry[] + > +); +const balances = ref({} as Record); +const delegations = ref({} as Record); // load balances -Object.values(conf.value).forEach(imported => { - let promise = Promise.resolve() +Object.values(conf.value).forEach((imported) => { + let promise = Promise.resolve(); for (let i = 0; i < imported.length; i++) { - promise = promise.then(() => new Promise((resolve) => { - // continue only if the page is living - if (imported[i].endpoint) { - loadBalances(imported[i].endpoint || "", imported[i].address).finally(() => resolve()) - } else { - resolve() - } - })) + promise = promise.then( + () => + new Promise((resolve) => { + // continue only if the page is living + if (imported[i].endpoint) { + loadBalances( + imported[i].endpoint || '', + imported[i].address + ).finally(() => resolve()); + } else { + resolve(); + } + }) + ); } - -}) +}); const accounts = computed(() => { - let a = [] as AccountEntry[] - Object.values(conf.value).forEach(x => { - x.forEach(entry => { - const delegation = delegations.value[entry.address] + let a = [] as AccountEntry[]; + Object.values(conf.value).forEach((x) => { + x.forEach((entry) => { + const delegation = delegations.value[entry.address]; if (delegation && delegation.length > 0) { - let amount = 0 - let denom = "" - delegation.forEach(b => { - amount += Number(b.balance.amount) - denom = b.balance.denom - }) - entry.delegation = { amount: String(amount), denom } + let amount = 0; + let denom = ''; + delegation.forEach((b) => { + amount += Number(b.balance.amount); + denom = b.balance.denom; + }); + entry.delegation = { amount: String(amount), denom }; } else { - entry.delegation = undefined + entry.delegation = undefined; } - entry.balances = balances.value[entry.address] - }) - a = a.concat(x) - }) - return a -}) + entry.balances = balances.value[entry.address]; + }); + a = a.concat(x); + }); + return a; +}); const addresses = computed(() => { - return accounts.value.map(x => (x.address)) -}) + return accounts.value.map((x) => x.address); +}); const sourceOptions = computed(() => { // scan all connected wallet - const keys = scanLocalKeys() + const keys = scanLocalKeys(); // all existed keys - Object.values(conf.value).forEach(x => { - const [first] = x + Object.values(conf.value).forEach((x) => { + const [first] = x; if (first) { - const { data } = fromBech32(first.address) - const hex = toHex(data) - if (keys.findIndex(k => toHex(fromBech32(k.cosmosAddress).data) === hex) === -1) { + const { data } = fromBech32(first.address); + const hex = toHex(data); + if ( + keys.findIndex( + (k) => toHex(fromBech32(k.cosmosAddress).data) === hex + ) === -1 + ) { keys.push({ cosmosAddress: first.address, - hdPath: `m/44/${first.coinType}/0'/0/0` - }) + hdPath: `m/44/${first.coinType}/0'/0/0`, + }); } } - }) + }); // address if (sourceAddress.value) { - const { prefix, data } = fromBech32(sourceAddress.value) - const chain = Object.values(dashboard.chains).find(x => x.bech32Prefix === prefix) + const { prefix, data } = fromBech32(sourceAddress.value); + const chain = Object.values(dashboard.chains).find( + (x) => x.bech32Prefix === prefix + ); if (chain) { keys.push({ cosmosAddress: sourceAddress.value, - hdPath: `m/44/${chain.coinType}/0'/0/0` - }) + hdPath: `m/44/${chain.coinType}/0'/0/0`, + }); } } if (!selectedSource.value.cosmosAddress && keys.length > 0) { - selectedSource.value = keys[0] + selectedSource.value = keys[0]; } - return keys -}) + return keys; +}); const availableAccount = computed(() => { if (selectedSource.value.cosmosAddress) { - return scanCompatibleAccounts([selectedSource.value]).filter(x => !addresses.value.includes(x.address)) + return scanCompatibleAccounts([selectedSource.value]).filter( + (x) => !addresses.value.includes(x.address) + ); } - return [] -}) + return []; +}); function removeAddress(addr: string) { - const newConf = {} as Record - Object.keys(conf.value).forEach(key => { - const acc = conf.value[key].filter(x => x.address !== addr) - if (acc.length > 0) newConf[key] = acc - }) - conf.value = newConf - localStorage.setItem("imported-addresses", JSON.stringify(conf.value)) + const newConf = {} as Record; + Object.keys(conf.value).forEach((key) => { + const acc = conf.value[key].filter((x) => x.address !== addr); + if (acc.length > 0) newConf[key] = acc; + }); + conf.value = newConf; + localStorage.setItem('imported-addresses', JSON.stringify(conf.value)); } async function addAddress(acc: AccountEntry) { - const { data } = fromBech32(acc.address) - const key = toBase64(data) + const { data } = fromBech32(acc.address); + const key = toBase64(data); if (conf.value[key]) { // existed - if (conf.value[key].findIndex(x => x.address === acc.address) > -1) { - return + if (conf.value[key].findIndex((x) => x.address === acc.address) > -1) { + return; } - conf.value[key].push(acc) + conf.value[key].push(acc); } else { - conf.value[key] = [acc] + conf.value[key] = [acc]; } // also add chain to favorite if (!dashboard?.favoriteMap?.[acc.chainName]) { - dashboard.favoriteMap[acc.chainName] = true + dashboard.favoriteMap[acc.chainName] = true; window.localStorage.setItem( 'favoriteMap', JSON.stringify(dashboard.favoriteMap) @@ -139,153 +162,209 @@ async function addAddress(acc: AccountEntry) { } if (acc.endpoint) { - loadBalances(acc.endpoint, acc.address) + loadBalances(acc.endpoint, acc.address); } - localStorage.setItem("imported-addresses", JSON.stringify(conf.value)) + localStorage.setItem('imported-addresses', JSON.stringify(conf.value)); } async function loadBalances(endpoint: string, address: string) { - const client = CosmosRestClient.newDefault(endpoint) - await client.getBankBalances(address).then(res => { - balances.value[address] = res.balances.filter(x => x.denom.length < 10) - }) - await client.getStakingDelegations(address).then(res => { - delegations.value[address] = res.delegation_responses - }) + const client = CosmosRestClient.newDefault(endpoint); + await client.getBankBalances(address).then((res) => { + balances.value[address] = res.balances.filter((x) => x.denom.length < 10); + }); + await client.getStakingDelegations(address).then((res) => { + delegations.value[address] = res.delegation_responses; + }); } -