implement contract hints

aeternity · Jun 22, 2023 · ffac685 · ffac685
1 parent ed530f4
commit ffac685
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 4 deletions.
diff --git a/src/components/TransactionGeneralPanel.vue b/src/components/TransactionGeneralPanel.vue
@@ -22,6 +22,9 @@
         <tr class="transaction-general-panel__row">
           <th class="transaction-general-panel__table-header">
             Keyblock Height
+            <hint-tooltip>
+              {{ transactionDetailsHints.blockHeight }}
+            </hint-tooltip>
           </th>
           <td class="transaction-general-panel__data">
             {{ transactionDetails.blockHeight }}
@@ -30,6 +33,9 @@
         <tr class="transaction-general-panel__row">
           <th class="transaction-general-panel__table-header">
             Keyblock Confirmations
+            <hint-tooltip>
+              {{ transactionDetailsHints.blockConfirmations }}
+            </hint-tooltip>
           </th>
           <td class="transaction-general-panel__data">
             {{ transactionDetails.confirmations }}
@@ -38,6 +44,9 @@
         <tr class="transaction-general-panel__row">
           <th class="transaction-general-panel__table-header">
             Status
+            <hint-tooltip>
+              {{ transactionDetailsHints.status }}
+            </hint-tooltip>
           </th>
           <td class="transaction-general-panel__data">
             <app-chip
@@ -57,6 +66,9 @@
           class="transaction-general-panel__row">
           <th class="transaction-general-panel__table-header">
             Microblock Hash
+            <hint-tooltip>
+              {{ transactionDetailsHints.microblockHash }}
+            </hint-tooltip>
           </th>
           <td class="transaction-general-panel__data">
             <span class="transaction-general-panel__hash">
@@ -72,6 +84,9 @@
           class="transaction-general-panel__row">
           <th class="transaction-general-panel__table-header">
             Time
+            <hint-tooltip>
+              {{ transactionDetailsHints.time }}
+            </hint-tooltip>
           </th>
           <td class="transaction-general-panel__data">
             <datetime-label :datetime="transactionDetails.created"/>
@@ -80,6 +95,9 @@
         <tr class="transaction-general-panel__row">
           <th class="transaction-general-panel__table-header">
             Fee
+            <hint-tooltip>
+              {{ transactionDetailsHints.fee }}
+            </hint-tooltip>
           </th>
           <td class="transaction-general-panel__data">
             {{ formatAePrice(formatAettosToAe(transactionDetails.fee), null) }}
@@ -88,6 +106,9 @@
         <tr class="transaction-general-panel__row">
           <th class="transaction-general-panel__table-header">
             Nonce
+            <hint-tooltip>
+              {{ transactionDetailsHints.nonce }}
+            </hint-tooltip>
           </th>
           <td class="transaction-general-panel__data">
             {{ transactionDetails.nonce }}
@@ -96,6 +117,9 @@
         <tr class="transaction-general-panel__row">
           <th class="transaction-general-panel__table-header">
             API links
+            <hint-tooltip>
+              {{ transactionDetailsHints.apiLinks }}
+            </hint-tooltip>
           </th>
           <td class="transaction-general-panel__data">
             <div class="transaction-general-panel__container">
@@ -125,6 +149,7 @@
 </template>
 
 <script setup>
+import { transactionDetailsHints } from '../utils/hints/transactionDetailHints'
 import AppPanel from '@/components/AppPanel'
 import AppChip from '@/components/AppChip'
 import AppIcon from '@/components/AppIcon'

diff --git a/src/components/TransactionTypeTableContractCallTx.vue b/src/components/TransactionTypeTableContractCallTx.vue
@@ -4,6 +4,9 @@
       <tr class="transaction-type-panel-contract-call-tx__row">
         <th class="transaction-type-panel-contract-call-tx__table-header">
           Status
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractStatus }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
           <transaction-type-status-label :status="transactionData.result"/>
@@ -12,6 +15,9 @@
       <tr class="transaction-type-panel-contract-call-tx__row">
         <th class="transaction-type-panel-contract-call-tx__table-header">
           Smart Contract
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractSmartContract }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
           <app-link :to="`/contracts/${transactionData.contract_id}`">
@@ -22,6 +28,9 @@
       <tr class="transaction-type-panel-contract-call-tx__row">
         <th class="transaction-type-panel-contract-call-tx__table-header">
           Caller
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractCaller }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
           <app-link :to="`/accounts/${transactionData.caller_id}`">
@@ -32,6 +41,9 @@
       <tr class="transaction-type-panel-contract-call-tx__row">
         <th class="transaction-type-panel-contract-call-tx__table-header">
           Amount
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractAmount }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
           {{ formatAePrice(formatAettosToAe(transactionData.amount), null) }}
@@ -40,6 +52,9 @@
       <tr class="transaction-type-panel-contract-call-tx__row">
         <th class="transaction-type-panel-contract-call-tx__table-header">
           Entry Point
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractEntryPoint }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
           <app-chip>
@@ -50,6 +65,9 @@
       <tr class="transaction-type-panel-contract-call-tx__row">
         <th class="transaction-type-panel-contract-call-tx__table-header">
           Arguments
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractArguments }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
           {{ formatNullable(transactionData.arguments) }}
@@ -58,16 +76,26 @@
       <tr class="transaction-type-panel-contract-call-tx__row">
         <th class="transaction-type-panel-contract-call-tx__table-header">
           Return
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractReturn }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
           {{ formatNullable(transactionData.return) }}
         </td>
       </tr>
       <tr class="transaction-type-panel-contract-call-tx__row">
         <th class="transaction-type-panel-contract-call-tx__table-header">
-          Gas Limit /
+          Gas Limit
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractGasLimit }}
+          </hint-tooltip>
+          /
           <wbr>
           Gas Price
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractGasPrice }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
           {{ transactionData.gas }}
@@ -77,9 +105,16 @@
       </tr>
       <tr class="transaction-type-panel-contract-call-tx__row">
         <th class="transaction-type-panel-contract-call-tx__table-header">
-          Gas Used /
+          Gas Used
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractGasUsed }}
+          </hint-tooltip>
+          /
           <wbr>
           Gas Costs
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractGasCost }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
           {{ formatNullable(transactionData.gas_used) }}
@@ -96,6 +131,7 @@ import AppLink from '@/components/AppLink'
 import TransactionTypeStatusLabel from '@/components/TransactionTypeStatusLabel'
 import { formatAePrice, formatAettosToAe, formatNullable } from '@/utils/format'
 import AppChip from '@/components/AppChip'
+import { transactionDetailsHints } from '~/utils/hints/transactionDetailHints'
 
 const props = defineProps({
   transactionData: {

diff --git a/src/components/TransactionTypeTableContractCreateTx.vue b/src/components/TransactionTypeTableContractCreateTx.vue
@@ -4,6 +4,9 @@
       <tr class="transaction-type-panel-contract-create-tx__row">
         <th class="transaction-type-panel-contract-create-tx__table-header">
           Status
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractStatus }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">
           <transaction-type-status-label :status="transactionData.return_type"/>
@@ -12,6 +15,9 @@
       <tr class="transaction-type-panel-contract-create-tx__row">
         <th class="transaction-type-panel-contract-create-tx__table-header">
           Smart Contract
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractSmartContract }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">
           <app-link :to="`/contracts/${transactionData.contract_id}`">
@@ -22,6 +28,9 @@
       <tr>
         <th class="transaction-type-panel-contract-create-tx__table-header">
           Creator
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractCreator }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">
           <app-link :to="`/accounts/${transactionData.owner_id}`">
@@ -32,6 +41,9 @@
       <tr class="transaction-type-panel-contract-create-tx__row">
         <th class="transaction-type-panel-contract-create-tx__table-header">
           Amount
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractAmount }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">
           {{ formatAePrice(formatAettosToAe(transactionData.amount), null) }}
@@ -40,16 +52,26 @@
       <tr class="transaction-type-panel-contract-create-tx__row">
         <th class="transaction-type-panel-contract-create-tx__table-header">
           Arguments
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractArguments }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">
           {{ formatNullable(transactionData.args) }}
         </td>
       </tr>
       <tr class="transaction-type-panel-contract-create-tx__row">
         <th class="transaction-type-panel-contract-create-tx__table-header">
-          Gas Limit /
+          Gas Limit
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractGasLimit }}
+          </hint-tooltip>
+          /
           <wbr>
           Gas Price
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractGasPrice }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">
           {{ transactionData.gas }}
@@ -59,9 +81,16 @@
       </tr>
       <tr class="transaction-type-panel-contract-create-tx__row">
         <th class="transaction-type-panel-contract-create-tx__table-header">
-          Gas Used /
+          Gas Used
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractGasUsed }}
+          </hint-tooltip>
+          /
           <wbr>
           Gas Costs
+          <hint-tooltip>
+            {{ transactionDetailsHints.contractGasCost }}
+          </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">
           {{ formatNullable(transactionData.gas_used) }}
@@ -77,6 +106,7 @@
 import AppLink from '@/components/AppLink'
 import TransactionTypeStatusLabel from '@/components/TransactionTypeStatusLabel'
 import { formatAePrice, formatAettosToAe, formatNullable } from '@/utils/format'
+import { transactionDetailsHints } from '@/utils/hints/transactionDetailHints'
 
 const props = defineProps({
   transactionData: {

diff --git a/src/utils/hints/transactionDetailHints.js b/src/utils/hints/transactionDetailHints.js
@@ -13,6 +13,7 @@ export const transactionDetailsHints = {
   spendTxSenderPayload: 'Additional message attached to transaction.',
   contractStatus: 'Status of the transaction',
   contractSmartContract: 'Unique identifier for a smart contract instance that lives on the blockchain.',
+  contractCreator: 'Account that created the smart contract.',
   contractCaller: 'Account that called the smart contract.',
   contractAmount: 'Amount of AE coins that was transferred to smart contract address.',
   contractEntryPoint: 'The entry point of the smart contract that has been called.',