improve UX
This commit is contained in:
liangping
parent
317ca32a1f
commit
a91339bbeb
@ -24,11 +24,11 @@ const delegations = ref({} as Record<string, Delegation[]>)
|
|||||||
// load balances
|
// load balances
|
||||||
Object.values(conf.value).forEach(imported => {
|
Object.values(conf.value).forEach(imported => {
|
||||||
let promise = Promise.resolve()
|
let promise = Promise.resolve()
|
||||||
for(let i = 0;i < imported.length; i++) {
|
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
|
// continue only if the page is living
|
||||||
if(imported[i].endpoint) {
|
if (imported[i].endpoint) {
|
||||||
loadBalances(imported[i].endpoint || "", imported[i].address).finally(()=> resolve())
|
loadBalances(imported[i].endpoint || "", imported[i].address).finally(() => resolve())
|
||||||
} else {
|
} else {
|
||||||
resolve()
|
resolve()
|
||||||
}
|
}
|
||||||
@ -50,7 +50,7 @@ const accounts = computed(() => {
|
|||||||
denom = b.balance.denom
|
denom = b.balance.denom
|
||||||
})
|
})
|
||||||
entry.delegation = { amount: String(amount), denom }
|
entry.delegation = { amount: String(amount), denom }
|
||||||
}else{
|
} else {
|
||||||
entry.delegation = undefined
|
entry.delegation = undefined
|
||||||
}
|
}
|
||||||
entry.balances = balances.value[entry.address]
|
entry.balances = balances.value[entry.address]
|
||||||
@ -130,7 +130,7 @@ async function addAddress(acc: AccountEntry) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// also add chain to favorite
|
// also add chain to favorite
|
||||||
if(!dashboard?.favoriteMap?.[acc.chainName]) {
|
if (!dashboard?.favoriteMap?.[acc.chainName]) {
|
||||||
dashboard.favoriteMap[acc.chainName] = true
|
dashboard.favoriteMap[acc.chainName] = true
|
||||||
window.localStorage.setItem(
|
window.localStorage.setItem(
|
||||||
'favoriteMap',
|
'favoriteMap',
|
||||||
@ -145,14 +145,14 @@ async function addAddress(acc: AccountEntry) {
|
|||||||
localStorage.setItem("imported-addresses", JSON.stringify(conf.value))
|
localStorage.setItem("imported-addresses", JSON.stringify(conf.value))
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadBalances(endpoint:string, address: string) {
|
async function loadBalances(endpoint: string, address: string) {
|
||||||
const client = CosmosRestClient.newDefault(endpoint)
|
const client = CosmosRestClient.newDefault(endpoint)
|
||||||
await client.getBankBalances(address).then(res => {
|
await client.getBankBalances(address).then(res => {
|
||||||
balances.value[address] = res.balances.filter(x => x.denom.length < 10)
|
balances.value[address] = res.balances.filter(x => x.denom.length < 10)
|
||||||
})
|
})
|
||||||
await client.getStakingDelegations(address).then(res => {
|
await client.getStakingDelegations(address).then(res => {
|
||||||
delegations.value[address] = res.delegation_responses
|
delegations.value[address] = res.delegation_responses
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -177,33 +177,7 @@ async function loadBalances(endpoint:string, address: string) {
|
|||||||
</div>
|
</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">
|
||||||
<span class="hidden sm:!block">
|
|
||||||
<a href="#address-modal"
|
|
||||||
class="inline-flex items-center 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>
|
|
||||||
|
|
||||||
<span class="ml-3 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>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -262,7 +236,33 @@ async function loadBalances(endpoint:string, address: string) {
|
|||||||
</tbody>
|
</tbody>
|
||||||
<tfoot>
|
<tfoot>
|
||||||
<th colspan="10">
|
<th colspan="10">
|
||||||
<RouterLink to="/wallet/keplr"> Add chain to Keplr </RouterLink>
|
<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>
|
</th>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
@ -271,22 +271,21 @@ async function loadBalances(endpoint:string, address: string) {
|
|||||||
<div class="modal" id="address-modal">
|
<div class="modal" id="address-modal">
|
||||||
<div class="modal-box">
|
<div class="modal-box">
|
||||||
<h3 class="font-bold text-lg mb-2">Derive Account From Address
|
<h3 class="font-bold text-lg mb-2">Derive Account From Address
|
||||||
|
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="input-group input-group-sm w-full">
|
<label class="input-group input-group-sm w-full">
|
||||||
<span>Connected</span>
|
<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">
|
<option v-for="source in sourceOptions" :value="source">
|
||||||
<span class=" overflow-hidden">{{ source.cosmosAddress }}</span>
|
<span class=" overflow-hidden">{{ source.cosmosAddress }}</span>
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
<label class="input-group input-group-sm my-2">
|
<label class="input-group input-group-sm my-2">
|
||||||
<span>Custom</span>
|
<span>Custom</span>
|
||||||
<input v-model="sourceAddress" class="input input-bordered w-full input-sm"
|
<input v-model="sourceAddress" class="input input-bordered w-full input-sm" placeholder="Input an address" />
|
||||||
placeholder="Input an address" />
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="py-4 max-h-72 overflow-y-auto">
|
<div class="py-4 max-h-72 overflow-y-auto">
|
||||||
@ -300,8 +299,9 @@ async function loadBalances(endpoint:string, address: string) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="tooltip" :class="acc.compatiable?'tooltip-success':'tooltip-error'" :data-tip="`Coin Type: ${acc.coinType}`">
|
<div class="tooltip" :class="acc.compatiable ? 'tooltip-success' : 'tooltip-error'"
|
||||||
<div class="font-bold capitalize" :class="acc.compatiable?'text-green-500':'text-red-500'">
|
:data-tip="`Coin Type: ${acc.coinType}`">
|
||||||
|
<div class="font-bold capitalize" :class="acc.compatiable ? 'text-green-500' : 'text-red-500'">
|
||||||
{{ acc.chainName }}
|
{{ acc.chainName }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -320,6 +320,7 @@ async function loadBalances(endpoint:string, address: string) {
|
|||||||
<div class="modal-action mt-2 mb-0">
|
<div class="modal-action mt-2 mb-0">
|
||||||
<a href="#" class="btn btn-primary btn-sm">Close</a>
|
<a href="#" class="btn btn-primary btn-sm">Close</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div></template>
|
</template>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user