cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #398 from alisaweb3/v3-single

Browse Source 
Fix: switch chain network, NavBarWallet Warning
This commit is contained in:
ping 2023-05-26 15:19:06 +08:00 committed by GitHub
commit 4d05e8ebf2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 158 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,28 +1,49 @@
<script setup lang="ts">
import router from '@/router';
import { useBlockchain, useBaseStore, type Endpoint } from '@/stores';
import { useRouter } from 'vue-router';
const chainStore = useBlockchain();
const baseStore = useBaseStore();
chainStore.initial();
const router = useRouter();
function changeEndpoint(item: Endpoint) {
console.log('change')
chainStore.setRestEndpoint(item)
const router = useRouter()
if(chainStore.current) router.push(`/${chainStore.current.chainName}`)
chainStore.setRestEndpoint(item);
if (chainStore.current) router.push(`/${chainStore.current.chainName}`);
}
</script>
<template>
<div class="flex items-center">
<div class="dropdown">
<div tabindex="0" class="p-1 relative mr-3 cursor-pointer">
<label tabindex="0" class="flex items-center">
<div class="p-1 relative mr-3 cursor-pointer">
<img v-lazy="chainStore.logo" class="w-9 h-9 rounded-full" />
<div
class="w-2 h-2 rounded-full bg-yes absolute right-0 bottom-0 shadow"
></div>
</div>
<div class="flex-1 w-0">
<div
:key="
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"
>
#{{
baseStore.latest?.block?.header?.height ||
chainStore.chainName ||
''
}}
</div>
<div
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block"
>
{{ chainStore.connErr || chainStore.endpoint.address }}
</div>
</div>
</label>
<div
tabindex="0"
class="dropdown-content w-80 menu shadow bg-base-200 rounded-box max-h-[300px] overflow-auto"
>
<!-- rest -->
@ -32,13 +53,13 @@ function changeEndpoint(item: Endpoint) {
>
Rest Endpoint
</div>
<label
<div
v-for="(item, index) in chainStore.current?.endpoints?.rest"
class="px-4 py-2 w-full hover:bg-gray-100 dark:bg-[#384059] cursor-pointer"
class="px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-[#384059] cursor-pointer"
:key="index"
@click="changeEndpoint(item)"
>
<div class="flex flex-col"
@click="changeEndpoint(item)">
<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 }}
@ -52,12 +73,11 @@ function changeEndpoint(item: Endpoint) {
{{ 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]">
<!-- 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>
@ -67,19 +87,4 @@ function changeEndpoint(item: Endpoint) {
</div>
</div>
</div>
<div class="flex-1 w-0">
<div :key="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"
>
#{{
baseStore.latest?.block?.header?.height || chainStore.chainName || ''
}}
</div>
<div
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block"
>
{{ chainStore.connErr || chainStore.endpoint.address }}
</div>
</div>
</div>
</template>

81
src/layouts/components/DefaultLayout.vue
View File

@ -20,10 +20,10 @@ const dashboard = useDashboard();
dashboard.initial();
const blockchain = useBlockchain();
const current = ref("")
const current = ref('');
blockchain.$subscribe((m, s) => {
if (current.value != s.chainName) {
current.value = s.chainName
current.value = s.chainName;
blockchain.initial();
}
});
@ -36,7 +36,7 @@ const changeOpen = (index: Number) => {
sidebarOpen.value = !sidebarOpen.value;
}
};
const showDiscord = window.location.host.search("ping.pub") > -1
const showDiscord = window.location.host.search('ping.pub') > -1;
</script>
<template>
@ -51,7 +51,10 @@ const showDiscord = window.location.host.search("ping.pub") > -1
<h1 class="flex-1 ml-3 text-2xl font-semibold dark:text-white">
Ping.pub
</h1>
<div class="pr-4 cursor-pointer xl:!hidden" @click="sidebarShow = false">
<div
class="pr-4 cursor-pointer xl:!hidden"
@click="sidebarShow = false"
>
<Icon icon="mdi-close" class="text-3xl" />
</div>
</div>
@ -95,7 +98,8 @@ const showDiscord = window.location.host.search("ping.pub") > -1
</div>
<div
v-if="item?.badgeContent"
class="mr-6 badge badge-sm" :class="item?.badgeClass"
class="mr-6 badge badge-sm"
:class="item?.badgeClass"
>
{{ item?.badgeContent }}
</div>
@ -165,7 +169,8 @@ const showDiscord = window.location.host.search("ping.pub") > -1
</div>
<div
v-if="item?.badgeContent"
class="mr-6 badge badge-sm" :class="item?.badgeClass"
class="mr-6 badge badge-sm"
:class="item?.badgeClass"
>
{{ item?.badgeContent }}
</div>
@ -181,37 +186,67 @@ const showDiscord = window.location.host.search("ping.pub") > -1
<div class="px-4 text-sm pt-4 text-gray-400 pb-2 uppercase">
Sponsors
</div>
<a href="https://osmosis.zone" class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
<img src="https://ping.pub/logos/osmosis.jpg" class="w-6 h-6 rounded-full mr-3"/>
<div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
<a
href="https://osmosis.zone"
class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
>
<img
src="https://ping.pub/logos/osmosis.jpg"
class="w-6 h-6 rounded-full mr-3"
/>
<div
class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
>
Osmosis
</div>
</a>
<a href="https://becole.com" class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
<img src="https://becole.com/static/logo/logo_becole.png" class="w-6 h-6 rounded-full mr-3"/>
<div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
<a
href="https://becole.com"
class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
>
<img
src="https://becole.com/static/logo/logo_becole.png"
class="w-6 h-6 rounded-full mr-3"
/>
<div
class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
>
Becole
</div>
</a>
<div class="px-4 text-sm pt-4 text-gray-400 pb-2 uppercase">
Links
</div>
<a href="https://twitter.com/ping_pub" class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
<div class="px-4 text-sm pt-4 text-gray-400 pb-2 uppercase">Links</div>
<a
href="https://twitter.com/ping_pub"
class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
>
<Icon icon="mdi:twitter" class="text-xl mr-2" />
<div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
<div
class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
>
Twitter
</div>
</a>
<a v-if="showDiscord" href="https://discord.com/invite/CmjYVSr6GW" class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
<a
v-if="showDiscord"
href="https://discord.com/invite/CmjYVSr6GW"
class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
>
<Icon icon="mdi:discord" class="text-xl mr-2" />
<div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
<div
class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
>
Discord
</div>
</a>
<a href="https://github.com/ping-pub/explorer/discussions" class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
<a
href="https://github.com/ping-pub/explorer/discussions"
class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
>
<Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
<div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200">
<div
class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
>
FAQ
</div>
</a>
@ -237,9 +272,7 @@ const showDiscord = window.location.host.search("ping.pub") > -1
<NavBarI18n class="hidden md:!inline-block" />
<NavbarThemeSwitcher class="!inline-block" />
<NavBarWallet
class="hidden truncate md:!inline-block text-xs md:!text-sm"
/>
<NavBarWallet />
</div>
<!-- 👉 Pages -->

21
src/layouts/components/NavBarWallet.vue
View File

@ -4,7 +4,7 @@ import { Icon } from '@iconify/vue';
import { ref, computed } from 'vue';
const walletStore = useWalletStore();
const chainStore = useBlockchain();
const baseStore = useBaseStore()
const baseStore = useBaseStore();
// walletStore.$subscribe((m, s) => {
// console.log(m, s);
// });
@ -31,18 +31,18 @@ const tipMsg = computed(() => {
? { class: 'error', msg: 'Copy Error!' }
: { class: 'success', msg: 'Copy Success!' };
});
</script>
<template>
<div
class="dropdown dropdown-hover dropdown-end"
<div class="dropdown dropdown-hover dropdown-end">
<label
tabindex="0"
class="btn btn-sm m-1 lowercase hidden truncate md:!inline-flex text-xs md:!text-sm"
>
<label tabindex="0" class="btn btn-sm m-1 lowercase">
<Icon icon="mdi:wallet" />
<span class="ml-1 hidden md:block">
{{ walletStore.shortAddress || "Wallet" }}</span>
{{ walletStore.shortAddress || 'Wallet' }}</span
>
</label>
<div
tabindex="0"
@ -52,7 +52,9 @@ const tipMsg = computed(() => {
v-if="!walletStore?.currentAddress"
for="PingConnectWallet"
class="btn btn-sm"
><Icon icon="mdi:wallet"/><span class="ml-1 hidden md:block">Connect Wallet</span></label
><Icon icon="mdi:wallet" /><span class="ml-1 hidden md:block"
>Connect Wallet</span
></label
>
<div class="px-2 mb-1 text-gray-500 dark:text-gray-400 font-semibold">
{{ walletStore.connectedWallet?.wallet }}
@ -100,9 +102,7 @@ const tipMsg = computed(() => {
</div>
</div>
</div>
</div>
<div class="footer-modal">
<Teleport to="body">
<ping-connect-wallet
:chain-id="baseStore.currentChainId"
@ -110,7 +110,6 @@ const tipMsg = computed(() => {
@connect="walletStateChange"
/>
</Teleport>
</div>
</template>
<style>

13
vite.config.ts
View File

@ -15,7 +15,18 @@ import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vue({
template: {
compilerOptions: {
isCustomElement: (tag) =>
[
'ping-connect-wallet',
'ping-token-convert',
'ping-tx-dialog',
].includes(tag),
},
},
}),
vueJsx(),
vuetify({
styles: {