feat: add info tooltip

src/i18n/de.ts

@@ -94,6 +94,10 @@ const messages = {
       'search-placeholder': 'Nach Apps suchen',
     },
   },
+  bitcoin: {
+    'sync-info':
+      'Diese Prozentzahl hängt von der Anzahl der Transaktionen in jedem Block ab und ist nur eine Schätzung. Leere Blöcke werden schneller überprüft und tragen weniger zur Gesamtprozentzahl bei',
+  },
 };
 
 export default messages;

src/i18n/en.ts

@@ -98,6 +98,10 @@ const messages = {
       'default-password': 'The default password for this app is',
     },
   },
+  bitcoin: {
+    'sync-info':
+      'This percentage depends on the number of transactions inside each block and is only an estimation. Empty blocks will be verified faster and have less weight in the overall synchronization percentage',
+  },
 };
 
 export default messages;

src/views/Bitcoin.vue

@@ -76,6 +76,14 @@
               >
                 {{ bitcoinStore.currentBlock.toLocaleString() }} of
                 {{ bitcoinStore.blockHeight.toLocaleString() }} blocks
+                <b-icon-info-circle-fill
+                  v-b-tooltip.hover.bottom
+                  icon="info-circle-fill"
+                  style="opacity: 0.4"
+                  variant="dark"
+                  class="ms-1"
+                  :title="t('bitcoin.sync-info')"
+                />
               </small>
             </div>
             <!-- low storage mode  -->
@@ -161,17 +169,21 @@ import BitcoinWallet from '../components/BitcoinWallet.vue';
 import useBitcoinStore from '../store/bitcoin';
 
 import {defineComponent} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {BIconInfoCircleFill} from 'bootstrap-vue/src/index.js';
 
 export default defineComponent({
   components: {
     CardWidget,
     Blockchain,
     Stat,
     BitcoinWallet,
+    BIconInfoCircleFill,
   },
   setup() {
+    const {t} = useI18n();
     const bitcoinStore = useBitcoinStore();
-    return {bitcoinStore};
+    return {t, bitcoinStore};
   },
   data() {
     return {} as {