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

fix: chain network switch

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-26 15:05:20 +08:00
parent f693684222
commit 6a9823893c
1 changed files with 60 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
src/layouts/components/ChainProfile.vue
View File

@ -1,84 +1,89 @@
<script setup lang="ts"> <script setup lang="ts">
import router from '@/router';
import { useBlockchain, useBaseStore, type Endpoint } from '@/stores'; import { useBlockchain, useBaseStore, type Endpoint } from '@/stores';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
const chainStore = useBlockchain(); const chainStore = useBlockchain();
const baseStore = useBaseStore(); const baseStore = useBaseStore();
chainStore.initial(); chainStore.initial();
const router = useRouter();
function changeEndpoint(item: Endpoint) { function changeEndpoint(item: Endpoint) {
console.log('change') chainStore.setRestEndpoint(item);
chainStore.setRestEndpoint(item) if (chainStore.current) router.push(`/${chainStore.current.chainName}`);
const router = useRouter()
if(chainStore.current) router.push(`/${chainStore.current.chainName}`)
} }
</script> </script>
<template> <template>
<div class="flex items-center"> <div class="dropdown">
<div class="dropdown"> <label tabindex="0" class="flex items-center">
<div tabindex="0" class="p-1 relative mr-3 cursor-pointer"> <div class="p-1 relative mr-3 cursor-pointer">
<img v-lazy="chainStore.logo" class="w-9 h-9 rounded-full" /> <img v-lazy="chainStore.logo" class="w-9 h-9 rounded-full" />
<div <div
class="w-2 h-2 rounded-full bg-yes absolute right-0 bottom-0 shadow" class="w-2 h-2 rounded-full bg-yes absolute right-0 bottom-0 shadow"
></div> ></div>
</div> </div>
<div <div class="flex-1 w-0">
class="dropdown-content w-80 menu shadow bg-base-200 rounded-box max-h-[300px] overflow-auto"
>
<!-- rest -->
<div <div
class="px-4 py-2 text-sm text-gray-400" :key="
v-if="chainStore.current?.endpoints?.rest" baseStore.latest?.block?.header?.height ||
chainStore.chainName ||
''
"
class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200 hidden md:!block"
> >
Rest Endpoint #{{
baseStore.latest?.block?.header?.height ||
chainStore.chainName ||
''
}}
</div> </div>
<label <div
v-for="(item, index) in chainStore.current?.endpoints?.rest" class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block"
class="px-4 py-2 w-full hover:bg-gray-100 dark:bg-[#384059] cursor-pointer"
:key="index"
> >
<div class="flex flex-col" {{ chainStore.connErr || chainStore.endpoint.address }}
@click="changeEndpoint(item)">
<div class="flex items-center justify-between w-full">
<div class="text-gray-500 dark:text-gray-200 capitalize">
{{ item.provider }}
</div>
<span
v-if="item.address === chainStore.endpoint?.address"
class="bg-yes inline-block h-2 w-2 rounded-full"
/>
</div>
<div class="text-gray-400 text-xs whitespace-nowrap">
{{ item.address }}
</div>
</div>
</label>
<!-- rest -->
<div class="px-4 py-2 text-sm text-gray-400">
Information
</div>
<div class="w-full hover:bg-gray-100 dark:bg-[#384059]">
<div class="py-2 px-4">
Chain Id: {{ baseStore.latest.block?.header.chain_id }}
</div>
<div class="py-2 px-4">
Height: {{ baseStore.latest.block?.header.height }}
</div>
</div> </div>
</div> </div>
</div> </label>
<div class="flex-1 w-0"> <div
<div :key="baseStore.latest?.block?.header?.height || chainStore.chainName || ''" tabindex="0"
class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200 hidden md:!block" class="dropdown-content w-80 menu shadow bg-base-200 rounded-box max-h-[300px] overflow-auto"
>
<!-- rest -->
<div
class="px-4 py-2 text-sm text-gray-400"
v-if="chainStore.current?.endpoints?.rest"
> >
#{{ Rest Endpoint
baseStore.latest?.block?.header?.height || chainStore.chainName || ''
}}
</div> </div>
<div <div
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block" v-for="(item, index) in chainStore.current?.endpoints?.rest"
class="px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-[#384059] cursor-pointer"
:key="index"
@click="changeEndpoint(item)"
> >
{{ chainStore.connErr || chainStore.endpoint.address }} <div class="flex flex-col">
<div class="flex items-center justify-between w-full">
<div class="text-gray-500 dark:text-gray-200 capitalize">
{{ item.provider }}
</div>
<span
v-if="item.address === chainStore.endpoint?.address"
class="bg-yes inline-block h-2 w-2 rounded-full"
/>
</div>
<div class="text-gray-400 text-xs whitespace-nowrap">
{{ item.address }}
</div>
</div>
</div>
<!-- rest -->
<div class="px-4 py-2 text-sm text-gray-400">Information</div>
<div class="w-full">
<div class="py-2 px-4">
Chain Id: {{ baseStore.latest.block?.header.chain_id }}
</div>
<div class="py-2 px-4">
Height: {{ baseStore.latest.block?.header.height }}
</div>
</div> </div>
</div> </div>
</div> </div>