fix!: Add info-tooltips for Gas Used and Gas Consumed in ContractResu…

…lt. (#1636)

Signed-off-by: Simon Viénot <[email protected]>

src/components/contract/ContractResult.vue

@@ -83,7 +83,7 @@
             />
           </template>
         </Property>
-        <Property id="gasUsed">
+        <Property id="gasUsed" :tooltip="gasUsedTooltip">
           <template v-slot:name>Gas Used</template>
           <template v-slot:value>
             <GasAmount
@@ -92,7 +92,7 @@
             />
           </template>
         </Property>
-        <Property id="gasConsumed">
+        <Property id="gasConsumed" :tooltip="gasConsumedTooltip">
           <template v-slot:name>Gas Consumed</template>
           <template v-slot:value>
             <GasAmount
@@ -198,6 +198,9 @@ const props = defineProps({
   }
 })
 
+const gasUsedTooltip = "This represents the actual amount of gas (i.e. the real computational effort) required to execute the smart contract."
+const gasConsumedTooltip = "This represents the amount of gas that is actually deducted from the user's balance (i.e it may include additional factors like base fees or refunds, etc…)."
+
 const isSmallScreen = inject('isSmallScreen', true)
 const isMediumScreen = inject('isMediumScreen', true)