ping
GitHub
commit
6c2676fe9f
14982
package-lock.json
generated
Normal file
14982
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -33,6 +33,7 @@
|
||||
"axios": "^1.3.2",
|
||||
"buffer": "^6.0.3",
|
||||
"cross-fetch": "^3.1.5",
|
||||
"daisyui": "^2.51.6",
|
||||
"dayjs": "^1.11.7",
|
||||
"long": "^5.2.1",
|
||||
"md-editor-v3": "^2.8.1",
|
||||
@ -42,6 +43,7 @@
|
||||
"postcss": "^8.4.23",
|
||||
"prismjs": "^1.29.0",
|
||||
"tailwindcss": "^3.3.1",
|
||||
"theme-change": "^2.5.0",
|
||||
"vite-plugin-vue-layouts": "^0.7.0",
|
||||
"vite-plugin-vuetify": "^1.0.2",
|
||||
"vue": "^3.2.45",
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
import { useTheme } from 'vuetify'
|
||||
import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfig'
|
||||
import { hexToRgb } from '@/plugins/vuetify/@layouts/utils'
|
||||
|
||||
import { themeChange } from 'theme-change'
|
||||
import { onMounted } from 'vue'
|
||||
const { syncInitialLoaderTheme, syncVuetifyThemeWithTheme: syncConfigThemeWithVuetifyTheme, isAppRtl } = useThemeConfig()
|
||||
|
||||
const { global } = useTheme()
|
||||
@ -10,6 +11,10 @@ const { global } = useTheme()
|
||||
// ℹ️ Sync current theme with initial loader theme
|
||||
syncInitialLoaderTheme()
|
||||
syncConfigThemeWithVuetifyTheme()
|
||||
|
||||
onMounted(()=> {
|
||||
themeChange(false)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
1
src/assets/images/heart.svg
Normal file
1
src/assets/images/heart.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50" fill="red"><path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"/></svg>
|
||||
|
After Width: | Height: | Size: 424 B |
@ -1,6 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { getLogo, useDashboard, } from '@/stores/useDashboard';
|
||||
import { getLogo, useDashboard, } from '@/stores/useDashboard';
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
@ -10,45 +11,27 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
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>
|
||||
<template>
|
||||
<VCard outlined class="p-1">
|
||||
<VList class="card-list">
|
||||
<VListItem :to="`/${name}`">
|
||||
<template #prepend>
|
||||
<VAvatar rounded size="45" variant="tonal" class="me-3">
|
||||
<VImg :src="conf.logo" height="22"/>
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-semibold text-sm mb-1">
|
||||
{{ conf?.prettyName || props.name }}
|
||||
</VListItemTitle>
|
||||
|
||||
<VListItemSubtitle class="text-xs">
|
||||
{{conf?.chainId || ''}}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction @click="(e:Event)=>{e.stopPropagation()}">
|
||||
<VCheckbox
|
||||
v-model="dashboardStore.favorite"
|
||||
true-icon="mdi-star"
|
||||
false-icon="mdi-star"
|
||||
color="warning"
|
||||
:value="props.name"
|
||||
/>
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
{{ $t('index.add_to_favorite') }}
|
||||
</VTooltip>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCard>
|
||||
<RouterLink :to="`/${name}`" class="bg-base-100 rounded shadow flex items-center px-3 py-3 cursor-pointer">
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden">
|
||||
<img :src="conf.logo" />
|
||||
</div>
|
||||
<div class="font-semibold ml-4 text-base flex-1">
|
||||
{{ conf?.prettyName || props.name }}
|
||||
</div>
|
||||
<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>
|
||||
</RouterLink>
|
||||
</template>
|
||||
59
src/components/ThemeSwitcher.vue
Normal file
59
src/components/ThemeSwitcher.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { useThemeConfig } from '@core/composable/useThemeConfig';
|
||||
import type { ThemeSwitcherTheme } from '@layouts/types';
|
||||
import { onMounted, watch } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
themes: ThemeSwitcherTheme[];
|
||||
}>();
|
||||
|
||||
const { theme } = useThemeConfig();
|
||||
const {
|
||||
state: currentThemeName,
|
||||
next: getNextThemeName,
|
||||
index: currentThemeIndex,
|
||||
} = useCycleList(
|
||||
props.themes.map(t => t.name),
|
||||
{ initialValue: theme.value }
|
||||
);
|
||||
|
||||
const changeTheme = () => {
|
||||
theme.value = getNextThemeName();
|
||||
};
|
||||
|
||||
const changeMode = (val: 'dark' | 'light' | 'system') => {
|
||||
let value = val;
|
||||
if (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
value = 'dark';
|
||||
}
|
||||
if (value === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.remove('light');
|
||||
|
||||
} else {
|
||||
document.documentElement.classList.add('light');
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
document.documentElement.setAttribute("data-theme", value);
|
||||
};
|
||||
// Update icon if theme is changed from other sources
|
||||
watch(theme, (val: 'dark' | 'light' | 'system') => {
|
||||
currentThemeName.value = val;
|
||||
changeMode(val);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (currentThemeName.value) {
|
||||
changeMode(currentThemeName.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn @click="changeTheme">
|
||||
<VIcon :icon="props.themes[currentThemeIndex].icon" />
|
||||
<VTooltip activator="parent" open-delay="1000">
|
||||
<span class="text-capitalize">{{ currentThemeName }}</span>
|
||||
</VTooltip>
|
||||
</IconBtn>
|
||||
</template>
|
||||
@ -2,7 +2,8 @@
|
||||
import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfig';
|
||||
|
||||
// Components
|
||||
import Footer from '@/layouts/components/Footer.vue';
|
||||
// import Footer from '@/layouts/components/Footer.vue';
|
||||
import newFooter from '@/layouts/components/newFooter.vue';
|
||||
import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue';
|
||||
import UserProfile from '@/layouts/components/ChainProfile.vue';
|
||||
|
||||
@ -79,7 +80,8 @@ blockchain.$subscribe((m, s) => {
|
||||
|
||||
<!-- 👉 Footer -->
|
||||
<template #footer>
|
||||
<Footer />
|
||||
<!-- <Footer /> -->
|
||||
<newFooter />
|
||||
</template>
|
||||
|
||||
<!-- 👉 Customizer -->
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { ThemeSwitcherTheme } from '@layouts/types'
|
||||
|
||||
import NewThemeSwitcher from '@/components/ThemeSwitcher.vue'
|
||||
const themes: ThemeSwitcherTheme[] = [
|
||||
{
|
||||
name: 'system',
|
||||
@ -18,5 +18,8 @@ const themes: ThemeSwitcherTheme[] = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ThemeSwitcher :themes="themes" />
|
||||
<div>
|
||||
<NewThemeSwitcher :themes="themes"/>
|
||||
<!-- <ThemeSwitcher :themes="themes" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
26
src/layouts/components/newFooter.vue
Normal file
26
src/layouts/components/newFooter.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<footer class="footer items-center p-4 text-base">
|
||||
<div class="items-center grid-flow-col">
|
||||
©
|
||||
{{ new Date().getFullYear() }}
|
||||
Made With
|
||||
<img src="../../assets/images/heart.svg"/>
|
||||
By
|
||||
<a class="link link-info no-underline"
|
||||
href="https://ping.pub"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Ping.pub</a>
|
||||
</div>
|
||||
<div class="grid-flow-col gap-4 md:place-self-center md:justify-self-end hidden md:grid">
|
||||
<a class="link link-info no-underline"
|
||||
href="https://github.com/ping-pub/explorer/blob/master/LICENSE"
|
||||
target="noopener noreferrer"
|
||||
>License</a>
|
||||
<a class="link link-info no-underline"
|
||||
href="https://github.com/ping-pub/explorer"
|
||||
target="noopener noreferrer"
|
||||
>Github</a>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
@ -10,10 +10,10 @@ dashboard.$subscribe((mutation, state) => {
|
||||
localStorage.setItem('favorite', JSON.stringify(state.favorite))
|
||||
})
|
||||
const keywords = ref('')
|
||||
const chains = computed(()=> {
|
||||
if(keywords.value) {
|
||||
return Object.values(dashboard.chains).filter( (x: ChainConfig)=>x.chainName.indexOf(keywords.value) > -1)
|
||||
}else{
|
||||
const chains = computed(() => {
|
||||
if (keywords.value) {
|
||||
return Object.values(dashboard.chains).filter((x: ChainConfig) => x.chainName.indexOf(keywords.value) > -1)
|
||||
} else {
|
||||
return Object.values(dashboard.chains)
|
||||
}
|
||||
})
|
||||
@ -21,33 +21,37 @@ const chain = useBlockchain()
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex flex-column justify-center">
|
||||
<div class="d-flex justify-center align-center align-self-center p-1 b1">
|
||||
<VImg src="/logo.svg" width="85" height="85"/>
|
||||
<h1 class="text-primary text-h3 font-weight-bold d-none d-md-block ml-1">
|
||||
Ping Dashboard<VChip>Beta</VChip>
|
||||
<div class="">
|
||||
<div class="flex items-center justify-center mb-6 mt-10">
|
||||
<div class="w-8 md:w-16 rounded-full mr-3">
|
||||
<img src="/logo.svg" />
|
||||
</div>
|
||||
<h1 class="text-primary text-3xl md:text-6xl font-bold mr-2">
|
||||
Ping dashboard
|
||||
</h1>
|
||||
<div class="badge badge-info badge-outline mt-1 text-sm md:mt-8">Beta</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-center">
|
||||
<div class="text-center text-base">
|
||||
<p class="mb-1">
|
||||
{{ $t('index.slogan') }}
|
||||
</p>
|
||||
<h2 class="mb-9">
|
||||
<h2 class="mb-6">
|
||||
Cosmos Ecosystem Blockchains 🚀
|
||||
</h2>
|
||||
</div>
|
||||
<VProgressLinear v-if="dashboard.status !== LoadingStatus.Loaded " indeterminate color="primary darken-2"/>
|
||||
<VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')" style="max-width: 300px;" app>
|
||||
<div v-if="dashboard.status !== LoadingStatus.Loaded" class="flex justify-center"><progress
|
||||
class="progress progress-info w-80 h-1"></progress></div>
|
||||
|
||||
<VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')"
|
||||
style="max-width: 300px;" app>
|
||||
<template #append-inner>
|
||||
{{ chains.length }}/{{ dashboard.length }}
|
||||
</template>
|
||||
</VTextField>
|
||||
<VRow class="my-auto">
|
||||
<VCol v-for="k in chains" md="3">
|
||||
<VLazy min-height="40" min-width="200" transition="fade-transition">
|
||||
<ChainSummary :name="k.chainName" />
|
||||
</VLazy>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
|
||||
<ChainSummary v-for="(chain, index) in chains" :key="index" :name="chain.chainName" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,56 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import type { Anchor } from 'vuetify/lib/components'
|
||||
import type { I18nLanguage } from '@layouts/types'
|
||||
import { Icon } from '@iconify/vue';
|
||||
import type { Anchor } from 'vuetify/lib/components';
|
||||
import type { I18nLanguage } from '@layouts/types';
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
location: 'bottom end',
|
||||
})
|
||||
});
|
||||
|
||||
defineEmits<{
|
||||
(e: 'change', id: string): void
|
||||
}>()
|
||||
(e: 'change', id: string): void;
|
||||
}>();
|
||||
|
||||
interface Props {
|
||||
languages: I18nLanguage[]
|
||||
location?: Anchor
|
||||
languages: I18nLanguage[];
|
||||
location?: Anchor;
|
||||
}
|
||||
|
||||
const { locale } = useI18n({ useScope: 'global' })
|
||||
const { locale } = useI18n({ useScope: 'global' });
|
||||
|
||||
watch(locale, val => {
|
||||
document.documentElement.setAttribute('lang', val as string)
|
||||
})
|
||||
watch(locale, (val) => {
|
||||
document.documentElement.setAttribute('lang', val as string);
|
||||
});
|
||||
|
||||
const currentLang = ref([localStorage.getItem('lang')|| 'en'])
|
||||
const currentLang = ref([localStorage.getItem('lang') || 'en']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn>
|
||||
<VIcon icon="mdi-translate" />
|
||||
|
||||
<!-- Menu -->
|
||||
<VMenu
|
||||
activator="parent"
|
||||
:location="props.location"
|
||||
offset="14px"
|
||||
<div class="dropdown dropdown-end">
|
||||
<label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
|
||||
<Icon icon="mdi-translate" style="font-size: 24px" />
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
|
||||
>
|
||||
<!-- List -->
|
||||
<VList
|
||||
v-model:selected="currentLang"
|
||||
active-color="primary"
|
||||
min-width="175px"
|
||||
>
|
||||
<!-- List item -->
|
||||
<VListItem
|
||||
v-for="lang in props.languages"
|
||||
:key="lang.i18nLang"
|
||||
:value="lang.i18nLang"
|
||||
@click="locale = lang.i18nLang; $emit('change', lang.i18nLang)"
|
||||
<li v-for="lang in props.languages" :key="lang.i18nLang">
|
||||
<a
|
||||
@click="
|
||||
locale = lang.i18nLang;
|
||||
$emit('change', lang.i18nLang);
|
||||
"
|
||||
>{{ lang.label }}</a
|
||||
>
|
||||
<!-- Language label -->
|
||||
<VListItemTitle>{{ lang.label }}</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</IconBtn>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue'
|
||||
import type { PropType} from 'vue'
|
||||
import {h} from 'vue'
|
||||
import { useLayouts } from '@layouts'
|
||||
import { VerticalNav } from '@layouts/components'
|
||||
import type { VerticalNavItems } from '@layouts/types'
|
||||
@ -101,17 +102,20 @@ export default defineComponent({
|
||||
)
|
||||
|
||||
// 👉 Footer
|
||||
const footer = h(
|
||||
'footer',
|
||||
{ class: 'layout-footer' },
|
||||
[
|
||||
h(
|
||||
'div',
|
||||
{ class: 'footer-content-container' },
|
||||
slots.footer?.(),
|
||||
),
|
||||
],
|
||||
)
|
||||
// const footer = h(
|
||||
// 'footer',
|
||||
// { class: 'layout-footer' },
|
||||
// [
|
||||
// h(
|
||||
// 'div',
|
||||
// { class: 'footer-content-container' },
|
||||
// slots.footer?.(),
|
||||
// ),
|
||||
// ],
|
||||
// )
|
||||
|
||||
const footer = h('footer',{},slots.footer?.())
|
||||
|
||||
|
||||
// 👉 Overlay
|
||||
const layoutOverlay = h(
|
||||
|
||||
@ -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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
|
||||
import { defineStore } from "pinia";
|
||||
import { get } from '../libs/http'
|
||||
import type { Chain, Asset } from '@ping-pub/chain-registry-client/dist/types'
|
||||
import { useBlockchain } from "./useBlockchain";
|
||||
import { defineStore } from 'pinia';
|
||||
import { get } from '../libs/http';
|
||||
import type { Chain, Asset } from '@ping-pub/chain-registry-client/dist/types';
|
||||
import { useBlockchain } from './useBlockchain';
|
||||
|
||||
export enum EndpointType {
|
||||
rpc,
|
||||
@ -12,253 +11,278 @@ export enum EndpointType {
|
||||
}
|
||||
|
||||
export interface Endpoint {
|
||||
type?: EndpointType,
|
||||
address: string,
|
||||
provider: string
|
||||
type?: EndpointType;
|
||||
address: string;
|
||||
provider: string;
|
||||
}
|
||||
|
||||
// Chain config structure of cosmos.directory
|
||||
export interface DirectoryChain {
|
||||
assets: Asset[],
|
||||
bech32_prefix: string,
|
||||
assets: Asset[];
|
||||
bech32_prefix: string;
|
||||
best_apis: {
|
||||
rest: Endpoint[]
|
||||
rpc: Endpoint[]
|
||||
},
|
||||
chain_id: string,
|
||||
chain_name: string,
|
||||
pretty_name: string,
|
||||
coingecko_id: string,
|
||||
cosmwasm_enabled: boolean,
|
||||
decimals: number,
|
||||
denom: string,
|
||||
display: string,
|
||||
explorers: {
|
||||
name?: string | undefined;
|
||||
kind?: string | undefined;
|
||||
url?: string | undefined;
|
||||
tx_page?: string | undefined;
|
||||
account_page?: string | undefined;
|
||||
}[] | undefined,
|
||||
height: number,
|
||||
image: string,
|
||||
name: string,
|
||||
network_type: string,
|
||||
symbol: string,
|
||||
rest: Endpoint[];
|
||||
rpc: Endpoint[];
|
||||
};
|
||||
chain_id: string;
|
||||
chain_name: string;
|
||||
pretty_name: string;
|
||||
coingecko_id: string;
|
||||
cosmwasm_enabled: boolean;
|
||||
decimals: number;
|
||||
denom: string;
|
||||
display: string;
|
||||
explorers:
|
||||
| {
|
||||
name?: string | undefined;
|
||||
kind?: string | undefined;
|
||||
url?: string | undefined;
|
||||
tx_page?: string | undefined;
|
||||
account_page?: string | undefined;
|
||||
}[]
|
||||
| undefined;
|
||||
height: number;
|
||||
image: string;
|
||||
name: string;
|
||||
network_type: string;
|
||||
symbol: string;
|
||||
versions?: {
|
||||
application_version: string,
|
||||
cosmos_sdk_version: string,
|
||||
tendermint_version: string,
|
||||
}
|
||||
application_version: string;
|
||||
cosmos_sdk_version: string;
|
||||
tendermint_version: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ChainConfig {
|
||||
chainName: string,
|
||||
prettyName: string,
|
||||
bech32Prefix: string,
|
||||
chainId: string,
|
||||
assets: Asset[],
|
||||
themeColor?: string,
|
||||
chainName: string;
|
||||
prettyName: string;
|
||||
bech32Prefix: string;
|
||||
chainId: string;
|
||||
assets: Asset[];
|
||||
themeColor?: string;
|
||||
endpoints: {
|
||||
rest?: Endpoint[]
|
||||
rpc?: Endpoint[]
|
||||
grpc?: Endpoint[]
|
||||
},
|
||||
logo: string,
|
||||
rest?: Endpoint[];
|
||||
rpc?: Endpoint[];
|
||||
grpc?: Endpoint[];
|
||||
};
|
||||
logo: string;
|
||||
versions: {
|
||||
application?: string,
|
||||
cosmosSdk?: string,
|
||||
tendermint?: string,
|
||||
},
|
||||
exponent: string,
|
||||
excludes?: string,
|
||||
application?: string;
|
||||
cosmosSdk?: string;
|
||||
tendermint?: string;
|
||||
};
|
||||
exponent: string;
|
||||
excludes?: string;
|
||||
}
|
||||
|
||||
export interface LocalConfig {
|
||||
addr_prefix: string,
|
||||
alias: string,
|
||||
api: string[] | Endpoint[],
|
||||
assets: {base: string, coingecko_id: string, exponent: string, logo: string, symbol: string}[]
|
||||
chain_name: string,
|
||||
coin_type: string
|
||||
logo: string,
|
||||
min_tx_fee: string,
|
||||
rpc: string[] | Endpoint[],
|
||||
sdk_version: string,
|
||||
addr_prefix: string;
|
||||
alias: string;
|
||||
api: string[] | Endpoint[];
|
||||
assets: {
|
||||
base: string;
|
||||
coingecko_id: string;
|
||||
exponent: string;
|
||||
logo: string;
|
||||
symbol: string;
|
||||
}[];
|
||||
chain_name: string;
|
||||
coin_type: string;
|
||||
logo: string;
|
||||
min_tx_fee: string;
|
||||
rpc: string[] | Endpoint[];
|
||||
sdk_version: string;
|
||||
}
|
||||
|
||||
function apiConverter(api: any[]){
|
||||
if(!api) return []
|
||||
const array = typeof api === 'string'? [api] : api
|
||||
return array.map(x => {
|
||||
if(typeof x === 'string') {
|
||||
const parts = String(x).split('.')
|
||||
function apiConverter(api: any[]) {
|
||||
if (!api) return [];
|
||||
const array = typeof api === 'string' ? [api] : api;
|
||||
return array.map((x) => {
|
||||
if (typeof x === 'string') {
|
||||
const parts = String(x).split('.');
|
||||
return {
|
||||
address: x,
|
||||
provider: parts.length >=2 ? parts[parts.length-2] : x
|
||||
}
|
||||
}else{
|
||||
return x as Endpoint
|
||||
provider: parts.length >= 2 ? parts[parts.length - 2] : x,
|
||||
};
|
||||
} else {
|
||||
return x as Endpoint;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export function fromLocal(lc: LocalConfig ): ChainConfig {
|
||||
const conf = {} as ChainConfig
|
||||
conf.assets = lc.assets.map(x => ({
|
||||
name: x.base,
|
||||
base: x.base,
|
||||
display: x.symbol,
|
||||
symbol: x.symbol,
|
||||
logo_URIs: { svg: x.logo },
|
||||
export function fromLocal(lc: LocalConfig): ChainConfig {
|
||||
const conf = {} as ChainConfig;
|
||||
conf.assets = lc.assets.map((x) => ({
|
||||
name: x.base,
|
||||
base: x.base,
|
||||
display: x.symbol,
|
||||
symbol: x.symbol,
|
||||
logo_URIs: { svg: x.logo },
|
||||
coingecko_id: x.coingecko_id,
|
||||
exponent: x.exponent,
|
||||
denom_units: [{denom: x.base, exponent: 0}, {denom: x.symbol.toLowerCase(), exponent: Number(x.exponent)}]
|
||||
}))
|
||||
conf.bech32Prefix = lc.addr_prefix
|
||||
conf.chainName = lc.chain_name
|
||||
conf.prettyName = lc.chain_name
|
||||
exponent: x.exponent,
|
||||
denom_units: [
|
||||
{ denom: x.base, exponent: 0 },
|
||||
{ denom: x.symbol.toLowerCase(), exponent: Number(x.exponent) },
|
||||
],
|
||||
}));
|
||||
conf.bech32Prefix = lc.addr_prefix;
|
||||
conf.chainName = lc.chain_name;
|
||||
conf.prettyName = lc.chain_name;
|
||||
conf.endpoints = {
|
||||
rest: apiConverter(lc.api),
|
||||
rpc: apiConverter(lc.rpc),
|
||||
}
|
||||
conf.logo = lc.logo
|
||||
return conf
|
||||
};
|
||||
conf.logo = lc.logo;
|
||||
return conf;
|
||||
}
|
||||
|
||||
|
||||
export function fromDirectory(source: DirectoryChain): ChainConfig {
|
||||
const conf = {} as ChainConfig
|
||||
conf.assets = source.assets,
|
||||
conf.bech32Prefix = source.bech32_prefix,
|
||||
conf.chainId = source.chain_id,
|
||||
conf.chainName = source.chain_name,
|
||||
conf.prettyName = source.pretty_name,
|
||||
conf.versions = {
|
||||
application: source.versions?.application_version || '',
|
||||
cosmosSdk: source.versions?.cosmos_sdk_version || '',
|
||||
tendermint: source.versions?.tendermint_version || '',
|
||||
},
|
||||
conf.logo = pathConvert(source.image)
|
||||
conf.endpoints = source.best_apis
|
||||
return conf
|
||||
const conf = {} as ChainConfig;
|
||||
(conf.assets = source.assets),
|
||||
(conf.bech32Prefix = source.bech32_prefix),
|
||||
(conf.chainId = source.chain_id),
|
||||
(conf.chainName = source.chain_name),
|
||||
(conf.prettyName = source.pretty_name),
|
||||
(conf.versions = {
|
||||
application: source.versions?.application_version || '',
|
||||
cosmosSdk: source.versions?.cosmos_sdk_version || '',
|
||||
tendermint: source.versions?.tendermint_version || '',
|
||||
}),
|
||||
(conf.logo = pathConvert(source.image));
|
||||
conf.endpoints = source.best_apis;
|
||||
return conf;
|
||||
}
|
||||
|
||||
function pathConvert(path: string | undefined) {
|
||||
if(path) {
|
||||
path = path.replace('https://raw.githubusercontent.com/cosmos/chain-registry/master', 'https://registry.ping.pub')
|
||||
if (path) {
|
||||
path = path.replace(
|
||||
'https://raw.githubusercontent.com/cosmos/chain-registry/master',
|
||||
'https://registry.ping.pub'
|
||||
);
|
||||
}
|
||||
return path || ''
|
||||
return path || '';
|
||||
}
|
||||
|
||||
export function getLogo(conf: {
|
||||
svg?: string,
|
||||
png?: string,
|
||||
jpeg?: string,
|
||||
} | undefined) {
|
||||
if(conf) {
|
||||
return pathConvert(conf.svg || conf.png || conf.jpeg)
|
||||
export function getLogo(
|
||||
conf:
|
||||
| {
|
||||
svg?: string;
|
||||
png?: string;
|
||||
jpeg?: string;
|
||||
}
|
||||
| undefined
|
||||
) {
|
||||
if (conf) {
|
||||
return pathConvert(conf.svg || conf.png || conf.jpeg);
|
||||
}
|
||||
return undefined
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function createChainFromDirectory(source: DirectoryChain) : Chain {
|
||||
const conf: Chain = {} as Chain;
|
||||
conf.apis = source.best_apis
|
||||
conf.bech32_prefix = source.bech32_prefix
|
||||
conf.chain_id = source.chain_id
|
||||
conf.chain_name = source.chain_name
|
||||
conf.explorers = source.explorers
|
||||
conf.pretty_name = source.pretty_name
|
||||
if(source.versions) {
|
||||
function createChainFromDirectory(source: DirectoryChain): Chain {
|
||||
const conf: Chain = {} as Chain;
|
||||
conf.apis = source.best_apis;
|
||||
conf.bech32_prefix = source.bech32_prefix;
|
||||
conf.chain_id = source.chain_id;
|
||||
conf.chain_name = source.chain_name;
|
||||
conf.explorers = source.explorers;
|
||||
conf.pretty_name = source.pretty_name;
|
||||
if (source.versions) {
|
||||
conf.codebase = {
|
||||
recommended_version: source.versions.application_version,
|
||||
cosmos_sdk_version: source.versions.cosmos_sdk_version,
|
||||
tendermint_version: source.versions.tendermint_version,
|
||||
}
|
||||
};
|
||||
}
|
||||
if(source.image) {
|
||||
if (source.image) {
|
||||
conf.logo_URIs = {
|
||||
svg: source.image
|
||||
}
|
||||
svg: source.image,
|
||||
};
|
||||
}
|
||||
return conf
|
||||
return conf;
|
||||
}
|
||||
|
||||
export enum LoadingStatus {
|
||||
Empty,
|
||||
Loading,
|
||||
Loaded,
|
||||
Empty,
|
||||
Loading,
|
||||
Loaded,
|
||||
}
|
||||
export enum NetworkType {
|
||||
Mainnet,
|
||||
Testnet,
|
||||
}
|
||||
export enum ConfigSource {
|
||||
MainnetCosmosDirectory = "https://chains.cosmos.directory",
|
||||
TestnetCosmosDirectory = "https://chains.testcosmos.directory",
|
||||
MainnetCosmosDirectory = 'https://chains.cosmos.directory',
|
||||
TestnetCosmosDirectory = 'https://chains.testcosmos.directory',
|
||||
Local = 'local',
|
||||
}
|
||||
|
||||
export const useDashboard = defineStore('dashboard', {
|
||||
state: () => {
|
||||
const fav = JSON.parse(localStorage.getItem('favorite') || '["cosmoshub", "osmosis"]')
|
||||
return {
|
||||
status: LoadingStatus.Empty,
|
||||
source: ConfigSource.MainnetCosmosDirectory,
|
||||
networkType: NetworkType.Mainnet,
|
||||
favorite: fav as string[],
|
||||
chains: {} as Record<string, ChainConfig>,
|
||||
}
|
||||
const fav = JSON.parse(
|
||||
localStorage.getItem('favorite') || '["cosmoshub", "osmosis"]'
|
||||
);
|
||||
const favMap = JSON.parse(
|
||||
localStorage.getItem('favoriteMap') ||
|
||||
'{"cosmoshub":true, "osmosis":true}'
|
||||
);
|
||||
return {
|
||||
status: LoadingStatus.Empty,
|
||||
source: ConfigSource.MainnetCosmosDirectory,
|
||||
networkType: NetworkType.Mainnet,
|
||||
favorite: fav as string[],
|
||||
favoriteMap: favMap as Record<string, boolean>,
|
||||
chains: {} as Record<string, ChainConfig>,
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
length() : number {
|
||||
return Object.keys(this.chains).length
|
||||
}
|
||||
length(): number {
|
||||
return Object.keys(this.chains).length;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
initial() {
|
||||
this.loadingFromLocal()
|
||||
this.loadingFromLocal();
|
||||
// this.loadingFromRegistry()
|
||||
},
|
||||
async loadingFromRegistry() {
|
||||
if(this.status === LoadingStatus.Empty) {
|
||||
this.status = LoadingStatus.Loading
|
||||
get(this.source).then((res)=> {
|
||||
res.chains.forEach(( x: DirectoryChain ) => {
|
||||
this.chains[x.chain_name] = fromDirectory(x)
|
||||
});
|
||||
this.status = LoadingStatus.Loaded
|
||||
})
|
||||
if (this.status === LoadingStatus.Empty) {
|
||||
this.status = LoadingStatus.Loading;
|
||||
get(this.source).then((res) => {
|
||||
res.chains.forEach((x: DirectoryChain) => {
|
||||
this.chains[x.chain_name] = fromDirectory(x);
|
||||
});
|
||||
this.status = LoadingStatus.Loaded;
|
||||
});
|
||||
}
|
||||
},
|
||||
async loadingFromLocal() {
|
||||
const source: Record<string, LocalConfig> = this.networkType === NetworkType.Mainnet
|
||||
? import.meta.glob('../../chains/mainnet/*.json', {eager: true})
|
||||
: import.meta.glob('../../chains/testnet/*.json', {eager: true})
|
||||
Object.values<LocalConfig>(source).forEach((x: LocalConfig) => {
|
||||
this.chains[x.chain_name] = fromLocal(x)
|
||||
})
|
||||
this.setupDefault()
|
||||
this.status = LoadingStatus.Loaded
|
||||
const source: Record<string, LocalConfig> =
|
||||
this.networkType === NetworkType.Mainnet
|
||||
? import.meta.glob('../../chains/mainnet/*.json', { eager: true })
|
||||
: import.meta.glob('../../chains/testnet/*.json', { eager: true });
|
||||
Object.values<LocalConfig>(source).forEach((x: LocalConfig) => {
|
||||
this.chains[x.chain_name] = fromLocal(x);
|
||||
});
|
||||
this.setupDefault();
|
||||
this.status = LoadingStatus.Loaded;
|
||||
},
|
||||
setupDefault() {
|
||||
if(this.length > 0) {
|
||||
const blockchain = useBlockchain()
|
||||
for(let i=0; i < this.favorite.length; i++) {
|
||||
if(!blockchain.chainName && this.chains[this.favorite[i]]) {
|
||||
blockchain.setCurrent(this.favorite[i])
|
||||
if (this.length > 0) {
|
||||
const blockchain = useBlockchain();
|
||||
for (let i = 0; i < this.favorite.length; i++) {
|
||||
if (!blockchain.chainName && this.chains[this.favorite[i]]) {
|
||||
blockchain.setCurrent(this.favorite[i]);
|
||||
}
|
||||
}
|
||||
if(!blockchain.chainName) {
|
||||
const [first] = Object.keys(this.chains)
|
||||
blockchain.setCurrent(first)
|
||||
if (!blockchain.chainName) {
|
||||
const [first] = Object.keys(this.chains);
|
||||
blockchain.setCurrent(first);
|
||||
}
|
||||
}
|
||||
},
|
||||
setConfigSource(newSource: ConfigSource) {
|
||||
this.source = newSource
|
||||
this.initial()
|
||||
}
|
||||
}
|
||||
})
|
||||
this.source = newSource;
|
||||
this.initial();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -17,5 +17,28 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
require("daisyui")
|
||||
],
|
||||
daisyui: {
|
||||
themes: [
|
||||
{
|
||||
myTheme: {
|
||||
info: "#666CFF",
|
||||
}
|
||||
},
|
||||
{
|
||||
light: {
|
||||
...require("daisyui/src/colors/themes")["[data-theme=light]"],
|
||||
info: "#666CFF",
|
||||
}
|
||||
},
|
||||
{
|
||||
dark: {
|
||||
...require("daisyui/src/colors/themes")["[data-theme=dark]"],
|
||||
info: "#666CFF",
|
||||
}
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user