Add tooltip for transaction gas price explanation

Author: lubej

src/app/pages/RuntimeTransactionDetailPage/index.tsx

@@ -37,6 +37,8 @@ import { base64ToHex } from '../../utils/helpers'
 import { DappBanner } from '../../components/DappBanner'
 import { getFiatCurrencyForScope, showFiatValues } from '../../../config'
 import { convertToNano, getGasPrice } from '../../utils/number-utils'
+import Tooltip from '@mui/material/Tooltip'
+import HelpIcon from '@mui/icons-material/Help'
 
 type TransactionSelectionResult = {
   wantedTransaction?: RuntimeTransaction
@@ -322,6 +324,10 @@ export const RuntimeTransactionDetailView: FC<{
                   ...getPreciseNumberFormat(convertToNano(gasPrice)),
                   ticker: `n${tickerName}`,
                 })}
+                &nbsp;
+                <Tooltip title={t('transaction.tooltips.gasPriceExplanation')}>
+                  <HelpIcon />
+                </Tooltip>
               </dd>
             </>
           )}

src/locales/en/translation.json

@@ -459,7 +459,8 @@
       "txEncrypted": "This transaction is encrypted.",
       "txNotEncrypted": "This transaction is <strong>not</strong> encrypted.",
       "senderTooltipUnavailable": "Sender not available in selected address format",
-      "recipientTooltipUnavailable": "Recipient not available in selected address format"
+      "recipientTooltipUnavailable": "Recipient not available in selected address format",
+      "gasPriceExplanation": "For each transaction, you're charged a certain amount for the gas you use and is measured in nano ROSE(Gwei)."
     }
   },
   "runtimeEvent": {