diff --git a/public/networks-config.json b/public/networks-config.json deleted file mode 100644 index 79ed6c897..000000000 --- a/public/networks-config.json +++ /dev/null @@ -1,41 +0,0 @@ -[ - { - "name": "mainnet", - "displayName": "MAINNET", - "url": "https://mainnet-public.mirrornode.hedera.com/", - "ledgerID": "00", - "sourcifySetup": { - "activate": true, - "repoURL": "https://repository.local/contracts/", - "serverURL": "https://localhost/server/", - "verifierURL": "https://localhost/#/", - "chainID": 295 - } - }, - { - "name": "testnet", - "displayName": "TESTNET", - "url": "https://testnet.mirrornode.hedera.com/", - "ledgerID": "01", - "sourcifySetup": { - "activate": true, - "repoURL": "https://repository.local/contracts/", - "serverURL": "https://localhost/server/", - "verifierURL": "https://localhost/#/", - "chainID": 296 - } - }, - { - "name": "previewnet", - "displayName": "PREVIEWNET", - "url": "https://previewnet.mirrornode.hedera.com/", - "ledgerID": "02", - "sourcifySetup": { - "activate": true, - "repoURL": "https://repository.local/contracts/", - "serverURL": "https://localhost/server/", - "verifierURL": "https://localhost/#/", - "chainID": 297 - } - } -] \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 7fd699a7b..380d802be 100644 --- a/src/App.vue +++ b/src/App.vue @@ -60,7 +60,9 @@ export default defineComponent({ setup() { const route = useRoute() - const onMainDashboardPage = computed( () => { return route.name == "MainDashboard" }) + const onMainDashboardPage = computed(() => { + return route.name == "MainDashboard" + }) const buildRelease = import.meta.env.VITE_BUILD_RELEASE ?? "not available" provide('buildRelease', buildRelease) @@ -92,24 +94,24 @@ export default defineComponent({ }) provide('isLargeScreen', isLargeScreen) - const onResizeHandler = () => { + const onResizeHandler = () => { windowWidth.value = window.innerWidth } const showCookiesDialog = ref(false) - const acceptCookies = ref(null) + const acceptCookies = ref(null) watch(acceptCookies, (value) => { if (value != null && value) { insertGoogleTag(import.meta.env.VITE_APP_GOOGLE_TAG_ID) } }) - provide(loadingKey, AxiosMonitor.instance.loading) - provide(initialLoadingKey, AxiosMonitor.instance.initialLoading) - provide(errorKey, AxiosMonitor.instance.error) - provide(explanationKey, AxiosMonitor.instance.explanation) - provide(suggestionKey, AxiosMonitor.instance.suggestion) + provide(loadingKey, AxiosMonitor.instance.loading) + provide(initialLoadingKey, AxiosMonitor.instance.initialLoading) + provide(errorKey, AxiosMonitor.instance.error) + provide(explanationKey, AxiosMonitor.instance.explanation) + provide(suggestionKey, AxiosMonitor.instance.suggestion) onBeforeMount(() => { const tagId = import.meta.env.VITE_APP_GOOGLE_TAG_ID @@ -154,18 +156,18 @@ export default defineComponent({ function insertGoogleTag(tagId: string) { const src1 = `https://www.googletagmanager.com/gtag/js?id=${tagId}` - let s1 = document.createElement( 'script' ); - s1.setAttribute( 'async', '' ); - s1.setAttribute( 'src', src1 ); - document.head.appendChild( s1 ); + let s1 = document.createElement('script'); + s1.setAttribute('async', ''); + s1.setAttribute('src', src1); + document.head.appendChild(s1); const src2 = `window.dataLayer = window.dataLayer || []; function gtag() {dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${import.meta.env.VITE_APP_GOOGLE_TAG_ID}');` - let s2 = document.createElement( 'script' ); + let s2 = document.createElement('script'); s2.innerHTML = src2; - document.head.appendChild( s2 ); + document.head.appendChild(s2); } @@ -179,6 +181,7 @@ section.section.is-top-section { background-repeat: no-repeat; background-size: 104px } + section.section.is-top-section.is-medium-screen { padding-bottom: 30px; background-size: 112px diff --git a/src/AppStorage.ts b/src/AppStorage.ts index ef6ddbd97..5dd6e2d7c 100644 --- a/src/AppStorage.ts +++ b/src/AppStorage.ts @@ -36,7 +36,7 @@ export class AppStorage { return result ?? networkRegistry.getDefaultEntry() } - public static setLastNetwork(newValue: string|NetworkEntry): void { + public static setLastNetwork(newValue: string | NetworkEntry): void { const newItem = typeof newValue == "string" ? newValue : newValue.name this.setLocalStorageItem(this.LAST_USED_NETWORK_KEY, newItem) } @@ -48,10 +48,10 @@ export class AppStorage { private static readonly DISCLAIMER_SKIP_KEY = 'skipDisclaimer' public static getSkipDisclaimer(): boolean { - return this.getLocalStorageItem(this.DISCLAIMER_SKIP_KEY) != null + return this.getLocalStorageItem(this.DISCLAIMER_SKIP_KEY) != null } - public static setSkipDisclaimer(newValue: boolean|null): void { + public static setSkipDisclaimer(newValue: boolean | null): void { this.setLocalStorageItem(this.DISCLAIMER_SKIP_KEY, newValue ? "true" : null) } @@ -66,7 +66,7 @@ export class AppStorage { return size ? Number(size) : null } - public static setLogsTablePageSize(newValue: number | null ): void { + public static setLogsTablePageSize(newValue: number | null): void { this.setLocalStorageItem(this.CONTRACT_LOGS_TABLE_PAGE_SIZE_KEY, newValue ? newValue?.toString() : null) } @@ -81,7 +81,7 @@ export class AppStorage { return size ? Number(size) : null } - public static setStatesTablePageSize(newValue: number | null ): void { + public static setStatesTablePageSize(newValue: number | null): void { this.setLocalStorageItem(this.CONTRACT_STATES_TABLE_PAGE_SIZE_KEY, newValue ? newValue?.toString() : null) } @@ -94,7 +94,7 @@ export class AppStorage { private static readonly COOKIE_POLICY_REJECT = 'reject' private static readonly COOKIE_POLICY_VALIDITY = 365 // days - public static getAcceptCookiePolicy(): boolean|null { + public static getAcceptCookiePolicy(): boolean | null { const policy = AppStorage.readCookie(AppStorage.COOKIE_POLICY_NAME) return policy != null ? policy === AppStorage.COOKIE_POLICY_ACCEPT : null } @@ -111,10 +111,10 @@ export class AppStorage { private static readonly SHOW_HEXA_OPCODE_KEY = 'hexaOpcode' public static getShowHexaOpcode(): boolean { - return this.getLocalStorageItem(this.SHOW_HEXA_OPCODE_KEY) != null + return this.getLocalStorageItem(this.SHOW_HEXA_OPCODE_KEY) != null } - public static setShowHexaOpcode(newValue: boolean|null): void { + public static setShowHexaOpcode(newValue: boolean | null): void { this.setLocalStorageItem(this.SHOW_HEXA_OPCODE_KEY, newValue ? "true" : null) } @@ -167,9 +167,9 @@ export class AppStorage { private static readonly INPUT_PARAMS = 'inputParams' - public static getInputParam(functionHash: string, paramName: string): unknown|null { + public static getInputParam(functionHash: string, paramName: string): unknown | null { const jsonText = this.getLocalStorageItem(this.makeInputParamKey(functionHash, paramName)) - let result: unknown|null + let result: unknown | null if (jsonText !== null) { try { result = JSON.parse(jsonText) @@ -182,7 +182,7 @@ export class AppStorage { return result } - public static setInputParam(newValue: unknown|null, functionHash: string, paramName: string) { + public static setInputParam(newValue: unknown | null, functionHash: string, paramName: string) { const jsonText = newValue !== null ? JSON.stringify(newValue) : null this.setLocalStorageItem(this.makeInputParamKey(functionHash, paramName), jsonText) } @@ -209,8 +209,8 @@ export class AppStorage { // Private // - private static getLocalStorageItem(keySuffix: string): string|null { - let result: string|null + private static getLocalStorageItem(keySuffix: string): string | null { + let result: string | null try { result = localStorage.getItem(AppStorage.VERSION + "/" + keySuffix) } catch { @@ -219,7 +219,7 @@ export class AppStorage { return result } - private static setLocalStorageItem(keySuffix: string, value: string|null) { + private static setLocalStorageItem(keySuffix: string, value: string | null) { const key = AppStorage.VERSION + "/" + keySuffix try { if (value != null) { @@ -237,11 +237,11 @@ export class AppStorage { // from routines provided at https://www.quirksmode.org/js/cookies.html // - private static createCookie(name: string, value: string, days:number): void { + private static createCookie(name: string, value: string, days: number): void { let expires if (days) { let date = new Date() - date.setTime(date.getTime() + (days*24*60*60*1000)) + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)) expires = `; expires=${date.toUTCString()}` } else { expires = "" @@ -249,13 +249,13 @@ export class AppStorage { document.cookie = `${name}=${value}${expires}; path=/` } - private static readCookie(name: string): string|null { + private static readCookie(name: string): string | null { let result = null const nameEQ = name + "=" const ca = document.cookie.split(';') - for (let i= 0; i < ca.length; i++) { + for (let i = 0; i < ca.length; i++) { let c = ca[i] - while (c.charAt(0)==' ') { + while (c.charAt(0) == ' ') { c = c.substring(1, c.length) } if (c.indexOf(nameEQ) == 0) { diff --git a/src/assets/styles/brand-theme.scss b/src/assets/styles/brand-theme.scss index 128ee1bd2..bbe577a2c 100644 --- a/src/assets/styles/brand-theme.scss +++ b/src/assets/styles/brand-theme.scss @@ -19,33 +19,33 @@ */ :root { - // Theme for MAINNET - --h-mainnet-background-color: #575757; - --h-mainnet-highlight-color: lightgrey; - --h-mainnet-page-background-color: #171717; - --h-mainnet-box-background-color: #202020; - --h-mainnet-pill-background-color: lightgrey; + // Theme for MAINNET + --h-mainnet-background-color: #575757; + --h-mainnet-highlight-color: lightgrey; + --h-mainnet-page-background-color: #171717; + --h-mainnet-box-background-color: #202020; + --h-mainnet-pill-background-color: lightgrey; - // Theme for TESTNET - --h-testnet-background-color: #575757; - --h-testnet-highlight-color: lightgrey; - --h-testnet-page-background-color: #171717; - --h-testnet-box-background-color: #202020; - --h-testnet-pill-background-color: lightgrey; + // Theme for TESTNET + --h-testnet-background-color: #575757; + --h-testnet-highlight-color: lightgrey; + --h-testnet-page-background-color: #171717; + --h-testnet-box-background-color: #202020; + --h-testnet-pill-background-color: lightgrey; - // Theme for PREVIEWNET - --h-previewnet-background-color: #575757; - --h-previewnet-highlight-color: lightgrey; - --h-previewnet-page-background-color: #171717; - --h-previewnet-box-background-color: #202020; - --h-previewnet-pill-background-color: lightgrey; + // Theme for PREVIEWNET + --h-previewnet-background-color: #575757; + --h-previewnet-highlight-color: lightgrey; + --h-previewnet-page-background-color: #171717; + --h-previewnet-box-background-color: #202020; + --h-previewnet-pill-background-color: lightgrey; - // Active Theme - --h-theme-background-color: var(--h-mainnet-background-color); - --h-theme-highlight-color: var(--h-mainnet-highlight-color); - --h-theme-page-background-color: var(--h-mainnet-page-background-color); - --h-theme-box-background-color: var(--h-mainnet-box-background-color); - --h-theme-pill-background-color: var(--h-mainnet-pill-background-color); + // Active Theme + --h-theme-background-color: var(--h-mainnet-background-color); + --h-theme-highlight-color: var(--h-mainnet-highlight-color); + --h-theme-page-background-color: var(--h-mainnet-page-background-color); + --h-theme-box-background-color: var(--h-mainnet-box-background-color); + --h-theme-pill-background-color: var(--h-mainnet-pill-background-color); } // Theme SCSS variables @@ -64,9 +64,9 @@ $h-table-hover-background-color: $h-page-background-color; // Global styling of boxes .h-box-border { - border: 0.5px solid; - border-image-slice: 1; - border-image-source: $h-background-color; + border: 0.5px solid; + border-image-slice: 1; + border-image-source: $h-background-color; } diff --git a/src/assets/styles/explorer.scss b/src/assets/styles/explorer.scss index 82d359f98..9a662f190 100644 --- a/src/assets/styles/explorer.scss +++ b/src/assets/styles/explorer.scss @@ -26,40 +26,44 @@ // .h-has-background-color { - background: $h-background-color; + background: $h-background-color; } .h-has-opacity-40 { - opacity: 0.4; + opacity: 0.4; } .h-radio-button:hover { - color: $h-radio-hover-color; + color: $h-radio-hover-color; } .h-chooser-figure { - width: 150px; - height: 80px; - line-height: 60px; - text-align: center; - padding: 8px; - border: solid 0.5px transparent; - border-radius: 6px; + width: 150px; + height: 80px; + line-height: 60px; + text-align: center; + padding: 8px; + border: solid 0.5px transparent; + border-radius: 6px; } + .h-chooser-figure:hover:not(.selected) { - border: solid 0.5px var(--h-theme-highlight-color); - background-color: initial; + border: solid 0.5px var(--h-theme-highlight-color); + background-color: initial; } + .h-chooser-figure:active:not(.selected) { - border: solid 0.5px var(--h-theme-highlight-color); - background-color: var(--h-theme-page-background-color); + border: solid 0.5px var(--h-theme-highlight-color); + background-color: var(--h-theme-page-background-color); } + .h-chooser-figure.selected { - border: solid 1.5px var(--h-theme-highlight-color); - background-color: initial; + border: solid 1.5px var(--h-theme-highlight-color); + background-color: initial; } + .h-chooser-img { - vertical-align: middle; + vertical-align: middle; } // @@ -67,189 +71,222 @@ // body { - font-feature-settings: "liga", "kern"; + font-feature-settings: "liga", "kern"; } + .h-is-primary-title { - font-style: normal; - font-weight: 900; - font-size: 30px; - line-height: 36px; + font-style: normal; + font-weight: 900; + font-size: 30px; + line-height: 36px; } + @media (max-width: 1079px) { - .h-is-primary-title { - font-size: 24px; - line-height: 29px; - } + .h-is-primary-title { + font-size: 24px; + line-height: 29px; + } } + @media (max-width: 767px) { - .h-is-primary-title { - font-size: 16px; - line-height: 19px; - } + .h-is-primary-title { + font-size: 16px; + line-height: 19px; + } } + .h-is-secondary-title { - font-style: normal; - font-weight: 900; - font-size: 22px; - line-height: 26px; + font-style: normal; + font-weight: 900; + font-size: 22px; + line-height: 26px; } + @media (max-width: 767px) { - .h-is-secondary-title { - font-size: 16px; - line-height: 19px; - } -} -.h-is-primary-subtitle { - font-style: normal; - font-weight: 900; + .h-is-secondary-title { font-size: 16px; line-height: 19px; + } +} + +.h-is-primary-subtitle { + font-style: normal; + font-weight: 900; + font-size: 16px; + line-height: 19px; } + .h-is-secondary-text { - font-style: normal; - font-weight: normal; - font-size: 34px; - line-height: 41px; - letter-spacing: -0.05em; + font-style: normal; + font-weight: normal; + font-size: 34px; + line-height: 41px; + letter-spacing: -0.05em; } + @media (max-width: 1079px) { - .h-is-secondary-text { - font-size: 26px; - line-height: 31px; - } + .h-is-secondary-text { + font-size: 26px; + line-height: 31px; + } } + @media (max-width: 767px) { - .h-is-secondary-text { - font-size: 18px; - line-height: 22px; - } -} -.h-is-tertiary-text { - font-style: normal; - font-weight: normal; + .h-is-secondary-text { font-size: 18px; line-height: 22px; + } } + +.h-is-tertiary-text { + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 22px; +} + @media (max-width: 767px) { - .h-is-tertiary-text { - font-size: 14px; - } + .h-is-tertiary-text { + font-size: 14px; + } } + .h-is-table-heading { - font-style: normal; - font-weight: bold; - font-size: 11px; - line-height: 13px; + font-style: normal; + font-weight: bold; + font-size: 11px; + line-height: 13px; } + .h-is-text-size-1 { - font-style: normal; - font-weight: normal; - font-size: 9px; - line-height: 11px; + font-style: normal; + font-weight: normal; + font-size: 9px; + line-height: 11px; } + .h-is-text-size-2 { - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 12px; } + .h-is-text-size-3 { - font-style: normal; - font-weight: normal; - font-size: 11px; - line-height: 13px; + font-style: normal; + font-weight: normal; + font-size: 11px; + line-height: 13px; } + .h-is-property-text { - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 17px; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 17px; } + .h-is-navbar-item { - font-style: normal; - font-weight: 300; - font-size: 14px; - line-height: 17px; + font-style: normal; + font-weight: 300; + font-size: 14px; + line-height: 17px; } + .h-is-mobile-navbar-item { - font-size: 20px; - line-height: 24px; + font-size: 20px; + line-height: 24px; } + .h-is-dense { - letter-spacing: -0.05em; + letter-spacing: -0.05em; } + .h-is-smaller { - font-size: 0.7em; + font-size: 0.7em; } + .h-is-extra-text { - color: $h-extra-text-color; + color: $h-extra-text-color; } + .h-has-pill { - color: black; - font-weight: bold; - background: $h-pill-background-color; - border-radius: 15px; - padding: 3px 8px 3px; + color: black; + font-weight: bold; + background: $h-pill-background-color; + border-radius: 15px; + padding: 3px 8px 3px; } + .h-has-low-contrast { - opacity: 0.4 + opacity: 0.4 } + .is-numeric { - font-variant-numeric: tabular-nums; + font-variant-numeric: tabular-nums; } .has-hbar:after { - content: "\210F"; - font-weight: lighter; + content: "\210F"; + font-weight: lighter; } + .h-is-json { - white-space: pre-wrap; + white-space: pre-wrap; } + .h-is-one-line { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .w200 { - max-width: 200px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + max-width: 200px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + .w250 { - max-width: 250px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + max-width: 250px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + .w300 { - max-width: 300px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + max-width: 300px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + .w400 { - max-width: 400px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + max-width: 400px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + .w600 { - max-width: 600px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + max-width: 600px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + .should-wrap { - word-break: break-word; + word-break: break-word; } + // Transfer Graphs .h-is-debit { - color: #FE687A; + color: #FE687A; } + .h-is-credit { - color: #27D19E; + color: #27D19E; } // @@ -257,7 +294,7 @@ body { // .h-button { - border-radius: 3px; + border-radius: 3px; } // @@ -265,77 +302,88 @@ body { // #drop-down-menu .o-sel { - height: 40px; - font-weight: bold; - color: $h-highlight-color; - border-color: $h-highlight-color; - background-color: $h-page-background-color; - border-width: 0.5px; + height: 40px; + font-weight: bold; + color: $h-highlight-color; + border-color: $h-highlight-color; + background-color: $h-page-background-color; + border-width: 0.5px; } + #mobile-drop-down-menu .o-sel { - height: 44.5px; - width: 322px; - font-weight: bold; - color: $h-highlight-color; - border-color: $h-highlight-color; - background-color: $h-page-background-color; - border-width: 0.5px; - padding-top: 13px; - padding-bottom: 13px; - padding-left: 13px; + height: 44.5px; + width: 322px; + font-weight: bold; + color: $h-highlight-color; + border-color: $h-highlight-color; + background-color: $h-page-background-color; + border-width: 0.5px; + padding-top: 13px; + padding-bottom: 13px; + padding-left: 13px; } + #mobile-drop-down-menu .o-sel-arrow { - background-position: calc(100% - 13px) calc(100% - 16px); + background-position: calc(100% - 13px) calc(100% - 16px); } -#drop-down-menu .h-is-navbar-item:focus -{ - outline: none; + +#drop-down-menu .h-is-navbar-item:focus { + outline: none; } + .button.h-is-navbar-item { - padding-top: 28px; - padding-bottom: 16px; + padding-top: 28px; + padding-bottom: 16px; } + .button.h-is-navbar-item:not(.h-is-mobile-navbar-item) { - outline : $h-page-background-color solid 2px; + outline: $h-page-background-color solid 2px; } + .button.h-is-navbar-item.is-outlined { - border-top-width: 0; - padding-left: 0.6em; - padding-right: 0.6em; - margin-right: 0.4em; + border-top-width: 0; + padding-left: 0.6em; + padding-right: 0.6em; + margin-right: 0.4em; } + .button.h-is-navbar-item.is-ghost:hover { - text-decoration-line: underline; - text-decoration-style: solid; - text-decoration-color: grey; - text-decoration-thickness: 1px; - text-underline-offset: 9px; + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-color: grey; + text-decoration-thickness: 1px; + text-underline-offset: 9px; } + .button.h-is-navbar-item.is-ghost:focus { - text-decoration-line: underline; - text-decoration-style: solid; - text-decoration-color: lightgrey; - text-decoration-thickness: 1px; - text-underline-offset: 9px; + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-color: lightgrey; + text-decoration-thickness: 1px; + text-underline-offset: 9px; } + .button.h-is-navbar-item.is-ghost.is-rimmed { - text-decoration-line: underline; - text-decoration-style: solid; - text-decoration-color: $h-highlight-color; - text-decoration-thickness: 1px; - text-underline-offset: 9px; - font-weight: bold; - letter-spacing: normal; + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-color: $h-highlight-color; + text-decoration-thickness: 1px; + text-underline-offset: 9px; + font-weight: bold; + letter-spacing: normal; } + .button.h-is-navbar-item.is-ghost { - padding-left: 0.4em; - padding-right: 0.4em; + padding-left: 0.4em; + padding-right: 0.4em; } + .button.h-is-navbar-item.is-ghost.is-first { - padding-left: 0; + padding-left: 0; } + .button.h-is-navbar-item.is-ghost.is-last { - padding-right: 0; + padding-right: 0; } // @@ -343,56 +391,65 @@ body { // .h-card:not(:first-child) { - margin-top: 2rem; + margin-top: 2rem; } + .h-card-separator { - background: $h-background-color; - margin: 16px 0; + background: $h-background-color; + margin: 16px 0; } + @media (max-width: 767px) { - .h-card-separator { - width: 0; - margin: 10px 0; - } + .h-card-separator { + width: 0; + margin: 10px 0; + } } + /* Solid vertical separator */ .h-has-column-separator { - padding-left: 1rem; - padding-top: 12px; - border-left: 1px grey solid; + padding-left: 1rem; + padding-top: 12px; + border-left: 1px grey solid; } + @media (max-width: 767px) { - .h-has-column-separator { - padding-left: 12px; - padding-top: 1rem; - border-left: initial; - } + .h-has-column-separator { + padding-left: 12px; + padding-top: 1rem; + border-left: initial; + } } + /* Dashed vertical separator */ .h-has-column-dashed-separator { - padding-left: 1rem; - padding-top: 12px; - border-left: 1px dimgrey dashed; + padding-left: 1rem; + padding-top: 12px; + border-left: 1px dimgrey dashed; } + @media (max-width: 767px) { - .h-has-column-dashed-separator { - padding-left: 12px; - padding-top: 1rem; - border-left: initial; - } + .h-has-column-dashed-separator { + padding-left: 12px; + padding-top: 1rem; + border-left: initial; + } } + /* Dashed horizontal separator */ hr.dotted { - border-top: 1px dashed dimgrey; - height: 0; - background-color: initial; - margin: 0; - padding: 0; + border-top: 1px dashed dimgrey; + height: 0; + background-color: initial; + margin: 0; + padding: 0; } + /* Dashed DnD area */ .h-dotted-area { border: dashed 1px $h-highlight-color; } + /* Code box (source, bytecode, assembly code) */ .h-code-box { border: 0.5px solid dimgrey; @@ -406,19 +463,19 @@ hr.dotted { // .h-modal-content { - width: 768px + width: 768px } @media (max-width: 1079px) { - .h-modal-content { - width: 640px - } + .h-modal-content { + width: 640px + } } @media (max-width: 767px) { - .h-modal-content { - width: 280px - } + .h-modal-content { + width: 280px + } } // @@ -426,10 +483,10 @@ hr.dotted { // .h-tooltip { - --oruga-tooltip-background-color:var(--h-theme-highlight-color); - --oruga-tooltip-arrow-margin:5px; - --oruga-tooltip-content-font-size:0.75rem; - --oruga-tooltip-content-weight-normal:300; + --oruga-tooltip-background-color: var(--h-theme-highlight-color); + --oruga-tooltip-arrow-margin: 5px; + --oruga-tooltip-content-font-size: 0.75rem; + --oruga-tooltip-content-weight-normal: 300; } // @@ -438,59 +495,74 @@ hr.dotted { // Style borders on mobile @media (max-width: 1079px) { - .o-table__wrapper--mobile tr:not(.o-table--detailed):not(.o-table--empty):not(.o-table__footer) td:first-child { - border-top: #979797 1px solid; - border-bottom: #4A4A4A 1px solid; - } + .o-table__wrapper--mobile tr:not(.o-table--detailed):not(.o-table--empty):not(.o-table__footer) td:first-child { + border-top: #979797 1px solid; + border-bottom: #4A4A4A 1px solid; + } - .o-table__wrapper--mobile tr:not(.o-table--detailed):not(.o-table--empty):not(.o-table__footer) td:not(:first-child):not(:last-child) { - border-top: 0; - border-bottom: #4A4A4A 1px solid; - } + .o-table__wrapper--mobile tr:not(.o-table--detailed):not(.o-table--empty):not(.o-table__footer) td:not(:first-child):not(:last-child) { + border-top: 0; + border-bottom: #4A4A4A 1px solid; + } - .o-table__wrapper--mobile tr:not(.o-table--detailed):not(.o-table--empty):not(.o-table__footer) td:last-child { - border-top: 0; - border-bottom: 0; - } + .o-table__wrapper--mobile tr:not(.o-table--detailed):not(.o-table--empty):not(.o-table__footer) td:last-child { + border-top: 0; + border-bottom: 0; + } } table.o-table > thead > tr > th { - font-style: normal; - font-weight: bold; - font-size: 11px; - line-height: 13px; - padding-bottom: 12px; + font-style: normal; + font-weight: bold; + font-size: 11px; + line-height: 13px; + padding-bottom: 12px; } + table.o-table > tbody > tr > td { - vertical-align: middle; - font-style: normal; - font-weight: normal; - font-size: 11px; - line-height: 13px; - padding-top: 8px; - padding-bottom: 8px; + vertical-align: middle; + font-style: normal; + font-weight: normal; + font-size: 11px; + line-height: 13px; + padding-top: 8px; + padding-bottom: 8px; } + table.o-table > tbody > tr { - cursor: pointer; + cursor: pointer; } + table.o-table > tbody > tr { - animation: fadeIn linear 1s; + animation: fadeIn linear 1s; } + @keyframes fadeIn { - 0% { opacity: 0.0 } - 25% { opacity: 0.0 } - 75% {opacity: 1.0 } - 100% {opacity: 1.0 } + 0% { + opacity: 0.0 + } + 25% { + opacity: 0.0 + } + 75% { + opacity: 1.0 + } + 100% { + opacity: 1.0 + } } + // Fixes for o-table "defects" table.o-table { - margin: 1rem 0 + margin: 1rem 0 } + .h-is-table-compact table.o-table { - margin: 0 + margin: 0 } + div.o-table__pagination { - padding: 4px + padding: 4px } /* @@ -513,25 +585,27 @@ div.o-table__pagination { Rules below restore the correct precedence. */ table.o-table { - text-align: left + text-align: left } + table.o-table td.o-table__td--right, table.o-table th.o-table__th--right { - text-align: right; + text-align: right; } + table.o-table td.o-table__td--left, table.o-table th.o-table__th--left { - text-align: left; + text-align: left; } // // BACKGROUND // .h-mobile-background { - background-color: $h-mobile-page-background-color; - min-height: 450px; + background-color: $h-mobile-page-background-color; + min-height: 450px; } .h-has-page-background { - background-color: $h-page-background-color; + background-color: $h-page-background-color; } diff --git a/src/components/ActionLink.vue b/src/components/ActionLink.vue index 8a69ef459..6531d3199 100644 --- a/src/components/ActionLink.vue +++ b/src/components/ActionLink.vue @@ -60,7 +60,7 @@ export default defineComponent({ return props.running || !props.enabled }) - return { actionDisabled } + return {actionDisabled} } }) diff --git a/src/components/AlertDialog.vue b/src/components/AlertDialog.vue index b76d106e2..6da2caec1 100644 --- a/src/components/AlertDialog.vue +++ b/src/components/AlertDialog.vue @@ -23,22 +23,22 @@ @@ -56,14 +56,14 @@ import DialogTitle from "@/components/dialog/DialogTitle.vue"; import {DialogController} from "@/components/dialog/DialogController"; export default defineComponent({ - name: "AlertDialog", - components: {DialogTitle, DialogButton, CommitButton, Dialog}, - props: { - controller: { - type: Object as PropType, - required: true - }, + name: "AlertDialog", + components: {DialogTitle, DialogButton, CommitButton, Dialog}, + props: { + controller: { + type: Object as PropType, + required: true }, + }, }) diff --git a/src/components/AxiosStatus.vue b/src/components/AxiosStatus.vue index 3a8888eb2..f77dcdc91 100644 --- a/src/components/AxiosStatus.vue +++ b/src/components/AxiosStatus.vue @@ -74,7 +74,7 @@ export default defineComponent({ name: "AxiosStatus", - components: { ModalDialog }, + components: {ModalDialog}, setup() { @@ -162,6 +162,7 @@ export default defineComponent({ border-left-color: grey; border-bottom-color: grey } + i.fa-exclamation-triangle { cursor: pointer } diff --git a/src/components/CSVDownloadDialog.vue b/src/components/CSVDownloadDialog.vue index 8daea782a..2fe636b9b 100644 --- a/src/components/CSVDownloadDialog.vue +++ b/src/components/CSVDownloadDialog.vue @@ -108,7 +108,7 @@ export default defineComponent({ type: Object as PropType>, required: true }, - accountId: String as PropType + accountId: String as PropType }, emits: ["update:showDialog"], setup(props, context) { diff --git a/src/components/CSVDownloadProgressDialog.vue b/src/components/CSVDownloadProgressDialog.vue index 40991a94a..1da36e09f 100644 --- a/src/components/CSVDownloadProgressDialog.vue +++ b/src/components/CSVDownloadProgressDialog.vue @@ -82,7 +82,7 @@ export default defineComponent({ type: Object as PropType>, required: true }, - accountId: String as PropType + accountId: String as PropType }, emits: ["update:showProgressDialog"], diff --git a/src/components/ConfirmDialog.vue b/src/components/ConfirmDialog.vue index e57afc8f9..7c0f2339f 100644 --- a/src/components/ConfirmDialog.vue +++ b/src/components/ConfirmDialog.vue @@ -40,8 +40,8 @@ {{ extraMessage }} - - + +
@@ -73,20 +73,20 @@ export default defineComponent({ default: false }, mainMessage: { - type: String as PropType, + type: String as PropType, default: null }, extraMessage: { - type: String as PropType, + type: String as PropType, default: null }, confirmLabel: { - type: String as PropType, - default: "CONFIRM" + type: String as PropType, + default: "CONFIRM" }, cancelLabel: { - type: String as PropType, - default: "CANCEL" + type: String as PropType, + default: "CANCEL" }, }, diff --git a/src/components/Copyable.vue b/src/components/Copyable.vue index 2f596dfa8..7b4e10910 100644 --- a/src/components/Copyable.vue +++ b/src/components/Copyable.vue @@ -27,7 +27,8 @@
-
+
@@ -66,16 +66,16 @@ export default defineComponent({ default: false }, mainMessage: { - type: String as PropType, + type: String as PropType, default: null }, extraMessage: { - type: String as PropType, + type: String as PropType, default: null }, confirmLabel: { - type: String as PropType, - default: "DONE" + type: String as PropType, + default: "DONE" } }, diff --git a/src/components/DynamicDialog.vue b/src/components/DynamicDialog.vue index 2351da8e2..b0469ce8d 100644 --- a/src/components/DynamicDialog.vue +++ b/src/components/DynamicDialog.vue @@ -34,9 +34,11 @@
-
{{ mainMessage }}
+
{{ + mainMessage }} +
- +
@@ -68,16 +70,16 @@ export default defineComponent({ default: false }, mainMessage: { - type: String as PropType, + type: String as PropType, default: null }, confirmLabel: { - type: String as PropType, - default: "CONFIRM" + type: String as PropType, + default: "CONFIRM" }, cancelLabel: { - type: String as PropType, - default: "CANCEL" + type: String as PropType, + default: "CANCEL" }, }, diff --git a/src/components/EmptyTable.vue b/src/components/EmptyTable.vue index c70fe5f7b..ff2a1398b 100644 --- a/src/components/EmptyTable.vue +++ b/src/components/EmptyTable.vue @@ -54,7 +54,7 @@ export default defineComponent({ setup() { const initialLoading = inject(initialLoadingKey, ref(false)) - return { initialLoading } + return {initialLoading} } }) diff --git a/src/components/Footer.vue b/src/components/Footer.vue index d740b41bf..5662db2af 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -86,7 +86,7 @@ export default defineComponent({ let buildReleaseUrl = "https://github.com/hashgraph/hedera-mirror-node-explorer" const buildShortCommitHash = inject('buildShortCommitHash', "not available") const disposableReleaseDetails = "-0-g" + buildShortCommitHash; - if(buildRelease.includes(disposableReleaseDetails)) { + if (buildRelease.includes(disposableReleaseDetails)) { // Commit matches a specific release (i.e., v23.5.0), show only release version buildRelease = buildRelease.replace(disposableReleaseDetails, "") // Link release page diff --git a/src/components/MirrorLink.vue b/src/components/MirrorLink.vue index 62bdf02e7..d80ca6e61 100644 --- a/src/components/MirrorLink.vue +++ b/src/components/MirrorLink.vue @@ -49,12 +49,11 @@ export default defineComponent({ if (props.network == "testnet") { networkUrl = "https://testnet.mirrornode.hedera.com/" } - if (props.network == "previewnet") - { + if (props.network == "previewnet") { networkUrl = "https://previewnet.mirrornode.hedera.com/" } - return { networkUrl } + return {networkUrl} } }); \ No newline at end of file diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue index 84fdefaed..297ae83c5 100644 --- a/src/components/ModalDialog.vue +++ b/src/components/ModalDialog.vue @@ -80,7 +80,7 @@ export default defineComponent({ context.emit('update:showDialog', false) context.emit('onClose') } - return { handleClose } + return {handleClose} } }); diff --git a/src/components/PlayPauseButton.vue b/src/components/PlayPauseButton.vue index 81e317d23..db08c8030 100644 --- a/src/components/PlayPauseButton.vue +++ b/src/components/PlayPauseButton.vue @@ -66,9 +66,11 @@ import {computed, ComputedRef, defineComponent, onMounted, PropType, ref} from "vue"; export interface PlayPauseController { - startAutoRefresh(): void - stopAutoRefresh(): void - autoRefresh: ComputedRef + startAutoRefresh(): void + + stopAutoRefresh(): void + + autoRefresh: ComputedRef } export default defineComponent({ diff --git a/src/components/Property.vue b/src/components/Property.vue index dc051a3ab..d834ce713 100644 --- a/src/components/Property.vue +++ b/src/components/Property.vue @@ -75,7 +75,7 @@ export default defineComponent({ customNbColClass: String, tooltip: String }, - setup(props){ + setup(props) { const nameId = props.id + 'Name' const valueId = props.id + 'Value' diff --git a/src/components/PropertyVertical.vue b/src/components/PropertyVertical.vue index 373a6c1ee..0ef48e1d2 100644 --- a/src/components/PropertyVertical.vue +++ b/src/components/PropertyVertical.vue @@ -68,7 +68,7 @@ export default defineComponent({ default: false, } }, - setup(props){ + setup(props) { const nameId = props.id + 'Name' const valueId = props.id + 'Value' diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue index ac8887793..1b238502f 100644 --- a/src/components/SearchBar.vue +++ b/src/components/SearchBar.vue @@ -48,8 +48,9 @@ v-bind:disabled="searchInputDisabled" ref="search-input" /> -
@@ -109,7 +110,7 @@ export default defineComponent({ updateSearchBarEnabled() } - const performSearch = (): void => { + const performSearch = (): void => { searchInputDisabled.value = true searchButtonIconStyle.value = STYLE_BUSY_ICON @@ -163,14 +164,14 @@ export default defineComponent({ } searchDidEnd(true) } else { - // No match => if searchId looks like an EVM address we say "inactive" else we say "not found" - if (r.ethereumAddress !== null) { - routeManager.routeToAccount(r.ethereumAddress) // Will display inactive - searchDidEnd(true) - } else { - routeManager.routeToNoSearchResult(searchedId.value, r.getErrorCount()) - searchDidEnd(false) - } + // No match => if searchId looks like an EVM address we say "inactive" else we say "not found" + if (r.ethereumAddress !== null) { + routeManager.routeToAccount(r.ethereumAddress) // Will display inactive + searchDidEnd(true) + } else { + routeManager.routeToNoSearchResult(searchedId.value, r.getErrorCount()) + searchDidEnd(false) + } } } catch { console.trace("Failed to route") diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue index 3f7612c4c..770a7e47b 100644 --- a/src/components/Tabs.vue +++ b/src/components/Tabs.vue @@ -23,18 +23,18 @@ @@ -46,47 +46,47 @@ import {defineComponent, onMounted, PropType, ref} from "vue"; export default defineComponent({ - name: "Tabs", - - props: { - selectedTab: { - type: String, - required: true - }, - tabIds: { - type: Array as PropType, - required: true - }, - tabLabels: { - type: Array as PropType, - default: [] - } + name: "Tabs", + + props: { + selectedTab: { + type: String, + required: true + }, + tabIds: { + type: Array as PropType, + required: true }, + tabLabels: { + type: Array as PropType, + default: [] + } + }, - emits: ["update:selectedTab"], + emits: ["update:selectedTab"], - setup(props, context) { + setup(props, context) { - const selection = ref('') + const selection = ref('') - onMounted(() => { - if (props.tabIds.includes(props.selectedTab)) { - selection.value = props.selectedTab - } else { - handleSelect(props.tabIds[0]) - } - }) + onMounted(() => { + if (props.tabIds.includes(props.selectedTab)) { + selection.value = props.selectedTab + } else { + handleSelect(props.tabIds[0]) + } + }) - const handleSelect = (tab: string) => { - selection.value = tab - context.emit('update:selectedTab', tab) - } + const handleSelect = (tab: string) => { + selection.value = tab + context.emit('update:selectedTab', tab) + } - return { - selection, - handleSelect, - } + return { + selection, + handleSelect, } + } }); diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue index 70b995c61..794b69995 100644 --- a/src/components/TopNavBar.vue +++ b/src/components/TopNavBar.vue @@ -62,7 +62,7 @@ - +
- +
-
- -
-
- wallet logo -
- {{ accountId }} -
-
- - -
+ class="is-flex is-align-items-center is-justify-content-space-between" + style="outline: none; height: 40px; width: 100%; font-size: 0.9rem; border: 0.5px solid white; cursor: pointer;"> + +
+
+ wallet logo +
+ {{ accountId }} +
+
+ + +
- - +
@@ -163,7 +164,7 @@ import SearchBar from "@/components/SearchBar.vue"; import AxiosStatus from "@/components/AxiosStatus.vue"; import {networkRegistry} from "@/schemas/NetworkRegistry"; import WalletChooser from "@/components/staking/WalletChooser.vue"; -import { WalletDriver } from '@/utils/wallet/WalletDriver'; +import {WalletDriver} from '@/utils/wallet/WalletDriver'; import {WalletDriverCancelError} from '@/utils/wallet/WalletDriverError'; import {defineComponent, inject, ref} from "vue"; import WalletInfo from '@/components/wallet/WalletInfo.vue' @@ -206,11 +207,11 @@ export default defineComponent({ walletManager .connect() .catch((reason) => { - if (!(reason instanceof WalletDriverCancelError)) { - console.warn("Failed to connect wallet - reason:" + reason.toString()) - connectError.value = reason - connectDialogController.visible.value = true - } + if (!(reason instanceof WalletDriverCancelError)) { + console.warn("Failed to connect wallet - reason:" + reason.toString()) + connectError.value = reason + connectDialogController.visible.value = true + } }) .finally(() => connecting.value = false) walletIconURL.value = walletManager.getActiveDriver().iconURL || "" @@ -234,7 +235,7 @@ export default defineComponent({ showWalletInfo.value = false; }) } - + return { buildTime, @@ -286,63 +287,75 @@ export default defineComponent({ #product-logo { max-width: 242px; } + #navbar-grid { - position:relative; - display:grid; - column-gap:1.2rem; + position: relative; + display: grid; + column-gap: 1.2rem; grid-template-columns:repeat(20, minmax(0, 35px)); } + #search-bar { grid-column: span 13; } + #drop-down-menu { grid-column: span 3; } + #connect-button { grid-column: span 4; } } @media (max-width: 1449px) { - #product-logo { - max-width: 220px; - } - #navbar-grid { - position:relative; - display:grid; - column-gap:1.2rem; - grid-template-columns:repeat(17, minmax(0, 35px)); - } - #search-bar { - grid-column: span 10; - } - #drop-down-menu { - grid-column: span 3; - } - #connect-button { - grid-column: span 4; - } + #product-logo { + max-width: 220px; + } + + #navbar-grid { + position: relative; + display: grid; + column-gap: 1.2rem; + grid-template-columns:repeat(17, minmax(0, 35px)); + } + + #search-bar { + grid-column: span 10; + } + + #drop-down-menu { + grid-column: span 3; + } + + #connect-button { + grid-column: span 4; + } } @media (max-width: 1249px) { - #product-logo { - max-width: 200px; - } - #navbar-grid { - position:relative; - display:grid; - column-gap:1.2rem; - grid-template-columns:repeat(18, minmax(0, 24px)); - } - #search-bar { - grid-column: span 9; - } - #drop-down-menu { - grid-column: span 4; - } - #connect-button { - grid-column: span 5; - } + #product-logo { + max-width: 200px; + } + + #navbar-grid { + position: relative; + display: grid; + column-gap: 1.2rem; + grid-template-columns:repeat(18, minmax(0, 24px)); + } + + #search-bar { + grid-column: span 9; + } + + #drop-down-menu { + grid-column: span 4; + } + + #connect-button { + grid-column: span 5; + } } \ No newline at end of file diff --git a/src/components/account/AccountCreatedContractsTable.vue b/src/components/account/AccountCreatedContractsTable.vue index 034062f09..7ee4e4082 100644 --- a/src/components/account/AccountCreatedContractsTable.vue +++ b/src/components/account/AccountCreatedContractsTable.vue @@ -24,47 +24,47 @@ @@ -85,39 +85,39 @@ import {TransactionTableController} from "@/components/transaction/TransactionTa import ContractName from "@/components/values/ContractName.vue"; export default defineComponent({ - name: 'AccountCreatedContractsTable', - - components: {ContractName, EmptyTable, TimestampValue, BlobValue}, - - props: { - controller: { - type: Object as PropType, - required: true - } - }, - - setup(props) { - - onMounted(() => props.controller.mount()) - onBeforeUnmount(() => props.controller.unmount()) - - const handleClick = (t: Transaction, c: unknown, i: number, ci: number, event: MouseEvent) => { - routeManager.routeToContract(t.entity_id!, event.ctrlKey || event.metaKey) - } - - return { - transactions: props.controller.rows as ComputedRef, - loading: props.controller.loading as ComputedRef, - total: props.controller.totalRowCount as ComputedRef, - currentPage: props.controller.currentPage as Ref, - onPageChange: props.controller.onPageChange, - perPage: props.controller.pageSize as Ref, - paginated: props.controller.paginated as ComputedRef, - handleClick, - // From App - ORUGA_MOBILE_BREAKPOINT, - } + name: 'AccountCreatedContractsTable', + + components: {ContractName, EmptyTable, TimestampValue, BlobValue}, + + props: { + controller: { + type: Object as PropType, + required: true + } + }, + + setup(props) { + + onMounted(() => props.controller.mount()) + onBeforeUnmount(() => props.controller.unmount()) + + const handleClick = (t: Transaction, c: unknown, i: number, ci: number, event: MouseEvent) => { + routeManager.routeToContract(t.entity_id!, event.ctrlKey || event.metaKey) + } + + return { + transactions: props.controller.rows as ComputedRef, + loading: props.controller.loading as ComputedRef, + total: props.controller.totalRowCount as ComputedRef, + currentPage: props.controller.currentPage as Ref, + onPageChange: props.controller.onPageChange, + perPage: props.controller.pageSize as Ref, + paginated: props.controller.paginated as ComputedRef, + handleClick, + // From App + ORUGA_MOBILE_BREAKPOINT, } + } }); diff --git a/src/components/account/AccountTable.vue b/src/components/account/AccountTable.vue index 081af2ac4..aef4eed7a 100644 --- a/src/components/account/AccountTable.vue +++ b/src/components/account/AccountTable.vue @@ -79,7 +79,7 @@ - + @@ -115,7 +115,7 @@ export default defineComponent({ type: Object as PropType, required: true }, - narrowed:{ + narrowed: { type: Boolean, default: false } diff --git a/src/components/account/AccountTableController.ts b/src/components/account/AccountTableController.ts index 5200dcb1b..8949e8718 100644 --- a/src/components/account/AccountTableController.ts +++ b/src/components/account/AccountTableController.ts @@ -26,13 +26,13 @@ import {Router} from "vue-router"; export class AccountTableController extends TableController { - private readonly pubKey: string|null + private readonly pubKey: string | null // // Public // - public constructor(router: Router, pageSize: ComputedRef, pubKey: string|null = null) { + public constructor(router: Router, pageSize: ComputedRef, pubKey: string | null = null) { super(router, pageSize, 10 * pageSize.value, 5000, 10, 100) this.pubKey = pubKey } @@ -61,7 +61,7 @@ export class AccountTableController extends TableController return Promise.resolve(r.data.accounts ?? []) } - return axios.get("api/v1/accounts", {params: params}).then(cb) + return axios.get("api/v1/accounts", {params: params}).then(cb) } public keyFor(row: AccountInfo): string { @@ -72,7 +72,7 @@ export class AccountTableController extends TableController return account } - public keyFromString(s: string): string|null { + public keyFromString(s: string): string | null { return s } } diff --git a/src/components/account/CollectionTable.vue b/src/components/account/CollectionTable.vue index 8aa9dad6e..0ea63ac81 100644 --- a/src/components/account/CollectionTable.vue +++ b/src/components/account/CollectionTable.vue @@ -24,23 +24,23 @@