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

feat: favorite localstorage

Browse Source
This commit is contained in:
alisa 2023-05-05 00:28:27 +08:00
parent 7bda8be6f5
commit 1f6cee1d2d
2 changed files with 111 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/ChainSummary.vue
View File

@ -13,6 +13,13 @@ const props = defineProps({
const dashboardStore = useDashboard() const dashboardStore = useDashboard()
const conf = computed(() => dashboardStore.chains[props.name] || {}) 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> </script>
<template> <template>
<RouterLink :to="`/${name}`" class="bg-base-100 rounded shadow flex items-center px-3 py-3 cursor-pointer"> <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"> <div class="font-semibold ml-4 text-base flex-1">
{{ conf?.prettyName || props.name }} {{ conf?.prettyName || props.name }}
</div> </div>
<div <div @click="addFavor" class="pl-4 text-xl"
@click="(e: Event) => { e.stopPropagation(); e.preventDefault(); dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name] }"
class="pl-4 text-xl"
:class="{ 'text-warning': dashboardStore?.favoriteMap?.[props.name], 'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name] }"> :class="{ 'text-warning': dashboardStore?.favoriteMap?.[props.name], 'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name] }">
<Icon icon="mdi-star" /> <Icon icon="mdi-star" />
</div> </div>

194
src/stores/useBlockchain.ts
View File

@ -1,121 +1,133 @@
import { defineStore } from "pinia"; import { defineStore } from 'pinia';
import { useDashboard, type ChainConfig, type Endpoint, EndpointType } from "./useDashboard"; import {
import type { VerticalNavItems } from '@/@layouts/types' useDashboard,
import { useRouter } from "vue-router"; type ChainConfig,
import { CosmosRestClient } from "@/libs/client"; type Endpoint,
import { useBankStore, useBaseStore, useGovStore, useMintStore, useStakingStore } from "."; EndpointType,
import { useBlockModule } from "@/modules/[chain]/block/block"; } from './useDashboard';
import { DEFAULT } from "@/libs"; 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: () => { state: () => {
return { return {
status: {} as Record<string, string>, status: {} as Record<string, string>,
rest: '', rest: '',
chainName: "", chainName: '',
endpoint: {} as { endpoint: {} as {
type?: EndpointType, type?: EndpointType;
address: string address: string;
provider: string provider: string;
}, },
connErr: "" connErr: '',
} };
}, },
getters: { getters: {
current() : ChainConfig | undefined { current(): ChainConfig | undefined {
return this.dashboard.chains[this.chainName] return this.dashboard.chains[this.chainName];
}, },
logo(): string { logo(): string {
return this.current?.logo || '' return this.current?.logo || '';
}, },
dashboard() { dashboard() {
return useDashboard() return useDashboard();
}, },
computedChainMenu() { computedChainMenu() {
let currNavItem: VerticalNavItems = [];
let currNavItem: VerticalNavItems = [] const router = useRouter();
const routes = router?.getRoutes() || [];
const router = useRouter() if (this.current && routes) {
const routes = router?.getRoutes()||[] currNavItem = [
if(this.current && routes) { {
currNavItem = [{ title: this.current?.prettyName || this.chainName || '',
title: this.current?.prettyName || this.chainName || '', icon: { image: this.current.logo, size: '22' },
icon: {image: this.current.logo, size: '22'}, i18n: false,
i18n: false, children: routes
children: routes .filter((x) => x.meta.i18n)
.filter(x=> x.meta.i18n) .map((x) => ({
.map(x => ({ title: `module.${x.meta.i18n}`,
title: `module.${x.meta.i18n}`, to: { path: x.path.replace(':chain', this.chainName) },
to: {path: x.path.replace(':chain',this.chainName)}, icon: { icon: 'mdi-chevron-right', size: '22' },
icon: { icon: 'mdi-chevron-right', size: '22'}, i18n: true,
i18n: true }))
})) .sort((a, b) => a.to.path.length - b.to.path.length),
.sort((a,b)=>a.to.path.length - b.to.path.length) },
}] ];
} }
// compute favorite menu // compute favorite menu
const favNavItems: VerticalNavItems = [] const favNavItems: VerticalNavItems = [];
this.dashboard.favorite.forEach(name => { Object.keys(this.dashboard.favoriteMap).forEach((name) => {
const ch = this.dashboard.chains[name] const ch = this.dashboard.chains[name];
if(ch) { if (ch && this.dashboard.favoriteMap?.[name]) {
favNavItems.push({ favNavItems.push({
title: ch.prettyName || ch.chainName || name, title: ch.prettyName || ch.chainName || name,
to: { path: `/${ch.chainName || name}`}, to: { path: `/${ch.chainName || name}` },
icon: {image: ch.logo, size: '22'} icon: { image: ch.logo, size: '22' },
} ) });
} }
}) });
// combine all together // combine all together
return [...currNavItem, return [
{ heading: 'Ecosystem' }, ...currNavItem,
{ { heading: 'Ecosystem' },
title: 'Favorite', {
children: favNavItems, title: 'Favorite',
badgeContent: favNavItems.length, children: favNavItems,
badgeClass: 'bg-primary', badgeContent: favNavItems.length,
i18n: true, badgeClass: 'bg-primary',
icon: { icon: 'mdi-star', size: '22'} i18n: true,
}, icon: { icon: 'mdi-star', size: '22' },
{ },
title: 'All Blockchains', {
to: { path : '/'}, title: 'All Blockchains',
badgeContent: this.dashboard.length, to: { path: '/' },
badgeClass: 'bg-primary', badgeContent: this.dashboard.length,
i18n: true, badgeClass: 'bg-primary',
icon: { icon: 'mdi-grid', size: '22'} i18n: true,
} icon: { icon: 'mdi-grid', size: '22' },
] },
];
}, },
}, },
actions: { actions: {
async initial() { async initial() {
await this.randomSetupEndpoint() await this.randomSetupEndpoint();
await useStakingStore().init() await useStakingStore().init();
useBankStore().initial() useBankStore().initial();
useBaseStore().initial() useBaseStore().initial();
useGovStore().initial() useGovStore().initial();
useMintStore().initial() useMintStore().initial();
useBlockModule().initial() useBlockModule().initial();
}, },
async randomSetupEndpoint() { async randomSetupEndpoint() {
const all = this.current?.endpoints?.rest const all = this.current?.endpoints?.rest;
if(all) { if (all) {
const rn = Math.random() const rn = Math.random();
const endpoint = all[Math.floor(rn * all.length)] const endpoint = all[Math.floor(rn * all.length)];
await this.setRestEndpoint(endpoint) 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
}, },
} async setRestEndpoint(endpoint: Endpoint) {
}) this.connErr = '';
this.endpoint = endpoint;
this.rpc = new CosmosRestClient(endpoint.address, DEFAULT);
},
setCurrent(name: string) {
this.chainName = name;
},
},
});