forked from cerc-io/cosmos-explorer
feat: h5 style
This commit is contained in:
Alisa | Side.one
parent
ee27d61e1e
commit
a57e8e62f6
@ -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) => {
|
||||
// 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<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,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;
|
||||
});
|
||||
}
|
||||
|
||||
</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="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">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>
|
||||
<div class="mt-5 flex lg:!ml-4 lg:!mt-0"></div>
|
||||
</div>
|
||||
|
||||
<table class="table table-compact w-full">
|
||||
<!-- head -->
|
||||
<thead class="rounded-none">
|
||||
<tr>
|
||||
<th v-if="editable"></th>
|
||||
<th>Account</th>
|
||||
<th>Delegation</th>
|
||||
<th>Balance</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 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>
|
||||
</td>
|
||||
<td class="px-4">
|
||||
<RouterLink :to="`/${acc.chainName}/account/${acc.address}`">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="avatar">
|
||||
<div class="mask mask-squircle w-8 h-8">
|
||||
<img :src="acc.logo" :alt="acc.address" />
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-compact w-full">
|
||||
<!-- head -->
|
||||
<thead class="rounded-none">
|
||||
<tr>
|
||||
<th v-if="editable"></th>
|
||||
<th>Account</th>
|
||||
<th>Delegation</th>
|
||||
<th>Balance</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 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>
|
||||
</td>
|
||||
<td class="px-4">
|
||||
<RouterLink :to="`/${acc.chainName}/account/${acc.address}`">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="avatar">
|
||||
<div class="mask mask-squircle w-8 h-8">
|
||||
<img :src="acc.logo" :alt="acc.address" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold capitalize">
|
||||
{{ acc.chainName }}
|
||||
</div>
|
||||
<div class="text-sm opacity-50 hidden md:!block">
|
||||
{{ acc.address }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold capitalize">{{ acc.chainName }}</div>
|
||||
<div class="text-sm opacity-50 hidden md:!block">{{ acc.address }}</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<th>
|
||||
<button class="btn btn-ghost btn-xs hidden">details</button>
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<th colspan="10">
|
||||
<div class="flex justify-between">
|
||||
<span class="hidden sm:!block">
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
Import
|
||||
</a>
|
||||
</span>
|
||||
<RouterLink to="/wallet/keplr" class="btn btn-sm">
|
||||
Add chain to Keplr
|
||||
</RouterLink>
|
||||
</div>
|
||||
</td>
|
||||
<th>
|
||||
<button class="btn btn-ghost btn-xs hidden">details</button>
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<th colspan="10">
|
||||
<div class="flex justify-between">
|
||||
<span class="hidden sm:!block">
|
||||
<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">
|
||||
<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" />
|
||||
</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">
|
||||
<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" />
|
||||
<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" />
|
||||
</svg>
|
||||
Import
|
||||
</a>
|
||||
</span>
|
||||
<RouterLink to="/wallet/keplr" class="btn btn-sm"> Add chain to Keplr </RouterLink>
|
||||
</div>
|
||||
</th>
|
||||
</tfoot>
|
||||
</table>
|
||||
</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>
|
||||
<span class="overflow-hidden">{{ source.cosmosAddress }}</span>
|
||||
</option>
|
||||
</select>
|
||||
</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>
|
||||
|
||||
@ -8,137 +8,167 @@ 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 (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
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
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 tokenValues = computed(() => {
|
||||
const values = {} as Record<string, number>
|
||||
Object.values(balances.value).forEach(b => {
|
||||
b.forEach(coin => {
|
||||
const v = format.tokenValueNumber(coin)
|
||||
if(v) {
|
||||
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)
|
||||
if(v) {
|
||||
});
|
||||
});
|
||||
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="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)"/>
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Token</th>
|
||||
<th class="text-right">Value</th>
|
||||
<th class="text-right">Percent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="x in tokenList">
|
||||
<td class="capitalize">
|
||||
<div class="flex">
|
||||
<div class="avatar">
|
||||
<div class="mask mask-squircle w-6 h-6 mr-2">
|
||||
<img :src="x.logo" :alt="x.chainName" />
|
||||
<DonutChart
|
||||
:series="Object.values(tokenValues)"
|
||||
:labels="Object.keys(tokenValues)"
|
||||
/>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Token</th>
|
||||
<th class="text-right">Value</th>
|
||||
<th class="text-right">Percent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(x, index) in tokenList" :key="index">
|
||||
<td class="capitalize">
|
||||
<div class="flex">
|
||||
<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 }}
|
||||
</div>
|
||||
{{ x.chainName }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">${{ format.formatNumber(x.value) }}</td>
|
||||
<td class="text-right">{{ format.percent(x.percentage) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td class="text-right">${{ format.formatNumber(x.value) }}</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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user