improve portfolio
This commit is contained in:
liangping
parent
4b831a590b
commit
ed92ffe837
@ -258,17 +258,23 @@ export const getMarketPriceChartConfig = (
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// const donutColors = Array.from({length: 19}, () => (`#${Math.floor(Math.random()*16777215+100000).toString(16)}`))
|
||||
const donutColors = ['#c2992c', '#aa1cdb', '#83b0ad', '#bac470', '#cd1bb3', '#f65f30', '#5cfc8a', '#14aced', '#bf725b', '#2e9d9', '#2d5087', '#acfe3e', '#bbf511', '#53cd60', '#5d842d', '#61cd7c', '#c5cf75', '#ad5eb', '#164731']
|
||||
|
||||
export const getDonutChartConfig = (
|
||||
theme: string,
|
||||
labels: string[]
|
||||
) => {
|
||||
const donutColors = {
|
||||
series1: '#fdd835',
|
||||
series2: '#00d4bd',
|
||||
series3: '#826bf8',
|
||||
series4: '#32baff',
|
||||
series5: '#ffa1a1',
|
||||
};
|
||||
// const donutColors = {
|
||||
// series1: '#fdd835',
|
||||
// series2: '#00d4bd',
|
||||
// series3: '#826bf8',
|
||||
// series4: '#32baff',
|
||||
// series5: '#ffa1a1',
|
||||
// };
|
||||
|
||||
console.log(donutColors)
|
||||
|
||||
const { themeSecondaryTextColor, themePrimaryTextColor } =
|
||||
colorVariables(theme);
|
||||
@ -276,12 +282,13 @@ export const getDonutChartConfig = (
|
||||
return {
|
||||
stroke: { width: 0 },
|
||||
labels,
|
||||
colors: [
|
||||
donutColors.series1,
|
||||
donutColors.series5,
|
||||
donutColors.series3,
|
||||
donutColors.series2,
|
||||
],
|
||||
colors: donutColors,
|
||||
// colors: [
|
||||
// donutColors.series1,
|
||||
// donutColors.series5,
|
||||
// donutColors.series3,
|
||||
// donutColors.series2,
|
||||
// ],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: (val: string) => `${parseInt(val, 10)}%`,
|
||||
|
||||
@ -202,7 +202,7 @@ const amount = computed({
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<label class="btn btn-primary px-1 my-5 mr-2" for="calculator">
|
||||
<label class="btn btn-primary !px-1 my-5 mr-2" for="calculator">
|
||||
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect x="4" y="2" width="16" height="20" rx="2"></rect> <line x1="8" x2="16" y1="6" y2="6"></line> <line x1="16" x2="16" y1="14" y2="18"></line> <path d="M16 10h.01"></path> <path d="M12 10h.01"></path> <path d="M8 10h.01"></path> <path d="M12 14h.01"></path> <path d="M8 14h.01"></path> <path d="M12 18h.01"></path> <path d="M8 18h.01"></path> </g></svg>
|
||||
</label>
|
||||
<!-- Put this part before </body> tag -->
|
||||
@ -232,7 +232,7 @@ const amount = computed({
|
||||
</div>
|
||||
<label class="modal-backdrop" for="calculator">Close</label>
|
||||
</div>
|
||||
<a class="my-5 !text-white btn grow" :class="{'btn-success': store.trustColor === 'green', 'btn-warning': store.trustColor === 'yellow'}" :href="ticker.trade_url"
|
||||
<a class="my-5 !text-white btn grow" :class="{'!btn-success': store.trustColor === 'green', '!btn-warning': store.trustColor === 'yellow'}" :href="ticker.trade_url"
|
||||
target="_blank">
|
||||
Buy {{ coinInfo.symbol || '' }}
|
||||
</a>
|
||||
|
||||
@ -27,17 +27,17 @@ scanLocalKeys().forEach((wallet) => {
|
||||
// load balance & delegations
|
||||
if (imported)
|
||||
imported.forEach((x) => {
|
||||
if (x.endpoint) {
|
||||
if (x.endpoint && x.address) {
|
||||
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;
|
||||
if(bal) 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;
|
||||
if(res && res.delegation_responses) delegations.value[x.address || ""] = res.delegation_responses;
|
||||
res.delegation_responses.forEach((del) => {
|
||||
tokenMeta.value[del.balance.denom] = x;
|
||||
});
|
||||
@ -98,9 +98,11 @@ const tokenList = computed(() => {
|
||||
});
|
||||
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
|
||||
@ -127,18 +129,22 @@ const tokenList = computed(() => {
|
||||
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 }}
|
||||
Manage all your assets in one page
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex lg:!ml-4 lg:!mt-0"></div>
|
||||
<div class="mt-5 lg:!ml-4 lg:!mt-0 text-right">
|
||||
<div>Total Value</div>
|
||||
<div class="text-success font-bold">${{ format.formatNumber(totalValue, '0,0.[00]') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-base-100">
|
||||
<DonutChart
|
||||
v-if="tokenList"
|
||||
:series="Object.values(tokenValues)"
|
||||
:labels="Object.keys(tokenValues)"
|
||||
:labels="Object.keys(tokenValues).map(x => format.tokenDisplayDenom(x)?.toUpperCase())"
|
||||
/>
|
||||
<div class="overflow-x-auto">
|
||||
<div class="overflow-x-auto mt-4">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -149,25 +155,26 @@ const tokenList = computed(() => {
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(x, index) in tokenList" :key="index">
|
||||
<td class="capitalize">
|
||||
<div class="flex">
|
||||
<td >
|
||||
<div class="flex gap-1 text-xs items-center">
|
||||
<div class="avatar">
|
||||
<div class="mask mask-squircle w-6 h-6 mr-2">
|
||||
<img :src="x.logo" :alt="x.chainName" />
|
||||
</div>
|
||||
</div>
|
||||
{{ x.chainName }}
|
||||
<span class="uppercase font-bold text-lg">{{ format.tokenDisplayDenom(x.denom) }}</span> @
|
||||
<span class="capitalize ">{{ x.chainName }} </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">${{ format.formatNumber(x.value) }}</td>
|
||||
<td class="text-right">${{ format.formatNumber(x.value, '0,0.[00]') }}</td>
|
||||
<td class="text-right">{{ format.percent(x.percentage) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div class="p-4 text-center" v-show="tokenList?.length ===0">
|
||||
No Data
|
||||
<div class="p-4 text-center" v-if="tokenList.length === 0">
|
||||
No Data, <RouterLink to="./account" class="btn btn-link">Import Address</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -142,6 +142,30 @@ export const useFormatter = defineStore('formatter', {
|
||||
}
|
||||
return null
|
||||
},
|
||||
tokenDisplayDenom(denom?: string) {
|
||||
if (denom) {
|
||||
if (denom && denom.startsWith('ibc/')) {
|
||||
let ibcDenom = this.ibcDenoms[denom.replace('ibc/', '')];
|
||||
if (ibcDenom) {
|
||||
denom = ibcDenom.base_denom;
|
||||
}
|
||||
}
|
||||
|
||||
const conf = this.findGlobalAssetConfig(denom)
|
||||
|
||||
if (conf) {
|
||||
let unit = { exponent: 6, denom: '' };
|
||||
// find the max exponent for display
|
||||
conf.denom_units.forEach((x) => {
|
||||
if (x.exponent >= unit.exponent) {
|
||||
unit = x;
|
||||
}
|
||||
});
|
||||
return unit.denom;
|
||||
}
|
||||
return denom;
|
||||
}
|
||||
},
|
||||
tokenDisplayNumber(
|
||||
token?: { denom: string; amount: string },
|
||||
mode = 'all'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user