From 724ba72a710e2733ec8abc5832f0e4d950b6cc16 Mon Sep 17 00:00:00 2001 From: liangping <18786721@qq.com> Date: Mon, 12 Jun 2023 14:59:24 +0800 Subject: [PATCH] imp: improve dynamic components --- src/components/dynamic/ArrayObjectElement.vue | 16 +++------------- src/components/dynamic/ObjectElement.vue | 2 +- .../dynamic/ObjectHorizontalElement.vue | 2 +- src/components/dynamic/TextElement.vue | 17 +++++++++++++++-- src/components/dynamic/TokenElement.vue | 10 ++++++++++ src/components/dynamic/index.ts | 5 ++++- src/libs/utils.ts | 6 ++++++ src/modules/[chain]/tx/[hash].vue | 5 ++--- src/stores/useDashboard.ts | 4 +++- src/stores/useFormatter.ts | 4 ++++ 10 files changed, 49 insertions(+), 22 deletions(-) create mode 100644 src/components/dynamic/TokenElement.vue diff --git a/src/components/dynamic/ArrayObjectElement.vue b/src/components/dynamic/ArrayObjectElement.vue index 3821ea9d..918c8663 100644 --- a/src/components/dynamic/ArrayObjectElement.vue +++ b/src/components/dynamic/ArrayObjectElement.vue @@ -18,16 +18,8 @@ const header = computed(() => { }); diff --git a/src/components/dynamic/ObjectElement.vue b/src/components/dynamic/ObjectElement.vue index a18ac523..7722e3ff 100644 --- a/src/components/dynamic/ObjectElement.vue +++ b/src/components/dynamic/ObjectElement.vue @@ -9,7 +9,7 @@ const props = defineProps(['value']); {{ String(k).replaceAll('_', ' ') }} diff --git a/src/components/dynamic/ObjectHorizontalElement.vue b/src/components/dynamic/ObjectHorizontalElement.vue index b464e6df..b402b8ee 100644 --- a/src/components/dynamic/ObjectHorizontalElement.vue +++ b/src/components/dynamic/ObjectHorizontalElement.vue @@ -12,7 +12,7 @@ const changeTab = (val: string) => {
-import { useFormatter } from '@/stores'; +import { isBech32Address } from '@/libs/utils'; +import { useBlockchain, useFormatter } from '@/stores'; import MdEditor from 'md-editor-v3'; import { computed } from 'vue'; +const chainStore = useBlockchain() const props = defineProps(['value']); const format = useFormatter(); function isMD() { @@ -15,16 +17,26 @@ function isMD() { return false; } +function isAddress() { + return isBech32Address(props.value) && String(props.value).indexOf('valoper1') === -1 +} + const text = computed(() => { if(!props.value) return "" const v = props.value switch(true) { case v.length === 28 && v.endsWith("="): { - return format.validator(v) + return format.validator(v) || v + } + // 2023-06-12T03:09:38.253756368Z + case v.search(/^[1-9]\d{3}-\d{1,2}-\d{1,2}T\d{1,2}:\d{2}:\d{2}[.\d]*Z$/g) > -1: { + return new Date(v).toLocaleString(navigator.language) } } return v }) + + diff --git a/src/components/dynamic/TokenElement.vue b/src/components/dynamic/TokenElement.vue new file mode 100644 index 00000000..3ddf9693 --- /dev/null +++ b/src/components/dynamic/TokenElement.vue @@ -0,0 +1,10 @@ + + diff --git a/src/components/dynamic/index.ts b/src/components/dynamic/index.ts index 7053bf6f..5d228dd0 100644 --- a/src/components/dynamic/index.ts +++ b/src/components/dynamic/index.ts @@ -3,7 +3,7 @@ import TextElement from './TextElement.vue'; import ArrayElement from './ArrayElement.vue'; import UInt8Array from './UInt8Array.vue'; import NumberElement from './NumberElement.vue'; -import TxsElement from './TxsElement.vue'; +import TokenElement from './TokenElement.vue'; import ObjectHorizontalElement from './ObjectHorizontalElement.vue'; import Long from 'long'; @@ -31,6 +31,9 @@ function selectObject(v: Object, direct?: string) { return UInt8Array; case Array.isArray(v): return ArrayElement; + case v && Object.keys(v).includes('amount') && Object.keys(v).includes('denom'): { + return TokenElement; + } case direct === 'horizontal': return ObjectHorizontalElement; default: diff --git a/src/libs/utils.ts b/src/libs/utils.ts index b374fe44..2aca768e 100644 --- a/src/libs/utils.ts +++ b/src/libs/utils.ts @@ -103,6 +103,12 @@ export function isHexAddress(v: any) { return v.length === 28; } +export function isBech32Address(v?: string) { + if(!v) return "" + const pattern = /^[a-z\d]+1[a-z\d]{38}$/g + return v.search(pattern) > -1 +} + export function hexToRgb(hex: string) { // remove '#' hex = hex.replace('#', ''); diff --git a/src/modules/[chain]/tx/[hash].vue b/src/modules/[chain]/tx/[hash].vue index 5ec339a8..fca9790a 100644 --- a/src/modules/[chain]/tx/[hash].vue +++ b/src/modules/[chain]/tx/[hash].vue @@ -56,7 +56,7 @@ const messages = computed(() => { Time - {{ tx.tx_response.timestamp }} ({{ + {{ format.toLocaleDate(tx.tx_response.timestamp) }} ({{ format.toDay(tx.tx_response.timestamp, 'from') }}) @@ -92,9 +92,8 @@ const messages = computed(() => {

Messages: ({{ messages.length }})

-
-
+
diff --git a/src/stores/useDashboard.ts b/src/stores/useDashboard.ts index 5f763a8d..877ca10b 100644 --- a/src/stores/useDashboard.ts +++ b/src/stores/useDashboard.ts @@ -278,7 +278,9 @@ export const useDashboard = defineStore('dashboard', { }, loadingPrices() { const coinIds = [] as string[] - Object.keys(this.favoriteMap).forEach(k => { + const keys = Object.keys(this.chains) // load all blockchain + // Object.keys(this.favoriteMap) //only load favorite once it has too many chains + keys.forEach(k => { if(this.chains[k]) this.chains[k].assets.forEach(a => { if(a.coingecko_id !== undefined && a.coingecko_id.length > 0) { coinIds.push(a.coingecko_id) diff --git a/src/stores/useFormatter.ts b/src/stores/useFormatter.ts index f801adf9..34b90411 100644 --- a/src/stores/useFormatter.ts +++ b/src/stores/useFormatter.ts @@ -236,6 +236,10 @@ export const useFormatter = defineStore('formatter', { numberAndSign(input: number, fmt = '+0,0') { return numeral(input).format(fmt); }, + toLocaleDate(time?: string | number | Date) { + if(!time) return "" + return new Date(time).toLocaleString(navigator.language) + }, toDay(time?: string | number| Date, format = 'long') { if (!time) return ''; if (format === 'long') {