Merge branch 'develop' of https://github.com/telosnetwork/open-block-…

…explorer into develop
telosnetwork · Oct 4, 2023 · c2b371d · c2b371d
2 parents 64b88a6 + f8ce516
commit c2b371d
Show file tree

Hide file tree

Showing 11 changed files with 152 additions and 41 deletions.
diff --git a/src/components/AccountCard.vue b/src/components/AccountCard.vue
@@ -15,6 +15,7 @@ import { useRouter } from 'vue-router';
 import { TableIndexType } from 'src/types/Api';
 import { API, UInt64 } from '@greymass/eosio';
 import { formatCurrency } from 'src/utils/string-utils';
+import ConfigManager from 'src/config/ConfigManager';
 
 const chain = getChain();
 export default defineComponent({
@@ -37,6 +38,8 @@ export default defineComponent({
         const router = useRouter();
         const store = useAntelopeStore();
 
+        const accountPageSettings = computed(() => ConfigManager.get().getCurrentChain().getUiCustomization().accountPageSettings);
+
         const createTime = ref<string>('2019-01-01T00:00:00.000');
         const createTransaction = ref<string>('');
         const creatingAccount = ref('');
@@ -369,6 +372,7 @@ export default defineComponent({
         );
 
         return {
+            accountPageSettings,
             MICRO_UNIT,
             KILO_UNIT,
             stakedCPU,
@@ -467,56 +471,56 @@ export default defineComponent({
             </div>
             <div v-if="account !== system_account" class="resources">
                 <PercentCircle
+                    v-if="!accountPageSettings.hideCpuInfo"
                     :radius="radius"
                     :fraction="cpu_used"
                     :total="cpu_max"
                     label="CPU"
                     unit="s"
                 />
                 <PercentCircle
+                    v-if="!accountPageSettings.hideNetInfo"
                     :radius="radius"
                     :fraction="net_used"
                     :total="net_max"
                     label="NET"
                     unit="kb"
                 />
                 <PercentCircle
+                    v-if="!accountPageSettings.hideRamInfo"
                     :radius="radius"
                     :fraction="ram_used"
                     :total="ram_max"
                     label="RAM"
                     unit="kb"
                 />
             </div>
-            <div v-else class="resources">
+            <div v-else-if="!accountPageSettings.hideRamInfo" class="resources">
                 <div class="usage">RAM USED: {{ ram_used }} kb</div>
             </div>
         </q-card-section>
         <q-card-section class="resources-container">
             <div class="row justify-center q-gutter-sm">
-                <div class="col-3">
+                <div v-if="isAccount" class="col-3">
                     <q-btn
-                        v-if='isAccount'
                         :disable="tokensLoading || isLoading"
-                        :label='tokensLoading ? "Loading..." : "Send"'
-                        color='primary'
+                        :label="tokensLoading ? 'Loading...' : 'Send'"
+                        color="primary"
                         class="full-width"
                         @click="openSendDialog = true"
                     />
                 </div>
-                <div class="col-3">
+                <div v-if="isAccount && !accountPageSettings.hideResourcesControl" class="col-3">
                     <q-btn
-                        v-if="isAccount"
                         :disable="tokensLoading || isLoading"
                         :label='tokensLoading ? "Loading..." : "Resources"'
                         class="full-width"
                         color="primary"
                         @click="openResourcesDialog = true"
                     />
                 </div>
-                <div class="col-3">
+                <div v-if="isAccount && !accountPageSettings.hideRexControl" class="col-3">
                     <q-btn
-                        v-if="isAccount"
                         :disable="tokensLoading || isLoading"
                         :label='tokensLoading ? "Loading..." : "Staking (REX)"'
                         class="ellipsis full-width"
@@ -549,31 +553,31 @@ export default defineComponent({
                         <td class="text-left">LIQUID (Telos native)</td>
                         <td class="text-right">{{ formatAsset(liquidNative) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideRexInfo">
                         <td class="text-left">REX staked (includes savings)</td>
                         <td class="text-right">{{ formatAsset(rexStaked) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideRexInfo">
                         <td class="text-left">REX liquid deposits</td>
                         <td class="text-right">{{ formatAsset(rexDeposits) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideCpuInfo">
                         <td class="text-left">STAKED for CPU</td>
                         <td class="text-right">{{ formatAsset(stakedCPU) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideNetInfo">
                         <td class="text-left">STAKED for NET</td>
                         <td class="text-right">{{ formatAsset(stakedNET) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideRefundingInfo">
                         <td class="text-left">REFUNDING from staking</td>
                         <td class="text-right">{{ formatAsset(stakedRefund) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideDelegatedInfo">
                         <td class="text-left">DELEGATED to others</td>
                         <td class="text-right">{{ formatAsset(delegatedToOthers) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideDelegatedInfo">
                         <td class="text-left">DELEGATED by others</td>
                         <td class="text-right">{{ formatAsset(delegatedByOthers) }}</td>
                     </tr>

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -1,20 +1,24 @@
 <script lang="ts">
+import ConfigManager from 'src/config/ConfigManager';
+import { computed } from 'vue';
+
 export default {
     name: 'AppFooter',
+    setup() {
+        const footerLinks = computed(() => ConfigManager.get().getCurrentChain().getUiCustomization().footerLinks);
+
+        return {
+            footerLinks,
+        };
+    },
 };
 </script>
 
 <template>
 
 <div class="row footer-background justify-center text-center q-py-md">
-    <div class="col-lg-1 col-md-2 col-sm-2 col-xs-4 q-pa-md">
-        <a class="no-dec" href="https://telos.net/legal">LEGAL</a>
-    </div>
-    <div class="col-lg-1 col-md-2 col-sm-2 col-xs-4 q-pa-md">
-        <a class="no-dec" href="https://telos.net/privacy-policy">PRIVACY</a>
-    </div>
-    <div class="col-lg-1 col-md-2 col-sm-2 col-xs-4 q-pa-md">
-        <a class="no-dec" href="https://github.com/telosnetwork/open-block-explorer">REPOSITORY</a>
+    <div v-for="footerLink in footerLinks" :key="footerLink.label" class="col-lg-1 col-md-2 col-sm-2 col-xs-4 q-pa-md">
+        <a class="no-dec" :href="footerLink.url">{{footerLink.label}}</a>
     </div>
 </div>
 

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -4,9 +4,10 @@ import { useQuasar } from 'quasar';
 import LoginHandler from 'components/LoginHandler.vue';
 import HeaderSearch from 'components/HeaderSearch.vue';
 import ChainsMenu from 'components/ChainsMenu.vue';
-import { getChain } from 'src/config/ConfigManager';
+import ConfigManager, { getChain } from 'src/config/ConfigManager';
 import { useStore } from 'src/store';
 import { useRouteDataNetwork } from 'src/router';
+import { HeaderSettings } from 'src/types/UiCustomization';
 
 export default defineComponent({
     name: 'AppHeader',
@@ -18,6 +19,7 @@ export default defineComponent({
     setup() {
         const $q = useQuasar();
         const store = useStore();
+        const headerSettings = computed(() : HeaderSettings => ConfigManager.get().getCurrentChain().getUiCustomization().headerSettings);
 
         const account = computed(() => store.state.account.accountName);
         const isLarge = computed((): boolean => $q.screen.gt.sm);
@@ -36,6 +38,7 @@ export default defineComponent({
         });
 
         return {
+            headerSettings,
             account,
             isLarge: isLarge,
             showMultichainSelector,
@@ -73,7 +76,7 @@ export default defineComponent({
                 </div>
             </div>
         </div>
-        <LoginHandler/>
+        <LoginHandler v-if="!headerSettings.hideLoginHandler"/>
     </div>
     <div class="row justify-center col-12 q-pt-sm">
         <q-tabs
@@ -84,25 +87,28 @@ export default defineComponent({
             color="white"
         >
             <q-route-tab
+                v-if="!headerSettings.hideNetworkTab"
                 class="deactive"
                 name="network"
                 label="Network"
                 to="/network"
             />
             <q-route-tab
-                v-if="account"
+                v-if="!headerSettings.hideWalletTab && account"
                 class="deactive"
                 name="wallet"
                 label="Wallet"
                 :to="'/account/' + account"
             />
             <q-route-tab
+                v-if="!headerSettings.hideVoteTab"
                 class="deactive"
                 name="vote"
                 label="Vote"
                 to="/vote"
             />
             <q-route-tab
+                v-if="!headerSettings.hideProposalTab"
                 class="deactive"
                 name="proposal"
                 label="Proposal"

diff --git a/src/components/TransactionsTable.vue b/src/components/TransactionsTable.vue
@@ -137,7 +137,7 @@ export default defineComponent({
             rowsNumber: 10000,
         });
 
-        const enableLiveTransactions = ref<boolean>(true);
+        const enableLiveTransactions = ref<boolean>(props.toggleEnabled);
         const currentFirstAction = ref<number>(0);
 
         // actions filter

diff --git a/src/components/transaction/DataFormat.vue b/src/components/transaction/DataFormat.vue
@@ -29,7 +29,7 @@ export default defineComponent({
         const transferData = computed(() => actionData.value as TransferData);
         const clientHeight = computed(() => dataBox.value?.clientHeight ?? 0);
         let currentData = ref<string | unknown>(null);
-        const maxHeight = 57; // the maximum row height
+        const maxHeight = 65; // the maximum row height
         const switchHeight = 20;
         const maxHeightStyle = `calc(${maxHeight}px - ${switchHeight}px)`;
 

diff --git a/src/config/BaseChain.ts b/src/config/BaseChain.ts
@@ -3,6 +3,7 @@ import { RpcEndpoint } from 'universal-authenticator-library';
 import { PriceChartData } from 'src/types/PriceChartData';
 import { Theme } from 'src/types/Theme';
 import { Token } from 'src/types';
+import { UiCustomization } from 'src/types/UiCustomization';
 
 export const DEFAULT_THEME = {
     primary: '#11589e',
@@ -33,6 +34,39 @@ export const DEFAULT_THEME = {
     'color-footer-background': '#000000',
 };
 
+export const baseUiConfiguration: UiCustomization = {
+    footerLinks: [
+        { label: 'LEGAL', url: 'https://telos.net/legal' },
+        { label: 'PRIVACY', url: 'https://telos.net/privacy-policy' },
+        { label: 'REPOSITORY', url: 'https://github.com/telosnetwork/open-block-explorer' },
+    ],
+    headerSettings: {
+        hideLoginHandler: false,
+
+        hideNetworkTab: false,
+        hideWalletTab: false,
+        hideVoteTab: false,
+        hideProposalTab: false,
+    },
+    accountPageSettings: {
+        hideCpuInfo: false,
+        hideNetInfo: false,
+        hideRamInfo: false,
+        hideRexInfo: false,
+        hideRefundingInfo: false,
+        hideDelegatedInfo: false,
+
+        hideResourcesControl: false,
+        hideRexControl: false,
+
+        hideTransactionTab: false,
+        hideTokensTab: false,
+        hideKeysTab: false,
+        hideChildrenTab: false,
+        hideContractsTab: false,
+    },
+};
+
 export default abstract class BaseChain implements Chain {
   protected name: string;
 
@@ -64,6 +98,11 @@ export default abstract class BaseChain implements Chain {
   abstract getUsdPrice(): Promise<number>;
   abstract getMapDisplay(): boolean;
   abstract getTheme(): Theme;
+
+  getUiCustomization(): UiCustomization {
+      return baseUiConfiguration;
+  }
+
   abstract getFiltersSupported(prop: string): boolean;
 
   isTestnet(): boolean {

diff --git a/src/pages/Account.vue b/src/pages/Account.vue
@@ -9,6 +9,7 @@ import ContractTabs from 'components/contract/ContractTabs.vue';
 import { api } from 'src/api';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'src/store';
+import ConfigManager from 'src/config/ConfigManager';
 
 export default defineComponent({
     name: 'AccountPage',
@@ -24,6 +25,8 @@ export default defineComponent({
         const store = useStore();
         const route = useRoute();
         const router = useRouter();
+        const accountPageSettings = computed(() => ConfigManager.get().getCurrentChain().getUiCustomization().accountPageSettings);
+
         const tab = ref<string>((route.query['tab'] as string) || 'transactions');
         const account = computed(() => (route.params.account as string) || '');
         const abi = computed(() => store.state.account.abi.abi);
@@ -47,6 +50,7 @@ export default defineComponent({
             account,
             abi,
             tokenList,
+            accountPageSettings,
         };
     },
 });
@@ -59,27 +63,27 @@ export default defineComponent({
             <AccountCard class="account-card" :account="account" :tokens="tokenList"/>
         </div>
         <q-tabs v-model="tab" class="account-view tabs" no-caps>
-            <q-tab name="transactions" label="Transactions"/>
-            <q-tab v-if="abi" name="contract" label="Contract"/>
-            <q-tab name="tokens" label="Tokens"/>
-            <q-tab name="keys" label="Keys"/>
-            <q-tab name="children" label="Children"/>
+            <q-tab v-if="!accountPageSettings.hideTransactionTab" name="transactions" label="Transactions"/>
+            <q-tab v-if="!accountPageSettings.hideContractsTab && abi" name="contract" label="Contract"/>
+            <q-tab v-if="!accountPageSettings.hideTokensTab" name="tokens" label="Tokens"/>
+            <q-tab v-if="!accountPageSettings.hideKeysTab" name="keys" label="Keys"/>
+            <q-tab v-if="!accountPageSettings.hideChildrenTab" name="children" label="Children"/>
         </q-tabs>
     </div>
     <q-tab-panels v-model="tab" class="col-12">
-        <q-tab-panel name="transactions">
+        <q-tab-panel v-if="!accountPageSettings.hideTransactionTab" name="transactions">
             <TransactionsTable :account="account" :showTransferLabel="true" :show-pagination-extras="true" />
         </q-tab-panel>
-        <q-tab-panel v-if="abi" name="contract">
+        <q-tab-panel v-if="!accountPageSettings.hideContractsTab && abi" name="contract">
             <ContractTabs/>
         </q-tab-panel>
-        <q-tab-panel name="tokens">
+        <q-tab-panel v-if="!accountPageSettings.hideTokensTab" name="tokens">
             <TokensPanel :account="account"/>
         </q-tab-panel>
-        <q-tab-panel name="keys">
+        <q-tab-panel v-if="!accountPageSettings.hideKeysTab" name="keys">
             <KeysPanel :account="account"/>
         </q-tab-panel>
-        <q-tab-panel name="children">
+        <q-tab-panel v-if="!accountPageSettings.hideChildrenTab" name="children">
             <ChildrenPanel :account="account"/>
         </q-tab-panel>
     </q-tab-panels>

diff --git a/src/pages/TransactionPage.vue b/src/pages/TransactionPage.vue
@@ -103,7 +103,7 @@ export default defineComponent({
             <q-separator color="grey-8"/>
             <q-tab-panels v-model="tab" class="tab-panel">
                 <q-tab-panel name="actions">
-                    <TransactionsTable :account="Array.isArray(transaction) ? transaction[0] : transaction" />
+                    <TransactionsTable :account="Array.isArray(transaction) ? transaction[0] : transaction" :toggleEnabled="false" />
                 </q-tab-panel>
                 <q-tab-panel name="traces" class="container-max-width">
                     <TraceTree/>