forked from cerc-io/cosmos-explorer
feat: sidebar style, input search, table hight
This commit is contained in:
Alisa | Side.one
parent
317ca32a1f
commit
5026f5e6be
@ -1,5 +1,5 @@
|
||||
{
|
||||
"tabWidth": 4,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"semi": true,
|
||||
"endOfLine": "auto",
|
||||
|
||||
@ -18,7 +18,7 @@ const header = computed(() => {
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="overflow-x-auto p-4">
|
||||
<div class="overflow-auto h-[500px] p-4">
|
||||
<div
|
||||
v-if="header.length > 0"
|
||||
class="table table-compact w-full"
|
||||
@ -35,7 +35,7 @@ const header = computed(() => {
|
||||
:key="index"
|
||||
class="text-left text-capitalize"
|
||||
>
|
||||
{{ item }}
|
||||
{{ item }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -4,11 +4,16 @@ import { select } from './index';
|
||||
const props = defineProps(['value']);
|
||||
</script>
|
||||
<template>
|
||||
<div class="overflow-x-auto">
|
||||
<div class="overflow-auto">
|
||||
<table class="table table-compact w-full text-sm">
|
||||
<tbody>
|
||||
<tr v-for="(v, k) of value">
|
||||
<td class="text-capitalize whitespace-break-spaces w-1/5" style="min-width: 180px;">{{ String(k).replaceAll("_", " ") }}</td>
|
||||
<td
|
||||
class="text-capitalize whitespace-break-spaces w-1/5"
|
||||
style="min-width: 180px"
|
||||
>
|
||||
{{ String(k).replaceAll('_', ' ') }}
|
||||
</td>
|
||||
<td>
|
||||
<div
|
||||
class="overflow-hidden w-auto whitespace-normal"
|
||||
|
||||
@ -19,171 +19,281 @@ const blockchain = useBlockchain();
|
||||
|
||||
const current = ref('');
|
||||
blockchain.$subscribe((m, s) => {
|
||||
if (current.value != s.chainName) {
|
||||
current.value = s.chainName;
|
||||
blockchain.initial();
|
||||
}
|
||||
if (current.value != s.chainName) {
|
||||
current.value = s.chainName;
|
||||
blockchain.initial();
|
||||
}
|
||||
});
|
||||
|
||||
const sidebarShow = ref(false);
|
||||
const sidebarOpen = ref(true);
|
||||
|
||||
const changeOpen = (index: Number) => {
|
||||
if (index === 0) {
|
||||
sidebarOpen.value = !sidebarOpen.value;
|
||||
}
|
||||
if (index === 0) {
|
||||
sidebarOpen.value = !sidebarOpen.value;
|
||||
}
|
||||
};
|
||||
const showDiscord = window.location.host.search('ping.pub') > -1;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-gray-100 dark:bg-[#171d30]">
|
||||
<!-- sidebar -->
|
||||
<div class="w-64 fixed z-50 left-0 top-0 bottom-0 overflow-auto bg-base-100 border-r border-gray-100 dark:border-gray-700"
|
||||
:class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }">
|
||||
<div class="flex items-center pl-4 py-4 mb-1">
|
||||
<img class="w-10 h-10" src="../../assets/logo.svg" />
|
||||
<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">
|
||||
<Icon icon="mdi-close" class="text-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, index) of blockchain.computedChainMenu" :key="index" class="px-2">
|
||||
<div v-if="item?.title && item?.children?.length" :tabindex="index" class="collapse" :class="{
|
||||
'collapse-arrow': item?.children?.length > 0,
|
||||
'collapse-open': index === 0 && sidebarOpen,
|
||||
'collapse-close': index === 0 && !sidebarOpen,
|
||||
}">
|
||||
<input type="checkbox" class="cursor-pointer" @click="changeOpen(index)" />
|
||||
<div
|
||||
class="collapse-title px-4 flex items-center h-12 cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]">
|
||||
<Icon v-if="item?.icon?.icon" :icon="item?.icon?.icon" class="text-xl mr-2" :class="{
|
||||
'text-yellow-500': item?.title === 'Favorite',
|
||||
'text-blue-500': item?.title !== 'Favorite',
|
||||
}" />
|
||||
<img v-if="item?.icon?.image" :src="item?.icon?.image" class="w-6 h-6 rounded-full mr-3" />
|
||||
<div class="text-sm capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap">
|
||||
{{ item?.title }}
|
||||
</div>
|
||||
<div v-if="item?.badgeContent" class="mr-6 badge badge-sm" :class="item?.badgeClass">
|
||||
{{ item?.badgeContent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div class="menu bg-base-100 w-full">
|
||||
<RouterLink v-for="(el, key) of item?.children" @click="sidebarShow = false" :key="key"
|
||||
class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
|
||||
:to="el?.to" :class="{
|
||||
'!bg-primary':
|
||||
$route.path === el?.to?.path && item?.title !== 'Favorite',
|
||||
}">
|
||||
<Icon v-if="!el?.icon?.image" icon="mdi:chevron-right" class="mr-2 ml-3" :class="{
|
||||
'text-white': $route.path === el?.to?.path &&
|
||||
item?.title !== 'Favorite',
|
||||
}" />
|
||||
<img v-if="el?.icon?.image" :src="el?.icon?.image" class="w-6 h-6 rounded-full mr-3 ml-4" />
|
||||
<div class="text-base capitalize text-gray-500 dark:text-gray-300" :class="{
|
||||
'text-white':
|
||||
$route.path === el?.to?.path &&
|
||||
item?.title !== 'Favorite',
|
||||
}">
|
||||
{{ item?.title === 'Favorite' ? el?.title : $t(el?.title) }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RouterLink :to="item?.to" v-if="item?.title && !item?.children?.length && item?.to"
|
||||
@click="sidebarShow = false"
|
||||
class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
|
||||
<Icon v-if="item?.icon?.icon" :icon="item?.icon?.icon" class="text-xl mr-2" :class="{
|
||||
'text-yellow-500': item?.title === 'Favorite',
|
||||
'text-blue-500': item?.title !== 'Favorite',
|
||||
}" />
|
||||
<img v-if="item?.icon?.image" :src="item?.icon?.image" class="w-6 h-6 rounded-full mr-3" />
|
||||
<div class="text-sm capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap">
|
||||
{{ item?.title }}
|
||||
</div>
|
||||
<div v-if="item?.badgeContent" class=" badge badge-sm" :class="item?.badgeClass">
|
||||
{{ item?.badgeContent }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
<div v-if="item?.heading" class="px-4 text-sm pt-3 text-gray-400 pb-2 uppercase">
|
||||
{{ item?.heading }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<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 rounded-lg 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-sm capitalize flex-1 text-gray-600 dark:text-gray-200">
|
||||
Osmosis
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://becole.com"
|
||||
class="collapse-title px-4 flex items-center py-1 rounded-lg 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-sm capitalize flex-1 text-gray-600 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 rounded-lg 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-600 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 rounded-lg 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-600 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 rounded-lg 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-600 dark:text-gray-200">
|
||||
FAQ
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-100 dark:bg-[#171d30]">
|
||||
<!-- sidebar -->
|
||||
<div
|
||||
class="w-64 fixed z-50 left-0 top-0 bottom-0 overflow-auto bg-base-100 border-r border-gray-100 dark:border-gray-700"
|
||||
:class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }"
|
||||
>
|
||||
<div class="flex items-center pl-4 py-4 mb-1">
|
||||
<img class="w-10 h-10" src="../../assets/logo.svg" />
|
||||
<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"
|
||||
>
|
||||
<Icon icon="mdi-close" class="text-3xl" />
|
||||
</div>
|
||||
<div class="xl:!ml-64 px-5 pt-4">
|
||||
<!-- header -->
|
||||
<div class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10 shadow">
|
||||
<div class="text-2xl pr-3 cursor-pointer xl:!hidden" @click="sidebarShow = true">
|
||||
<Icon icon="mdi-menu" />
|
||||
</div>
|
||||
|
||||
<ChainProfile />
|
||||
|
||||
<div class="flex-1 w-0"></div>
|
||||
|
||||
<!-- <NavSearchBar />-->
|
||||
<NavBarI18n class="hidden md:!inline-block" />
|
||||
<NavbarThemeSwitcher class="!inline-block" />
|
||||
|
||||
<NavBarWallet />
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) of blockchain.computedChainMenu"
|
||||
:key="index"
|
||||
class="px-2"
|
||||
>
|
||||
<div
|
||||
v-if="item?.title && item?.children?.length"
|
||||
:tabindex="index"
|
||||
class="collapse"
|
||||
:class="{
|
||||
'collapse-arrow': item?.children?.length > 0,
|
||||
'collapse-open': index === 0 && sidebarOpen,
|
||||
'collapse-close': index === 0 && !sidebarOpen,
|
||||
}"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="cursor-pointer !h-10 block"
|
||||
@click="changeOpen(index)"
|
||||
/>
|
||||
<div
|
||||
class="collapse-title !py-0 px-4 flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]"
|
||||
>
|
||||
<Icon
|
||||
v-if="item?.icon?.icon"
|
||||
:icon="item?.icon?.icon"
|
||||
class="text-xl mr-2"
|
||||
:class="{
|
||||
'text-yellow-500': item?.title === 'Favorite',
|
||||
'text-blue-500': item?.title !== 'Favorite',
|
||||
}"
|
||||
/>
|
||||
<img
|
||||
v-if="item?.icon?.image"
|
||||
:src="item?.icon?.image"
|
||||
class="w-6 h-6 rounded-full mr-3"
|
||||
/>
|
||||
<div
|
||||
class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap"
|
||||
>
|
||||
{{ item?.title }}
|
||||
</div>
|
||||
|
||||
<!-- 👉 Pages -->
|
||||
<RouterView v-slot="{ Component }">
|
||||
<Transition mode="out-in">
|
||||
<Component :is="Component" />
|
||||
</Transition>
|
||||
</RouterView>
|
||||
|
||||
<newFooter />
|
||||
<div
|
||||
v-if="item?.badgeContent"
|
||||
class="mr-6 badge badge-sm"
|
||||
:class="item?.badgeClass"
|
||||
>
|
||||
{{ item?.badgeContent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div class="menu bg-base-100 w-full">
|
||||
<RouterLink
|
||||
v-for="(el, key) of item?.children"
|
||||
@click="sidebarShow = false"
|
||||
:key="key"
|
||||
class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
|
||||
:to="el?.to"
|
||||
:class="{
|
||||
'!bg-primary':
|
||||
$route.path === el?.to?.path && item?.title !== 'Favorite',
|
||||
}"
|
||||
>
|
||||
<Icon
|
||||
v-if="!el?.icon?.image"
|
||||
icon="mdi:chevron-right"
|
||||
class="mr-2 ml-3"
|
||||
:class="{
|
||||
'text-white':
|
||||
$route.path === el?.to?.path &&
|
||||
item?.title !== 'Favorite',
|
||||
}"
|
||||
/>
|
||||
<img
|
||||
v-if="el?.icon?.image"
|
||||
:src="el?.icon?.image"
|
||||
class="w-6 h-6 rounded-full mr-3 ml-4"
|
||||
/>
|
||||
<div
|
||||
class="text-base capitalize text-gray-500 dark:text-gray-300"
|
||||
:class="{
|
||||
'text-white':
|
||||
$route.path === el?.to?.path &&
|
||||
item?.title !== 'Favorite',
|
||||
}"
|
||||
>
|
||||
{{ item?.title === 'Favorite' ? el?.title : $t(el?.title) }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RouterLink
|
||||
:to="item?.to"
|
||||
v-if="item?.title && !item?.children?.length && item?.to"
|
||||
@click="sidebarShow = false"
|
||||
class=" cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
|
||||
>
|
||||
<Icon
|
||||
v-if="item?.icon?.icon"
|
||||
:icon="item?.icon?.icon"
|
||||
class="text-xl mr-2"
|
||||
:class="{
|
||||
'text-yellow-500': item?.title === 'Favorite',
|
||||
'text-blue-500': item?.title !== 'Favorite',
|
||||
}"
|
||||
/>
|
||||
<img
|
||||
v-if="item?.icon?.image"
|
||||
:src="item?.icon?.image"
|
||||
class="w-6 h-6 rounded-full mr-3"
|
||||
/>
|
||||
<div
|
||||
class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap"
|
||||
>
|
||||
{{ item?.title }}
|
||||
</div>
|
||||
<div
|
||||
v-if="item?.badgeContent"
|
||||
class="badge badge-sm"
|
||||
:class="item?.badgeClass"
|
||||
>
|
||||
{{ item?.badgeContent }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
<div
|
||||
v-if="item?.heading"
|
||||
class="px-4 text-sm text-gray-400 pb-2 uppercase"
|
||||
>
|
||||
{{ item?.heading }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
|
||||
Sponsors
|
||||
</div>
|
||||
<a
|
||||
href="https://osmosis.zone"
|
||||
target="_blank"
|
||||
class="py-2 px-4 flex items-center cursor-pointer rounded-lg 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-sm capitalize flex-1 text-gray-600 dark:text-gray-200"
|
||||
>
|
||||
Osmosis
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://becole.com"
|
||||
target="_blank"
|
||||
class="py-2 px-4 flex items-center cursor-pointer rounded-lg 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-sm capitalize flex-1 text-gray-600 dark:text-gray-200"
|
||||
>
|
||||
Becole
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">Links</div>
|
||||
<a
|
||||
href="https://twitter.com/ping_pub"
|
||||
target="_blank"
|
||||
class="py-2 px-4 flex items-center cursor-pointer rounded-lg 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-600 dark:text-gray-200"
|
||||
>
|
||||
Twitter
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
v-if="showDiscord"
|
||||
href="https://discord.com/invite/CmjYVSr6GW"
|
||||
target="_blank"
|
||||
class="py-2 px-4 flex items-center rounded-lg cursor-pointer 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-600 dark:text-gray-200"
|
||||
>
|
||||
Discord
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/ping-pub/explorer/discussions"
|
||||
target="_blank"
|
||||
class="py-2 px-4 flex items-center rounded-lg cursor-pointer 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-600 dark:text-gray-200"
|
||||
>
|
||||
FAQ
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xl:!ml-64 px-5 pt-4">
|
||||
<!-- header -->
|
||||
<div
|
||||
class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10 shadow"
|
||||
>
|
||||
<div
|
||||
class="text-2xl pr-3 cursor-pointer xl:!hidden"
|
||||
@click="sidebarShow = true"
|
||||
>
|
||||
<Icon icon="mdi-menu" />
|
||||
</div>
|
||||
|
||||
<ChainProfile />
|
||||
|
||||
<div class="flex-1 w-0"></div>
|
||||
|
||||
<!-- <NavSearchBar />-->
|
||||
<NavBarI18n class="hidden md:!inline-block" />
|
||||
<NavbarThemeSwitcher class="!inline-block" />
|
||||
|
||||
<NavBarWallet />
|
||||
</div>
|
||||
|
||||
<!-- 👉 Pages -->
|
||||
<RouterView v-slot="{ Component }">
|
||||
<Transition mode="out-in">
|
||||
<Component :is="Component" />
|
||||
</Transition>
|
||||
</RouterView>
|
||||
|
||||
<newFooter />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
import { useWasmStore } from '../WasmStore';
|
||||
import { ref } from 'vue';
|
||||
import type {
|
||||
ContractInfo,
|
||||
PaginabledContractStates,
|
||||
PaginabledContracts,
|
||||
ContractInfo,
|
||||
PaginabledContractStates,
|
||||
PaginabledContracts,
|
||||
} from '../types';
|
||||
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
|
||||
import { useFormatter, useTxDialog } from '@/stores';
|
||||
@ -13,20 +13,20 @@ import { PageRequest } from '@/types';
|
||||
|
||||
const props = defineProps(['code_id', 'chain']);
|
||||
|
||||
const pageRequest = ref(new PageRequest())
|
||||
const pageRequest = ref(new PageRequest());
|
||||
const response = ref({} as PaginabledContracts);
|
||||
|
||||
const wasmStore = useWasmStore();
|
||||
function loadContract(pageNum: number) {
|
||||
const pr = new PageRequest()
|
||||
pr.setPage(pageNum)
|
||||
wasmStore.wasmClient.getWasmCodeContracts(props.code_id, pr).then((x) => {
|
||||
response.value = x;
|
||||
});
|
||||
const pr = new PageRequest();
|
||||
pr.setPage(pageNum);
|
||||
wasmStore.wasmClient.getWasmCodeContracts(props.code_id, pr).then((x) => {
|
||||
response.value = x;
|
||||
});
|
||||
}
|
||||
loadContract(1)
|
||||
loadContract(1);
|
||||
|
||||
const dialog = useTxDialog()
|
||||
const dialog = useTxDialog();
|
||||
const format = useFormatter();
|
||||
const infoDialog = ref(false);
|
||||
const info = ref({} as ContractInfo);
|
||||
@ -34,66 +34,68 @@ const state = ref({} as PaginabledContractStates);
|
||||
const selected = ref('');
|
||||
|
||||
function showInfo(address: string) {
|
||||
wasmStore.wasmClient.getWasmContracts(address).then((x) => {
|
||||
info.value = x.contract_info;
|
||||
});
|
||||
wasmStore.wasmClient.getWasmContracts(address).then((x) => {
|
||||
info.value = x.contract_info;
|
||||
});
|
||||
}
|
||||
function showState(address: string) {
|
||||
selected.value = address
|
||||
pageload(1)
|
||||
selected.value = address;
|
||||
pageload(1);
|
||||
}
|
||||
|
||||
function pageload(p: number) {
|
||||
pageRequest.value.setPage(p)
|
||||
wasmStore.wasmClient.getWasmContractStates(selected.value, pageRequest.value).then((x) => {
|
||||
state.value = x;
|
||||
pageRequest.value.setPage(p);
|
||||
wasmStore.wasmClient
|
||||
.getWasmContractStates(selected.value, pageRequest.value)
|
||||
.then((x) => {
|
||||
state.value = x;
|
||||
});
|
||||
}
|
||||
|
||||
function showQuery(address: string) {
|
||||
selected.value = address;
|
||||
query.value = '';
|
||||
result.value = '';
|
||||
selected.value = address;
|
||||
query.value = '';
|
||||
result.value = '';
|
||||
}
|
||||
|
||||
function queryContract() {
|
||||
try {
|
||||
if (selectedRadio.value === 'raw') {
|
||||
wasmStore.wasmClient
|
||||
.getWasmContractRawQuery(selected.value, query.value)
|
||||
.then((x) => {
|
||||
result.value = JSON.stringify(x);
|
||||
})
|
||||
.catch((err) => {
|
||||
result.value = JSON.stringify(err);
|
||||
});
|
||||
} else {
|
||||
wasmStore.wasmClient
|
||||
.getWasmContractSmartQuery(selected.value, query.value)
|
||||
.then((x) => {
|
||||
result.value = JSON.stringify(x);
|
||||
})
|
||||
.catch((err) => {
|
||||
result.value = JSON.stringify(err);
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
result.value = JSON.stringify(err); // not works for now
|
||||
try {
|
||||
if (selectedRadio.value === 'raw') {
|
||||
wasmStore.wasmClient
|
||||
.getWasmContractRawQuery(selected.value, query.value)
|
||||
.then((x) => {
|
||||
result.value = JSON.stringify(x);
|
||||
})
|
||||
.catch((err) => {
|
||||
result.value = JSON.stringify(err);
|
||||
});
|
||||
} else {
|
||||
wasmStore.wasmClient
|
||||
.getWasmContractSmartQuery(selected.value, query.value)
|
||||
.then((x) => {
|
||||
result.value = JSON.stringify(x);
|
||||
})
|
||||
.catch((err) => {
|
||||
result.value = JSON.stringify(err);
|
||||
});
|
||||
}
|
||||
// TODO, show error in the result.
|
||||
} catch (err) {
|
||||
result.value = JSON.stringify(err); // not works for now
|
||||
}
|
||||
// TODO, show error in the result.
|
||||
}
|
||||
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Raw Query',
|
||||
desc: 'Return raw result',
|
||||
value: 'raw',
|
||||
},
|
||||
{
|
||||
title: 'Smart Query',
|
||||
desc: 'Return structure result if possible',
|
||||
value: 'smart',
|
||||
},
|
||||
{
|
||||
title: 'Raw Query',
|
||||
desc: 'Return raw result',
|
||||
value: 'raw',
|
||||
},
|
||||
{
|
||||
title: 'Smart Query',
|
||||
desc: 'Return structure result if possible',
|
||||
value: 'smart',
|
||||
},
|
||||
];
|
||||
|
||||
const selectedRadio = ref('raw');
|
||||
@ -101,130 +103,193 @@ const query = ref('');
|
||||
const result = ref('');
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title truncate w-full">
|
||||
Contract List of Code: {{ props.code_id }}
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-compact w-full mt-4">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="position: relative; z-index: 2">Contract List</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(v, index) in response.contracts" :key="index" class="hover">
|
||||
<td>{{ v }}</td>
|
||||
<td>
|
||||
<label @click="showInfo(v)" for="modal-contract-detail"
|
||||
class="btn btn-primary btn-xs text-xs mr-2">contract</label>
|
||||
<div>
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title truncate w-full">
|
||||
Contract List of Code: {{ props.code_id }}
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-compact w-full mt-4">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="position: relative; z-index: 2">Contract List</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(v, index) in response.contracts"
|
||||
:key="index"
|
||||
class="hover"
|
||||
>
|
||||
<td>{{ v }}</td>
|
||||
<td>
|
||||
<label
|
||||
@click="showInfo(v)"
|
||||
for="modal-contract-detail"
|
||||
class="btn btn-primary btn-xs text-xs mr-2"
|
||||
>contract</label
|
||||
>
|
||||
|
||||
<label class="btn btn-primary btn-xs text-xs mr-2" for="modal-contract-states"
|
||||
@click="showState(v)">
|
||||
States
|
||||
</label>
|
||||
<label for="modal-contract-query" class="btn btn-primary btn-xs text-xs mr-2"
|
||||
@click="showQuery(v)">
|
||||
Query
|
||||
</label>
|
||||
<label for="wasm_execute_contract" class="btn btn-primary btn-xs text-xs"
|
||||
@click="dialog.open('wasm_execute_contract', { contract: v })">
|
||||
Execute
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex justify-between">
|
||||
<PaginationBar :limit="50" :total="response.pagination?.total" :callback="loadContract" />
|
||||
<label for="wasm_instantiate_contract" class="btn btn-primary my-5"
|
||||
@click="dialog.open('wasm_instantiate_contract', { codeId: props.code_id })">Instantiate
|
||||
Contract</label>
|
||||
</div>
|
||||
</div>
|
||||
<label
|
||||
class="btn btn-primary btn-xs text-xs mr-2"
|
||||
for="modal-contract-states"
|
||||
@click="showState(v)"
|
||||
>
|
||||
States
|
||||
</label>
|
||||
<label
|
||||
for="modal-contract-query"
|
||||
class="btn btn-primary btn-xs text-xs mr-2"
|
||||
@click="showQuery(v)"
|
||||
>
|
||||
Query
|
||||
</label>
|
||||
<label
|
||||
for="wasm_execute_contract"
|
||||
class="btn btn-primary btn-xs text-xs"
|
||||
@click="dialog.open('wasm_execute_contract', { contract: v })"
|
||||
>
|
||||
Execute
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex justify-between">
|
||||
<PaginationBar
|
||||
:limit="50"
|
||||
:total="response.pagination?.total"
|
||||
:callback="loadContract"
|
||||
/>
|
||||
<label
|
||||
for="wasm_instantiate_contract"
|
||||
class="btn btn-primary my-5"
|
||||
@click="
|
||||
dialog.open('wasm_instantiate_contract', {
|
||||
codeId: props.code_id,
|
||||
})
|
||||
"
|
||||
>Instantiate Contract</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="modal-contract-detail" class="modal-toggle" />
|
||||
<label for="modal-contract-detail" class="modal cursor-pointer">
|
||||
<label class="modal-box relative p-2" for="">
|
||||
<div>
|
||||
<div class="flex items-center justify-between px-3 pt-2">
|
||||
<div class="text-lg">Contract Detail</div>
|
||||
<label @click="infoDialog = false" for="modal-contract-detail"
|
||||
class="btn btn-sm btn-circle">✕</label>
|
||||
</div>
|
||||
<div>
|
||||
<DynamicComponent :value="info" />
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<input type="checkbox" id="modal-contract-states" class="modal-toggle" />
|
||||
<label for="modal-contract-states" class="modal cursor-pointer">
|
||||
<label class="modal-box w-11/12 max-w-5xl" for="">
|
||||
<div>
|
||||
<div class="flex items-center justify-between px-3 pt-2 mb-4">
|
||||
<div class="text-lg">Contract States</div>
|
||||
<label @click="infoDialog = false" for="modal-contract-states"
|
||||
class="btn btn-sm btn-circle">✕</label>
|
||||
</div>
|
||||
<div class="overflow-auto">
|
||||
<table class="table table-compact w-full text-sm">
|
||||
<tr v-for="(v, index) in state.models" :key="index" class="hover">
|
||||
<td class="" :data-tip="format.hexToString(v.key)">
|
||||
<span class="font-bold">{{ format.hexToString(v.key) }}</span>
|
||||
</td>
|
||||
<td class="text-left w-3/4" :title="format.base64ToString(v.value)">
|
||||
{{ format.base64ToString(v.value) }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total" :callback="pageload" />
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<input type="checkbox" id="modal-contract-query" class="modal-toggle" />
|
||||
<label for="modal-contract-query" class="modal cursor-pointer">
|
||||
<label class="modal-box w-11/12 max-w-5xl" for="">
|
||||
<div>
|
||||
<div class="flex items-center justify-between px-3 pt-2 mb-4">
|
||||
<div class="text-lg font-semibold">Query Contract</div>
|
||||
<label @click="infoDialog = false" for="modal-contract-query"
|
||||
class="btn btn-sm btn-circle">✕</label>
|
||||
</div>
|
||||
<div class="px-3">
|
||||
<div>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div class="form-control border rounded px-4" v-for="(item, index) of radioContent"
|
||||
:key="index" :class="{ 'pt-2': index === 0 }">
|
||||
<label class="label cursor-pointer justify-start" @click="selectedRadio = item?.value">
|
||||
<input type="radio" name="radio-10" class="radio radio-sm radio-primary mr-4"
|
||||
:checked="item?.value === selectedRadio" style="border: 1px solid #d2d6dc" />
|
||||
<div>
|
||||
<div class="text-base font-semibold">
|
||||
{{ item?.title }}
|
||||
</div>
|
||||
<div class="text-xs">{{ item?.desc }}</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VTextarea v-model="query" label="Query String" class="my-2" />
|
||||
<VTextarea v-model="result" label="Result" />
|
||||
</div>
|
||||
<div class="mt-4 mb-4">
|
||||
<button class="btn !btn-yes !border-yes px-4 text-white" @click="queryContract()">
|
||||
Query Contract
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<input type="checkbox" id="modal-contract-detail" class="modal-toggle" />
|
||||
<label for="modal-contract-detail" class="modal cursor-pointer">
|
||||
<label class="modal-box relative p-2" for="">
|
||||
<div>
|
||||
<div class="flex items-center justify-between px-3 pt-2">
|
||||
<div class="text-lg">Contract Detail</div>
|
||||
<label
|
||||
@click="infoDialog = false"
|
||||
for="modal-contract-detail"
|
||||
class="btn btn-sm btn-circle"
|
||||
>✕</label
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<DynamicComponent :value="info" />
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</label>
|
||||
</div></template>
|
||||
|
||||
<input type="checkbox" id="modal-contract-states" class="modal-toggle" />
|
||||
<label for="modal-contract-states" class="modal cursor-pointer">
|
||||
<label class="modal-box w-11/12 max-w-5xl" for="">
|
||||
<div>
|
||||
<div class="flex items-center justify-between px-3 pt-2 mb-4">
|
||||
<div class="text-lg">Contract States</div>
|
||||
<label
|
||||
@click="infoDialog = false"
|
||||
for="modal-contract-states"
|
||||
class="btn btn-sm btn-circle"
|
||||
>✕</label
|
||||
>
|
||||
</div>
|
||||
<div class="overflow-auto">
|
||||
<table class="table table-compact w-full text-sm">
|
||||
<tr v-for="(v, index) in state.models" :key="index" class="hover">
|
||||
<td class="" :data-tip="format.hexToString(v.key)">
|
||||
<span class="font-bold">{{ format.hexToString(v.key) }}</span>
|
||||
</td>
|
||||
<td
|
||||
class="text-left w-3/4"
|
||||
:title="format.base64ToString(v.value)"
|
||||
>
|
||||
{{ format.base64ToString(v.value) }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<PaginationBar
|
||||
:limit="pageRequest.limit"
|
||||
:total="state.pagination?.total"
|
||||
:callback="pageload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<input type="checkbox" id="modal-contract-query" class="modal-toggle" />
|
||||
<label for="modal-contract-query" class="modal cursor-pointer">
|
||||
<label class="modal-box w-11/12 max-w-5xl" for="">
|
||||
<div>
|
||||
<div class="flex items-center justify-between px-3 pt-2 mb-4">
|
||||
<div class="text-lg font-semibold">Query Contract</div>
|
||||
<label
|
||||
@click="infoDialog = false"
|
||||
for="modal-contract-query"
|
||||
class="btn btn-sm btn-circle"
|
||||
>✕</label
|
||||
>
|
||||
</div>
|
||||
<div class="px-3">
|
||||
<div>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div
|
||||
class="form-control border rounded px-4"
|
||||
v-for="(item, index) of radioContent"
|
||||
:key="index"
|
||||
:class="{ 'pt-2': index === 0 }"
|
||||
>
|
||||
<label
|
||||
class="label cursor-pointer justify-start"
|
||||
@click="selectedRadio = item?.value"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="radio-10"
|
||||
class="radio radio-sm radio-primary mr-4"
|
||||
:checked="item?.value === selectedRadio"
|
||||
style="border: 1px solid #d2d6dc"
|
||||
/>
|
||||
<div>
|
||||
<div class="text-base font-semibold">
|
||||
{{ item?.title }}
|
||||
</div>
|
||||
<div class="text-xs">{{ item?.desc }}</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VTextarea v-model="query" label="Query String" class="my-2" />
|
||||
<VTextarea v-model="result" label="Result" />
|
||||
</div>
|
||||
<div class="mt-4 mb-4">
|
||||
<button
|
||||
class="btn !btn-yes !border-yes px-4 text-white"
|
||||
@click="queryContract()"
|
||||
>
|
||||
Query Contract
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -45,7 +45,7 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<!-- Node Information -->
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4ß rounded-sm mt-6">
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded-sm mt-6">
|
||||
<div class="text-base mb-3 text-main">{{ store.nodeVersion?.title }}</div>
|
||||
<ArrayObjectElement :value="store.nodeVersion?.items" :thead="false" />
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { Icon } from '@iconify/vue';
|
||||
import {
|
||||
useDashboard,
|
||||
LoadingStatus,
|
||||
@ -6,14 +7,11 @@ import {
|
||||
} from '@/stores/useDashboard';
|
||||
import ChainSummary from '@/components/ChainSummary.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useBlockchain } from '@/stores';
|
||||
|
||||
const dashboard = useDashboard();
|
||||
|
||||
dashboard.$subscribe((mutation, state) => {
|
||||
localStorage.setItem('favorite', JSON.stringify(state.favorite));
|
||||
// TODO: cause endless loop
|
||||
// dashboard.loadingPrices()
|
||||
});
|
||||
const keywords = ref('');
|
||||
const chains = computed(() => {
|
||||
@ -28,7 +26,7 @@ const chains = computed(() => {
|
||||
</script>
|
||||
<template>
|
||||
<div class="">
|
||||
<div class="flex items-center justify-center mb-6 mt-10">
|
||||
<div class="flex items-center justify-center mb-6 mt-14">
|
||||
<div class="w-8 md:!w-16 rounded-full mr-3">
|
||||
<img src="/logo.svg" />
|
||||
</div>
|
||||
@ -52,17 +50,11 @@ const chains = computed(() => {
|
||||
<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>
|
||||
<div class="flex items-center rounded-full bg-base-100 border border-gray-200 dark:border-gray-700 mt-10">
|
||||
<Icon icon="mdi:magnify" class="text-2xl text-gray-400 ml-3"/>
|
||||
<input :placeholder="$t('index.search_placeholder')" class="px-4 h-10 bg-transparent flex-1 outline-none text-base" v-model="keywords" />
|
||||
<div class="px-4 text-base">{{ chains.length }}/{{ dashboard.length }}</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
|
||||
|
||||
@ -11,14 +11,7 @@ module.exports = {
|
||||
main: 'var(--text-main)',
|
||||
secondary: 'var(--text-secondary)',
|
||||
active: 'var(--bg-active)',
|
||||
},
|
||||
borderRadius: {
|
||||
none: '0',
|
||||
xs: '.125rem',
|
||||
sm: '.25rem',
|
||||
DEFAULT: '.5rem',
|
||||
lg: '.75rem',
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [require('daisyui')],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user