feat: page title hints (#371)

src/components/DashboardStateChannelsPanel.vue

@@ -6,6 +6,10 @@
       icon-name="state-channel"
       show-all-link="/state-channels">
       State Channels
+
+      <template #tooltip>
+        {{ stateChannelsHints.stateChannel }}
+      </template>
     </panel-header>
     <dashboard-state-channels-table class="dashboard-state-channels-panel__table"/>
     <dashboard-state-channels-swiper class="dashboard-state-channels-panel__swiper"/>
@@ -16,6 +20,7 @@ import AppPanel from '@/components/AppPanel'
 import PanelHeader from '@/components/PanelHeader'
 import DashboardStateChannelsSwiper from '@/components/DashboardStateChannelsSwiper'
 import DashboardStateChannelsTable from '@/components/DashboardStateChannelsTable'
+import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
 </script>
 
 <style scoped>

src/components/DashboardTransactionPanel.vue

@@ -6,6 +6,9 @@
       title="Transactions"
       :show-all-link="microblockDetailsLink"
       icon-name="transactions">
+      <template #tooltip>
+        {{ transactionsHints.transaction }}
+      </template>
       <template #header>
         <div class="dashboard-transactions-panel__summary dashboard-transactions-panel__summary--desktop">
           Displaying transactions of selected microblock
@@ -33,6 +36,7 @@ import { storeToRefs } from 'pinia'
 import AppPanel from '@/components/AppPanel'
 import PanelHeader from '@/components/PanelHeader'
 import TransactionsSwiper from '@/components/TransactionsSwiper'
+import { transactionsHints } from '@/utils/hints/transactionsHints'
 import { useRecentBlocksStore } from '@/stores/recentBlocks'
 import DashboardMicroblockTransactionsTable from '@/components/DashboardMicroblockTransactionsTable'
 

src/components/PageHeader.vue

@@ -2,6 +2,12 @@
   <header class="page-header">
     <app-title>
       <slot/>
+
+      <hint-tooltip
+        v-if="$slots.tooltip"
+        class="page-header__tooltip">
+        <slot name="tooltip"/>
+      </hint-tooltip>
     </app-title>
     <the-search-bar class="page-header__search-bar"/>
   </header>
@@ -10,6 +16,7 @@
 <script setup>
 import TheSearchBar from '@/components/TheSearchBar'
 import AppTitle from '@/components/AppTitle'
+import HintTooltip from '@/components/HintTooltip'
 </script>
 
 <style scoped>
@@ -31,5 +38,9 @@ import AppTitle from '@/components/AppTitle'
       margin-bottom: var(--space-0);
     }
   }
+
+  &__tooltip {
+    margin-left: var(--space-1);
+  }
 }
 </style>

src/components/TransactionTypeTableContractCallTx.vue

@@ -16,7 +16,7 @@
         <th class="transaction-type-panel-contract-call-tx__table-header">
           Smart Contract
           <hint-tooltip>
-            {{ contractsHints.smartContract }}
+            {{ contractsHints.contractId }}
           </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">

src/components/TransactionTypeTableContractCreateTx.vue

@@ -16,7 +16,7 @@
         <th class="transaction-type-panel-contract-create-tx__table-header">
           Smart Contract
           <hint-tooltip>
-            {{ contractsHints.smartContract }}
+            {{ contractsHints.contractId }}
           </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">

src/pages/accounts/[id].vue

@@ -5,6 +5,10 @@
 
   <page-header>
     Account
+
+    <template #tooltip>
+      {{ accountHints.account }}
+    </template>
   </page-header>
 
   <account-details-panel
@@ -33,6 +37,7 @@ import AccountTransactionsPanel from '@/components/AccountTransactionsPanel'
 import AccountNamesPanel from '@/components/AccountNamesPanel'
 import PageHeader from '@/components/PageHeader'
 import AccountDetailsPanel from '@/components/AccountDetailsPanel'
+import { accountHints } from '@/utils/hints/accountHints'
 import { isDesktop } from '@/utils/screen'
 
 const accountStore = useAccountStore()

src/pages/contracts/[id].vue

@@ -5,6 +5,15 @@
 
   <page-header>
     Smart Contract
+
+    <template #tooltip>
+      {{ contractsHints.contract }}
+      <app-link
+        variant="primary"
+        to="https://docs.aeternity.com/protocol/contracts/">
+        Learn more
+      </app-link>
+    </template>
   </page-header>
 
   <contract-details-panel
@@ -31,6 +40,7 @@ import AppTabs from '@/components/AppTabs'
 import AppTab from '@/components/AppTab'
 import ContractEventsPanel from '@/components/ContractEventsPanel'
 import { isDesktop } from '@/utils/screen'
+import { contractsHints } from '@/utils/hints/contractsHints'
 import ContractCallTransactionsPanel from '@/components/ContractCallTransactionsPanel'
 
 const contractDetailsStore = useContractDetailsStore()

src/pages/contracts/index.vue

@@ -5,6 +5,15 @@
 
   <page-header>
     Smart Contracts
+
+    <template #tooltip>
+      {{ contractsHints.contract }}
+      <app-link
+        variant="primary"
+        to="https://docs.aeternity.com/protocol/contracts/">
+        Learn more
+      </app-link>
+    </template>
   </page-header>
 
   <contracts-panel/>
@@ -13,4 +22,5 @@
 <script setup>
 import ContractsPanel from '@/components/ContractsPanel'
 import PageHeader from '@/components/PageHeader'
+import { contractsHints } from '@/utils/hints/contractsHints'
 </script>

src/pages/names/[name].vue

@@ -5,6 +5,15 @@
 
   <page-header>
     AENS Name
+
+    <template #tooltip>
+      {{ namesHints.name }}
+      <app-link
+        variant="primary"
+        to="https://docs.aeternity.com/protocol/AENS/">
+        Learn more
+      </app-link>
+    </template>
   </page-header>
 
   <name-details-panel class="name-details__panel"/>
@@ -34,6 +43,7 @@ import NamePointersCustomPanel from '@/components/NamePointersCustomPanel'
 import PageHeader from '@/components/PageHeader'
 import AppTabs from '@/components/AppTabs'
 import AppTab from '@/components/AppTab'
+import { namesHints } from '@/utils/hints/namesHints'
 import { isDesktop } from '@/utils/screen'
 
 const nameDetailsStore = useNameDetailsStore()

src/pages/names/index.vue

@@ -5,6 +5,15 @@
 
   <page-header>
     Names
+
+    <template #tooltip>
+      {{ namesHints.name }}
+      <app-link
+        variant="primary"
+        to="https://docs.aeternity.com/protocol/AENS/">
+        Learn more
+      </app-link>
+    </template>
   </page-header>
 
   <app-tabs
@@ -31,6 +40,7 @@ import NamesInAuctionPanel from '@/components/NamesInAuctionPanel'
 import NamesExpiredPanel from '@/components/NamesExpiredPanel'
 import { useNamesStore } from '@/stores/names'
 import PageHeader from '@/components/PageHeader'
+import { namesHints } from '@/utils/hints/namesHints'
 import { isDesktop } from '@/utils/screen'
 
 const TAB_KEYS = ['active', 'in-auction', 'expired']

src/pages/oracles/[id].vue

@@ -5,6 +5,15 @@
 
   <page-header>
     Oracle
+
+    <template #tooltip>
+      {{ oraclesHints.oracle }}
+      <app-link
+        variant="primary"
+        to="https://docs.aeternity.com/protocol/oracles/">
+        Learn more
+      </app-link>
+    </template>
   </page-header>
 
   <oracle-details-panel
@@ -25,6 +34,7 @@ import OracleDetailsPanel from '@/components/OracleDetailsPanel'
 import PageHeader from '@/components/PageHeader'
 import { useOracleDetailsStore } from '@/stores/oracleDetails'
 import OracleEventsPanel from '@/components/OracleEventsPanel'
+import { oraclesHints } from '@/utils/hints/oraclesHints'
 
 const oracleDetailsStore = useOracleDetailsStore()
 const { oracleDetails } = storeToRefs(oracleDetailsStore)

src/pages/oracles/index.vue

@@ -5,6 +5,15 @@
 
   <page-header>
     Oracles
+
+    <template #tooltip>
+      {{ oraclesHints.oracle }}
+      <app-link
+        variant="primary"
+        to="https://docs.aeternity.com/protocol/oracles/">
+        Learn more
+      </app-link>
+    </template>
   </page-header>
 
   <oracles-panel/>
@@ -13,4 +22,5 @@
 <script setup>
 import PageHeader from '@/components/PageHeader'
 import OraclesPanel from '@/components/OraclesPanel'
+import { oraclesHints } from '@/utils/hints/oraclesHints'
 </script>

src/pages/state-channels/[id].vue

@@ -5,6 +5,15 @@
 
   <page-header>
     State Channel
+
+    <template #tooltip>
+      {{ stateChannelsHints.stateChannel }}
+      <app-link
+        variant="primary"
+        to="https://aeternity.com/state-channels">
+        Learn more
+      </app-link>
+    </template>
   </page-header>
 
   <state-channel-details-panel
@@ -25,6 +34,7 @@ import PageHeader from '@/components/PageHeader'
 import { useStateChannelDetailsStore } from '@/stores/stateChannelDetails'
 import AppTabs from '@/components/AppTabs'
 import AppTab from '@/components/AppTab'
+import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
 import StateChannelTransactionsPanel from '@/components/StateChannelTransactionsPanel'
 
 const stateChannelDetailsStore = useStateChannelDetailsStore()

src/pages/state-channels/index.vue

@@ -5,7 +5,20 @@
 
   <page-header>
     State Channels
+
+    <template #tooltip>
+      {{ stateChannelsHints.stateChannel }}
+      <app-link
+        variant="primary"
+        to="https://aeternity.com/state-channels">
+        Learn more
+      </app-link>
+    </template>
   </page-header>
 
   <state-channels-panel/>
 </template>
+
+<script setup>
+import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
+</script>

src/pages/tokens/[id].vue

@@ -5,6 +5,10 @@
 
   <page-header>
     Token
+
+    <template #tooltip>
+      {{ tokensHints.token }}
+    </template>
   </page-header>
 
   <token-details-panel
@@ -30,6 +34,7 @@ import PageHeader from '@/components/PageHeader'
 import { useTokenDetailsStore } from '@/stores/tokenDetails'
 import AppTabs from '@/components/AppTabs'
 import AppTab from '@/components/AppTab'
+import { tokensHints } from '@/utils/hints/tokensHints'
 import TokenEventsPanel from '@/components/TokenEventsPanel'
 
 const route = useRoute()

src/pages/tokens/index.vue

@@ -5,6 +5,10 @@
 
   <page-header>
     Tokens
+
+    <template #tooltip>
+      {{ tokensHints.token }}
+    </template>
   </page-header>
 
   <tokens-panel/>
@@ -13,4 +17,5 @@
 <script setup>
 import PageHeader from '@/components/PageHeader'
 import TokensPanel from '@/components/TokensPanel'
+import { tokensHints } from '@/utils/hints/tokensHints'
 </script>

src/pages/transactions/[id].vue

@@ -5,6 +5,10 @@
 
   <page-header>
     Transaction
+
+    <template #tooltip>
+      {{ transactionsHints.transaction }}
+    </template>
   </page-header>
 
   <transaction-general-panel
@@ -28,6 +32,7 @@ import { storeToRefs } from 'pinia'
 import TransactionGeneralPanel from '@/components/TransactionGeneralPanel'
 import PageHeader from '@/components/PageHeader'
 import { useTransactionDetailsStore } from '@/stores/transactionDetails'
+import { transactionsHints } from '@/utils/hints/transactionsHints'
 import TransactionTypePanel from '@/components/TransactionTypePanel'
 import TransactionPointersPanel from '@/components/TransactionPointersPanel'
 

src/pages/transactions/index.vue

@@ -5,6 +5,10 @@
 
   <page-header>
     Transactions
+
+    <template #tooltip>
+      {{ transactionsHints.transaction }}
+    </template>
   </page-header>
 
   <transactions-panel/>
@@ -13,4 +17,5 @@
 <script setup>
 import TransactionsPanel from '@/components/TransactionsPanel'
 import PageHeader from '@/components/PageHeader'
+import { transactionsHints } from '@/utils/hints/transactionsHints'
 </script>

src/utils/hints/accountHints.js

@@ -1,4 +1,5 @@
 export const accountHints = {
+  account: 'An abstract cryptographic entity that can send and receive transactions in æternity blockchain.',
   balance: 'Amount of AE owned by the account.',
   value: 'USD value of AE owned by the account.',
   transactions: 'Amount of transactions where the account was involved.',

src/utils/hints/contractsHints.js

@@ -1,4 +1,5 @@
 export const contractsHints = {
+  contract: 'A program deployed on the blockchain that runs when predetermined conditions are met. Smart Contracts are written in Sophia, a typed functional programming language.',
   contractId: 'Unique identifier for a smart contract instance that lives on the blockchain.',
   contractCreated: 'Keyblock height and exact date and time when the smart contract was created.',
   contractTxHash: 'The transaction hash of a ContractCreateTx that was executed to create the smart contract on the blockchain.',
@@ -20,7 +21,6 @@ export const contractsHints = {
   hash: 'The transaction hash of a ContractCreateTx that was executed to create the smart contract on the blockchain.',
   creator: 'Account that created the smart contract on the blockchain.',
   status: 'Status of the transaction.',
-  smartContract: 'Unique identifier for a smart contract instance that lives on the blockchain.',
   caller: 'Account that called the smart contract.',
   amount: 'Amount of AE coins that were transferred to the smart contract address.',
   entrypoint: 'The entrypoint of the smart contract that has been called.',

src/utils/hints/namesHints.js

@@ -1,5 +1,5 @@
 export const namesHints = {
-  name: 'Unique identifier that may be configured to point to accounts, smart contracts or oracles.',
+  name: 'The æternity naming system (AENS) is a distributed, open, and built-in naming system on the æternity blockchain. Each .chain name is a unique, transferrable identifier that provides a way for users to map human-readable names to blockchain resources such as accounts, smart contracts, oracles or state channels.',
   nameInAuction: 'Unique identifier that may be configured to point to accounts, contracts or oracles. names shorter than 13 characters are always auctioned.',
   expires: 'Keyblock height and estimated date and time when the name will be detached from the account. After expiration, the name enters into a revoked state and can be claimed again after a fixed timeout of 2016 keyblocks.',
   buyer: 'Account that paid the shown price to claim the name.',

src/utils/hints/oraclesHints.js

@@ -1,4 +1,5 @@
 export const oraclesHints = {
+  oracle: 'A component that connects smart contracts with real-world data. It acts as a trusted source of external information by fetching data from various sources and validating its accuracy.',
   oracleId: 'Unique oracle identifier inherited from the account address of the operator.',
   registered: 'Keyblock height and exact date when the oracle has been registered via OracleRegisterTx.',
   expiration: 'The default lifetime of an oracle is 500 keyblocks. The initial lifetime can be set to a higher value and an oracle can be extended anytime, e.g. by setting up an automated service. In case the oracle lifetime is passed, the oracle operator can re-register it anytime.',