forked from cerc-io/cosmos-explorer
feat: favorite localstorage
This commit is contained in:
alisa
parent
7bda8be6f5
commit
1f6cee1d2d
@ -13,6 +13,13 @@ const props = defineProps({
|
||||
const dashboardStore = useDashboard()
|
||||
const conf = computed(() => dashboardStore.chains[props.name] || {})
|
||||
|
||||
const addFavor = (e: Event) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name];
|
||||
window.localStorage.setItem('favoriteMap', JSON.stringify(dashboardStore.favoriteMap))
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<RouterLink :to="`/${name}`" class="bg-base-100 rounded shadow flex items-center px-3 py-3 cursor-pointer">
|
||||
@ -22,9 +29,7 @@ const conf = computed(() => dashboardStore.chains[props.name] || {})
|
||||
<div class="font-semibold ml-4 text-base flex-1">
|
||||
{{ conf?.prettyName || props.name }}
|
||||
</div>
|
||||
<div
|
||||
@click="(e: Event) => { e.stopPropagation(); e.preventDefault(); dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name] }"
|
||||
class="pl-4 text-xl"
|
||||
<div @click="addFavor" class="pl-4 text-xl"
|
||||
:class="{ 'text-warning': dashboardStore?.favoriteMap?.[props.name], 'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name] }">
|
||||
<Icon icon="mdi-star" />
|
||||
</div>
|
||||
|
||||
@ -1,121 +1,133 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { useDashboard, type ChainConfig, type Endpoint, EndpointType } from "./useDashboard";
|
||||
import type { VerticalNavItems } from '@/@layouts/types'
|
||||
import { useRouter } from "vue-router";
|
||||
import { CosmosRestClient } from "@/libs/client";
|
||||
import { useBankStore, useBaseStore, useGovStore, useMintStore, useStakingStore } from ".";
|
||||
import { useBlockModule } from "@/modules/[chain]/block/block";
|
||||
import { DEFAULT } from "@/libs";
|
||||
import { defineStore } from 'pinia';
|
||||
import {
|
||||
useDashboard,
|
||||
type ChainConfig,
|
||||
type Endpoint,
|
||||
EndpointType,
|
||||
} from './useDashboard';
|
||||
import type { VerticalNavItems } from '@/@layouts/types';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { CosmosRestClient } from '@/libs/client';
|
||||
import {
|
||||
useBankStore,
|
||||
useBaseStore,
|
||||
useGovStore,
|
||||
useMintStore,
|
||||
useStakingStore,
|
||||
} from '.';
|
||||
import { useBlockModule } from '@/modules/[chain]/block/block';
|
||||
import { DEFAULT } from '@/libs';
|
||||
|
||||
export const useBlockchain = defineStore("blockchain", {
|
||||
export const useBlockchain = defineStore('blockchain', {
|
||||
state: () => {
|
||||
return {
|
||||
status: {} as Record<string, string>,
|
||||
rest: '',
|
||||
chainName: "",
|
||||
chainName: '',
|
||||
endpoint: {} as {
|
||||
type?: EndpointType,
|
||||
address: string
|
||||
provider: string
|
||||
type?: EndpointType;
|
||||
address: string;
|
||||
provider: string;
|
||||
},
|
||||
connErr: ""
|
||||
}
|
||||
connErr: '',
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
current() : ChainConfig | undefined {
|
||||
return this.dashboard.chains[this.chainName]
|
||||
current(): ChainConfig | undefined {
|
||||
return this.dashboard.chains[this.chainName];
|
||||
},
|
||||
logo(): string {
|
||||
return this.current?.logo || ''
|
||||
return this.current?.logo || '';
|
||||
},
|
||||
dashboard() {
|
||||
return useDashboard()
|
||||
return useDashboard();
|
||||
},
|
||||
computedChainMenu() {
|
||||
let currNavItem: VerticalNavItems = [];
|
||||
|
||||
let currNavItem: VerticalNavItems = []
|
||||
|
||||
const router = useRouter()
|
||||
const routes = router?.getRoutes()||[]
|
||||
if(this.current && routes) {
|
||||
currNavItem = [{
|
||||
title: this.current?.prettyName || this.chainName || '',
|
||||
icon: {image: this.current.logo, size: '22'},
|
||||
i18n: false,
|
||||
children: routes
|
||||
.filter(x=> x.meta.i18n)
|
||||
.map(x => ({
|
||||
title: `module.${x.meta.i18n}`,
|
||||
to: {path: x.path.replace(':chain',this.chainName)},
|
||||
icon: { icon: 'mdi-chevron-right', size: '22'},
|
||||
i18n: true
|
||||
}))
|
||||
.sort((a,b)=>a.to.path.length - b.to.path.length)
|
||||
}]
|
||||
const router = useRouter();
|
||||
const routes = router?.getRoutes() || [];
|
||||
if (this.current && routes) {
|
||||
currNavItem = [
|
||||
{
|
||||
title: this.current?.prettyName || this.chainName || '',
|
||||
icon: { image: this.current.logo, size: '22' },
|
||||
i18n: false,
|
||||
children: routes
|
||||
.filter((x) => x.meta.i18n)
|
||||
.map((x) => ({
|
||||
title: `module.${x.meta.i18n}`,
|
||||
to: { path: x.path.replace(':chain', this.chainName) },
|
||||
icon: { icon: 'mdi-chevron-right', size: '22' },
|
||||
i18n: true,
|
||||
}))
|
||||
.sort((a, b) => a.to.path.length - b.to.path.length),
|
||||
},
|
||||
];
|
||||
}
|
||||
// compute favorite menu
|
||||
const favNavItems: VerticalNavItems = []
|
||||
this.dashboard.favorite.forEach(name => {
|
||||
const ch = this.dashboard.chains[name]
|
||||
if(ch) {
|
||||
const favNavItems: VerticalNavItems = [];
|
||||
Object.keys(this.dashboard.favoriteMap).forEach((name) => {
|
||||
const ch = this.dashboard.chains[name];
|
||||
if (ch && this.dashboard.favoriteMap?.[name]) {
|
||||
favNavItems.push({
|
||||
title: ch.prettyName || ch.chainName || name,
|
||||
to: { path: `/${ch.chainName || name}`},
|
||||
icon: {image: ch.logo, size: '22'}
|
||||
} )
|
||||
}
|
||||
})
|
||||
title: ch.prettyName || ch.chainName || name,
|
||||
to: { path: `/${ch.chainName || name}` },
|
||||
icon: { image: ch.logo, size: '22' },
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// combine all together
|
||||
return [...currNavItem,
|
||||
{ heading: 'Ecosystem' },
|
||||
{
|
||||
title: 'Favorite',
|
||||
children: favNavItems,
|
||||
badgeContent: favNavItems.length,
|
||||
badgeClass: 'bg-primary',
|
||||
i18n: true,
|
||||
icon: { icon: 'mdi-star', size: '22'}
|
||||
},
|
||||
{
|
||||
title: 'All Blockchains',
|
||||
to: { path : '/'},
|
||||
badgeContent: this.dashboard.length,
|
||||
badgeClass: 'bg-primary',
|
||||
i18n: true,
|
||||
icon: { icon: 'mdi-grid', size: '22'}
|
||||
}
|
||||
]
|
||||
return [
|
||||
...currNavItem,
|
||||
{ heading: 'Ecosystem' },
|
||||
{
|
||||
title: 'Favorite',
|
||||
children: favNavItems,
|
||||
badgeContent: favNavItems.length,
|
||||
badgeClass: 'bg-primary',
|
||||
i18n: true,
|
||||
icon: { icon: 'mdi-star', size: '22' },
|
||||
},
|
||||
{
|
||||
title: 'All Blockchains',
|
||||
to: { path: '/' },
|
||||
badgeContent: this.dashboard.length,
|
||||
badgeClass: 'bg-primary',
|
||||
i18n: true,
|
||||
icon: { icon: 'mdi-grid', size: '22' },
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async initial() {
|
||||
await this.randomSetupEndpoint()
|
||||
await useStakingStore().init()
|
||||
useBankStore().initial()
|
||||
useBaseStore().initial()
|
||||
useGovStore().initial()
|
||||
useMintStore().initial()
|
||||
useBlockModule().initial()
|
||||
await this.randomSetupEndpoint();
|
||||
await useStakingStore().init();
|
||||
useBankStore().initial();
|
||||
useBaseStore().initial();
|
||||
useGovStore().initial();
|
||||
useMintStore().initial();
|
||||
useBlockModule().initial();
|
||||
},
|
||||
|
||||
async randomSetupEndpoint() {
|
||||
const all = this.current?.endpoints?.rest
|
||||
if(all) {
|
||||
const rn = Math.random()
|
||||
const endpoint = all[Math.floor(rn * all.length)]
|
||||
await this.setRestEndpoint(endpoint)
|
||||
}
|
||||
},
|
||||
|
||||
async setRestEndpoint(endpoint: Endpoint) {
|
||||
this.connErr = ''
|
||||
this.endpoint = endpoint
|
||||
this.rpc = new CosmosRestClient(endpoint.address, DEFAULT)
|
||||
},
|
||||
setCurrent(name: string) {
|
||||
this.chainName = name
|
||||
const all = this.current?.endpoints?.rest;
|
||||
if (all) {
|
||||
const rn = Math.random();
|
||||
const endpoint = all[Math.floor(rn * all.length)];
|
||||
await this.setRestEndpoint(endpoint);
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
async setRestEndpoint(endpoint: Endpoint) {
|
||||
this.connErr = '';
|
||||
this.endpoint = endpoint;
|
||||
this.rpc = new CosmosRestClient(endpoint.address, DEFAULT);
|
||||
},
|
||||
setCurrent(name: string) {
|
||||
this.chainName = name;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user