feat: sidebar style, input search, table hight

This commit is contained in:
Alisa | Side.one 2023-05-28 16:37:37 +08:00
parent 317ca32a1f
commit 5026f5e6be
8 changed files with 524 additions and 359 deletions

View File

@ -1,5 +1,5 @@
{
"tabWidth": 4,
"tabWidth": 2,
"singleQuote": true,
"semi": true,
"endOfLine": "auto",

View File

@ -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>

View File

@ -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"

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"

View File

@ -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')],