zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

Merge pull request #408 from alisaweb3/v3-single

Browse Source 
H5 styles: Footer fixed, Uptime flex, overflow, Wallet show, account
This commit is contained in:
ping 2023-05-30 08:59:11 +08:00 committed by GitHub
commit 60744cf7e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 661 additions and 465 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/charts/DonutChart.vue
View File

@ -10,7 +10,7 @@ const baseStore = useBaseStore();
const expenseRationChartConfig = computed(() => {
const theme = baseStore.theme;
getDonutChartConfig(theme, props.labels);
getDonutChartConfig(theme, props?.labels);
});
</script>

16
src/layouts/components/NavBarWallet.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
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(() => {
<div class="dropdown dropdown-hover dropdown-end">
<label
tabindex="0"
class="btn btn-sm btn-primary m-1 lowercase hidden truncate md:!inline-flex text-xs md:!text-sm"
class="btn btn-sm btn-primary m-1 lowercase truncate !inline-flex text-xs md:!text-sm"
>
<Icon icon="mdi:wallet" />
<span class="ml-1 hidden md:block">
@ -47,7 +47,7 @@ const tipMsg = computed(() => {
</label>
<div
tabindex="0"
class="dropdown-content menu shadow p-2 bg-base-100 rounded w-64 overflow-auto"
class="dropdown-content menu shadow p-2 bg-base-100 rounded w-52 md:!w-64 overflow-auto"
>
<label
v-if="!walletStore?.currentAddress"
@ -71,19 +71,19 @@ const tipMsg = computed(() => {
</a>
<div class="divider mt-1 mb-1"></div>
<RouterLink
class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
class="block py-1 px-1 md:!py-2 md:!px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
to="/wallet/accounts"
>Accounts</RouterLink
>
<RouterLink
class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
class="block py-1 px-1 md:!py-2 md:!px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
to="/wallet/portfolio"
>Portfolio</RouterLink
>
<div v-if="walletStore.currentAddress" class="divider mt-1 mb-1"></div>
<a
v-if="walletStore.currentAddress"
class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
class="py-1 px-1 block md:!py-2 md:!px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
@click="walletStore.disconnect()"
>Disconnect</a
>
@ -91,14 +91,14 @@ const tipMsg = computed(() => {
</div>
<div class="toast" v-show="showCopyToast === 1">
<div class="alert alert-success">
<div class="text-sm">
<div class="text-xs md:!text-sm">
<span>{{ tipMsg.msg }}</span>
</div>
</div>
</div>
<div class="toast" v-show="showCopyToast === 2">
<div class="alert alert-error">
<div class="text-sm">
<div class="text-xs md:!text-sm">
<span>{{ tipMsg.msg }}</span>
</div>
</div>

7
src/layouts/components/NavFooter.vue
View File

@ -1,5 +1,8 @@
<template>
<footer class="footer items-center p-4 text-sm mb-4">
<div class="h-10 bg-gray-100 dark:bg-[#171d30] w-full"></div>
<footer
class="footer items-center h-10 text-sm bg-gray-100 dark:bg-[#171d30] fixed bottom-0 pr-14 pl-4 z-10"
>
<div class="items-center grid-flow-col">
&copy;
{{ new Date().getFullYear() }}
@ -31,6 +34,4 @@
>
</div>
</footer>
</template>

21
src/modules/[chain]/account/[address].vue
View File

@ -164,7 +164,9 @@ loadAccount(props.address);
<div class="text-sm font-semibold">
{{ format.formatToken(balanceItem) }}
</div>
<div class="text-xs">≈${{ 0 }}</div>
<div class="text-xs">
≈${{ format.tokenValue(balanceItem) }}
</div>
</div>
<div
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary mr-2"
@ -193,7 +195,9 @@ loadAccount(props.address);
<div class="text-sm font-semibold">
{{ format.formatToken(delegationItem?.balance) }}
</div>
<div class="text-xs">≈${{ 0 }}</div>
<div class="text-xs">
≈${{ format.tokenValue(delegationItem?.balance) }}
</div>
</div>
<div
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary mr-2"
@ -231,7 +235,7 @@ loadAccount(props.address);
<div class="text-sm font-semibold">
{{ format.formatToken(rewardItem) }}
</div>
<div class="text-xs">≈${{ 0 }}</div>
<div class="text-xs">≈${{ format.tokenValue(rewardItem) }}</div>
</div>
<div
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary mr-2"
@ -265,7 +269,14 @@ loadAccount(props.address);
})
}}
</div>
<div class="text-xs">≈${{ 0 }}</div>
<div class="text-xs">
≈${{
format.tokenValue({
amount: String(unbondingTotal),
denom: stakingStore.params.bond_denom,
})
}}
</div>
</div>
<div
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary mr-2"
@ -301,7 +312,7 @@ loadAccount(props.address);
>Withdraw</label
>
</div>
<div class="overdflow-x-auto">
<div class="overflow-x-auto">
<table class="table w-full text-sm table-zebra">
<thead>
<tr>

5
src/modules/[chain]/index.vue
View File

@ -216,8 +216,9 @@ const color = computed(() => {
</div>
<div class="bg-base-100 rounded mt-4 shadow">
<div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
{{ walletStore.currentAddress || 'Not Connected' }}
<div class="flex items-center px-4 pt-4 pb-2 text-lg font-semibold text-main">
<span class="truncate" >{{ walletStore.currentAddress || 'Not Connected' }}</span>
<RouterLink v-if="walletStore.currentAddress"
class="float-right text-sm cursor-pointert link link-primary no-underline font-medium"
:to="`/${chain}/account/${walletStore.currentAddress}`">More</RouterLink>

169
src/modules/[chain]/uptime/index.vue
View File

@ -21,11 +21,11 @@ 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<string, SigningInfo>);
const filterOptout = ref(false)
const filterOptout = ref(false);
// filter validators by keywords
const validators = computed(() => {
if (keyword)
@ -36,26 +36,33 @@ const validators = computed(() => {
});
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)]
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
})
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;
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
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);
@ -86,35 +93,43 @@ onMounted(() => {
});
});
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;
});
//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;
}
</script>
<template>
<div>
<div class="tabs tabs-boxed bg-transparent mb-4">
<a class="tab text-gray-400 capitalize" :class="{ 'tab-active': tab === '3' }"
@click="changeTab('3')">Overall</a>
<a class="tab text-gray-400 capitalize" :class="{ 'tab-active': tab === '2' }"
@click="changeTab('2')">Blocks</a>
<a
class="tab text-gray-400 capitalize"
:class="{ 'tab-active': tab === '3' }"
@click="changeTab('3')"
>Overall</a
>
<a
class="tab text-gray-400 capitalize"
:class="{ 'tab-active': tab === '2' }"
@click="changeTab('2')"
>Blocks</a
>
<RouterLink :to="`/${chain}/uptime/customize`">
<a class="tab text-gray-400 capitalize">Customize</a>
</RouterLink>
@ -125,20 +140,35 @@ function changeTab(v: string) {
<input type="checkbox" v-model="filterOptout" class="checkbox" />
Only Consumer Set
</label>
<input type="text" v-model="keyword" placeholder="Keywords to filter validators"
class="input input-sm w-full flex-1 border border-gray-200 dark:border-gray-600" />
<input
type="text"
v-model="keyword"
placeholder="Keywords to filter validators"
class="input input-sm w-full flex-1 border border-gray-200 dark:border-gray-600"
/>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 mt-4" :class="tab === '2' ? '' : 'hidden'">
<!-- grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 mt-4 -->
<div
class="flex flex-row flex-wrap gap-x-4 mt-4"
:class="tab === '2' ? '' : 'hidden'"
>
<div v-for="({ v, signing, hex }, i) in list" :key="i">
<div class="flex items-center justify-between py-0">
<div class="flex items-center justify-between py-0 w-72">
<label class="truncate text-sm">
<span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
<span class="ml-1 text-black dark:text-white"
>{{ i + 1 }}.{{ v.description.moniker }}</span
>
</label>
<div v-if="Number(signing?.missed_blocks_counter || 0) > 10"
class="badge badge-sm bg-transparent border-0 text-red-500">
<div
v-if="Number(signing?.missed_blocks_counter || 0) > 10"
class="badge badge-sm bg-transparent border-0 text-red-500"
>
{{ signing?.missed_blocks_counter }}
</div>
<div v-else class="badge badge-sm bg-transparent text-green-600 border-0">
<div
v-else
class="badge badge-sm bg-transparent text-green-600 border-0"
>
{{ signing?.missed_blocks_counter }}
</div>
</div>
@ -160,25 +190,47 @@ function changeTab(v: string) {
</thead>
<tr v-for="({ v, signing, uptime }, i) in list" class="hover">
<td>
<div class="truncate max-w-sm">{{ i + 1 }}. {{ v.description.moniker }}</div>
<div class="truncate max-w-sm">
{{ i + 1 }}. {{ v.description.moniker }}
</div>
</td>
<td class="text-right">
<span v-if="signing" class=""
:class="uptime && uptime > 0.95 ? 'text-green-500' : 'text-red-500'">
<div class="tooltip" :data-tip="`${signing.missed_blocks_counter} missing blocks`"> {{
format.percent(uptime) }} </div>
<span
v-if="signing"
class=""
:class="
uptime && uptime > 0.95 ? 'text-green-500' : 'text-red-500'
"
>
<div
class="tooltip"
:data-tip="`${signing.missed_blocks_counter} missing blocks`"
>
{{ format.percent(uptime) }}
</div>
</span>
</td>
<td><span v-if="signing && !signing.jailed_until.startsWith('1970')">
<div class="tooltip" :data-tip="format.toDay(signing?.jailed_until, 'long')">
<span>{{ format.toDay(signing?.jailed_until, "from") }}</span>
<td>
<span v-if="signing && !signing.jailed_until.startsWith('1970')">
<div
class="tooltip"
:data-tip="format.toDay(signing?.jailed_until, 'long')"
>
<span>{{ format.toDay(signing?.jailed_until, 'from') }}</span>
</div>
</span></td>
</span>
</td>
<td class="text-xs text-right">
<span v-if="signing && signing.jailed_until.startsWith('1970')" class="text-right">{{
format.percent(Number(signing.index_offset) / (latest - Number(signing.start_height)))
}}</span>
<span
v-if="signing && signing.jailed_until.startsWith('1970')"
class="text-right"
>{{
format.percent(
Number(signing.index_offset) /
(latest - Number(signing.start_height))
)
}}</span
>
{{ signing?.index_offset }}
</td>
<td class="text-right">{{ signing?.start_height }}</td>
@ -186,11 +238,16 @@ function changeTab(v: string) {
</tr>
<tfoot>
<tr>
<td colspan="2" class="text-right"> Minimum uptime per window: <span class="lowercase tooltip"
:data-tip="`Window size: ${slashingParam.signed_blocks_window}`"><span
class="ml-2 btn btn-error btn-xs">{{
format.percent(slashingParam.min_signed_per_window) }}</span>
</span></td>
<td colspan="2" class="text-right">
Minimum uptime per window:
<span
class="lowercase tooltip"
:data-tip="`Window size: ${slashingParam.signed_blocks_window}`"
><span class="ml-2 btn btn-error btn-xs">{{
format.percent(slashingParam.min_signed_per_window)
}}</span>
</span>
</td>
<td colspan="8"></td>
</tr>
</tfoot>
@ -210,6 +267,8 @@ function changeTab(v: string) {
}
</route>
<style lang="scss">.v-field--variant-outlined .v-field__outline__notch {
<style lang="scss">
.v-field--variant-outlined .v-field__outline__notch {
border-width: 0 !important;
}</style>
}
</style>

2
src/modules/[chain]/widget/index.vue
View File

@ -20,7 +20,7 @@ const hdPath = computed(() => {
<div>
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
<h2 class="card-title">Initial Setting</h2>
<div class="my-4 grid grid-flow-col auto-cols-max ">
<div class="my-4 grid grid-flow-col auto-cols-max overflow-auto">
<div class="form-control">
<div class="input-group">
<span>Endpoint</span>

344
src/modules/wallet/accounts.vue
View File

@ -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<string, AccountEntry[]>)
const balances = ref({} as Record<string, Coin[]>)
const delegations = ref({} as Record<string, Delegation[]>)
const conf = ref(
JSON.parse(localStorage.getItem('imported-addresses') || '{}') as Record<
string,
AccountEntry[]
>
);
const balances = ref({} as Record<string, Coin[]>);
const delegations = ref({} as Record<string, Delegation[]>);
// 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) => {
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())
loadBalances(
imported[i].endpoint || '',
imported[i].address
).finally(() => resolve());
} else {
resolve()
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<string, AccountEntry[]>
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<string, AccountEntry[]>;
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,48 +162,60 @@ 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;
});
}
</script>
<template>
<div>
<div class="overflow-x-auto w-full card">
<div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
<div
class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5"
>
<div class="min-w-0 flex-1">
<h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">Accounts</h2>
<div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
<h2
class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight"
>
Accounts
</h2>
<div
class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6"
>
<div class="mt-2 flex items-center text-sm text-gray-500">
<svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
clip-rule="evenodd" />
<svg
class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
fill-rule="evenodd"
d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
clip-rule="evenodd"
/>
<path
d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z"
/>
</svg>
Manage all your assets in one page
</div>
</div>
</div>
<div class="mt-5 flex lg:!ml-4 lg:!mt-0">
<div class="mt-5 flex lg:!ml-4 lg:!mt-0"></div>
</div>
</div>
<div class="overflow-x-auto">
<table class="table table-compact w-full">
<!-- head -->
<thead class="rounded-none">
@ -196,7 +231,11 @@ async function loadBalances(endpoint: string, address: string) {
<!-- row 1 -->
<tr v-for="acc in accounts">
<td v-if="editable">
<Icon icon="mdi:close-box" class="text-error" @click="removeAddress(acc.address)"></Icon>
<Icon
icon="mdi:close-box"
class="text-error"
@click="removeAddress(acc.address)"
></Icon>
</td>
<td class="px-4">
<RouterLink :to="`/${acc.chainName}/account/${acc.address}`">
@ -207,25 +246,43 @@ async function loadBalances(endpoint: string, address: string) {
</div>
</div>
<div>
<div class="font-bold capitalize">{{ acc.chainName }}</div>
<div class="text-sm opacity-50 hidden md:!block">{{ acc.address }}</div>
<div class="font-bold capitalize">
{{ acc.chainName }}
</div>
<div class="text-sm opacity-50 hidden md:!block">
{{ acc.address }}
</div>
</div>
</div>
</RouterLink>
</td>
<td>
<div v-if="acc.delegation">
{{ format.formatToken(acc.delegation, true, '0,0.[0000]', 'all') }}
<div class="text-xs" :class="format.priceColor(acc.delegation.denom)">${{
format.tokenValue(acc.delegation) }}</div>
{{
format.formatToken(
acc.delegation,
true,
'0,0.[0000]',
'all'
)
}}
<div
class="text-xs"
:class="format.priceColor(acc.delegation.denom)"
>
${{ format.tokenValue(acc.delegation) }}
</div>
</div>
</td>
<td>
<div class="flex">
<span v-for="b in acc.balances" class="mr-1">
{{ format.formatToken(b, true, '0,0.[0000]', 'all') }}
<div class="text-xs" :class="format.priceColor(b.denom)">${{ format.tokenValue(b) }} ({{
format.showChanges(format.priceChanges(b.denom)) }}%)</div>
<div class="text-xs" :class="format.priceColor(b.denom)">
${{ format.tokenValue(b) }} ({{
format.showChanges(format.priceChanges(b.denom))
}}%)
</div>
</span>
</div>
</td>
@ -238,46 +295,64 @@ async function loadBalances(endpoint: string, address: string) {
<th colspan="10">
<div class="flex justify-between">
<span class="hidden sm:!block">
<button type="button"
<button
type="button"
class="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm"
@click="toggleEdit">
<svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
@click="toggleEdit"
>
<svg
class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z"
/>
</svg>
Edit
</button>
<a href="#address-modal"
class="inline-flex items-center ml-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<a
href="#address-modal"
class="inline-flex items-center ml-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
>
<svg
class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M12.232 4.232a2.5 2.5 0 013.536 3.536l-1.225 1.224a.75.75 0 001.061 1.06l1.224-1.224a4 4 0 00-5.656-5.656l-3 3a4 4 0 00.225 5.865.75.75 0 00.977-1.138 2.5 2.5 0 01-.142-3.667l3-3z" />
d="M12.232 4.232a2.5 2.5 0 013.536 3.536l-1.225 1.224a.75.75 0 001.061 1.06l1.224-1.224a4 4 0 00-5.656-5.656l-3 3a4 4 0 00.225 5.865.75.75 0 00.977-1.138 2.5 2.5 0 01-.142-3.667l3-3z"
/>
<path
d="M11.603 7.963a.75.75 0 00-.977 1.138 2.5 2.5 0 01.142 3.667l-3 3a2.5 2.5 0 01-3.536-3.536l1.225-1.224a.75.75 0 00-1.061-1.06l-1.224 1.224a4 4 0 105.656 5.656l3-3a4 4 0 00-.225-5.865z" />
d="M11.603 7.963a.75.75 0 00-.977 1.138 2.5 2.5 0 01.142 3.667l-3 3a2.5 2.5 0 01-3.536-3.536l1.225-1.224a.75.75 0 00-1.061-1.06l-1.224 1.224a4 4 0 105.656 5.656l3-3a4 4 0 00-.225-5.865z"
/>
</svg>
Import
</a>
</span>
<RouterLink to="/wallet/keplr" class="btn btn-sm"> Add chain to Keplr </RouterLink>
<RouterLink to="/wallet/keplr" class="btn btn-sm">
Add chain to Keplr
</RouterLink>
</div>
</th>
</tfoot>
</table>
</div>
</div>
<!-- Put this part before </body> tag -->
<div class="modal" id="address-modal">
<div class="modal-box">
<h3 class="font-bold text-lg mb-2">Derive Account From Address
</h3>
<h3 class="font-bold text-lg mb-2">Derive Account From Address</h3>
<div>
<label class="input-group input-group-sm w-full">
<span>Connected</span>
<select v-model="selectedSource" class="select select-bordered select-sm w-3/4">
<select
v-model="selectedSource"
class="select select-bordered select-sm w-3/4"
>
<option v-for="source in sourceOptions" :value="source">
<span class="overflow-hidden">{{ source.cosmosAddress }}</span>
</option>
@ -285,7 +360,11 @@ async function loadBalances(endpoint: string, address: string) {
</label>
<label class="input-group input-group-sm my-2">
<span>Custom</span>
<input v-model="sourceAddress" class="input input-bordered w-full input-sm" placeholder="Input an address" />
<input
v-model="sourceAddress"
class="input input-bordered w-full input-sm"
placeholder="Input an address"
/>
</label>
</div>
<div class="py-4 max-h-72 overflow-y-auto">
@ -299,18 +378,33 @@ async function loadBalances(endpoint: string, address: string) {
</div>
</div>
<div>
<div class="tooltip" :class="acc.compatiable ? 'tooltip-success' : 'tooltip-error'"
:data-tip="`Coin Type: ${acc.coinType}`">
<div class="font-bold capitalize" :class="acc.compatiable ? 'text-green-500' : 'text-red-500'">
<div
class="tooltip"
:class="
acc.compatiable ? 'tooltip-success' : 'tooltip-error'
"
:data-tip="`Coin Type: ${acc.coinType}`"
>
<div
class="font-bold capitalize"
:class="
acc.compatiable ? 'text-green-500' : 'text-red-500'
"
>
{{ acc.chainName }}
</div>
</div>
<div class="text-xs opacity-50 hidden md:!block">{{ acc.address }}</div>
<div class="text-xs opacity-50 hidden md:!block">
{{ acc.address }}
</div>
</div>
</div>
</td>
<td class="text-right">
<span class="btn !bg-yes !border-yes btn-xs text-white" @click="addAddress(acc)">
<span
class="btn !bg-yes !border-yes btn-xs text-white"
@click="addAddress(acc)"
>
<Icon icon="mdi:plus" />
</span>
</td>

164
src/modules/wallet/portfolio.vue
View File

@ -8,112 +8,137 @@ import { computed } from 'vue';
import { useFormatter } from '@/stores';
import DonutChart from '@/components/charts/DonutChart.vue';
const format = useFormatter()
const conf = ref(JSON.parse(localStorage.getItem("imported-addresses") || "{}") as Record<string, AccountEntry[]>)
const balances = ref({} as Record<string, Coin[]>)
const delegations = ref({} as Record<string, Delegation[]>)
const tokenMeta = ref({} as Record<string, AccountEntry>)
const format = useFormatter();
const conf = ref(
JSON.parse(localStorage.getItem('imported-addresses') || '{}') as Record<
string,
AccountEntry[]
>
);
const balances = ref({} as Record<string, Coin[]>);
const delegations = ref({} as Record<string, Delegation[]>);
const tokenMeta = ref({} as Record<string, AccountEntry>);
scanLocalKeys().forEach(wallet => {
const { data } = fromBech32(wallet.cosmosAddress)
const walletKey = toBase64(data)
let imported = conf.value[walletKey]
scanLocalKeys().forEach((wallet) => {
const { data } = fromBech32(wallet.cosmosAddress);
const walletKey = toBase64(data);
let imported = conf.value[walletKey];
// load balance & delegations
if (imported) imported.forEach(x => {
if (imported)
imported.forEach((x) => {
if (x.endpoint) {
const client = CosmosRestClient.newDefault(x.endpoint)
client.getBankBalances(x.address).then(res => {
const bal = res.balances.filter(x => x.denom.length < 10)
balances.value[x.address] = bal
bal.forEach(b => {
tokenMeta.value[b.denom] = x
})
})
client.getStakingDelegations(x.address).then(res => {
delegations.value[x.address] = res.delegation_responses
res.delegation_responses.forEach(del => {
tokenMeta.value[del.balance.denom] = x
})
})
const client = CosmosRestClient.newDefault(x.endpoint);
client.getBankBalances(x.address).then((res) => {
const bal = res.balances.filter((x) => x.denom.length < 10);
balances.value[x.address] = bal;
bal.forEach((b) => {
tokenMeta.value[b.denom] = x;
});
});
client.getStakingDelegations(x.address).then((res) => {
delegations.value[x.address] = res.delegation_responses;
res.delegation_responses.forEach((del) => {
tokenMeta.value[del.balance.denom] = x;
});
});
}
})
})
});
});
const tokenValues = computed(() => {
const values = {} as Record<string, number>
Object.values(balances.value).forEach(b => {
b.forEach(coin => {
const v = format.tokenValueNumber(coin)
const values = {} as Record<string, number>;
Object.values(balances.value).forEach((b) => {
b.forEach((coin) => {
const v = format.tokenValueNumber(coin);
if (v) {
if (values[coin.denom]) {
values[coin.denom] += v
values[coin.denom] += v;
} else {
values[coin.denom] = v
values[coin.denom] = v;
}
}
})
})
Object.values(delegations.value).forEach(b => {
b.forEach(d => {
const v = format.tokenValueNumber(d.balance)
});
});
Object.values(delegations.value).forEach((b) => {
b.forEach((d) => {
const v = format.tokenValueNumber(d.balance);
if (v) {
if (values[d.balance.denom]) {
values[d.balance.denom] += v
values[d.balance.denom] += v;
} else {
values[d.balance.denom] = v
values[d.balance.denom] = v;
}
}
})
})
return values
})
});
});
return values;
});
const totalValue = computed(() => {
return Object.values(tokenValues.value).reduce((a, s) => (a + s), 0)
})
return Object.values(tokenValues.value).reduce((a, s) => a + s, 0);
});
const tokenList = computed(() => {
const list = [] as { denom: string, value: number, logo: string, chainName: string, percentage: number }[]
Object.keys(tokenValues.value).map(x => {
const list = [] as {
denom: string;
value: number;
logo: string;
chainName: string;
percentage: number;
}[];
Object.keys(tokenValues.value).map((x) => {
list.push({
denom: x,
value: tokenValues.value[x],
chainName: tokenMeta.value[x]?.chainName,
logo: tokenMeta.value[x]?.logo,
percentage: tokenValues.value[x] / totalValue.value
})
})
return list.filter(x => x.value > 0).sort((a, b) => b.value - a.value)
})
percentage: tokenValues.value[x] / totalValue.value,
});
});
return list.filter((x) => x.value > 0).sort((a, b) => b.value - a.value);
});
</script>
<template>
<div class="overflow-x-auto w-full card">
<div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
<div class="min-w-0 flex-1">
<h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">Portfolio</h2>
<div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
<h2
class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight"
>
Portfolio
</h2>
<div
class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6"
>
<div class="mt-2 flex items-center text-sm text-gray-500">
<svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
clip-rule="evenodd" />
<svg
class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
fill-rule="evenodd"
d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
clip-rule="evenodd"
/>
<path
d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z"
/>
</svg>
Manage all your assets in one page {{ totalValue }}
</div>
</div>
</div>
<div class="mt-5 flex lg:!ml-4 lg:!mt-0">
</div>
<div class="mt-5 flex lg:!ml-4 lg:!mt-0"></div>
</div>
<div class="bg-base-100">
<DonutChart :series="Object.values(tokenValues)" :labels="Object.keys(tokenValues)"/>
<DonutChart
:series="Object.values(tokenValues)"
:labels="Object.keys(tokenValues)"
/>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
@ -123,7 +148,7 @@ const tokenList = computed(() => {
</tr>
</thead>
<tbody>
<tr v-for="x in tokenList">
<tr v-for="(x, index) in tokenList" :key="index">
<td class="capitalize">
<div class="flex">
<div class="avatar">
@ -139,6 +164,11 @@ const tokenList = computed(() => {
</tr>
</tbody>
</table>
</div>
<div class="p-4 text-center" v-show="tokenList?.length ===0">
No Data
</div>
</div>
</div>
</template>