From aa174d5babab2401f7323a10447124f87765bd83 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 26 Jun 2024 13:24:32 +0200
Subject: [PATCH 01/69] =?UTF-8?q?(BIDS-2859)=20fnjsejfdkew=C3=B6jfwoi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../notifications/SubscriptionModal.vue       | 76 +++++++++++++++++
 .../playground/PlaygroundDialog.vue           | 38 ++++++++-
 frontend/i18n/en.json                         | 83 +++++++++++++++++++
 frontend/types/subscriptionModal.ts           | 23 +++++
 4 files changed, 219 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/notifications/SubscriptionModal.vue
 create mode 100644 frontend/types/subscriptionModal.ts

diff --git a/frontend/components/notifications/SubscriptionModal.vue b/frontend/components/notifications/SubscriptionModal.vue
new file mode 100644
index 000000000..3386ac35d
--- /dev/null
+++ b/frontend/components/notifications/SubscriptionModal.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+  faInfoCircle
+} from '@fortawesome/pro-regular-svg-icons'
+import type { ValidatorSubscriptionState, AccountSubscriptionState } from '~/types/subscriptionModal'
+
+interface Props {
+  validatorSub?: ValidatorSubscriptionState,
+  accountSub?: AccountSubscriptionState,
+  premiumUser: boolean
+
+}
+
+const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
+const { t } = useI18n()
+
+const tPath = computed(() => props.value?.validatorSub ? 'notifications.subscriptions.validators' : 'notifications.subscriptions.accounts')
+
+const closeDialog = () => {
+  const changements = true
+  dialogRef?.value.close(changements)
+}
+</script>
+{{ tOf($t, 'cookies.text', 0) }}
+<template>
+  <div class="content">
+    <div class="title">
+      {{ t('notifications.subscriptions.dialog_title') }}
+    </div>
+    <div class="explanation">
+      {{ t(tPath+'.explanation') }}
+    </div>
+
+    <div v-if="!!props?.validatorSub">
+      validators
+    </div>
+
+    <div v-else-if="!!props?.accountSub">
+      accounts
+    </div>
+
+    <BcTooltip :fit-content="true">
+      <FontAwesomeIcon :icon="faInfoCircle" />
+      <template #tooltip />
+    </BcTooltip>
+    <div class="footer">
+      <Button type="button" :label="t('notifications.subscriptions.save')" @click="closeDialog" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '~/assets/css/fonts.scss';
+
+.content {
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    @include fonts.subtitle_text;
+    color: var(--primary-color);
+    margin-bottom: var(--padding-small);
+  }
+
+  .explanation {
+    color: var(--text-color-disabled);
+  }
+
+  .footer {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--padding);
+    gap: var(--padding);
+  }
+}
+</style>
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 74b2d9d9b..13785aefa 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { BcDialogConfirm } from '#components'
+import { BcDialogConfirm, NotificationsSubscriptionModal } from '#components'
+import type { ValidatorSubscriptionState, AccountSubscriptionState } from '~/types/subscriptionModal'
 
 const dialog = useDialog()
 
@@ -21,6 +22,35 @@ const openQuestion = (yesLabel?: string, noLabel?: string) => {
     }
   })
 }
+
+const validatorSub: ValidatorSubscriptionState = {
+  offlineValidator: true,
+  offlineGroup: 40,
+  missedAttestations: true,
+  proposedBlock: true,
+  upcomingProposal: false,
+  syncCommittee: true,
+  withdrawed: true,
+  shlashed: false,
+  realTime: false
+}
+
+const accountSub: AccountSubscriptionState = {
+  incoming: true,
+  outgoing: true,
+  erc20: 303,
+  erc721: true,
+  erc1155: false,
+  networks: [1, 100, 8453],
+  ignoreSpam: true
+}
+
+function openSubscriptions (props: any) {
+  dialog.open(NotificationsSubscriptionModal, {
+    onClose: changements => onClose(changements?.data),
+    data: props
+  })
+}
 </script>
 
 <template>
@@ -34,6 +64,12 @@ const openQuestion = (yesLabel?: string, noLabel?: string) => {
     <Button @click="openQuestion(undefined, 'cancel')">
       Open Question cancel?
     </Button>
+    <Button @click="openSubscriptions({validatorSub, premiumUser: false})">
+      Subscribe to notifications for your validators
+    </Button>
+    <Button @click="openSubscriptions({accountSub, premiumUser: false})">
+      Subscribe to notifications for your accounts
+    </Button>
   </div>
 </template>
 
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index af5b5143d..32f15c193 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -669,6 +669,89 @@
     "network_filter_label": "Networks:",
     "all_networks": "All"
   },
+  "notifications": {
+    "TODO: INSERT HERE":" THE TRANSLATIONS FOR THE PARENT DIALOG",
+
+    "subscriptions": {
+      "dialog_title": "Edit Subscriptions",
+      "validators" : {
+        "explanation": "All notifications are sent after network finality (~20mins).",
+        "offlineValidator": {
+          "option": "Validator is offline",
+          "hint": ["We will trigger a notification:", "Once the validator has been offline for 3 epochs.", "Every 32 Epochs (~3 hours) during your downtime.", "Once you are back online again."]
+        },
+        "offlineGroup": {
+          "option":"Group is offline",
+          "hint": ["We will trigger a notification:", "Once 10% of your group is offline.", "Once you have been offline for 3 epochs.", "Every 32 Epochs (~3 hours) during your downtime.", "Once you are back online.", "Note:", " Notification resets if you do not meet the threshold of 10%."]
+        },
+        "missedAttestations": {
+          "option":"Attestations missed",
+          "hint": "We will trigger every epoch (6.4 minutes) during downtime."
+        },
+        "proposedBlock": {
+          "option":"Block proposal (missed & success)",
+          "hint": ""
+        },
+        "upcomingProposal": {
+          "option":"Upcoming block proposal",
+          "hint": "May trigger false positive notifications during reorgs."
+        },
+        "syncCommittee": {
+          "option":"Sync committee",
+          "hint": ""
+        },
+        "withdrawed": {
+          "option":"Withdrawal processed",
+          "hint": ""
+        },
+        "shlashed": {
+          "option":"Validator got slashed",
+          "hint": ""
+        },
+        "realTime": {
+          "option":"Realtime mode",
+          "hint": "Sends notifications after the first epoch and does not wait for finality to send notifications, which might cause false positive notifications."
+        },
+        "all": "All events"
+      },
+      "accounts": {
+        "explanation": "",
+        "incoming": {
+          "option":"Incoming Transactions",
+          "hint": ""
+        },
+        "outgoing": {
+          "option":"Outgoing Transactions",
+          "hint": ""
+        },
+        "erc20": {
+          "option":"Track ERC20 Token Transfers",
+          "hint": ""
+        },
+        "erc721": {
+          "option":"Track ERC721 Token Transfers",
+          "hint": ""
+        },
+        "erc1155": {
+          "option":"Track ERC1155 Token Transfers",
+          "hint": ""
+        },
+        "all": {
+          "option":"All events",
+          "hint": ""
+        },
+        "networks": {
+          "option":"Networks",
+          "hint": ""
+        },
+        "ignoreSpam": {
+          "option":"Ignore spam transactions",
+          "hint": ["Ignores ", "zero value transfer tx's ", "and token tx's that have the ", "\"hidden\" token label ", "."]
+        }
+      },
+      "save":"Save"
+    }
+  },
   "pricing": {
     "seo_title": "Premium Pricing",
     "compare": "Compare Plans",
diff --git a/frontend/types/subscriptionModal.ts b/frontend/types/subscriptionModal.ts
new file mode 100644
index 000000000..4eaf087ec
--- /dev/null
+++ b/frontend/types/subscriptionModal.ts
@@ -0,0 +1,23 @@
+import { ChainIDs } from './network'
+
+export type ValidatorSubscriptionState = {
+  offlineValidator: boolean,
+  offlineGroup?: number,
+  missedAttestations: boolean,
+  proposedBlock: boolean,
+  upcomingProposal: boolean,
+  syncCommittee: boolean,
+  withdrawed: boolean,
+  shlashed: boolean,
+  realTime?: boolean
+}
+
+export type AccountSubscriptionState = {
+  incoming: boolean,
+  outgoing: boolean,
+  erc20: number,
+  erc721: boolean,
+  erc1155: boolean,
+  networks: ChainIDs[],
+  ignoreSpam: boolean
+}

From 7ace2fb49565ef08341c9c552ec4ae36fc081b6e Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 26 Jun 2024 16:49:58 +0200
Subject: [PATCH 02/69] (BIDS-2859) some progress

---
 .../notifications/SubscriptionModal.vue       | 74 ++++++++++++++-----
 .../playground/PlaygroundDialog.vue           |  8 +-
 2 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionModal.vue b/frontend/components/notifications/SubscriptionModal.vue
index 3386ac35d..8731eedc6 100644
--- a/frontend/components/notifications/SubscriptionModal.vue
+++ b/frontend/components/notifications/SubscriptionModal.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import {
-  faInfoCircle
-} from '@fortawesome/pro-regular-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import type { ValidatorSubscriptionState, AccountSubscriptionState } from '~/types/subscriptionModal'
 
 interface Props {
@@ -14,35 +13,62 @@ interface Props {
 const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
 const { t } = useI18n()
 
-const tPath = computed(() => props.value?.validatorSub ? 'notifications.subscriptions.validators' : 'notifications.subscriptions.accounts')
+const newDataReceived = ref<number>(0) // used in <template> to trigger Vue to refresh or hide the content
+let tPath: string
+let validatorSubModifiable: ValidatorSubscriptionState
+let accountSubModifiable: AccountSubscriptionState
+
+watch(props, (props) => {
+  if (!props || (!props.validatorSub && !props.accountSub)) {
+    newDataReceived.value = 0
+    return
+  }
+  newDataReceived.value++
+  if (props.validatorSub) {
+    tPath = 'notifications.subscriptions.validators.'
+    validatorSubModifiable = structuredClone(toRaw(props.validatorSub))
+  } else {
+    tPath = 'notifications.subscriptions.accounts.'
+    accountSubModifiable = structuredClone(toRaw(props.accountSub!))
+  }
+}, { immediate: true })
 
 const closeDialog = () => {
   const changements = true
   dialogRef?.value.close(changements)
 }
 </script>
-{{ tOf($t, 'cookies.text', 0) }}
+
 <template>
-  <div class="content">
+  <div v-if="newDataReceived" class="content">
     <div class="title">
       {{ t('notifications.subscriptions.dialog_title') }}
     </div>
-    <div class="explanation">
-      {{ t(tPath+'.explanation') }}
-    </div>
 
-    <div v-if="!!props?.validatorSub">
-      validators
+    <div v-if="props?.validatorSub">
+      <div class="explanation">
+        {{ t(tPath+'explanation') }}
+      </div>
+      <div class="option-row">
+        {{ t(tPath+'offlineValidator.option') }}
+        <BcTooltip :fit-content="true">
+          <FontAwesomeIcon :icon="faInfoCircle" />
+          <template #tooltip>
+            <div class="tt-content">
+              {{ tOf(t, tPath+'offlineValidator.hint', 0) }}
+              <ul><li>{{ tOf(t, tPath+'offlineValidator.hint', 1) }}</li> <li>{{ tOf(t, tPath+'offlineValidator.hint', 2) }}</li> <li>{{ tOf(t, tPath+'offlineValidator.hint', 3) }}</li> </ul>
+            </div>
+          </template>
+        </BcTooltip>
+      </div>
     </div>
 
-    <div v-else-if="!!props?.accountSub">
-      accounts
+    <div v-else-if="props?.accountSub">
+      <div class="explanation">
+        {{ t(tPath+'explanation') }}
+      </div>
     </div>
 
-    <BcTooltip :fit-content="true">
-      <FontAwesomeIcon :icon="faInfoCircle" />
-      <template #tooltip />
-    </BcTooltip>
     <div class="footer">
       <Button type="button" :label="t('notifications.subscriptions.save')" @click="closeDialog" />
     </div>
@@ -66,6 +92,10 @@ const closeDialog = () => {
     color: var(--text-color-disabled);
   }
 
+  .option-row {
+
+  }
+
   .footer {
     display: flex;
     justify-content: center;
@@ -73,4 +103,14 @@ const closeDialog = () => {
     gap: var(--padding);
   }
 }
+
+.tt-content {
+    width: 220px;
+    min-width: 100%;
+    text-align: left;
+    ul {
+      margin-left: 0;
+      padding-left: 1.5em;
+    }
+  }
 </style>
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 13785aefa..84add054d 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -13,13 +13,13 @@ function onClose (answer: boolean) {
 
 const openQuestion = (yesLabel?: string, noLabel?: string) => {
   dialog.open(BcDialogConfirm, {
-    onClose: response => onClose(response?.data),
     data: {
       title: 'My super question',
       question: 'Are you ready to rumble, or do you have second thoughts?',
       yesLabel,
       noLabel
-    }
+    },
+    onClose: response => onClose(response?.data)
   })
 }
 
@@ -47,8 +47,8 @@ const accountSub: AccountSubscriptionState = {
 
 function openSubscriptions (props: any) {
   dialog.open(NotificationsSubscriptionModal, {
-    onClose: changements => onClose(changements?.data),
-    data: props
+    data: props,
+    onClose: changes => onClose(changes?.data)
   })
 }
 </script>

From df3ffb6338bd8b7855d47b29bcbd1b41ed73a644 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Thu, 27 Jun 2024 17:49:26 +0200
Subject: [PATCH 03/69] (BIDS-2859) translations, mini parser and rows
 implemented

---
 .../notifications/SubscriptionModal.vue       |  60 +++----
 .../notifications/SubscriptionRow.vue         | 151 ++++++++++++++++++
 .../playground/PlaygroundDialog.vue           |   2 +-
 frontend/i18n/en.json                         |  20 ++-
 frontend/types/subscriptionModal.ts           |   2 +-
 frontend/utils/translation.ts                 |  21 ++-
 6 files changed, 209 insertions(+), 47 deletions(-)
 create mode 100644 frontend/components/notifications/SubscriptionRow.vue

diff --git a/frontend/components/notifications/SubscriptionModal.vue b/frontend/components/notifications/SubscriptionModal.vue
index 8731eedc6..3a2301cc0 100644
--- a/frontend/components/notifications/SubscriptionModal.vue
+++ b/frontend/components/notifications/SubscriptionModal.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import type { ValidatorSubscriptionState, AccountSubscriptionState } from '~/types/subscriptionModal'
 
+type ValidatorSubscriptionStateComplete = ValidatorSubscriptionState & {
+  offlineGroup: number,
+  realTime: boolean
+}
+
 interface Props {
   validatorSub?: ValidatorSubscriptionState,
   accountSub?: AccountSubscriptionState,
   premiumUser: boolean
-
 }
 
 const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
@@ -15,8 +17,8 @@ const { t } = useI18n()
 
 const newDataReceived = ref<number>(0) // used in <template> to trigger Vue to refresh or hide the content
 let tPath: string
-let validatorSubModifiable: ValidatorSubscriptionState
-let accountSubModifiable: AccountSubscriptionState
+const validatorSubModifiable = ref({} as ValidatorSubscriptionStateComplete)
+const accountSubModifiable = ref({} as AccountSubscriptionState)
 
 watch(props, (props) => {
   if (!props || (!props.validatorSub && !props.accountSub)) {
@@ -26,10 +28,10 @@ watch(props, (props) => {
   newDataReceived.value++
   if (props.validatorSub) {
     tPath = 'notifications.subscriptions.validators.'
-    validatorSubModifiable = structuredClone(toRaw(props.validatorSub))
+    validatorSubModifiable.value = { offlineGroup: -1, realTime: false, ...structuredClone(toRaw(props.validatorSub)) }
   } else {
     tPath = 'notifications.subscriptions.accounts.'
-    accountSubModifiable = structuredClone(toRaw(props.accountSub!))
+    accountSubModifiable.value = structuredClone(toRaw(props.accountSub!))
   }
 }, { immediate: true })
 
@@ -49,24 +51,28 @@ const closeDialog = () => {
       <div class="explanation">
         {{ t(tPath+'explanation') }}
       </div>
-      <div class="option-row">
-        {{ t(tPath+'offlineValidator.option') }}
-        <BcTooltip :fit-content="true">
-          <FontAwesomeIcon :icon="faInfoCircle" />
-          <template #tooltip>
-            <div class="tt-content">
-              {{ tOf(t, tPath+'offlineValidator.hint', 0) }}
-              <ul><li>{{ tOf(t, tPath+'offlineValidator.hint', 1) }}</li> <li>{{ tOf(t, tPath+'offlineValidator.hint', 2) }}</li> <li>{{ tOf(t, tPath+'offlineValidator.hint', 3) }}</li> </ul>
-            </div>
-          </template>
-        </BcTooltip>
-      </div>
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.offlineValidator" :t-path="tPath+'offlineValidator'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.offlineGroup" :t-path="tPath+'offlineGroup'" :lacks-premium-subscription="!props.premiumUser" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.missedAttestations" :t-path="tPath+'missedAttestations'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.proposedBlock" :t-path="tPath+'proposedBlock'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.upcomingProposal" :t-path="tPath+'upcomingProposal'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.syncCommittee" :t-path="tPath+'syncCommittee'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.withdrawn" :t-path="tPath+'withdrawn'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.shlashed" :t-path="tPath+'shlashed'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.realTime" :t-path="tPath+'realTime'" :lacks-premium-subscription="!props.premiumUser" />
     </div>
 
     <div v-else-if="props?.accountSub">
       <div class="explanation">
         {{ t(tPath+'explanation') }}
       </div>
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.incoming" :t-path="tPath+'incoming'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.outgoing" :t-path="tPath+'outgoing'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc20" :t-path="tPath+'erc20'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc721" :t-path="tPath+'erc721'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc1155" :t-path="tPath+'erc1155'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.networks" :t-path="tPath+'networks'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.ignoreSpam" :t-path="tPath+'ignoreSpam'" :lacks-premium-subscription="false" />
     </div>
 
     <div class="footer">
@@ -92,25 +98,11 @@ const closeDialog = () => {
     color: var(--text-color-disabled);
   }
 
-  .option-row {
-
-  }
-
   .footer {
     display: flex;
-    justify-content: center;
+    justify-content: right;
     margin-top: var(--padding);
     gap: var(--padding);
   }
 }
-
-.tt-content {
-    width: 220px;
-    min-width: 100%;
-    text-align: left;
-    ul {
-      margin-left: 0;
-      padding-left: 1.5em;
-    }
-  }
 </style>
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
new file mode 100644
index 000000000..aa1ccfe12
--- /dev/null
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
+import type { ChainIDs } from '~/types/network'
+
+const props = defineProps<{
+  tPath: string,
+  lacksPremiumSubscription: boolean
+}>()
+
+const { t } = useI18n()
+
+const liveState = defineModel<boolean|number|ChainIDs[]>({ required: true })
+const checked = ref<boolean>(false)
+const inputted = ref<string>('')
+
+// ###### parser for the formatting of the text in the tooltips
+
+type Text = { content: string, bold: boolean }
+type List = Text[]
+type TooltipContent = (Text|List)[]
+
+function parseRawArray (raw : string[], start : number, output: TooltipContent) : number {
+  if (start >= raw.length || (raw.length === 1 && !raw[0])) {
+    return start
+  }
+  const inAList = raw[start][0] === '-'
+  let i = start
+  while (i < raw.length) {
+    const first = raw[i][0]
+    if (inAList && first !== '-') {
+      // end of list, we return the index of this first text following the list
+      return i
+    }
+    if (first === '-') {
+      if (!inAList) {
+        // beginning of a list
+        const list: List = []
+        output.push(list)
+        i = parseRawArray(raw, i, list)
+      } else {
+        // already in a list
+        output.push(parseRawText(raw[i].slice(1)))
+        i++
+      }
+    } else {
+      output.push(parseRawText(raw[i]))
+      i++
+    }
+  }
+
+  return i
+}
+
+function parseRawText (text: string) : Text {
+  if (text[0] === '*') {
+    return { content: text.slice(1), bold: true }
+  }
+  return { content: text, bold: false }
+}
+
+// end of parsing ######
+
+const tooltip : ComputedRef<TooltipContent> = computed(() => {
+  let options
+  if (Array.isArray(liveState.value)) {
+    options = { plural: liveState.value.length, count: liveState.value.length, list: liveState.value.join(', ') }
+  } else {
+    const plural = (typeof liveState.value === 'number') ? liveState.value : (liveState.value ? 2 : 1)
+    options = { plural, count: liveState.value }
+  }
+
+  const output: TooltipContent = []
+  const translation = tAll(t, props.tPath + '.hint', options)
+  parseRawArray(translation, 0, output)
+  return output
+})
+
+const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
+</script>
+
+<template>
+  <div class="option-row">
+    <span class="caption" :class="deactivationClass">
+      {{ t(tPath+'.option') }}
+    </span>
+    <BcTooltip v-if="tooltip.length" :fit-content="true">
+      <FontAwesomeIcon :icon="faInfoCircle" class="info" />
+      <template #tooltip>
+        <div class="tt-content">
+          <span v-for="(element,p) of tooltip" :key="p">
+            <span v-if="!Array.isArray(element)">
+              <b v-if="element.bold">{{ element.content }}</b>
+              <span v-else>{{ element.content }}</span>
+            </span>
+            <ul v-else>
+              <li v-for="line of element" :key="line.content">
+                <b v-if="line.bold">{{ line.content }}</b>
+                <span v-else>{{ line.content }}</span>
+              </li>
+            </ul>
+          </span>
+        </div>
+      </template>
+    </BcTooltip>
+    <BcPremiumGem v-if="lacksPremiumSubscription" class="gem" />
+    <div class="right">
+      <InputText v-if="typeof liveState == 'number'" v-model="inputted" :placeholder="t(tPath + '.placeholder')" :class="deactivationClass" />
+      <Checkbox v-model="checked" :binary="true" :class="deactivationClass" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "~/assets/css/fonts.scss";
+
+.deactivated {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.option-row {
+  display: flex;
+  @include fonts.small_text;
+  height: 40px;
+
+  .caption {
+
+  }
+  .info {
+    margin-left: 6px;
+  }
+  .gem {
+    margin-left: 6px;
+  }
+  .right {
+    margin-left: auto;
+  }
+}
+
+.tt-content {
+  width: 220px;
+  min-width: 100%;
+  text-align: left;
+  ul {
+    padding: 0;
+    margin: 0;
+    padding-left: 1.5em;
+  }
+}
+</style>
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 84add054d..949abfa56 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -30,7 +30,7 @@ const validatorSub: ValidatorSubscriptionState = {
   proposedBlock: true,
   upcomingProposal: false,
   syncCommittee: true,
-  withdrawed: true,
+  withdrawn: true,
   shlashed: false,
   realTime: false
 }
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 32f15c193..640c1ba36 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -678,11 +678,20 @@
         "explanation": "All notifications are sent after network finality (~20mins).",
         "offlineValidator": {
           "option": "Validator is offline",
-          "hint": ["We will trigger a notification:", "Once the validator has been offline for 3 epochs.", "Every 32 Epochs (~3 hours) during your downtime.", "Once you are back online again."]
+          "hint": ["We will trigger a notification:",
+            "-Once the validator has been offline for 3 epochs.",
+            "-Every 32 Epochs (~3 hours) during your downtime.",
+            "-Once you are back online again."]
         },
         "offlineGroup": {
           "option":"Group is offline",
-          "hint": ["We will trigger a notification:", "Once 10% of your group is offline.", "Once you have been offline for 3 epochs.", "Every 32 Epochs (~3 hours) during your downtime.", "Once you are back online.", "Note:", " Notification resets if you do not meet the threshold of 10%."]
+          "hint": ["We will trigger a notification:",
+            "-Once {count}% of your group is offline.",
+            "-Once you have been offline for 3 epochs.",
+            "-Every 32 Epochs (~3 hours) during your downtime.",
+            "-Once you are back online.",
+            "*Note: ", "Notification resets if you do not meet the threshold of {count}%."],
+          "placeholder": "10"
         },
         "missedAttestations": {
           "option":"Attestations missed",
@@ -700,7 +709,7 @@
           "option":"Sync committee",
           "hint": ""
         },
-        "withdrawed": {
+        "withdrawn": {
           "option":"Withdrawal processed",
           "hint": ""
         },
@@ -726,7 +735,8 @@
         },
         "erc20": {
           "option":"Track ERC20 Token Transfers",
-          "hint": ""
+          "hint": "",
+          "placeholder": "value > $0"
         },
         "erc721": {
           "option":"Track ERC721 Token Transfers",
@@ -746,7 +756,7 @@
         },
         "ignoreSpam": {
           "option":"Ignore spam transactions",
-          "hint": ["Ignores ", "zero value transfer tx's ", "and token tx's that have the ", "\"hidden\" token label ", "."]
+          "hint": ["Ignores ", "*zero value transfer tx's ", "and token tx's that have the ", "*\"hidden\" token label", "."]
         }
       },
       "save":"Save"
diff --git a/frontend/types/subscriptionModal.ts b/frontend/types/subscriptionModal.ts
index 4eaf087ec..603143712 100644
--- a/frontend/types/subscriptionModal.ts
+++ b/frontend/types/subscriptionModal.ts
@@ -7,7 +7,7 @@ export type ValidatorSubscriptionState = {
   proposedBlock: boolean,
   upcomingProposal: boolean,
   syncCommittee: boolean,
-  withdrawed: boolean,
+  withdrawn: boolean,
   shlashed: boolean,
   realTime?: boolean
 }
diff --git a/frontend/utils/translation.ts b/frontend/utils/translation.ts
index 3198f9f44..cf0580019 100644
--- a/frontend/utils/translation.ts
+++ b/frontend/utils/translation.ts
@@ -13,23 +13,32 @@ export function formatMultiPartSpan (t: ComposerTranslation, key: string, classe
   return `<span>${parts.join(' ')}</span>`
 }
 
-// Translation with default. Needed if we want to default to '' as the translation lib does not support to default to ''
+/** Translation with default. Needed if we want to default to '' as the translation lib does not support to default to '' */
 export function tD (t: ComposerTranslation, path : string, options?: any, d:string = '') : string {
+  if (typeof options === 'number') {
+    options = { plural: options }
+  }
   const translation = t(path, 'NOT_FOUND', { ...options, missingWarn: false })
   return (translation === 'NOT_FOUND') ? d : translation
 }
 
-// get a translation at a specific index, if it exists
+/** gets a translation at a specific index, if it exists */
 export function tOf (t: ComposerTranslation, path : string, index : number, options?: any) : string {
   return tD(t, `${path}[${index}]`, options)
 }
 
-// get all translations for an array
+/** returns an array of translations (with only one element if the translation data is a simple string) */
 export function tAll (t: ComposerTranslation, path : string, options?: any) : string[] {
   const list: string[] = []
-  let index = 0
-  for (let value = tOf(t, path, index); value; value = tOf(t, path, ++index, options)) {
-    list.push(value)
+  if (tD(t, path, options, 'NOT_FOUND') !== 'NOT_FOUND') {
+    // the data is a string, we push the translation
+    list.push(tD(t, path, options))
+  } else {
+    // the data is an array
+    let index = 0
+    for (let value = tOf(t, path, index, options); value; value = tOf(t, path, ++index, options)) {
+      list.push(value)
+    }
   }
   return list
 }

From 700363663f15bc78a5a262287d6562a559afc1d4 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Sun, 30 Jun 2024 03:09:28 +0200
Subject: [PATCH 04/69] (BIDS-2859) mini parser became very powerful but its
 code remains mini

---
 frontend/components/bc/MiniParser.vue         | 250 ++++++++++++++++++
 .../components/bc/searchbar/SearchbarMain.vue |   1 -
 .../notifications/NetworkSelector.vue         |  25 ++
 .../notifications/SubscriptionModal.vue       |  44 +--
 .../notifications/SubscriptionRow.vue         | 119 +++------
 frontend/components/playground/MiniParser.vue |  54 ++++
 .../playground/PlaygroundComponents.vue       |  11 +-
 .../playground/PlaygroundDialog.vue           |   2 +-
 frontend/i18n/en.json                         |  54 ++--
 frontend/utils/translation.ts                 |  18 +-
 10 files changed, 441 insertions(+), 137 deletions(-)
 create mode 100644 frontend/components/bc/MiniParser.vue
 create mode 100644 frontend/components/notifications/NetworkSelector.vue
 create mode 100644 frontend/components/playground/MiniParser.vue

diff --git a/frontend/components/bc/MiniParser.vue b/frontend/components/bc/MiniParser.vue
new file mode 100644
index 000000000..e40b1ce10
--- /dev/null
+++ b/frontend/components/bc/MiniParser.vue
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+/** Component outputting HTML by interpreting simple tags found in the input.
+ *
+ *  Usage:
+ *
+ *    Simplest case:
+ *      <BcMiniParser :input="stringOrArrayOfStrings" />
+ *    You can pass an object containing links:
+ *      <BcMiniParser :input="stringOrArrayOfStrings" :links="{darklink: 'www.choco.com', milkyurl: 'index.html'}" />
+ *    (see the example just below to understand the purpose of prop links)
+ *
+ *  Example of input:
+ *
+ *    We will eat `chocolate` in 2 cases:
+ *    - If your *validator* is online
+ *    - During *the _nice_ days* of Easter\*.
+ *    It can be [very dark](darklink) or [with _milk_](milkyurl), we enjoy both.
+ *    \*note that Christmas is also a good moment to do so
+ *
+ *  Language:
+ *
+ *    The input can be either a string (that can hold several lines of text) or an array of strings (each element is a single line of text).
+ *    For each line:
+ *    `-` at the beginning transforms the line into a list item.
+ *      words surrounded with _ will be shown in italic
+ *      words surrounded with * will be shown in bold
+ *      words surrounded with ` will be shown with a type-writter font and not parsed (formatting tags inside ` and ` are ineffective)
+ *      a link can be created by writing [a caption](and-a-url). The url can written directly or tell the name of a member of the object in props links.
+ *    Mixes are possible: italic inside bold or bold inside italic.
+ *
+ *    If you need to display a character that is a tag, escape it with `\` and the parser will not interpret it.
+ *    As Javascript itself uses `\` as an escaping mark, you will need to type `\\` and `\\\\` to express respectively `\` and `\\` when you
+ *    hard-code the input in JS.
+ *
+*/
+import { Target } from '~/types/links'
+
+const props = defineProps<{ input: string|string[], links?: Record<string, string> }>()
+
+const parsed = computed(() => parse(props.input))
+
+enum Tag { Italic = '_', Bold = '*', Code = '`', Item = '-', LinkStart = '[', LinkMid = '](', LinkEnd = ')' }
+const OpeningTags = [Tag.Italic, Tag.Bold, Tag.Code, Tag.LinkStart]
+const Escapement = '\\'
+
+type Formatting = { italic: boolean, bold: boolean, code: boolean }
+type Text = { content: string, format: Formatting}
+type Link = { caption: Text[], url: string, target: Target}
+type LinePart = Text | Link
+type Line = LinePart[]
+type List = Line[]
+type Parsed = Array<Line|List>
+
+/** converts the input into a structure that will be very easy to output in `<template>` */
+function parse (raw : string|string[]) : Parsed {
+  const output: Parsed = []
+  if (!Array.isArray(raw)) {
+    if (typeof raw !== 'string') {
+      return []
+    }
+    raw = (raw.includes('\r\n')) ? raw.split('\r\n') : raw.split('\n')
+  }
+  if (!raw.length || (raw.length === 1 && !raw[0])) {
+    return []
+  }
+  const cleaned: string[] = []
+  for (let i = 0; i < raw.length; i++) {
+    cleaned.push(replaceEscapements(raw[i]))
+  }
+  let i = 0
+  while (i < cleaned.length) {
+    if (isLineAnItemInList(cleaned[i])) {
+      const list: List = []
+      output.push(list)
+      i = parseList(list, cleaned, i)
+    } else {
+      const line: Line = []
+      output.push(line)
+      parseText(line, cleaned[i])
+      i++
+    }
+  }
+  return output
+}
+
+function parseList (output: List, raw : string[], start : number) : number {
+  let i = start
+  while (i < raw.length) {
+    if (!isLineAnItemInList(raw[i])) {
+      return i // end of list, we return the index of this first text after the list
+    }
+    const item: Line = [] // new item in the list
+    output.push(item)
+    parseText(item, raw[i].slice(Tag.Item.length))
+    i++
+  }
+  return i
+}
+
+function parseText (output: Line, text: string, format: Formatting = { italic: false, bold: false, code: false }) : void {
+  const { pos: openingTagPos, tag: openingTag } = findFirstTag(text, 0)
+  if (openingTagPos < 0) { // no tag found
+    addTextPart(output, text, format)
+    return
+  }
+  // opening tag found
+  let closingTag: Tag
+  const middle = { ...format }
+  let middleIsAlink = false
+  switch (openingTag) {
+    case Tag.Italic : middle.italic = true; closingTag = Tag.Italic; break
+    case Tag.Bold : middle.bold = true; closingTag = Tag.Bold; break
+    case Tag.Code : middle.code = true; closingTag = Tag.Code; break
+    case Tag.LinkStart : middleIsAlink = true; closingTag = Tag.LinkEnd; break
+    default: return
+  }
+  const { pos: closingTagPos } = findFirstTag(text, openingTagPos + openingTag.length, closingTag)
+  if (closingTagPos < 0) { // syntax error: either the closing tag has been forgotten or nested tags have their closure swapped
+    addTextPart(output, text, format) // so we output the text without parsing it
+    return
+  }
+  parseLeftMiddleRightTexts(output, text, [openingTagPos, openingTagPos + openingTag.length, closingTagPos, closingTagPos + closingTag.length], format, middle, middleIsAlink)
+}
+
+function parseLeftMiddleRightTexts (output: Line, text: string, innerEnds: number[], leftRight: Formatting, middle: Formatting, middleIsAlink: boolean) {
+  if (innerEnds[0] > 0) {
+    addTextPart(output, text.slice(0, innerEnds[0]), leftRight)
+  }
+  if (middleIsAlink) {
+    parseLink(output, text.slice(innerEnds[1], innerEnds[2]), middle)
+  } else
+    if (middle.code) {
+      addTextPart(output, text.slice(innerEnds[1], innerEnds[2]), middle) // we do not parse anything inside
+    } else {
+      parseText(output, text.slice(innerEnds[1], innerEnds[2]), middle)
+    }
+  if (innerEnds[3] < text.length) {
+    parseText(output, text.slice(innerEnds[3]), leftRight)
+  }
+}
+
+function parseLink (output: Line, text: string, format: Formatting) {
+  // note: param `text` is of the form  `caption of the link](urlRef`  (both ends have been removed by the calling function)
+  const { pos: middleTagPos } = findFirstTag(text, 0, Tag.LinkMid)
+  const caption: Text[] = []
+  parseText(caption, text.slice(0, middleTagPos), format)
+  const urlRef = text.slice(middleTagPos + Tag.LinkMid.length)
+  const url = props.links && urlRef in props.links ? props.links[urlRef] : urlRef
+  const target = (url.includes('://') || url.startsWith('www.')) ? Target.External : Target.Internal // correct 99% of the time I suppose
+  output.push({ caption, url, target } as Link)
+}
+
+function isLineAnItemInList (part: string) : boolean {
+  return part.slice(0, Tag.Item.length) === Tag.Item // note that if the list tag is escaped, this test returns false as expected
+}
+
+const ESC = '\u001B'
+
+/** @param wanted If given, finds the first occurence of this tag (this mode is used for closing tags). If omitted, finds the first opening tag that the parser recognises.
+ *  @returns -1 if not found
+ * */
+function findFirstTag (text: string, start: number, wanted?: Tag) : { pos: number, tag: Tag } {
+  if (wanted !== undefined) {
+    let pos = start - wanted.length
+    do {
+      pos = text.indexOf(wanted, pos + wanted.length)
+    } while (pos >= 1 && text[pos - 1] === ESC) // escaped tags are ignored
+    return { pos, tag: wanted }
+  }
+  let closest = { pos: -1, tag: Tag.Italic }
+  for (const tag of OpeningTags) {
+    const found = findFirstTag(text, start, tag)
+    if (found.pos >= 0 && (found.pos < closest.pos || closest.pos < 0)) {
+      closest = found
+    }
+  }
+  return closest
+}
+
+function addTextPart (output: Line, text: string, format: Formatting) :void {
+  output.push({ content: removeEscapements(text), format: { ...format } })
+}
+
+/** replace all `\` with `\u001B` and all `\\` with `\`  */
+function replaceEscapements (input: string) : string {
+  const DoubleEsc = Escapement + Escapement
+  let posIn = 0
+  let output = ''
+  while (posIn < input.length) {
+    const double = input.indexOf(DoubleEsc, posIn)
+    const single = input.indexOf(Escapement, posIn)
+    if (double >= 0 && (double <= single || single < 0)) {
+      output += input.slice(posIn, double) + Escapement
+      posIn = double + DoubleEsc.length
+    } else
+      if (single >= 0) {
+        output += input.slice(posIn, single) + ESC
+        posIn = single + Escapement.length
+      } else {
+        break
+      }
+  }
+  return (output + input.slice(posIn))
+}
+
+function removeEscapements (raw: string) : string {
+  return raw.replaceAll(ESC, '')
+}
+</script>
+
+<template>
+  <div>
+    <div v-for="(element,i) of parsed" :key="i">
+      <ul v-if="Array.isArray(element[0])">
+        <li v-for="(item,j) of (element as List)" :key="j">
+          <span v-for="(part,k) of item" :key="k">
+            <span v-if="!('url' in part)" :class="part.format">{{ part.content }}</span>
+            <BcLink v-else :to="part.url" class="link" :target="part.target">
+              <span v-for="(text,l) of part.caption" :key="l" :class="text.format">{{ text.content }}</span>
+            </BcLink>
+          </span>
+        </li>
+      </ul>
+      <br v-else-if="element.length <= 1 && 'content' in element[0] && !(element[0] as Text).content">
+      <span v-for="(part,k) of (element as Line)" v-else :key="k">
+        <span v-if="!('url' in part)" :class="part.format">{{ part.content }}</span>
+        <BcLink v-else :to="part.url" class="link" :target="part.target">
+          <span v-for="(text,l) of part.caption" :key="l" :class="text.format">{{ text.content }}</span>
+        </BcLink>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+ul {
+  padding: 0;
+  margin: 0;
+  padding-left: 1.4em;
+}
+.italic {
+  font-style: italic;
+}
+.bold {
+  font-weight: bold;
+}
+.code {
+  font-family: monospace;
+}
+</style>
diff --git a/frontend/components/bc/searchbar/SearchbarMain.vue b/frontend/components/bc/searchbar/SearchbarMain.vue
index ee2c4c544..02b80be6a 100644
--- a/frontend/components/bc/searchbar/SearchbarMain.vue
+++ b/frontend/components/bc/searchbar/SearchbarMain.vue
@@ -35,7 +35,6 @@ import {
 } from '~/types/searchbar'
 import { ChainIDs, ChainInfo } from '~/types/network'
 import { API_PATH } from '~/types/customFetch'
-import { useNetworkStore } from '~/stores/useNetworkStore'
 
 const MinimumTimeBetweenAPIcalls = 400 // ms
 const layoutThreshold = 500 // px  (tells when the bar must switch between its narrow and large layouts)
diff --git a/frontend/components/notifications/NetworkSelector.vue b/frontend/components/notifications/NetworkSelector.vue
new file mode 100644
index 000000000..8f0cb6cf6
--- /dev/null
+++ b/frontend/components/notifications/NetworkSelector.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { MultiBarItem } from '~/types/multiBar'
+const { availableNetworks } = useNetworkStore()
+
+const { t } = useI18n()
+
+const selection = ref<string[]>(['1'])
+
+const buttons: MultiBarItem[] = [
+  {
+    component: undefined,
+    value: String(1),
+    tooltip: t('slotViz.filter.proposal')
+  }
+]
+
+</script>
+
+<template>
+  <BcToggleMultiBar v-model="selection" :icons="buttons" />
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/frontend/components/notifications/SubscriptionModal.vue b/frontend/components/notifications/SubscriptionModal.vue
index 3a2301cc0..4e76ccec8 100644
--- a/frontend/components/notifications/SubscriptionModal.vue
+++ b/frontend/components/notifications/SubscriptionModal.vue
@@ -28,7 +28,7 @@ watch(props, (props) => {
   newDataReceived.value++
   if (props.validatorSub) {
     tPath = 'notifications.subscriptions.validators.'
-    validatorSubModifiable.value = { offlineGroup: -1, realTime: false, ...structuredClone(toRaw(props.validatorSub)) }
+    validatorSubModifiable.value = { offlineGroup: 10, realTime: false, ...structuredClone(toRaw(props.validatorSub)) }
   } else {
     tPath = 'notifications.subscriptions.accounts.'
     accountSubModifiable.value = structuredClone(toRaw(props.accountSub!))
@@ -36,8 +36,8 @@ watch(props, (props) => {
 }, { immediate: true })
 
 const closeDialog = () => {
-  const changements = true
-  dialogRef?.value.close(changements)
+  const modified = true
+  dialogRef?.value.close(modified)
 }
 </script>
 
@@ -47,32 +47,30 @@ const closeDialog = () => {
       {{ t('notifications.subscriptions.dialog_title') }}
     </div>
 
+    <div v-if="t(tPath+'explanation')" class="explanation">
+      {{ t(tPath+'explanation') }}
+    </div>
+
     <div v-if="props?.validatorSub">
-      <div class="explanation">
-        {{ t(tPath+'explanation') }}
-      </div>
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.offlineValidator" :t-path="tPath+'offlineValidator'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.offlineGroup" :t-path="tPath+'offlineGroup'" :lacks-premium-subscription="!props.premiumUser" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.missedAttestations" :t-path="tPath+'missedAttestations'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.proposedBlock" :t-path="tPath+'proposedBlock'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.upcomingProposal" :t-path="tPath+'upcomingProposal'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.syncCommittee" :t-path="tPath+'syncCommittee'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.offlineValidator" :t-path="tPath+'offline_validator'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.offlineGroup" :t-path="tPath+'offline_group'" :lacks-premium-subscription="!props.premiumUser" input-type="percent" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.missedAttestations" :t-path="tPath+'missed_attestations'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.proposedBlock" :t-path="tPath+'proposed_block'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.upcomingProposal" :t-path="tPath+'upcoming_proposal'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.syncCommittee" :t-path="tPath+'sync_committee'" :lacks-premium-subscription="false" />
       <NotificationsSubscriptionRow v-model="validatorSubModifiable.withdrawn" :t-path="tPath+'withdrawn'" :lacks-premium-subscription="false" />
       <NotificationsSubscriptionRow v-model="validatorSubModifiable.shlashed" :t-path="tPath+'shlashed'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.realTime" :t-path="tPath+'realTime'" :lacks-premium-subscription="!props.premiumUser" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.realTime" :t-path="tPath+'real_time'" :lacks-premium-subscription="!props.premiumUser" />
     </div>
 
     <div v-else-if="props?.accountSub">
-      <div class="explanation">
-        {{ t(tPath+'explanation') }}
-      </div>
       <NotificationsSubscriptionRow v-model="accountSubModifiable.incoming" :t-path="tPath+'incoming'" :lacks-premium-subscription="false" />
       <NotificationsSubscriptionRow v-model="accountSubModifiable.outgoing" :t-path="tPath+'outgoing'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc20" :t-path="tPath+'erc20'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc20" :t-path="tPath+'erc20'" :lacks-premium-subscription="false" input-type="number" />
       <NotificationsSubscriptionRow v-model="accountSubModifiable.erc721" :t-path="tPath+'erc721'" :lacks-premium-subscription="false" />
       <NotificationsSubscriptionRow v-model="accountSubModifiable.erc1155" :t-path="tPath+'erc1155'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.networks" :t-path="tPath+'networks'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.ignoreSpam" :t-path="tPath+'ignoreSpam'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.networks" :t-path="tPath+'networks'" :lacks-premium-subscription="false" input-type="networks" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.ignoreSpam" :t-path="tPath+'ignore_spam'" :lacks-premium-subscription="false" />
     </div>
 
     <div class="footer">
@@ -89,13 +87,15 @@ const closeDialog = () => {
   flex-direction: column;
 
   .title {
-    @include fonts.subtitle_text;
-    color: var(--primary-color);
-    margin-bottom: var(--padding-small);
+    @include fonts.dialog_header;
+    text-align: center;
+    margin-bottom: var(--padding-large);
   }
 
   .explanation {
     color: var(--text-color-disabled);
+    margin-bottom: var(--padding-large);
+    @include fonts.small_text;
   }
 
   .footer {
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index aa1ccfe12..f26c9ea7c 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -5,75 +5,26 @@ import type { ChainIDs } from '~/types/network'
 
 const props = defineProps<{
   tPath: string,
-  lacksPremiumSubscription: boolean
+  lacksPremiumSubscription: boolean,
+  inputType?: 'binary' | 'percent' | 'number' | 'networks'
 }>()
 
 const { t } = useI18n()
 
+const type = computed(() => props.inputType || 'binary')
 const liveState = defineModel<boolean|number|ChainIDs[]>({ required: true })
 const checked = ref<boolean>(false)
 const inputted = ref<string>('')
 
-// ###### parser for the formatting of the text in the tooltips
-
-type Text = { content: string, bold: boolean }
-type List = Text[]
-type TooltipContent = (Text|List)[]
-
-function parseRawArray (raw : string[], start : number, output: TooltipContent) : number {
-  if (start >= raw.length || (raw.length === 1 && !raw[0])) {
-    return start
-  }
-  const inAList = raw[start][0] === '-'
-  let i = start
-  while (i < raw.length) {
-    const first = raw[i][0]
-    if (inAList && first !== '-') {
-      // end of list, we return the index of this first text following the list
-      return i
-    }
-    if (first === '-') {
-      if (!inAList) {
-        // beginning of a list
-        const list: List = []
-        output.push(list)
-        i = parseRawArray(raw, i, list)
-      } else {
-        // already in a list
-        output.push(parseRawText(raw[i].slice(1)))
-        i++
-      }
-    } else {
-      output.push(parseRawText(raw[i]))
-      i++
-    }
-  }
-
-  return i
-}
-
-function parseRawText (text: string) : Text {
-  if (text[0] === '*') {
-    return { content: text.slice(1), bold: true }
-  }
-  return { content: text, bold: false }
-}
-
-// end of parsing ######
-
-const tooltip : ComputedRef<TooltipContent> = computed(() => {
+const tooltipLines = computed(() => {
   let options
   if (Array.isArray(liveState.value)) {
-    options = { plural: liveState.value.length, count: liveState.value.length, list: liveState.value.join(', ') }
+    options = { plural: liveState.value.length, list: liveState.value.join(', ') }
   } else {
-    const plural = (typeof liveState.value === 'number') ? liveState.value : (liveState.value ? 2 : 1)
-    options = { plural, count: liveState.value }
+    const plural = (type.value === 'number' || type.value === 'percent') ? liveState.value : (liveState.value ? 2 : 1)
+    options = { plural }
   }
-
-  const output: TooltipContent = []
-  const translation = tAll(t, props.tPath + '.hint', options)
-  parseRawArray(translation, 0, output)
-  return output
+  return tAll(t, props.tPath + '.hint', options)
 })
 
 const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
@@ -84,29 +35,17 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
     <span class="caption" :class="deactivationClass">
       {{ t(tPath+'.option') }}
     </span>
-    <BcTooltip v-if="tooltip.length" :fit-content="true">
+    <BcTooltip v-if="tooltipLines[0]" :fit-content="true">
       <FontAwesomeIcon :icon="faInfoCircle" class="info" />
       <template #tooltip>
-        <div class="tt-content">
-          <span v-for="(element,p) of tooltip" :key="p">
-            <span v-if="!Array.isArray(element)">
-              <b v-if="element.bold">{{ element.content }}</b>
-              <span v-else>{{ element.content }}</span>
-            </span>
-            <ul v-else>
-              <li v-for="line of element" :key="line.content">
-                <b v-if="line.bold">{{ line.content }}</b>
-                <span v-else>{{ line.content }}</span>
-              </li>
-            </ul>
-          </span>
-        </div>
+        <BcMiniParser :input="tooltipLines" class="tt-content" />
       </template>
     </BcTooltip>
     <BcPremiumGem v-if="lacksPremiumSubscription" class="gem" />
     <div class="right">
-      <InputText v-if="typeof liveState == 'number'" v-model="inputted" :placeholder="t(tPath + '.placeholder')" :class="deactivationClass" />
-      <Checkbox v-model="checked" :binary="true" :class="deactivationClass" />
+      <InputText v-if="type == 'number' || type == 'percent'" v-model="inputted" :placeholder="t(tPath + '.placeholder')" :class="[deactivationClass,type]" />
+      <span v-if="type == 'percent'" :class="deactivationClass">%</span>
+      <Checkbox v-if="type != 'networks'" v-model="checked" :binary="true" class="checkbox" :class="deactivationClass" />
     </div>
   </div>
 </template>
@@ -122,11 +61,9 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
 .option-row {
   display: flex;
   @include fonts.small_text;
-  height: 40px;
-
-  .caption {
+  height: 35px;
+  align-items: center;
 
-  }
   .info {
     margin-left: 6px;
   }
@@ -134,7 +71,22 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
     margin-left: 6px;
   }
   .right {
+    display: flex;
     margin-left: auto;
+    height: 100%;
+    align-items: center;
+
+    .number {
+      width: 110px;
+      margin-right: var(--padding-small);
+    }
+    .percent {
+      width: 34px;
+      margin-right: var(--padding-small);
+    }
+    .checkbox {
+      margin-left: var(--padding-small);
+    }
   }
 }
 
@@ -145,7 +97,16 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
   ul {
     padding: 0;
     margin: 0;
-    padding-left: 1.5em;
+    padding-left: 1.3em;
+    li::marker {
+      font-size: 0.6rem;
+    }
+  }
+  .italic {
+    font-style: italic;
+  }
+  .bold {
+    font-weight: bold;
   }
 }
 </style>
diff --git a/frontend/components/playground/MiniParser.vue b/frontend/components/playground/MiniParser.vue
new file mode 100644
index 000000000..eeeff462e
--- /dev/null
+++ b/frontend/components/playground/MiniParser.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const placeholder = 'Here is an example of translation that would be a pain to implement by hard-coding spans in the template or with `formatMultiPartSpan`:\n\n' +
+                    '- The chocolate *can* be very dark or with milk because we _like_ [both](chocolink).\n' +
+                    '- Da wir [beide](chocolink) _mögen_, *kann* die Schokolade sehr dunkel or mit Milch sein.\n\n' +
+                    'The best website [is _this one_](besturl).\n\n' +
+                    'It is called `MiniParser` because it fits _in *200* lines of code_.\n' +
+                    'Additional features: you can also give urls [directly](http://bitfly.at), you can escape tags \\*, ...'
+
+const exampleOfLinks = {
+  chocolink: 'https://en.wikipedia.org/wiki/Chocolate',
+  besturl: '/register'
+}
+
+const input = ref<string>(placeholder)
+</script>
+
+<template>
+  <div class="test-area">
+    A bug bounty with a prize of 2 chocolate bars is open for anyone willing to torture the parser:<br><br>
+    <textarea v-model="input" class="input" autocorrect="off" spellcheck="false" />
+    <div class="magic">
+      🪄
+    </div>
+    <BcMiniParser :input="input" :links="exampleOfLinks" class="output" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.test-area {
+  width: 620px;
+  height: 360;
+  margin: 16px;
+  margin-left: auto;
+  margin-right: auto;
+  .input {
+    width: 100%;
+    height: 350px;
+    font-size: 16px;
+  }
+  .magic {
+    height:24px;
+    text-align: center;
+    padding-top: 6px;
+    font-size: 24px;
+  }
+  .output {
+    margin-top: 20px;
+    width: 100%;
+    border: 1px solid grey;
+    padding: 4px;
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/frontend/components/playground/PlaygroundComponents.vue b/frontend/components/playground/PlaygroundComponents.vue
index a4b9c5bde..4908d939b 100644
--- a/frontend/components/playground/PlaygroundComponents.vue
+++ b/frontend/components/playground/PlaygroundComponents.vue
@@ -1,9 +1,15 @@
 <template>
   <TabView lazy>
+    <TabPanel header="Dialogs">
+      <PlaygroundDialog />
+    </TabPanel>
+    <TabPanel header="MiniParser">
+      <PlaygroundMiniParser />
+    </TabPanel>
     <TabPanel header="Accordeon">
       <PlaygroundAccordeon />
     </TabPanel>
-    <TabPanel header="Clipping in the middle">
+    <TabPanel header="MiddleEllipsis">
       <PlaygroundMiddleEllipsisTests />
     </TabPanel>
     <TabPanel header="Tags">
@@ -21,8 +27,5 @@
     <TabPanel header="Input">
       <PlaygroundInput />
     </TabPanel>
-    <TabPanel header="Dialog">
-      <PlaygroundDialog />
-    </TabPanel>
   </TabView>
 </template>
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 949abfa56..10e53bc02 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -48,7 +48,7 @@ const accountSub: AccountSubscriptionState = {
 function openSubscriptions (props: any) {
   dialog.open(NotificationsSubscriptionModal, {
     data: props,
-    onClose: changes => onClose(changes?.data)
+    onClose: modified => onClose(modified?.data)
   })
 }
 </script>
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 11c59ec91..781337f7b 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -700,36 +700,40 @@
       "dialog_title": "Edit Subscriptions",
       "validators" : {
         "explanation": "All notifications are sent after network finality (~20mins).",
-        "offlineValidator": {
+        "offline_validator": {
           "option": "Validator is offline",
-          "hint": ["We will trigger a notification:",
-            "-Once the validator has been offline for 3 epochs.",
-            "-Every 32 Epochs (~3 hours) during your downtime.",
-            "-Once you are back online again."]
+          "hint": [
+            "We will trigger a notification:",
+            "- Once the validator has been offline for 3 epochs.",
+            "- Every 32 Epochs (~3 hours) during your downtime.",
+            "- Once you are back online again."
+          ]
         },
-        "offlineGroup": {
+        "offline_group": {
           "option":"Group is offline",
-          "hint": ["We will trigger a notification:",
-            "-Once {count}% of your group is offline.",
-            "-Once you have been offline for 3 epochs.",
-            "-Every 32 Epochs (~3 hours) during your downtime.",
-            "-Once you are back online.",
-            "*Note: ", "Notification resets if you do not meet the threshold of {count}%."],
-          "placeholder": "10"
+          "hint": [
+            "We will trigger a notification:",
+            "- Once {count}% of your group is offline.",
+            "- Once you have been offline for 3 epochs.",
+            "- Every 32 Epochs (~3 hours) during your downtime.",
+            "- Once you are back online.",
+            "*Note:* Notification resets if you do not meet the threshold of {count}%."
+          ],
+          "placeholder": ""
         },
-        "missedAttestations": {
+        "missed_attestations": {
           "option":"Attestations missed",
           "hint": "We will trigger every epoch (6.4 minutes) during downtime."
         },
-        "proposedBlock": {
+        "proposed_block": {
           "option":"Block proposal (missed & success)",
           "hint": ""
         },
-        "upcomingProposal": {
+        "upcoming_proposal": {
           "option":"Upcoming block proposal",
           "hint": "May trigger false positive notifications during reorgs."
         },
-        "syncCommittee": {
+        "sync_committee": {
           "option":"Sync committee",
           "hint": ""
         },
@@ -741,7 +745,7 @@
           "option":"Validator got slashed",
           "hint": ""
         },
-        "realTime": {
+        "real_time": {
           "option":"Realtime mode",
           "hint": "Sends notifications after the first epoch and does not wait for finality to send notifications, which might cause false positive notifications."
         },
@@ -750,24 +754,24 @@
       "accounts": {
         "explanation": "",
         "incoming": {
-          "option":"Incoming Transactions",
+          "option":"Incoming transactions",
           "hint": ""
         },
         "outgoing": {
-          "option":"Outgoing Transactions",
+          "option":"Outgoing transactions",
           "hint": ""
         },
         "erc20": {
-          "option":"Track ERC20 Token Transfers",
+          "option":"Track ERC20 token transfers",
           "hint": "",
           "placeholder": "value > $0"
         },
         "erc721": {
-          "option":"Track ERC721 Token Transfers",
+          "option":"Track ERC721 token transfers",
           "hint": ""
         },
         "erc1155": {
-          "option":"Track ERC1155 Token Transfers",
+          "option":"Track ERC1155 token transfers",
           "hint": ""
         },
         "all": {
@@ -778,9 +782,9 @@
           "option":"Networks",
           "hint": ""
         },
-        "ignoreSpam": {
+        "ignore_spam": {
           "option":"Ignore spam transactions",
-          "hint": ["Ignores ", "*zero value transfer tx's ", "and token tx's that have the ", "*\"hidden\" token label", "."]
+          "hint": ["Ignores *zero value transfer tx's* and token tx's that have the *\"hidden\" token label*."]
         }
       },
       "save":"Save"
diff --git a/frontend/utils/translation.ts b/frontend/utils/translation.ts
index cf0580019..b4952485f 100644
--- a/frontend/utils/translation.ts
+++ b/frontend/utils/translation.ts
@@ -1,5 +1,8 @@
 import type { ComposerTranslation } from '@nuxtjs/i18n/dist/runtime/composables'
 
+const NOT_FOUND = 'NOT_FOUND'
+const END_OF_ARRAY = 'END_OF_ARRAY'
+
 export function formatMultiPartSpan (t: ComposerTranslation, key: string, classes: (string | undefined)[], options?: any) {
   const parts = classes.map((c, index) => {
     const value = tOf(t, key, index, options)
@@ -18,25 +21,30 @@ export function tD (t: ComposerTranslation, path : string, options?: any, d:stri
   if (typeof options === 'number') {
     options = { plural: options }
   }
-  const translation = t(path, 'NOT_FOUND', { ...options, missingWarn: false })
-  return (translation === 'NOT_FOUND') ? d : translation
+  const translation = t(path, NOT_FOUND, { ...options, missingWarn: false })
+  return (translation === NOT_FOUND) ? d : translation
+}
+
+function tOfWithEOA (t: ComposerTranslation, path : string, index : number, options?: any) : string {
+  return tD(t, `${path}[${index}]`, options, END_OF_ARRAY)
 }
 
 /** gets a translation at a specific index, if it exists */
 export function tOf (t: ComposerTranslation, path : string, index : number, options?: any) : string {
-  return tD(t, `${path}[${index}]`, options)
+  const element = tOfWithEOA(t, path, index, options)
+  return (element === END_OF_ARRAY) ? '' : element
 }
 
 /** returns an array of translations (with only one element if the translation data is a simple string) */
 export function tAll (t: ComposerTranslation, path : string, options?: any) : string[] {
   const list: string[] = []
-  if (tD(t, path, options, 'NOT_FOUND') !== 'NOT_FOUND') {
+  if (tD(t, path, options, NOT_FOUND) !== NOT_FOUND) {
     // the data is a string, we push the translation
     list.push(tD(t, path, options))
   } else {
     // the data is an array
     let index = 0
-    for (let value = tOf(t, path, index, options); value; value = tOf(t, path, ++index, options)) {
+    for (let value = tOfWithEOA(t, path, index, options); value !== END_OF_ARRAY; value = tOfWithEOA(t, path, ++index, options)) {
       list.push(value)
     }
   }

From 26da0d61109cea99d496921e5c12ae26749734d7 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Sun, 30 Jun 2024 19:44:52 +0200
Subject: [PATCH 05/69] (BIDS-2859) MiniParser is on the playground, the
 benefits that it will bring us are explained there

---
 frontend/components/bc/MiniParser.vue         | 218 ++++++++++--------
 frontend/components/playground/MiniParser.vue |  23 +-
 2 files changed, 133 insertions(+), 108 deletions(-)

diff --git a/frontend/components/bc/MiniParser.vue b/frontend/components/bc/MiniParser.vue
index e40b1ce10..51525675f 100644
--- a/frontend/components/bc/MiniParser.vue
+++ b/frontend/components/bc/MiniParser.vue
@@ -33,75 +33,87 @@
  *    hard-code the input in JS.
  *
 */
+import { BcLink } from '#components'
 import { Target } from '~/types/links'
 
 const props = defineProps<{ input: string|string[], links?: Record<string, string> }>()
 
-const parsed = computed(() => parse(props.input))
+const parsingResult = computed(() => {
+  if (!Array.isArray(props.input)) {
+    if (typeof props.input !== 'string') {
+      return []
+    }
+    inputArray.lines = (props.input.includes('\r\n')) ? props.input.split('\r\n') : props.input.split('\n')
+  } else {
+    inputArray.lines = props.input
+  }
+  return parse()
+})
 
-enum Tag { Italic = '_', Bold = '*', Code = '`', Item = '-', LinkStart = '[', LinkMid = '](', LinkEnd = ')' }
+enum Tag { H1 = '#', H2 = '##', H3 = '###', Item = '-', Italic = '_', Bold = '*', Code = '`', LinkStart = '[', LinkMid = '](', LinkEnd = ')' }
 const OpeningTags = [Tag.Italic, Tag.Bold, Tag.Code, Tag.LinkStart]
 const Escapement = '\\'
+const FormatToStyle: Record<string, string> = { italic: 'font-style: italic;', bold: 'font-weight: bold;', code: 'font-family: monospace;' }
 
 type Formatting = { italic: boolean, bold: boolean, code: boolean }
-type Text = { content: string, format: Formatting}
-type Link = { caption: Text[], url: string, target: Target}
-type LinePart = Text | Link
-type Line = LinePart[]
-type List = Line[]
-type Parsed = Array<Line|List>
+type Text = { text: string, format: Formatting}
+type Link = { link: string, caption: Text[], target: Target}
+type Block = Array<Text|Link>
+type List = { list: Block[] }
+type Title = { title: Block, height: number}
+type Parsed = Array<Title|List|Block>
+
+const inputArray = { lines: [] as string[], pos: 0 as number }
 
 /** converts the input into a structure that will be very easy to output in `<template>` */
-function parse (raw : string|string[]) : Parsed {
+function parse () : Parsed {
   const output: Parsed = []
-  if (!Array.isArray(raw)) {
-    if (typeof raw !== 'string') {
-      return []
-    }
-    raw = (raw.includes('\r\n')) ? raw.split('\r\n') : raw.split('\n')
-  }
-  if (!raw.length || (raw.length === 1 && !raw[0])) {
+  if (!inputArray.lines.length || (inputArray.lines.length === 1 && !inputArray.lines[0])) {
     return []
   }
-  const cleaned: string[] = []
-  for (let i = 0; i < raw.length; i++) {
-    cleaned.push(replaceEscapements(raw[i]))
+  for (let i = 0; i < inputArray.lines.length; i++) {
+    inputArray.lines[i] = replaceEscapements(inputArray.lines[i])
   }
-  let i = 0
-  while (i < cleaned.length) {
-    if (isLineAnItemInList(cleaned[i])) {
-      const list: List = []
-      output.push(list)
-      i = parseList(list, cleaned, i)
-    } else {
-      const line: Line = []
-      output.push(line)
-      parseText(line, cleaned[i])
-      i++
-    }
+  inputArray.pos = 0
+  while (inputArray.pos < inputArray.lines.length) {
+    const line = inputArray.lines[inputArray.pos]
+    if (isLineATitle(line)) {
+      output.push(parseTitle({ title: [], height: 0 }, line))
+      inputArray.pos++
+    } else
+      if (isLineAnItemInList(line)) {
+        output.push(parseList({ list: [] }))
+      } else {
+        output.push(parseText([], line))
+        inputArray.pos++
+      }
   }
   return output
 }
 
-function parseList (output: List, raw : string[], start : number) : number {
-  let i = start
-  while (i < raw.length) {
-    if (!isLineAnItemInList(raw[i])) {
-      return i // end of list, we return the index of this first text after the list
+function parseTitle (output: Title, line: string) : Title {
+  const { h, tag } = isLineATitle(line)!
+  output.title = parseText(output.title, line.slice(tag.length))
+  output.height = h
+  return output
+}
+
+function parseList (output: List) : List {
+  while (inputArray.pos < inputArray.lines.length) {
+    if (!isLineAnItemInList(inputArray.lines[inputArray.pos])) {
+      return output // end of list
     }
-    const item: Line = [] // new item in the list
-    output.push(item)
-    parseText(item, raw[i].slice(Tag.Item.length))
-    i++
+    output.list.push(parseText([], inputArray.lines[inputArray.pos].slice(Tag.Item.length))) // new item
+    inputArray.pos++
   }
-  return i
+  return output
 }
 
-function parseText (output: Line, text: string, format: Formatting = { italic: false, bold: false, code: false }) : void {
+function parseText (output: Block, text: string, format: Formatting = { italic: false, bold: false, code: false }) : Block {
   const { pos: openingTagPos, tag: openingTag } = findFirstTag(text, 0)
   if (openingTagPos < 0) { // no tag found
     addTextPart(output, text, format)
-    return
+    return output
   }
   // opening tag found
   let closingTag: Tag
@@ -112,20 +124,19 @@ function parseText (output: Line, text: string, format: Formatting = { italic: f
     case Tag.Bold : middle.bold = true; closingTag = Tag.Bold; break
     case Tag.Code : middle.code = true; closingTag = Tag.Code; break
     case Tag.LinkStart : middleIsAlink = true; closingTag = Tag.LinkEnd; break
-    default: return
+    default: return output
   }
   const { pos: closingTagPos } = findFirstTag(text, openingTagPos + openingTag.length, closingTag)
   if (closingTagPos < 0) { // syntax error: either the closing tag has been forgotten or nested tags have their closure swapped
     addTextPart(output, text, format) // so we output the text without parsing it
-    return
+    return output
   }
   parseLeftMiddleRightTexts(output, text, [openingTagPos, openingTagPos + openingTag.length, closingTagPos, closingTagPos + closingTag.length], format, middle, middleIsAlink)
+  return output
 }
 
-function parseLeftMiddleRightTexts (output: Line, text: string, innerEnds: number[], leftRight: Formatting, middle: Formatting, middleIsAlink: boolean) {
-  if (innerEnds[0] > 0) {
-    addTextPart(output, text.slice(0, innerEnds[0]), leftRight)
-  }
+function parseLeftMiddleRightTexts (output: Block, text: string, innerEnds: number[], leftRight: Formatting, middle: Formatting, middleIsAlink: boolean) : void {
+  if (innerEnds[0] > 0) { addTextPart(output, text.slice(0, innerEnds[0]), leftRight) }
   if (middleIsAlink) {
     parseLink(output, text.slice(innerEnds[1], innerEnds[2]), middle)
   } else
@@ -134,31 +145,31 @@ function parseLeftMiddleRightTexts (output: Line, text: string, innerEnds: numbe
     } else {
       parseText(output, text.slice(innerEnds[1], innerEnds[2]), middle)
     }
-  if (innerEnds[3] < text.length) {
-    parseText(output, text.slice(innerEnds[3]), leftRight)
-  }
+  if (innerEnds[3] < text.length) { parseText(output, text.slice(innerEnds[3]), leftRight) }
 }
 
-function parseLink (output: Line, text: string, format: Formatting) {
+function parseLink (output: Block, text: string, format: Formatting) {
   // note: param `text` is of the form  `caption of the link](urlRef`  (both ends have been removed by the calling function)
   const { pos: middleTagPos } = findFirstTag(text, 0, Tag.LinkMid)
-  const caption: Text[] = []
-  parseText(caption, text.slice(0, middleTagPos), format)
+  const caption = parseText([], text.slice(0, middleTagPos), format) as Text[]
   const urlRef = text.slice(middleTagPos + Tag.LinkMid.length)
-  const url = props.links && urlRef in props.links ? props.links[urlRef] : urlRef
-  const target = (url.includes('://') || url.startsWith('www.')) ? Target.External : Target.Internal // correct 99% of the time I suppose
-  output.push({ caption, url, target } as Link)
+  const link = props.links && urlRef in props.links ? props.links[urlRef] : urlRef
+  const target = (link.includes('://') || link.startsWith('www.')) ? Target.External : Target.Internal // correct 99% of the time I suppose
+  output.push({ caption, link, target })
 }
 
-function isLineAnItemInList (part: string) : boolean {
-  return part.slice(0, Tag.Item.length) === Tag.Item // note that if the list tag is escaped, this test returns false as expected
+function isLineATitle (line: string) : { h: number, tag: Tag } | undefined {
+  for (const title of [{ h: 3, tag: Tag.H3 }, { h: 2, tag: Tag.H2 }, { h: 1, tag: Tag.H1 }]) {
+    if (line.startsWith(title.tag)) { return title }
+  }
 }
 
+const isLineAnItemInList = (line: string) => line.startsWith(Tag.Item)
+
 const ESC = '\u001B'
 
 /** @param wanted If given, finds the first occurence of this tag (this mode is used for closing tags). If omitted, finds the first opening tag that the parser recognises.
- *  @returns -1 if not found
- * */
+ *  @returns -1 if not found */
 function findFirstTag (text: string, start: number, wanted?: Tag) : { pos: number, tag: Tag } {
   if (wanted !== undefined) {
     let pos = start - wanted.length
@@ -177,11 +188,9 @@ function findFirstTag (text: string, start: number, wanted?: Tag) : { pos: numbe
   return closest
 }
 
-function addTextPart (output: Line, text: string, format: Formatting) :void {
-  output.push({ content: removeEscapements(text), format: { ...format } })
-}
+const addTextPart = (output: Block, text: string, format: Formatting) => output.push({ text: removeEscapements(text), format: { ...format } })
 
-/** replace all `\` with `\u001B` and all `\\` with `\`  */
+/** replaces all `\` with `\u001B` and all `\\` with `\`  */
 function replaceEscapements (input: string) : string {
   const DoubleEsc = Escapement + Escapement
   let posIn = 0
@@ -203,48 +212,63 @@ function replaceEscapements (input: string) : string {
   return (output + input.slice(posIn))
 }
 
-function removeEscapements (raw: string) : string {
-  return raw.replaceAll(ESC, '')
+const removeEscapements = (raw: string) => raw.replaceAll(ESC, '')
+
+function getLineStatus (parsed: Parsed, line: Block, pos: number) : 'skip'|'blank'|'ok' {
+  if (line.length > 1 || !('text' in line[0]) || (line[0] as Text).text) {
+    return 'ok'
+  }
+  for (const skippingReasons of ['title']) {
+    if ((pos === 0 || pos === parsed.length - 1 || skippingReasons in parsed[pos - 1] || skippingReasons in parsed[pos + 1])) { return 'skip' }
+  }
+  return 'blank'
+}
+
+function RenderAll (props: {parsed: Parsed}) : any[] {
+  const output = []
+  for (let k = 0; k < props.parsed.length; k++) {
+    const section = props.parsed[k]
+    if ('title' in section) {
+      output.push(h('h' + section.height, {}, renderBlock(section.title)))
+    } else
+      if ('list' in section) {
+        const list = section.list.map(item => h('li', {}, renderBlock(item)))
+        output.push(h('ul', {}, list))
+      } else {
+        switch (getLineStatus(props.parsed, section, k)) {
+          case 'blank' : output.push(h('br', {})); break
+          case 'ok' : output.push(h('div', {}, renderBlock(section))); break
+        }
+      }
+  }
+  return output
+}
+
+function renderBlock (block: Block) : any[] {
+  const output = []
+  for (const part of block) {
+    if ('link' in part) {
+      output.push(h(BcLink, { to: part.link, target: part.target, class: 'link' }, () => renderBlock(part.caption)))
+    } else {
+      const style = Object.entries(part.format).filter(form => form[1]).map(form => FormatToStyle[form[0]]).join(' ')
+      const text = (part.format.code) ? part.text.replaceAll(' ', '\xA0') : part.text
+      output.push((!style.length) ? text : h('span', { style }, text))
+    }
+  }
+  return output
 }
 </script>
 
 <template>
   <div>
-    <div v-for="(element,i) of parsed" :key="i">
-      <ul v-if="Array.isArray(element[0])">
-        <li v-for="(item,j) of (element as List)" :key="j">
-          <span v-for="(part,k) of item" :key="k">
-            <span v-if="!('url' in part)" :class="part.format">{{ part.content }}</span>
-            <BcLink v-else :to="part.url" class="link" :target="part.target">
-              <span v-for="(text,l) of part.caption" :key="l" :class="text.format">{{ text.content }}</span>
-            </BcLink>
-          </span>
-        </li>
-      </ul>
-      <br v-else-if="element.length <= 1 && 'content' in element[0] && !(element[0] as Text).content">
-      <span v-for="(part,k) of (element as Line)" v-else :key="k">
-        <span v-if="!('url' in part)" :class="part.format">{{ part.content }}</span>
-        <BcLink v-else :to="part.url" class="link" :target="part.target">
-          <span v-for="(text,l) of part.caption" :key="l" :class="text.format">{{ text.content }}</span>
-        </BcLink>
-      </span>
-    </div>
+    <RenderAll :parsed="parsingResult" />
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 ul {
   padding: 0;
   margin: 0;
   padding-left: 1.4em;
 }
-.italic {
-  font-style: italic;
-}
-.bold {
-  font-weight: bold;
-}
-.code {
-  font-family: monospace;
-}
 </style>
diff --git a/frontend/components/playground/MiniParser.vue b/frontend/components/playground/MiniParser.vue
index eeeff462e..341f3c10a 100644
--- a/frontend/components/playground/MiniParser.vue
+++ b/frontend/components/playground/MiniParser.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-const placeholder = 'Here is an example of translation that would be a pain to implement by hard-coding spans in the template or with `formatMultiPartSpan`:\n\n' +
-                    '- The chocolate *can* be very dark or with milk because we _like_ [both](chocolink).\n' +
-                    '- Da wir [beide](chocolink) _mögen_, *kann* die Schokolade sehr dunkel or mit Milch sein.\n\n' +
-                    'The best website [is _this one_](besturl).\n\n' +
-                    'It is called `MiniParser` because it fits _in *200* lines of code_.\n' +
-                    'Additional features: you can also give urls [directly](http://bitfly.at), you can escape tags \\*, ...'
+const placeholder = 'Here is an example of translation that would be too complicated to implement with `formatMultiPartSpan` or by hard-coding spans in the template:\n\n' +
+                    '- The [chocolate](chocolink) can be dark or with milk *because we like both*.\n' +
+                    '- *Da wir beide mögen*, kann die [Schokolade](chocolink) dunkel oder mit Milch sein.\n\n' +
+                    'This component is called `MiniParser` because it has been programmed with the objective to minimize the overhead (it fits in 237 lines of code). *In the medium term, it will save more than 237 lines of code* across [the project](besturl), will save time (no layout to create for each text) and will save from pain (when the layout depends on the language).\n\n' +
+                    'For example, in _SubscriptionRow.vue_, we simply have one line:\n\n`✨ <BcMiniParser :input="tAll(t, tPath)" class="tt-content" />` ✨\n\n_instead of_\n\n`💀 <div v-if="tPath.includes(\'offline_validator\')" class="tt-content">`\n`💀   {{ tAll(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tAll(t, tPath, 1) }}</li>`\n`💀     <li>{{ tAll(t, tPath, 2) }}</li>`\n`💀     <li>{{ tAll(t, tPath, 3) }}</li>`\n`💀   </ul>`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'offline_group\')" class="tt-content">`\n`💀   {{ tAll(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tAll(t, tPath, 1) }}</li>`\n`💀     <li>{{ tAll(t, tPath, 2) }}</li>`\n`💀     <li>{{ tAll(t, tPath, 3) }}</li>`\n`💀     <li>{{ tAll(t, tPath, 4) }}</li>`\n`💀   </ul>`\n`💀   <b>{{ tAll(t, tPath, 5) }}</b> {{ tAll(t, tPath, 6) }}`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'ignore_spam\')" class="tt-content">`\n`💀   {{ tAll(t, tPath, 0) }}`\n`💀   <b>{{ tAll(t, tPath, 1) }}</b>`\n`💀   {{ tAll(t, tPath, 2) }}`\n`💀   <b>{{ tAll(t, tPath, 3) }}</b>`\n`💀 </div>`\n`💀 <div v-else class="tt-content">`\n`💀   {{ tAll(t, tPath, 0) }}`\n`💀 </div>`\n\n' +
+                    'There are *several places* in the codebase where long hard-coded layouts like that one (sometimes *invalid in other languages*) can be replaced with `<MiniParser/>` (shorter, simpler and language-safe).\n\n' +
+                    '# Additional features\n' +
+                    '- You can also give urls [directly](http://bitfly.at).\n- You can escape the tags \\*.\n- ...'
 
 const exampleOfLinks = {
   chocolink: 'https://en.wikipedia.org/wiki/Chocolate',
-  besturl: '/register'
+  besturl: '/dashboard'
 }
 
 const input = ref<string>(placeholder)
@@ -16,7 +18,7 @@ const input = ref<string>(placeholder)
 
 <template>
   <div class="test-area">
-    A bug bounty with a prize of 2 chocolate bars is open for anyone willing to torture the parser:<br><br>
+    A bug bounty with a prize of 2 chocolate bars is open for anyone torturing the parser:<br><br>
     <textarea v-model="input" class="input" autocorrect="off" spellcheck="false" />
     <div class="magic">
       🪄
@@ -27,14 +29,13 @@ const input = ref<string>(placeholder)
 
 <style scoped lang="scss">
 .test-area {
-  width: 620px;
-  height: 360;
+  width: 720px;
   margin: 16px;
   margin-left: auto;
   margin-right: auto;
   .input {
     width: 100%;
-    height: 350px;
+    height: 330px;
     font-size: 16px;
   }
   .magic {

From 288433941c5e85fac66f66e948f3695a61fed99e Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Sun, 30 Jun 2024 20:07:16 +0200
Subject: [PATCH 06/69] (BIDS-2859) MiniParser is on the playground, the
 benefits that it will bring us are explained there

---
 frontend/components/playground/MiniParser.vue       |  2 +-
 frontend/components/playground/PlaygroundDialog.vue | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/components/playground/MiniParser.vue b/frontend/components/playground/MiniParser.vue
index 341f3c10a..37ede9274 100644
--- a/frontend/components/playground/MiniParser.vue
+++ b/frontend/components/playground/MiniParser.vue
@@ -3,7 +3,7 @@ const placeholder = 'Here is an example of translation that would be too complic
                     '- The [chocolate](chocolink) can be dark or with milk *because we like both*.\n' +
                     '- *Da wir beide mögen*, kann die [Schokolade](chocolink) dunkel oder mit Milch sein.\n\n' +
                     'This component is called `MiniParser` because it has been programmed with the objective to minimize the overhead (it fits in 237 lines of code). *In the medium term, it will save more than 237 lines of code* across [the project](besturl), will save time (no layout to create for each text) and will save from pain (when the layout depends on the language).\n\n' +
-                    'For example, in _SubscriptionRow.vue_, we simply have one line:\n\n`✨ <BcMiniParser :input="tAll(t, tPath)" class="tt-content" />` ✨\n\n_instead of_\n\n`💀 <div v-if="tPath.includes(\'offline_validator\')" class="tt-content">`\n`💀   {{ tAll(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tAll(t, tPath, 1) }}</li>`\n`💀     <li>{{ tAll(t, tPath, 2) }}</li>`\n`💀     <li>{{ tAll(t, tPath, 3) }}</li>`\n`💀   </ul>`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'offline_group\')" class="tt-content">`\n`💀   {{ tAll(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tAll(t, tPath, 1) }}</li>`\n`💀     <li>{{ tAll(t, tPath, 2) }}</li>`\n`💀     <li>{{ tAll(t, tPath, 3) }}</li>`\n`💀     <li>{{ tAll(t, tPath, 4) }}</li>`\n`💀   </ul>`\n`💀   <b>{{ tAll(t, tPath, 5) }}</b> {{ tAll(t, tPath, 6) }}`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'ignore_spam\')" class="tt-content">`\n`💀   {{ tAll(t, tPath, 0) }}`\n`💀   <b>{{ tAll(t, tPath, 1) }}</b>`\n`💀   {{ tAll(t, tPath, 2) }}`\n`💀   <b>{{ tAll(t, tPath, 3) }}</b>`\n`💀 </div>`\n`💀 <div v-else class="tt-content">`\n`💀   {{ tAll(t, tPath, 0) }}`\n`💀 </div>`\n\n' +
+                    'For example, in _SubscriptionRow.vue_, we simply have one line:\n\n`✨ <BcMiniParser :input="tAll(t, tPath)" class="tt-content" />` ✨\n\n_instead of_\n\n`💀 <div v-if="tPath.includes(\'offline_validator\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀   </ul>`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'offline_group\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 4) }}</li>`\n`💀   </ul>`\n`💀   <b>{{ tOf(t, tPath, 5) }}</b> {{ tOf(t, tPath, 6) }}`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'ignore_spam\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <b>{{ tOf(t, tPath, 1) }}</b>`\n`💀   {{ tOf(t, tPath, 2) }}`\n`💀   <b>{{ tOf(t, tPath, 3) }}</b>`\n`💀 </div>`\n`💀 <div v-else class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀 </div>`\n\n' +
                     'There are *several places* in the codebase where long hard-coded layouts like that one (sometimes *invalid in other languages*) can be replaced with `<MiniParser/>` (shorter, simpler and language-safe).\n\n' +
                     '# Additional features\n' +
                     '- You can also give urls [directly](http://bitfly.at).\n- You can escape the tags \\*.\n- ...'
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 10e53bc02..2909c15f9 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -55,6 +55,13 @@ function openSubscriptions (props: any) {
 
 <template>
   <div class="container">
+    <Button @click="openSubscriptions({validatorSub, premiumUser: false})">
+      Subscribe to notifications for your validators
+    </Button>
+    <Button @click="openSubscriptions({accountSub, premiumUser: false})">
+      Subscribe to notifications for your accounts
+    </Button>
+    <br>
     <Button @click="openQuestion()">
       Open Question
     </Button>
@@ -64,12 +71,6 @@ function openSubscriptions (props: any) {
     <Button @click="openQuestion(undefined, 'cancel')">
       Open Question cancel?
     </Button>
-    <Button @click="openSubscriptions({validatorSub, premiumUser: false})">
-      Subscribe to notifications for your validators
-    </Button>
-    <Button @click="openSubscriptions({accountSub, premiumUser: false})">
-      Subscribe to notifications for your accounts
-    </Button>
   </div>
 </template>
 

From e0352f98687f1ea0df68ea74057814ce082416e5 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Sun, 30 Jun 2024 20:13:00 +0200
Subject: [PATCH 07/69] (BIDS-2859) MiniParser is on the playground, the
 benefits that it will bring us are explained there

---
 frontend/components/bc/MiniParser.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/components/bc/MiniParser.vue b/frontend/components/bc/MiniParser.vue
index 51525675f..6e0db354a 100644
--- a/frontend/components/bc/MiniParser.vue
+++ b/frontend/components/bc/MiniParser.vue
@@ -11,6 +11,7 @@
  *
  *  Example of input:
  *
+ *    # About chocolate
  *    We will eat `chocolate` in 2 cases:
  *    - If your *validator* is online
  *    - During *the _nice_ days* of Easter\*.
@@ -21,7 +22,8 @@
  *
  *    The input can be either a string (that can hold several lines of text) or an array of strings (each element is a single line of text).
  *    For each line:
- *    `-` at the beginning transforms the line into a list item.
+ *      # or ## or ### at the beginning will show the line as a title (respectively h1, h2, h3)
+ *      - at the beginning will show the line as an item in a list.
  *      words surrounded with _ will be shown in italic
  *      words surrounded with * will be shown in bold
  *      words surrounded with ` will be shown with a type-writter font and not parsed (formatting tags inside ` and ` are ineffective)

From fb7924e29e468f89bf0cfcc2a0fe7ab314273ce5 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Sun, 30 Jun 2024 21:24:24 +0200
Subject: [PATCH 08/69] (BIDS-2859) MiniParser is on the playground, the
 benefits that it will bring us are explained there

---
 frontend/components/bc/MiniParser.vue         | 2 +-
 frontend/components/playground/MiniParser.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/components/bc/MiniParser.vue b/frontend/components/bc/MiniParser.vue
index 6e0db354a..81723c484 100644
--- a/frontend/components/bc/MiniParser.vue
+++ b/frontend/components/bc/MiniParser.vue
@@ -67,7 +67,7 @@ type Parsed = Array<Title|List|Block>
 
 const inputArray = { lines: [] as string[], pos: 0 as number }
 
-/** converts the input into a structure that will be very easy to output in `<template>` */
+/** converts the input into a tree that will be very easy to browse afterwards to generate a v-DOM */
 function parse () : Parsed {
   const output: Parsed = []
   if (!inputArray.lines.length || (inputArray.lines.length === 1 && !inputArray.lines[0])) {
diff --git a/frontend/components/playground/MiniParser.vue b/frontend/components/playground/MiniParser.vue
index 37ede9274..cfcd15ab3 100644
--- a/frontend/components/playground/MiniParser.vue
+++ b/frontend/components/playground/MiniParser.vue
@@ -3,8 +3,8 @@ const placeholder = 'Here is an example of translation that would be too complic
                     '- The [chocolate](chocolink) can be dark or with milk *because we like both*.\n' +
                     '- *Da wir beide mögen*, kann die [Schokolade](chocolink) dunkel oder mit Milch sein.\n\n' +
                     'This component is called `MiniParser` because it has been programmed with the objective to minimize the overhead (it fits in 237 lines of code). *In the medium term, it will save more than 237 lines of code* across [the project](besturl), will save time (no layout to create for each text) and will save from pain (when the layout depends on the language).\n\n' +
-                    'For example, in _SubscriptionRow.vue_, we simply have one line:\n\n`✨ <BcMiniParser :input="tAll(t, tPath)" class="tt-content" />` ✨\n\n_instead of_\n\n`💀 <div v-if="tPath.includes(\'offline_validator\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀   </ul>`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'offline_group\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 4) }}</li>`\n`💀   </ul>`\n`💀   <b>{{ tOf(t, tPath, 5) }}</b> {{ tOf(t, tPath, 6) }}`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'ignore_spam\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <b>{{ tOf(t, tPath, 1) }}</b>`\n`💀   {{ tOf(t, tPath, 2) }}`\n`💀   <b>{{ tOf(t, tPath, 3) }}</b>`\n`💀 </div>`\n`💀 <div v-else class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀 </div>`\n\n' +
-                    'There are *several places* in the codebase where long hard-coded layouts like that one (sometimes *invalid in other languages*) can be replaced with `<MiniParser/>` (shorter, simpler and language-safe).\n\n' +
+                    'For example, in _SubscriptionRow.vue_, we simply have one line:\n\n`✨ <BcMiniParser :input="tAll(t, tPath)" class="tt-content" />` ✨\n\n*instead of*\n\n_(shortening the following would keep it longer anyway, would make it unclear and invalid the day the text changes)_\n`💀 <div v-if="tPath.includes(\'offline_validator\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀   </ul>`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'offline_group\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 4) }}</li>`\n`💀   </ul>`\n`💀   <b>{{ tOf(t, tPath, 5) }}</b> {{ tOf(t, tPath, 6) }}`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'ignore_spam\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <b>{{ tOf(t, tPath, 1) }}</b>`\n`💀   {{ tOf(t, tPath, 2) }}`\n`💀   <b>{{ tOf(t, tPath, 3) }}</b>`\n`💀 </div>`\n`💀 <div v-else class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀 </div>`\n\n' +
+                    'There are *several places* in the codebase where long hard-coded layouts like that one (potentially *invalid in other languages*) can be replaced with `<MiniParser/>` (shorter, simpler and language-safe).\n\n' +
                     '# Additional features\n' +
                     '- You can also give urls [directly](http://bitfly.at).\n- You can escape the tags \\*.\n- ...'
 

From 8e3c6dde1275b6972432c67c0713fa4c40866184 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Sun, 30 Jun 2024 23:28:07 +0200
Subject: [PATCH 09/69] (BIDS-2859) MiniParser: skipping `...`  when seeking
 closing tags

---
 frontend/components/bc/MiniParser.vue         | 20 +++++++++----------
 frontend/components/playground/MiniParser.vue |  8 ++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/components/bc/MiniParser.vue b/frontend/components/bc/MiniParser.vue
index 81723c484..1b6449c1e 100644
--- a/frontend/components/bc/MiniParser.vue
+++ b/frontend/components/bc/MiniParser.vue
@@ -28,7 +28,7 @@
  *      words surrounded with * will be shown in bold
  *      words surrounded with ` will be shown with a type-writter font and not parsed (formatting tags inside ` and ` are ineffective)
  *      a link can be created by writing [a caption](and-a-url). The url can written directly or tell the name of a member of the object in props links.
- *    Mixes are possible: italic inside bold or bold inside italic.
+ *    Mixes are possible: italic inside bold or bold inside italic, code in italic or bold (if you surround ` and ` with the tags)...
  *
  *    If you need to display a character that is a tag, escape it with `\` and the parser will not interpret it.
  *    As Javascript itself uses `\` as an escaping mark, you will need to type `\\` and `\\\\` to express respectively `\` and `\\` when you
@@ -52,9 +52,9 @@ const parsingResult = computed(() => {
   return parse()
 })
 
+const Escapement = '\\'
 enum Tag { H1 = '#', H2 = '##', H3 = '###', Item = '-', Italic = '_', Bold = '*', Code = '`', LinkStart = '[', LinkMid = '](', LinkEnd = ')' }
 const OpeningTags = [Tag.Italic, Tag.Bold, Tag.Code, Tag.LinkStart]
-const Escapement = '\\'
 const FormatToStyle: Record<string, string> = { italic: 'font-style: italic;', bold: 'font-weight: bold;', code: 'font-family: monospace;' }
 
 type Formatting = { italic: boolean, bold: boolean, code: boolean }
@@ -112,7 +112,7 @@ function parseList (output: List) : List {
 }
 
 function parseText (output: Block, text: string, format: Formatting = { italic: false, bold: false, code: false }) : Block {
-  const { pos: openingTagPos, tag: openingTag } = findFirstTag(text, 0)
+  const { pos: openingTagPos, tag: openingTag } = findTag(text, 0)
   if (openingTagPos < 0) { // no tag found
     addTextPart(output, text, format)
     return output
@@ -128,7 +128,7 @@ function parseText (output: Block, text: string, format: Formatting = { italic:
     case Tag.LinkStart : middleIsAlink = true; closingTag = Tag.LinkEnd; break
     default: return output
   }
-  const { pos: closingTagPos } = findFirstTag(text, openingTagPos + openingTag.length, closingTag)
+  const { pos: closingTagPos } = findTag(text, openingTagPos + openingTag.length, closingTag)
   if (closingTagPos < 0) { // syntax error: either the closing tag has been forgotten or nested tags have their closure swapped
     addTextPart(output, text, format) // so we output the text without parsing it
     return output
@@ -152,7 +152,7 @@ function parseLeftMiddleRightTexts (output: Block, text: string, innerEnds: numb
 
 function parseLink (output: Block, text: string, format: Formatting) {
   // note: param `text` is of the form  `caption of the link](urlRef`  (both ends have been removed by the calling function)
-  const { pos: middleTagPos } = findFirstTag(text, 0, Tag.LinkMid)
+  const { pos: middleTagPos } = findTag(text, 0, Tag.LinkMid)
   const caption = parseText([], text.slice(0, middleTagPos), format) as Text[]
   const urlRef = text.slice(middleTagPos + Tag.LinkMid.length)
   const link = props.links && urlRef in props.links ? props.links[urlRef] : urlRef
@@ -170,19 +170,19 @@ const isLineAnItemInList = (line: string) => line.startsWith(Tag.Item)
 
 const ESC = '\u001B'
 
-/** @param wanted If given, finds the first occurence of this tag (this mode is used for closing tags). If omitted, finds the first opening tag that the parser recognises.
+/** @param wanted If given, finds the first valid occurence of this tag (this mode is used for closing tags). If omitted, finds the first opening tag that the parser recognises.
  *  @returns -1 if not found */
-function findFirstTag (text: string, start: number, wanted?: Tag) : { pos: number, tag: Tag } {
+function findTag (text: string, start: number, wanted?: Tag) : { pos: number, tag: Tag } {
   if (wanted !== undefined) {
     let pos = start - wanted.length
     do {
       pos = text.indexOf(wanted, pos + wanted.length)
-    } while (pos >= 1 && text[pos - 1] === ESC) // escaped tags are ignored
+    } while (pos >= 1 && (text[pos - 1] === ESC || text.slice(start, pos).split(Tag.Code).length % 2 === 0)) // are ignored: escaped tags and tags between ` and `
     return { pos, tag: wanted }
   }
   let closest = { pos: -1, tag: Tag.Italic }
   for (const tag of OpeningTags) {
-    const found = findFirstTag(text, start, tag)
+    const found = findTag(text, start, tag)
     if (found.pos >= 0 && (found.pos < closest.pos || closest.pos < 0)) {
       closest = found
     }
@@ -220,7 +220,7 @@ function getLineStatus (parsed: Parsed, line: Block, pos: number) : 'skip'|'blan
   if (line.length > 1 || !('text' in line[0]) || (line[0] as Text).text) {
     return 'ok'
   }
-  for (const skippingReasons of ['title']) {
+  for (const skippingReasons of ['title']) { // in the future, if new structures allow surrounding blank lines to be skipped, add them to this list
     if ((pos === 0 || pos === parsed.length - 1 || skippingReasons in parsed[pos - 1] || skippingReasons in parsed[pos + 1])) { return 'skip' }
   }
   return 'blank'
diff --git a/frontend/components/playground/MiniParser.vue b/frontend/components/playground/MiniParser.vue
index cfcd15ab3..eed5069aa 100644
--- a/frontend/components/playground/MiniParser.vue
+++ b/frontend/components/playground/MiniParser.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 const placeholder = 'Here is an example of translation that would be too complicated to implement with `formatMultiPartSpan` or by hard-coding spans in the template:\n\n' +
-                    '- The [chocolate](chocolink) can be dark or with milk *because we like both*.\n' +
-                    '- *Da wir beide mögen*, kann die [Schokolade](chocolink) dunkel oder mit Milch sein.\n\n' +
-                    'This component is called `MiniParser` because it has been programmed with the objective to minimize the overhead (it fits in 237 lines of code). *In the medium term, it will save more than 237 lines of code* across [the project](besturl), will save time (no layout to create for each text) and will save from pain (when the layout depends on the language).\n\n' +
-                    'For example, in _SubscriptionRow.vue_, we simply have one line:\n\n`✨ <BcMiniParser :input="tAll(t, tPath)" class="tt-content" />` ✨\n\n*instead of*\n\n_(shortening the following would keep it longer anyway, would make it unclear and invalid the day the text changes)_\n`💀 <div v-if="tPath.includes(\'offline_validator\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀   </ul>`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'offline_group\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 4) }}</li>`\n`💀   </ul>`\n`💀   <b>{{ tOf(t, tPath, 5) }}</b> {{ tOf(t, tPath, 6) }}`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'ignore_spam\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <b>{{ tOf(t, tPath, 1) }}</b>`\n`💀   {{ tOf(t, tPath, 2) }}`\n`💀   <b>{{ tOf(t, tPath, 3) }}</b>`\n`💀 </div>`\n`💀 <div v-else class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀 </div>`\n\n' +
+                    '- As we like both, the [chocolate](chocolink) that you bring _*may*_ be dark or with milk.\n' +
+                    '- Da wir beide mögen, _*darf*_ die [Schokolade](chocolink), die du bringst, dunkel oder mit Milch sein.\n\n' +
+                    'This component is called `MiniParser` because it has been programmed with the objective to minimize the overhead (it fits in 237 lines of code). *In the medium term, it will save more than 237 lines of code* across [the project](besturl), will save time (no layout to create for each text) and will avoid pain (when the layout depends on the language).\n\n' +
+                    'For example, in _SubscriptionRow.vue_, we simply have one line:\n\n`✨ <BcMiniParser :input="tAll(t, tPath)" class="tt-content" /> ✨`\n\n*instead of*\n\n_(shortening the following would keep it longer anyway, would make it unclear and invalid the day the text changes)_\n`💀 <div v-if="tPath.includes(\'offline_validator\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀   </ul>`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'offline_group\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 4) }}</li>`\n`💀   </ul>`\n`💀   <b>{{ tOf(t, tPath, 5) }}</b> {{ tOf(t, tPath, 6) }}`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'ignore_spam\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <b>{{ tOf(t, tPath, 1) }}</b>`\n`💀   {{ tOf(t, tPath, 2) }}`\n`💀   <b>{{ tOf(t, tPath, 3) }}</b>`\n`💀 </div>`\n`💀 <div v-else class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀 </div>`\n\n' +
                     'There are *several places* in the codebase where long hard-coded layouts like that one (potentially *invalid in other languages*) can be replaced with `<MiniParser/>` (shorter, simpler and language-safe).\n\n' +
                     '# Additional features\n' +
                     '- You can also give urls [directly](http://bitfly.at).\n- You can escape the tags \\*.\n- ...'

From 2aadb30d6ff4906d4b5917eab35d398e275c39d7 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 1 Jul 2024 08:17:34 +0200
Subject: [PATCH 10/69] (BIDS-2859) MiniParser is on the playground, the
 benefits that it will bring us are explained there

---
 frontend/components/bc/MiniParser.vue         |  5 +---
 frontend/components/bc/toggle/MultiBar.vue    |  6 ++++-
 .../notifications/NetworkSelector.vue         | 23 +++++++++++--------
 .../notifications/SubscriptionRow.vue         |  7 ++++--
 frontend/components/playground/MiniParser.vue | 23 ++++++++-----------
 frontend/types/multiBar.ts                    |  1 +
 6 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/frontend/components/bc/MiniParser.vue b/frontend/components/bc/MiniParser.vue
index 1b6449c1e..e74ccb9e1 100644
--- a/frontend/components/bc/MiniParser.vue
+++ b/frontend/components/bc/MiniParser.vue
@@ -70,9 +70,6 @@ const inputArray = { lines: [] as string[], pos: 0 as number }
 /** converts the input into a tree that will be very easy to browse afterwards to generate a v-DOM */
 function parse () : Parsed {
   const output: Parsed = []
-  if (!inputArray.lines.length || (inputArray.lines.length === 1 && !inputArray.lines[0])) {
-    return []
-  }
   for (let i = 0; i < inputArray.lines.length; i++) {
     inputArray.lines[i] = replaceEscapements(inputArray.lines[i])
   }
@@ -177,7 +174,7 @@ function findTag (text: string, start: number, wanted?: Tag) : { pos: number, ta
     let pos = start - wanted.length
     do {
       pos = text.indexOf(wanted, pos + wanted.length)
-    } while (pos >= 1 && (text[pos - 1] === ESC || text.slice(start, pos).split(Tag.Code).length % 2 === 0)) // are ignored: escaped tags and tags between ` and `
+    } while (pos >= 1 && (text[pos - 1] === ESC || (text.slice(start, pos).split(Tag.Code).length - text.slice(start, pos).split(ESC + Tag.Code).length) % 2)) // are ignored: escaped tags and tags between ` and `
     return { pos, tag: wanted }
   }
   let closest = { pos: -1, tag: Tag.Italic }
diff --git a/frontend/components/bc/toggle/MultiBar.vue b/frontend/components/bc/toggle/MultiBar.vue
index 65edf2309..360464ef2 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -40,7 +40,7 @@ watch(modelValues, () => {
     >
       <template #icon>
         <slot :name="icon.value">
-          <component :is="icon.component" v-if="icon.component" />
+          <component :is="icon.component" v-if="icon.component" v-bind="icon.componentProps" class="max" />
           <FontAwesomeIcon v-else-if="icon.icon" :icon="icon.icon" />
         </slot>
       </template>
@@ -58,4 +58,8 @@ watch(modelValues, () => {
   border: solid 1px var(--container-border-color);
   border-radius: var(--border-radius);
 }
+.max {
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/frontend/components/notifications/NetworkSelector.vue b/frontend/components/notifications/NetworkSelector.vue
index 8f0cb6cf6..6e96b75e4 100644
--- a/frontend/components/notifications/NetworkSelector.vue
+++ b/frontend/components/notifications/NetworkSelector.vue
@@ -1,19 +1,22 @@
 <script setup lang="ts">
 import type { MultiBarItem } from '~/types/multiBar'
-const { availableNetworks } = useNetworkStore()
+import { IconNetwork } from '#components'
+import { ChainInfo } from '~/types/network'
 
-const { t } = useI18n()
+const { availableNetworks } = useNetworkStore()
 
 const selection = ref<string[]>(['1'])
 
-const buttons: MultiBarItem[] = [
-  {
-    component: undefined,
-    value: String(1),
-    tooltip: t('slotViz.filter.proposal')
-  }
-]
-
+const buttons = computed(() => {
+  const list: MultiBarItem[] = []
+  availableNetworks.value.forEach(chainId => list.push({
+    component: IconNetwork,
+    componentProps: { chainId, harmonizePerceivedSize: true, colored: true },
+    value: String(chainId),
+    tooltip: ChainInfo[chainId].name + ' ' + ChainInfo[chainId].description
+  }))
+  return list
+})
 </script>
 
 <template>
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index f26c9ea7c..3b10baa56 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -42,10 +42,13 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
       </template>
     </BcTooltip>
     <BcPremiumGem v-if="lacksPremiumSubscription" class="gem" />
-    <div class="right">
+    <div v-if="type != 'networks'" class="right">
       <InputText v-if="type == 'number' || type == 'percent'" v-model="inputted" :placeholder="t(tPath + '.placeholder')" :class="[deactivationClass,type]" />
       <span v-if="type == 'percent'" :class="deactivationClass">%</span>
-      <Checkbox v-if="type != 'networks'" v-model="checked" :binary="true" class="checkbox" :class="deactivationClass" />
+      <Checkbox v-model="checked" :binary="true" class="checkbox" :class="deactivationClass" />
+    </div>
+    <div v-else class="right">
+      <NotificationsNetworkSelector />
     </div>
   </div>
 </template>
diff --git a/frontend/components/playground/MiniParser.vue b/frontend/components/playground/MiniParser.vue
index eed5069aa..beaeac2fb 100644
--- a/frontend/components/playground/MiniParser.vue
+++ b/frontend/components/playground/MiniParser.vue
@@ -2,7 +2,7 @@
 const placeholder = 'Here is an example of translation that would be too complicated to implement with `formatMultiPartSpan` or by hard-coding spans in the template:\n\n' +
                     '- As we like both, the [chocolate](chocolink) that you bring _*may*_ be dark or with milk.\n' +
                     '- Da wir beide mögen, _*darf*_ die [Schokolade](chocolink), die du bringst, dunkel oder mit Milch sein.\n\n' +
-                    'This component is called `MiniParser` because it has been programmed with the objective to minimize the overhead (it fits in 237 lines of code). *In the medium term, it will save more than 237 lines of code* across [the project](besturl), will save time (no layout to create for each text) and will avoid pain (when the layout depends on the language).\n\n' +
+                    'This component is called `MiniParser` because it has been programmed with the objective to minimize the overhead (it fits in 235 lines of code). *In the medium term, it will save more than 235 lines of code* across [the project](besturl), will save time (no layout to create for each text) and will avoid pain (when the layout depends on the language).\n\n' +
                     'For example, in _SubscriptionRow.vue_, we simply have one line:\n\n`✨ <BcMiniParser :input="tAll(t, tPath)" class="tt-content" /> ✨`\n\n*instead of*\n\n_(shortening the following would keep it longer anyway, would make it unclear and invalid the day the text changes)_\n`💀 <div v-if="tPath.includes(\'offline_validator\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀   </ul>`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'offline_group\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 4) }}</li>`\n`💀   </ul>`\n`💀   <b>{{ tOf(t, tPath, 5) }}</b> {{ tOf(t, tPath, 6) }}`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'ignore_spam\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <b>{{ tOf(t, tPath, 1) }}</b>`\n`💀   {{ tOf(t, tPath, 2) }}`\n`💀   <b>{{ tOf(t, tPath, 3) }}</b>`\n`💀 </div>`\n`💀 <div v-else class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀 </div>`\n\n' +
                     'There are *several places* in the codebase where long hard-coded layouts like that one (potentially *invalid in other languages*) can be replaced with `<MiniParser/>` (shorter, simpler and language-safe).\n\n' +
                     '# Additional features\n' +
@@ -18,10 +18,9 @@ const input = ref<string>(placeholder)
 
 <template>
   <div class="test-area">
-    A bug bounty with a prize of 2 chocolate bars is open for anyone torturing the parser:<br><br>
     <textarea v-model="input" class="input" autocorrect="off" spellcheck="false" />
     <div class="magic">
-      🪄
+      ➡️
     </div>
     <BcMiniParser :input="input" :links="exampleOfLinks" class="output" />
   </div>
@@ -29,24 +28,22 @@ const input = ref<string>(placeholder)
 
 <style scoped lang="scss">
 .test-area {
-  width: 720px;
+  display: flex;
   margin: 16px;
-  margin-left: auto;
-  margin-right: auto;
   .input {
-    width: 100%;
-    height: 330px;
+    width: 47%;
+    height: 550px;
     font-size: 16px;
   }
   .magic {
-    height:24px;
     text-align: center;
-    padding-top: 6px;
-    font-size: 24px;
+    padding-top: 150px;
+    font-size: 30px;
+    margin-left: auto;
+    margin-right: auto;
   }
   .output {
-    margin-top: 20px;
-    width: 100%;
+    width: 47%;
     border: 1px solid grey;
     padding: 4px;
     font-size: 16px;
diff --git a/frontend/types/multiBar.ts b/frontend/types/multiBar.ts
index a92574ce7..00f36b7fb 100644
--- a/frontend/types/multiBar.ts
+++ b/frontend/types/multiBar.ts
@@ -3,6 +3,7 @@ import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 export type MultiBarItem = {
   icon?: IconDefinition
   component?: Component,
+  componentProps?: any,
   value: string,
   tooltip?: string,
   className?: string

From 4178025c79cd37f85258b9b10c54935515c451b1 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 1 Jul 2024 18:36:54 +0200
Subject: [PATCH 11/69] (BIDS-2859) nearly finished

---
 frontend/assets/css/main.scss                 |   3 +
 .../notifications/SubscriptionModal.vue       |  55 ++++---
 .../notifications/SubscriptionRow.vue         | 136 +++++++++++++++---
 .../playground/PlaygroundDialog.vue           |   8 +-
 frontend/i18n/en.json                         |  37 ++---
 frontend/types/subscriptionModal.ts           |   2 +-
 6 files changed, 174 insertions(+), 67 deletions(-)

diff --git a/frontend/assets/css/main.scss b/frontend/assets/css/main.scss
index 5f30aca67..04c31e4ab 100644
--- a/frontend/assets/css/main.scss
+++ b/frontend/assets/css/main.scss
@@ -27,6 +27,9 @@ a {
     pointer-events: none;
   }
 }
+hr {
+  color: var(--container-border-color);
+}
 .link {
   color: var(--link-color);
   cursor: pointer;
diff --git a/frontend/components/notifications/SubscriptionModal.vue b/frontend/components/notifications/SubscriptionModal.vue
index 4e76ccec8..4f82f9acd 100644
--- a/frontend/components/notifications/SubscriptionModal.vue
+++ b/frontend/components/notifications/SubscriptionModal.vue
@@ -19,6 +19,7 @@ const newDataReceived = ref<number>(0) // used in <template> to trigger Vue to r
 let tPath: string
 const validatorSubModifiable = ref({} as ValidatorSubscriptionStateComplete)
 const accountSubModifiable = ref({} as AccountSubscriptionState)
+const all = ref(false)
 
 watch(props, (props) => {
   if (!props || (!props.validatorSub && !props.accountSub)) {
@@ -28,7 +29,7 @@ watch(props, (props) => {
   newDataReceived.value++
   if (props.validatorSub) {
     tPath = 'notifications.subscriptions.validators.'
-    validatorSubModifiable.value = { offlineGroup: 10, realTime: false, ...structuredClone(toRaw(props.validatorSub)) }
+    validatorSubModifiable.value = { offlineGroup: -1, realTime: false, ...structuredClone(toRaw(props.validatorSub)) }
   } else {
     tPath = 'notifications.subscriptions.accounts.'
     accountSubModifiable.value = structuredClone(toRaw(props.accountSub!))
@@ -52,25 +53,36 @@ const closeDialog = () => {
     </div>
 
     <div v-if="props?.validatorSub">
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.offlineValidator" :t-path="tPath+'offline_validator'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.offlineGroup" :t-path="tPath+'offline_group'" :lacks-premium-subscription="!props.premiumUser" input-type="percent" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.missedAttestations" :t-path="tPath+'missed_attestations'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.proposedBlock" :t-path="tPath+'proposed_block'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.upcomingProposal" :t-path="tPath+'upcoming_proposal'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.syncCommittee" :t-path="tPath+'sync_committee'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.withdrawn" :t-path="tPath+'withdrawn'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.shlashed" :t-path="tPath+'shlashed'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.realTime" :t-path="tPath+'real_time'" :lacks-premium-subscription="!props.premiumUser" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.offlineValidator" :t-path="tPath+'offline_validator'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow
+        v-model="validatorSubModifiable.offlineGroup"
+        :t-path="tPath+'offline_group'"
+        :lacks-premium-subscription="!props.premiumUser"
+        input-type="percent"
+        :default="10"
+        class="row"
+      />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.missedAttestations" :t-path="tPath+'missed_attestations'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.proposedBlock" :t-path="tPath+'proposed_block'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.upcomingProposal" :t-path="tPath+'upcoming_proposal'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.syncCommittee" :t-path="tPath+'sync_committee'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.withdrawn" :t-path="tPath+'withdrawn'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.slashed" :t-path="tPath+'slashed'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="validatorSubModifiable.realTime" :t-path="tPath+'real_time'" :lacks-premium-subscription="!props.premiumUser" class="row" />
+      <hr>
+      <NotificationsSubscriptionRow v-model="all" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" />
     </div>
 
     <div v-else-if="props?.accountSub">
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.incoming" :t-path="tPath+'incoming'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.outgoing" :t-path="tPath+'outgoing'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc20" :t-path="tPath+'erc20'" :lacks-premium-subscription="false" input-type="number" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc721" :t-path="tPath+'erc721'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc1155" :t-path="tPath+'erc1155'" :lacks-premium-subscription="false" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.networks" :t-path="tPath+'networks'" :lacks-premium-subscription="false" input-type="networks" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.ignoreSpam" :t-path="tPath+'ignore_spam'" :lacks-premium-subscription="false" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.incoming" :t-path="tPath+'incoming'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.outgoing" :t-path="tPath+'outgoing'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc20" :t-path="tPath+'erc20'" :lacks-premium-subscription="false" input-type="amount" class="row" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc721" :t-path="tPath+'erc721'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc1155" :t-path="tPath+'erc1155'" :lacks-premium-subscription="false" class="row" />
+      <hr>
+      <NotificationsSubscriptionRow v-model="all" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.networks" :t-path="tPath+'networks'" :lacks-premium-subscription="false" input-type="networks" class="row" />
+      <NotificationsSubscriptionRow v-model="accountSubModifiable.ignoreSpam" :t-path="tPath+'ignore_spam'" :lacks-premium-subscription="false" class="row" />
     </div>
 
     <div class="footer">
@@ -93,9 +105,14 @@ const closeDialog = () => {
   }
 
   .explanation {
-    color: var(--text-color-disabled);
-    margin-bottom: var(--padding-large);
+    margin-bottom: var(--padding);
     @include fonts.small_text;
+    opacity: 0.6;
+  }
+
+  .row {
+    margin-top: 14px;
+    margin-bottom: 14px;
   }
 
   .footer {
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 3b10baa56..76c171001 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -6,27 +6,97 @@ import type { ChainIDs } from '~/types/network'
 const props = defineProps<{
   tPath: string,
   lacksPremiumSubscription: boolean,
-  inputType?: 'binary' | 'percent' | 'number' | 'networks'
+  inputType?: 'binary' | 'amount' | 'percent' | 'networks',
+  default?: number
 }>()
 
 const { t } = useI18n()
 
 const type = computed(() => props.inputType || 'binary')
-const liveState = defineModel<boolean|number|ChainIDs[]>({ required: true })
+const state = defineModel<boolean|number|ChainIDs[]>({ required: true })
 const checked = ref<boolean>(false)
-const inputted = ref<string>('')
+const inputted = ref('')
+
+refreshUIfromState() // initial loading
 
 const tooltipLines = computed(() => {
   let options
-  if (Array.isArray(liveState.value)) {
-    options = { plural: liveState.value.length, list: liveState.value.join(', ') }
+  if (Array.isArray(state.value)) {
+    options = { plural: state.value.length, list: state.value.join(', ') }
   } else {
-    const plural = (type.value === 'number' || type.value === 'percent') ? liveState.value : (liveState.value ? 2 : 1)
+    let plural: number
+    if (type.value === 'amount' || type.value === 'percent') {
+      plural = calculateCorrectNumber(inputted)
+    } else {
+      plural = state.value ? 2 : 1
+    }
     options = { plural }
   }
   return tAll(t, props.tPath + '.hint', options)
 })
 
+function outputSetting () : void {
+  // outputs the setting
+  switch (type.value) {
+    case 'amount' :
+      state.value = checked.value && isThisAvalidInput(inputted) ? calculateCorrectNumber(inputted) : -1
+      break
+    case 'percent' :
+      state.value = checked.value ? calculateCorrectNumber(inputted) : -1
+      break
+    case 'binary' :
+      state.value = checked.value
+      break
+  }
+}
+
+function correctUserInput () : void {
+  switch (type.value) {
+    case 'amount' :
+      inputted.value = isThisAvalidInput(inputted) ? String(calculateCorrectNumber(inputted)) : ''
+      break
+    case 'percent' :
+      inputted.value = String(calculateCorrectNumber(inputted))
+      break
+  }
+}
+
+function calculateCorrectNumber (input: string | Ref<string>) : number {
+  if (typeof input !== 'string') {
+    input = input.value
+  }
+  let num = !isThisAvalidInput(input) ? (props.default ?? 0) : Number(input)
+  if (type.value === 'percent') {
+    if (num < 1) { num = 1 }
+    if (num > 100) { num = 100 }
+  }
+  return num
+}
+
+function isThisAvalidInput (input: string | Ref<string>) : boolean {
+  if (typeof input !== 'string') {
+    input = input.value
+  }
+  return !!input && !isNaN(Number(input)) && Number(input) >= 0
+}
+
+function refreshUIfromState () : void {
+  switch (type.value) {
+    case 'amount' :
+    case 'percent' :
+      state.value = state.value as number
+      inputted.value = String(state.value)
+      checked.value = (state.value >= 0)
+      correctUserInput()
+      break
+    case 'binary' :
+      checked.value = state.value as boolean
+      break
+    case 'networks' :
+      break
+  }
+}
+
 const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
 </script>
 
@@ -41,11 +111,27 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
         <BcMiniParser :input="tooltipLines" class="tt-content" />
       </template>
     </BcTooltip>
-    <BcPremiumGem v-if="lacksPremiumSubscription" class="gem" />
+    <BcPremiumGem v-if="lacksPremiumSubscription" />
     <div v-if="type != 'networks'" class="right">
-      <InputText v-if="type == 'number' || type == 'percent'" v-model="inputted" :placeholder="t(tPath + '.placeholder')" :class="[deactivationClass,type]" />
+      <div v-if="type == 'amount' || type == 'percent'" class="input">
+        <InputText
+          v-model="inputted"
+          type="text"
+          :placeholder="t(tPath + '.placeholder')"
+          :class="[deactivationClass,type]"
+          @change="outputSetting"
+          @blur="correctUserInput"
+        />
+        &nbsp;
+      </div>
       <span v-if="type == 'percent'" :class="deactivationClass">%</span>
-      <Checkbox v-model="checked" :binary="true" class="checkbox" :class="deactivationClass" />
+      <Checkbox
+        v-model="checked"
+        :binary="true"
+        class="checkbox"
+        :class="deactivationClass"
+        @change="outputSetting"
+      />
     </div>
     <div v-else class="right">
       <NotificationsNetworkSelector />
@@ -63,29 +149,39 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
 
 .option-row {
   display: flex;
+  position: relative;
   @include fonts.small_text;
-  height: 35px;
   align-items: center;
 
   .info {
     margin-left: 6px;
-  }
-  .gem {
-    margin-left: 6px;
+    margin-right: 6px;
   }
   .right {
     display: flex;
+    position: relative;
     margin-left: auto;
     height: 100%;
     align-items: center;
 
-    .number {
-      width: 110px;
-      margin-right: var(--padding-small);
-    }
-    .percent {
-      width: 34px;
-      margin-right: var(--padding-small);
+    .input {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      .amount,
+      .percent {
+        position: absolute;
+        height: 29px;
+        right: 0px;
+        top: -6px;
+        margin-right: var(--padding-small);
+      }
+      .amount {
+        width: 110px;
+      }
+      .percent {
+        width: 43px;
+      }
     }
     .checkbox {
       margin-left: var(--padding-small);
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 2909c15f9..537fb0950 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -31,14 +31,14 @@ const validatorSub: ValidatorSubscriptionState = {
   upcomingProposal: false,
   syncCommittee: true,
   withdrawn: true,
-  shlashed: false,
+  slashed: false,
   realTime: false
 }
 
 const accountSub: AccountSubscriptionState = {
   incoming: true,
   outgoing: true,
-  erc20: 303,
+  erc20: -1,
   erc721: true,
   erc1155: false,
   networks: [1, 100, 8453],
@@ -55,10 +55,10 @@ function openSubscriptions (props: any) {
 
 <template>
   <div class="container">
-    <Button @click="openSubscriptions({validatorSub, premiumUser: false})">
+    <Button @click="openSubscriptions({validatorSub, premiumUser: true})">
       Subscribe to notifications for your validators
     </Button>
-    <Button @click="openSubscriptions({accountSub, premiumUser: false})">
+    <Button @click="openSubscriptions({accountSub, premiumUser: true})">
       Subscribe to notifications for your accounts
     </Button>
     <br>
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 781337f7b..688c4b321 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -726,61 +726,52 @@
           "hint": "We will trigger every epoch (6.4 minutes) during downtime."
         },
         "proposed_block": {
-          "option":"Block proposal (missed & success)",
-          "hint": ""
+          "option":"Block proposal (missed & success)"
         },
         "upcoming_proposal": {
           "option":"Upcoming block proposal",
           "hint": "May trigger false positive notifications during reorgs."
         },
         "sync_committee": {
-          "option":"Sync committee",
-          "hint": ""
+          "option":"Sync committee"
         },
         "withdrawn": {
-          "option":"Withdrawal processed",
-          "hint": ""
+          "option":"Withdrawal processed"
         },
-        "shlashed": {
-          "option":"Validator got slashed",
-          "hint": ""
+        "slashed": {
+          "option":"Validator got slashed"
         },
         "real_time": {
           "option":"Realtime mode",
           "hint": "Sends notifications after the first epoch and does not wait for finality to send notifications, which might cause false positive notifications."
         },
-        "all": "All events"
+        "all": {
+          "option":"All events"
+        }
       },
       "accounts": {
         "explanation": "",
         "incoming": {
-          "option":"Incoming transactions",
-          "hint": ""
+          "option":"Incoming transactions"
         },
         "outgoing": {
-          "option":"Outgoing transactions",
-          "hint": ""
+          "option":"Outgoing transactions"
         },
         "erc20": {
           "option":"Track ERC20 token transfers",
-          "hint": "",
           "placeholder": "value > $0"
         },
         "erc721": {
-          "option":"Track ERC721 token transfers",
-          "hint": ""
+          "option":"Track ERC721 token transfers"
         },
         "erc1155": {
-          "option":"Track ERC1155 token transfers",
-          "hint": ""
+          "option":"Track ERC1155 token transfers"
         },
         "all": {
-          "option":"All events",
-          "hint": ""
+          "option":"All events"
         },
         "networks": {
-          "option":"Networks",
-          "hint": ""
+          "option":"Networks"
         },
         "ignore_spam": {
           "option":"Ignore spam transactions",
diff --git a/frontend/types/subscriptionModal.ts b/frontend/types/subscriptionModal.ts
index 603143712..9fbf0548d 100644
--- a/frontend/types/subscriptionModal.ts
+++ b/frontend/types/subscriptionModal.ts
@@ -8,7 +8,7 @@ export type ValidatorSubscriptionState = {
   upcomingProposal: boolean,
   syncCommittee: boolean,
   withdrawn: boolean,
-  shlashed: boolean,
+  slashed: boolean,
   realTime?: boolean
 }
 

From 4d7b6914d283af973765df4ee8ace3ca4da01632 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 2 Jul 2024 10:13:18 +0200
Subject: [PATCH 12/69] (BIDS-2859) MiniParser v3 (smaller, faster, higher
 quality output)

---
 frontend/components/bc/MiniParser.vue         | 209 +++++++-----------
 frontend/components/playground/MiniParser.vue |   2 +-
 2 files changed, 78 insertions(+), 133 deletions(-)

diff --git a/frontend/components/bc/MiniParser.vue b/frontend/components/bc/MiniParser.vue
index e74ccb9e1..a7ddc886d 100644
--- a/frontend/components/bc/MiniParser.vue
+++ b/frontend/components/bc/MiniParser.vue
@@ -35,136 +35,107 @@
  *    hard-code the input in JS.
  *
 */
+
+import { type VNode } from 'vue'
 import { BcLink } from '#components'
 import { Target } from '~/types/links'
 
 const props = defineProps<{ input: string|string[], links?: Record<string, string> }>()
 
-const parsingResult = computed(() => {
-  if (!Array.isArray(props.input)) {
-    if (typeof props.input !== 'string') {
-      return []
-    }
-    inputArray.lines = (props.input.includes('\r\n')) ? props.input.split('\r\n') : props.input.split('\n')
-  } else {
-    inputArray.lines = props.input
-  }
-  return parse()
-})
-
 const Escapement = '\\'
 enum Tag { H1 = '#', H2 = '##', H3 = '###', Item = '-', Italic = '_', Bold = '*', Code = '`', LinkStart = '[', LinkMid = '](', LinkEnd = ')' }
 const OpeningTags = [Tag.Italic, Tag.Bold, Tag.Code, Tag.LinkStart]
-const FormatToStyle: Record<string, string> = { italic: 'font-style: italic;', bold: 'font-weight: bold;', code: 'font-family: monospace;' }
+const ClosingTags: Record<string, Tag> = { [Tag.Italic]: Tag.Italic, [Tag.Bold]: Tag.Bold, [Tag.Code]: Tag.Code, [Tag.LinkStart]: Tag.LinkEnd }
 
-type Formatting = { italic: boolean, bold: boolean, code: boolean }
-type Text = { text: string, format: Formatting}
-type Link = { link: string, caption: Text[], target: Target}
-type Block = Array<Text|Link>
-type List = { list: Block[] }
-type Title = { title: Block, height: number}
-type Parsed = Array<Title|List|Block>
+type VDOMnodes = Array<VNode|string>
 
 const inputArray = { lines: [] as string[], pos: 0 as number }
 
 /** converts the input into a tree that will be very easy to browse afterwards to generate a v-DOM */
-function parse () : Parsed {
-  const output: Parsed = []
-  for (let i = 0; i < inputArray.lines.length; i++) {
-    inputArray.lines[i] = replaceEscapements(inputArray.lines[i])
+function parse (props: {input: string|string[]}) : VDOMnodes {
+  if (!Array.isArray(props.input)) {
+    if (typeof props.input !== 'string') { return [] }
+    inputArray.lines = (props.input.includes('\r\n')) ? props.input.split('\r\n') : props.input.split('\n')
+  } else {
+    inputArray.lines = props.input
   }
+  inputArray.lines = inputArray.lines.map(line => replaceEscapements(line))
   inputArray.pos = 0
+  const output: VDOMnodes = []
   while (inputArray.pos < inputArray.lines.length) {
-    const line = inputArray.lines[inputArray.pos]
-    if (isLineATitle(line)) {
-      output.push(parseTitle({ title: [], height: 0 }, line))
-      inputArray.pos++
+    if (isLineATitle(inputArray.lines[inputArray.pos])) {
+      output.push(parseTitle())
     } else
-      if (isLineAnItemInList(line)) {
-        output.push(parseList({ list: [] }))
-      } else {
-        output.push(parseText([], line))
-        inputArray.pos++
-      }
+      if (isLineAnItemInList(inputArray.lines[inputArray.pos])) {
+        output.push(parseList())
+      } else
+        if (lineType() !== 'none') {
+          output.push(parseLine(lineType()))
+        } else {
+          inputArray.pos++
+        }
   }
   return output
 }
 
-function parseTitle (output: Title, line: string) : Title {
-  const { h, tag } = isLineATitle(line)!
-  output.title = parseText(output.title, line.slice(tag.length))
-  output.height = h
-  return output
+function parseTitle () : VNode {
+  const { height, tag } = isLineATitle(inputArray.lines[inputArray.pos])!
+  return h('h' + height, {}, parseText(inputArray.lines[inputArray.pos++].slice(tag.length)))
 }
 
-function parseList (output: List) : List {
-  while (inputArray.pos < inputArray.lines.length) {
-    if (!isLineAnItemInList(inputArray.lines[inputArray.pos])) {
-      return output // end of list
-    }
-    output.list.push(parseText([], inputArray.lines[inputArray.pos].slice(Tag.Item.length))) // new item
+function parseList () : VNode {
+  const items : VDOMnodes = []
+  while (inputArray.pos < inputArray.lines.length && isLineAnItemInList(inputArray.lines[inputArray.pos])) {
+    items.push(h('li', {}, parseText(inputArray.lines[inputArray.pos].slice(Tag.Item.length)))) // new item
     inputArray.pos++
   }
-  return output
+  return h('ul', {}, items)
 }
 
-function parseText (output: Block, text: string, format: Formatting = { italic: false, bold: false, code: false }) : Block {
+function parseLine (lineType: 'full'|'blank'|'none') : VNode {
+  const pos = inputArray.pos++
+  switch (lineType) {
+    case 'full' : return h('div', {}, parseText(inputArray.lines[pos]))
+    default : return h('br', {})
+  }
+}
+
+function parseText (text: string) : VDOMnodes {
   const { pos: openingTagPos, tag: openingTag } = findTag(text, 0)
-  if (openingTagPos < 0) { // no tag found
-    addTextPart(output, text, format)
-    return output
+  const { pos: closingTagPos } = findTag(text, openingTagPos + openingTag.length, ClosingTags[openingTag])
+  if (openingTagPos < 0 || closingTagPos < 0) { // First case: no tag, we can copy the raw line. Second case: syntax error (either the closing tag has been forgotten or nested tags have their closure swapped)
+    return [cleanText(text)] // so we output the text without parsing it
   }
-  // opening tag found
-  let closingTag: Tag
-  const middle = { ...format }
-  let middleIsAlink = false
+  // opening tag found.
+  const threeParts : VDOMnodes = []
+  if (openingTagPos > 0) {
+    threeParts.push(cleanText(text.slice(0, openingTagPos)))
+  }
+  const middle = text.slice(openingTagPos + openingTag.length, closingTagPos)
   switch (openingTag) {
-    case Tag.Italic : middle.italic = true; closingTag = Tag.Italic; break
-    case Tag.Bold : middle.bold = true; closingTag = Tag.Bold; break
-    case Tag.Code : middle.code = true; closingTag = Tag.Code; break
-    case Tag.LinkStart : middleIsAlink = true; closingTag = Tag.LinkEnd; break
-    default: return output
+    case Tag.Italic : threeParts.push(h('i', {}, parseText(middle))); break
+    case Tag.Bold : threeParts.push(h('b', {}, parseText(middle))); break
+    case Tag.Code : threeParts.push(h('span', { style: 'font-family: monospace;' }, cleanText(middle, true))); break
+    case Tag.LinkStart : threeParts.push(parseLink(middle)); break
   }
-  const { pos: closingTagPos } = findTag(text, openingTagPos + openingTag.length, closingTag)
-  if (closingTagPos < 0) { // syntax error: either the closing tag has been forgotten or nested tags have their closure swapped
-    addTextPart(output, text, format) // so we output the text without parsing it
-    return output
+  if (closingTagPos + ClosingTags[openingTag].length < text.length) {
+    threeParts.push(...parseText(text.slice(closingTagPos + ClosingTags[openingTag].length)))
   }
-  parseLeftMiddleRightTexts(output, text, [openingTagPos, openingTagPos + openingTag.length, closingTagPos, closingTagPos + closingTag.length], format, middle, middleIsAlink)
-  return output
-}
-
-function parseLeftMiddleRightTexts (output: Block, text: string, innerEnds: number[], leftRight: Formatting, middle: Formatting, middleIsAlink: boolean) : void {
-  if (innerEnds[0] > 0) { addTextPart(output, text.slice(0, innerEnds[0]), leftRight) }
-  if (middleIsAlink) {
-    parseLink(output, text.slice(innerEnds[1], innerEnds[2]), middle)
-  } else
-    if (middle.code) {
-      addTextPart(output, text.slice(innerEnds[1], innerEnds[2]), middle) // we do not parse anything inside
-    } else {
-      parseText(output, text.slice(innerEnds[1], innerEnds[2]), middle)
-    }
-  if (innerEnds[3] < text.length) { parseText(output, text.slice(innerEnds[3]), leftRight) }
+  return threeParts
 }
 
-function parseLink (output: Block, text: string, format: Formatting) {
+function parseLink (text: string) : VNode|string {
   // note: param `text` is of the form  `caption of the link](urlRef`  (both ends have been removed by the calling function)
   const { pos: middleTagPos } = findTag(text, 0, Tag.LinkMid)
-  const caption = parseText([], text.slice(0, middleTagPos), format) as Text[]
-  const urlRef = text.slice(middleTagPos + Tag.LinkMid.length)
-  const link = props.links && urlRef in props.links ? props.links[urlRef] : urlRef
-  const target = (link.includes('://') || link.startsWith('www.')) ? Target.External : Target.Internal // correct 99% of the time I suppose
-  output.push({ caption, link, target })
-}
-
-function isLineATitle (line: string) : { h: number, tag: Tag } | undefined {
-  for (const title of [{ h: 3, tag: Tag.H3 }, { h: 2, tag: Tag.H2 }, { h: 1, tag: Tag.H1 }]) {
-    if (line.startsWith(title.tag)) { return title }
+  if (middleTagPos <= 0) {
+    return cleanText(text)
   }
+  const urlRef = text.slice(middleTagPos + Tag.LinkMid.length)
+  const to = props.links && urlRef in props.links ? props.links[urlRef] : urlRef
+  const target = (to.includes('://') || to.startsWith('www.')) ? Target.External : Target.Internal // correct 99% of the time I suppose
+  return h(BcLink, { to, target, class: 'link' }, () => parseText(text.slice(0, middleTagPos)))
 }
 
-const isLineAnItemInList = (line: string) => line.startsWith(Tag.Item)
-
 const ESC = '\u001B'
 
 /** @param wanted If given, finds the first valid occurence of this tag (this mode is used for closing tags). If omitted, finds the first opening tag that the parser recognises.
@@ -187,8 +158,6 @@ function findTag (text: string, start: number, wanted?: Tag) : { pos: number, ta
   return closest
 }
 
-const addTextPart = (output: Block, text: string, format: Formatting) => output.push({ text: removeEscapements(text), format: { ...format } })
-
 /** replaces all `\` with `\u001B` and all `\\` with `\`  */
 function replaceEscapements (input: string) : string {
   const DoubleEsc = Escapement + Escapement
@@ -211,56 +180,32 @@ function replaceEscapements (input: string) : string {
   return (output + input.slice(posIn))
 }
 
-const removeEscapements = (raw: string) => raw.replaceAll(ESC, '')
-
-function getLineStatus (parsed: Parsed, line: Block, pos: number) : 'skip'|'blank'|'ok' {
-  if (line.length > 1 || !('text' in line[0]) || (line[0] as Text).text) {
-    return 'ok'
-  }
-  for (const skippingReasons of ['title']) { // in the future, if new structures allow surrounding blank lines to be skipped, add them to this list
-    if ((pos === 0 || pos === parsed.length - 1 || skippingReasons in parsed[pos - 1] || skippingReasons in parsed[pos + 1])) { return 'skip' }
+function cleanText (raw: string, forceSpaces = false) {
+  if (forceSpaces) {
+    raw = raw.replaceAll(' ', '\xA0')
   }
-  return 'blank'
+  return raw.replaceAll(ESC, '')
 }
 
-function RenderAll (props: {parsed: Parsed}) : any[] {
-  const output = []
-  for (let k = 0; k < props.parsed.length; k++) {
-    const section = props.parsed[k]
-    if ('title' in section) {
-      output.push(h('h' + section.height, {}, renderBlock(section.title)))
-    } else
-      if ('list' in section) {
-        const list = section.list.map(item => h('li', {}, renderBlock(item)))
-        output.push(h('ul', {}, list))
-      } else {
-        switch (getLineStatus(props.parsed, section, k)) {
-          case 'blank' : output.push(h('br', {})); break
-          case 'ok' : output.push(h('div', {}, renderBlock(section))); break
-        }
-      }
+function isLineATitle (line: string) : { height: number, tag: Tag } | undefined {
+  for (const title of [{ height: 3, tag: Tag.H3 }, { height: 2, tag: Tag.H2 }, { height: 1, tag: Tag.H1 }]) {
+    if (line.startsWith(title.tag)) { return title }
   }
-  return output
 }
 
-function renderBlock (block: Block) : any[] {
-  const output = []
-  for (const part of block) {
-    if ('link' in part) {
-      output.push(h(BcLink, { to: part.link, target: part.target, class: 'link' }, () => renderBlock(part.caption)))
-    } else {
-      const style = Object.entries(part.format).filter(form => form[1]).map(form => FormatToStyle[form[0]]).join(' ')
-      const text = (part.format.code) ? part.text.replaceAll(' ', '\xA0') : part.text
-      output.push((!style.length) ? text : h('span', { style }, text))
-    }
-  }
-  return output
+const isLineAnItemInList = (line: string) => line.startsWith(Tag.Item)
+
+function lineType () : 'full'|'blank'|'none' {
+  const pos = inputArray.pos
+  if (inputArray.lines[pos].length > 0) { return 'full' }
+  if (pos === 0 || pos === inputArray.lines.length - 1 || isLineATitle(inputArray.lines[pos - 1]) || isLineATitle(inputArray.lines[pos + 1])) { return 'none' }
+  return 'blank'
 }
 </script>
 
 <template>
   <div>
-    <RenderAll :parsed="parsingResult" />
+    <parse :input="props.input" />
   </div>
 </template>
 
diff --git a/frontend/components/playground/MiniParser.vue b/frontend/components/playground/MiniParser.vue
index beaeac2fb..431c11c79 100644
--- a/frontend/components/playground/MiniParser.vue
+++ b/frontend/components/playground/MiniParser.vue
@@ -2,7 +2,7 @@
 const placeholder = 'Here is an example of translation that would be too complicated to implement with `formatMultiPartSpan` or by hard-coding spans in the template:\n\n' +
                     '- As we like both, the [chocolate](chocolink) that you bring _*may*_ be dark or with milk.\n' +
                     '- Da wir beide mögen, _*darf*_ die [Schokolade](chocolink), die du bringst, dunkel oder mit Milch sein.\n\n' +
-                    'This component is called `MiniParser` because it has been programmed with the objective to minimize the overhead (it fits in 235 lines of code). *In the medium term, it will save more than 235 lines of code* across [the project](besturl), will save time (no layout to create for each text) and will avoid pain (when the layout depends on the language).\n\n' +
+                    'This component is called `MiniParser` because it has been programmed with the objective to minimize the overhead (it fits in 177 lines of code). *In the medium term, it will save more than 177 lines of code* across [the project](besturl), will save time (no layout to create for each text) and will avoid pain (when the layout depends on the language).\n\n' +
                     'For example, in _SubscriptionRow.vue_, we simply have one line:\n\n`✨ <BcMiniParser :input="tAll(t, tPath)" class="tt-content" /> ✨`\n\n*instead of*\n\n_(shortening the following would keep it longer anyway, would make it unclear and invalid the day the text changes)_\n`💀 <div v-if="tPath.includes(\'offline_validator\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀   </ul>`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'offline_group\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 4) }}</li>`\n`💀   </ul>`\n`💀   <b>{{ tOf(t, tPath, 5) }}</b> {{ tOf(t, tPath, 6) }}`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'ignore_spam\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <b>{{ tOf(t, tPath, 1) }}</b>`\n`💀   {{ tOf(t, tPath, 2) }}`\n`💀   <b>{{ tOf(t, tPath, 3) }}</b>`\n`💀 </div>`\n`💀 <div v-else class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀 </div>`\n\n' +
                     'There are *several places* in the codebase where long hard-coded layouts like that one (potentially *invalid in other languages*) can be replaced with `<MiniParser/>` (shorter, simpler and language-safe).\n\n' +
                     '# Additional features\n' +

From be5b3ce914c94e2d5b7712bc4f7b5975a3640585 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 2 Jul 2024 16:12:42 +0200
Subject: [PATCH 13/69] (BIDS-2859) several important little things

---
 frontend/components/bc/MiniParser.vue         |  76 ++++++------
 frontend/components/bc/NetworkSelector.vue    |  74 ++++++++++++
 .../bc/searchbar/NetworkSelector.vue          |  10 +-
 .../components/bc/searchbar/SearchbarMain.vue |  22 ++--
 .../components/bc/searchbar/SuggestionRow.vue |   6 +-
 frontend/components/bc/toggle/MultiBar.vue    |  13 +--
 .../components/bc/toggle/MultiBarButton.vue   |   7 +-
 frontend/components/bc/toggle/SingleBar.vue   |   5 +-
 .../components/bc/toggle/SingleBarButton.vue  |  39 +++++--
 .../creation/DashboardCreationController.vue  |   4 +-
 .../creation/DashboardCreationNetworkMask.vue |  21 +---
 frontend/components/icon/IconNetwork.vue      |   4 +-
 .../notifications/NetworkSelector.vue         |  28 -----
 .../notifications/SubscriptionRow.vue         |   6 +-
 frontend/components/playground/MiniParser.vue |   2 +-
 .../components/playground/PlaygroundIcons.vue |   8 +-
 .../playground/PlaygroundStyling.vue          |   2 +-
 .../components/slot/viz/SlotVizViewer.vue     |   2 +-
 frontend/composables/useRefPipe.ts            |  69 +++++++++++
 .../stores/dashboard/useUserDashboardStore.ts |   4 +-
 frontend/stores/useNetworkStore.ts            |  28 +++--
 frontend/types/multiBar.ts                    |   4 +-
 frontend/types/network.ts                     | 110 +++++++++---------
 frontend/types/searchbar.ts                   |  12 +-
 frontend/types/subscriptionModal.ts           |   4 +-
 frontend/utils/format.ts                      |   8 +-
 frontend/utils/mock.ts                        |  20 ++--
 27 files changed, 369 insertions(+), 219 deletions(-)
 create mode 100644 frontend/components/bc/NetworkSelector.vue
 delete mode 100644 frontend/components/notifications/NetworkSelector.vue
 create mode 100644 frontend/composables/useRefPipe.ts

diff --git a/frontend/components/bc/MiniParser.vue b/frontend/components/bc/MiniParser.vue
index a7ddc886d..1f919a6e0 100644
--- a/frontend/components/bc/MiniParser.vue
+++ b/frontend/components/bc/MiniParser.vue
@@ -24,8 +24,8 @@
  *    For each line:
  *      # or ## or ### at the beginning will show the line as a title (respectively h1, h2, h3)
  *      - at the beginning will show the line as an item in a list.
- *      words surrounded with _ will be shown in italic
- *      words surrounded with * will be shown in bold
+ *      words surrounded with _ will be surrounded with <i> tags
+ *      words surrounded with * will be surrounded with <b> tags
  *      words surrounded with ` will be shown with a type-writter font and not parsed (formatting tags inside ` and ` are ineffective)
  *      a link can be created by writing [a caption](and-a-url). The url can written directly or tell the name of a member of the object in props links.
  *    Mixes are possible: italic inside bold or bold inside italic, code in italic or bold (if you surround ` and ` with the tags)...
@@ -34,24 +34,34 @@
  *    As Javascript itself uses `\` as an escaping mark, you will need to type `\\` and `\\\\` to express respectively `\` and `\\` when you
  *    hard-code the input in JS.
  *
+ *  About <i> and <b>:
+ *
+ *    Depending on the stylesheet of your website, those tags might not display your text in italic and bold.
+ *    If you want to force them to display italic and bold text against the style preferences of your website, you can define a class like so:
+ *      .my-own-bi {
+ *        :deep(b) { font-weight: bold }
+ *        :deep(i) { font-style: italic }
+ *      }
+ *    and assign it to the parser:
+ *      <BcMiniParser ... class="my-own-bi" />
 */
 
 import { type VNode } from 'vue'
 import { BcLink } from '#components'
 import { Target } from '~/types/links'
 
-const props = defineProps<{ input: string|string[], links?: Record<string, string> }>()
-
 const Escapement = '\\'
 enum Tag { H1 = '#', H2 = '##', H3 = '###', Item = '-', Italic = '_', Bold = '*', Code = '`', LinkStart = '[', LinkMid = '](', LinkEnd = ')' }
 const OpeningTags = [Tag.Italic, Tag.Bold, Tag.Code, Tag.LinkStart]
 const ClosingTags: Record<string, Tag> = { [Tag.Italic]: Tag.Italic, [Tag.Bold]: Tag.Bold, [Tag.Code]: Tag.Code, [Tag.LinkStart]: Tag.LinkEnd }
 
-type VDOMnodes = Array<VNode|string>
+const props = defineProps<{ input: string|string[], links?: Record<string, string> }>()
 
+type VDOMnodes = Array<VNode|string>
+enum LineType { Useless, Blank, Title, List, Div }
+const ESC = '\u001B'
 const inputArray = { lines: [] as string[], pos: 0 as number }
 
-/** converts the input into a tree that will be very easy to browse afterwards to generate a v-DOM */
 function parse (props: {input: string|string[]}) : VDOMnodes {
   if (!Array.isArray(props.input)) {
     if (typeof props.input !== 'string') { return [] }
@@ -63,41 +73,39 @@ function parse (props: {input: string|string[]}) : VDOMnodes {
   inputArray.pos = 0
   const output: VDOMnodes = []
   while (inputArray.pos < inputArray.lines.length) {
-    if (isLineATitle(inputArray.lines[inputArray.pos])) {
-      output.push(parseTitle())
-    } else
-      if (isLineAnItemInList(inputArray.lines[inputArray.pos])) {
-        output.push(parseList())
-      } else
-        if (lineType() !== 'none') {
-          output.push(parseLine(lineType()))
-        } else {
-          inputArray.pos++
-        }
+    switch (getLineType()) {
+      case LineType.Title : output.push(parseTitle()); break
+      case LineType.List : output.push(parseList()); break
+      case LineType.Blank :
+      case LineType.Div : output.push(parseTextLine()); break
+      default: inputArray.pos++
+    }
   }
   return output
 }
 
 function parseTitle () : VNode {
-  const { height, tag } = isLineATitle(inputArray.lines[inputArray.pos])!
+  const { height, tag } = getTitleType(inputArray.pos)!
   return h('h' + height, {}, parseText(inputArray.lines[inputArray.pos++].slice(tag.length)))
 }
 
 function parseList () : VNode {
   const items : VDOMnodes = []
-  while (inputArray.pos < inputArray.lines.length && isLineAnItemInList(inputArray.lines[inputArray.pos])) {
+  while (inputArray.pos < inputArray.lines.length && getLineType() === LineType.List) {
     items.push(h('li', {}, parseText(inputArray.lines[inputArray.pos].slice(Tag.Item.length)))) // new item
     inputArray.pos++
   }
   return h('ul', {}, items)
 }
 
-function parseLine (lineType: 'full'|'blank'|'none') : VNode {
-  const pos = inputArray.pos++
-  switch (lineType) {
-    case 'full' : return h('div', {}, parseText(inputArray.lines[pos]))
-    default : return h('br', {})
+function parseTextLine () : VNode|string {
+  let output: VNode|string = ''
+  switch (getLineType()) {
+    case LineType.Div : output = h('div', {}, parseText(inputArray.lines[inputArray.pos])); break
+    case LineType.Blank : output = h('br', {}); break
   }
+  inputArray.pos++
+  return output
 }
 
 function parseText (text: string) : VDOMnodes {
@@ -136,8 +144,6 @@ function parseLink (text: string) : VNode|string {
   return h(BcLink, { to, target, class: 'link' }, () => parseText(text.slice(0, middleTagPos)))
 }
 
-const ESC = '\u001B'
-
 /** @param wanted If given, finds the first valid occurence of this tag (this mode is used for closing tags). If omitted, finds the first opening tag that the parser recognises.
  *  @returns -1 if not found */
 function findTag (text: string, start: number, wanted?: Tag) : { pos: number, tag: Tag } {
@@ -187,19 +193,21 @@ function cleanText (raw: string, forceSpaces = false) {
   return raw.replaceAll(ESC, '')
 }
 
-function isLineATitle (line: string) : { height: number, tag: Tag } | undefined {
+function getTitleType (pos: number) : { height: number, tag: Tag } | undefined {
   for (const title of [{ height: 3, tag: Tag.H3 }, { height: 2, tag: Tag.H2 }, { height: 1, tag: Tag.H1 }]) {
-    if (line.startsWith(title.tag)) { return title }
+    if (inputArray.lines[pos].startsWith(title.tag)) { return title }
   }
 }
 
-const isLineAnItemInList = (line: string) => line.startsWith(Tag.Item)
-
-function lineType () : 'full'|'blank'|'none' {
+function getLineType () : LineType {
   const pos = inputArray.pos
-  if (inputArray.lines[pos].length > 0) { return 'full' }
-  if (pos === 0 || pos === inputArray.lines.length - 1 || isLineATitle(inputArray.lines[pos - 1]) || isLineATitle(inputArray.lines[pos + 1])) { return 'none' }
-  return 'blank'
+  if (inputArray.lines[pos].length > 0) {
+    if (getTitleType(pos)) { return LineType.Title }
+    if (inputArray.lines[pos].startsWith(Tag.Item)) { return LineType.List }
+    return LineType.Div
+  }
+  if (pos === 0 || pos === inputArray.lines.length - 1 || getTitleType(pos - 1) || getTitleType(pos + 1)) { return LineType.Useless }
+  return LineType.Blank
 }
 </script>
 
diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
new file mode 100644
index 000000000..4c6ac9e6d
--- /dev/null
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { MultiBarItem } from '~/types/multiBar'
+import { IconNetwork } from '#components'
+import { ChainInfo, ChainID } from '~/types/network'
+
+const { availableNetworks, isNetworkDisabled } = useNetworkStore()
+
+/**
+ * If `v-model:singleselect="..."` is in the props, then the user can select only one network.
+ * If `v-model:multiselect="..."` is in the props, then the user can select several networks.
+ */
+const liveStateMulti = defineModel<ChainID[]>('multiselect')
+const liveStateSingle = defineModel<ChainID>('singleselect')
+
+const selectionMulti = ref<string[]>([])
+const selectionSingle = ref<string>('')
+
+const buttons = computed(() => {
+  const list: MultiBarItem[] = []
+  availableNetworks.value.forEach(chainId => list.push({
+    component: IconNetwork,
+    componentProps: { chainId, harmonizePerceivedSize: true, colored: true },
+    componentClass: 'maximum',
+    value: String(chainId),
+    disabled: isNetworkDisabled(chainId),
+    tooltip: ChainInfo[chainId].name + ' ' + ChainInfo[chainId].description
+  }))
+  return list
+})
+
+watch(liveStateMulti, (input: ChainID[]|undefined) => {
+  if (!input) {
+    selectionMulti.value = []
+    return
+  }
+  if (JSON.stringify(input) !== JSON.stringify(selectionMulti.value)) {
+    selectionMulti.value = input.map(id => String(id))
+  }
+})
+
+watch(liveStateSingle, (input: ChainID|undefined) => {
+  if (!input) {
+    selectionSingle.value = ''
+    return
+  }
+  if (String(input) !== selectionSingle.value) {
+    selectionSingle.value = String(input)
+  }
+})
+
+watch(selectionMulti, (output: string[]) => {
+  if (JSON.stringify(output) !== JSON.stringify(liveStateMulti.value)) {
+    liveStateMulti.value = output.map(id => Number(id) as ChainID)
+  }
+})
+
+watch(selectionSingle, (output: string) => {
+  if (Number(output) as ChainID !== liveStateSingle.value) {
+    liveStateSingle.value = Number(output) as ChainID
+  }
+})
+</script>
+
+<template>
+  <BcToggleMultiBar v-if="liveStateMulti" v-model="selectionMulti" :buttons="buttons" />
+  <BcToggleSingleBar v-if="liveStateSingle" v-model="selectionSingle" :buttons="buttons" />
+</template>
+
+<style lang="scss">
+.maximum {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/frontend/components/bc/searchbar/NetworkSelector.vue b/frontend/components/bc/searchbar/NetworkSelector.vue
index f037dcd3a..9fce53364 100644
--- a/frontend/components/bc/searchbar/NetworkSelector.vue
+++ b/frontend/components/bc/searchbar/NetworkSelector.vue
@@ -2,7 +2,7 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCaretDown } from '@fortawesome/pro-solid-svg-icons'
 import { SearchbarShape, type SearchbarColors, type SearchbarDropdownLayout, type NetworkFilter } from '~/types/searchbar'
-import { ChainInfo, ChainIDs } from '~/types/network'
+import { ChainInfo, ChainID } from '~/types/network'
 
 const emit = defineEmits<{(e: 'change') : void}>()
 defineProps<{
@@ -10,7 +10,7 @@ defineProps<{
   colorTheme: SearchbarColors,
   dropdownLayout : SearchbarDropdownLayout
 }>()
-const liveState = defineModel<NetworkFilter>({ required: true }) // each entry has a ChainIDs as key and the state of the option as value. The component will write directly into it, so the data of the parent is always up-to-date.
+const liveState = defineModel<NetworkFilter>({ required: true }) // each entry has a ChainID as key and the state of the option as value. The component will write directly into it, so the data of the parent is always up-to-date.
 
 const { t } = useI18n()
 
@@ -19,7 +19,7 @@ const headState = ref<{look : 'on'|'off', network : string}>({
   network: ''
 })
 const listInDropdown = ref<{
-  chainId: ChainIDs,
+  chainId: ChainID,
   label: string,
   selected: boolean
 }[]>([])
@@ -73,7 +73,7 @@ function updateLocalState () {
   headState.value.look = (howManyAreSelected === 0) ? 'off' : 'on'
   // now we update the list used to fill the dropdown
   listInDropdown.value.length = 0
-  listInDropdown.value.push({ chainId: ChainIDs.Any, label: t('search_bar.all_networks'), selected: allNetworksAreSelected })
+  listInDropdown.value.push({ chainId: ChainID.Any, label: t('search_bar.all_networks'), selected: allNetworksAreSelected })
   for (const filter of liveState.value) {
     listInDropdown.value.push({ chainId: filter[0], label: ChainInfo[filter[0]].name, selected: filter[1] })
   }
@@ -81,7 +81,7 @@ function updateLocalState () {
 
 function oneOptionChanged (index : number) {
   const selected = listInDropdown.value[index].selected
-  if (listInDropdown.value[index].chainId !== ChainIDs.Any) {
+  if (listInDropdown.value[index].chainId !== ChainID.Any) {
     liveState.value.set(listInDropdown.value[index].chainId, selected)
   } else {
     for (const filter of liveState.value) {
diff --git a/frontend/components/bc/searchbar/SearchbarMain.vue b/frontend/components/bc/searchbar/SearchbarMain.vue
index 02b80be6a..2ff974348 100644
--- a/frontend/components/bc/searchbar/SearchbarMain.vue
+++ b/frontend/components/bc/searchbar/SearchbarMain.vue
@@ -33,7 +33,7 @@ import {
   type CategoryFilter,
   type NetworkFilter
 } from '~/types/searchbar'
-import { ChainIDs, ChainInfo } from '~/types/network'
+import { ChainID, ChainInfo } from '~/types/network'
 import { API_PATH } from '~/types/customFetch'
 
 const MinimumTimeBetweenAPIcalls = 400 // ms
@@ -52,7 +52,7 @@ const props = defineProps<{
   colorTheme: SearchbarColors, // colors of the bar and its dropdown
   barPurpose: SearchbarPurpose, // what the bar will be used for
   screenWidthCausingSuddenChange: number, // this information is needed by MiddleEllipsis
-  onlyNetworks?: ChainIDs[], // the bar will search on these networks only
+  onlyNetworks?: ChainID[], // the bar will search on these networks only
   rowLacksPremiumSubscription?: PremiumRowCallBackFunction, // the bar calls this function for each row and deactivates the row if it returns `true`
   pickByDefault: PickingCallBackFunction, // see the declaration of the type to get an explanation
   keepDropdownOpen?: boolean // set to `true` if you want the drop down to stay open when the user clicks a suggestion. You can still close it by calling `<searchbar ref>.value.closeDropdown()` method.
@@ -89,7 +89,7 @@ const textFieldAndButton = ref<HTMLDivElement>()
 const textField = ref<HTMLInputElement>()
 
 let userInputNonce = 0
-const userInputNetworks = ref<NetworkFilter>(new Map<ChainIDs, boolean>()) // each entry will have a chain ID as key and the state of the option as value
+const userInputNetworks = ref<NetworkFilter>(new Map<ChainID, boolean>()) // each entry will have a chain ID as key and the state of the option as value
 const userInputCategories = ref<CategoryFilter>(new Map<Category, boolean>()) // each entry will have a Category as key and the state of the button as value
 let userInputNoNetworkIsSelected = true
 let userInputNoCategoryIsSelected = true
@@ -97,7 +97,7 @@ const userInputText = ref<string>('')
 let lastKnownText = ''
 
 const nextSearchScope = {
-  networks: new Set<ChainIDs>(),
+  networks: new Set<ChainID>(),
   categories: new Set<Category>()
 }
 
@@ -107,7 +107,7 @@ watch(debouncer.value, callAPIthenOrganizeResultsThenCallBack)
 const results = {
   raw: {
     stringifyiedList: new Set<string>(), // List of results returned by the API, without structure nor order. The list can be built in serveral steps (for a same text input, if the user selects new filters, the list can augment).
-    scopeMatrix: {} as Record<ChainIDs, Record<Category, boolean>> // tells which network × category combinations have been explored to obtain the current list of results (as the user can select/deselect successively filters in any order, the scope is not straightforward)
+    scopeMatrix: {} as Record<ChainID, Record<Category, boolean>> // tells which network × category combinations have been explored to obtain the current list of results (as the user can select/deselect successively filters in any order, the scope is not straightforward)
   },
   organized: {
     in: { networks: [] } as OrganizedResults, // filtered-in results, organized
@@ -140,7 +140,7 @@ function empty () {
 function clearRawResults () {
   results.raw.stringifyiedList.clear()
   for (const nw in results.raw.scopeMatrix) {
-    const network = nw as unknown as ChainIDs
+    const network = nw as unknown as ChainID
     for (const cat in results.raw.scopeMatrix[network]) {
       const category = cat as unknown as Category
       results.raw.scopeMatrix[network][category] = false
@@ -470,11 +470,11 @@ function filterAndOrganizeResults () {
     }
     // discarding findings that our configuration (given in the props) forbids
     const category = TypeInfo[toBeAdded.type].category
-    if ((toBeAdded.chainId !== ChainIDs.Any && !userInputNetworks.value.has(toBeAdded.chainId)) || !userInputCategories.value.has(category)) {
+    if ((toBeAdded.chainId !== ChainID.Any && !userInputNetworks.value.has(toBeAdded.chainId)) || !userInputCategories.value.has(category)) {
       continue
     }
     // determining whether the finding is filtered in or out, sending it to the corresponding list
-    const acceptTheChainID = userInputNetworks.value.get(toBeAdded.chainId) || userInputNoNetworkIsSelected || toBeAdded.chainId === ChainIDs.Any
+    const acceptTheChainID = userInputNetworks.value.get(toBeAdded.chainId) || userInputNoNetworkIsSelected || toBeAdded.chainId === ChainID.Any
     const acceptTheCategory = userInputCategories.value.get(category) || userInputNoCategoryIsSelected
     if (acceptTheChainID && acceptTheCategory) {
       resultsIn.push(toBeAdded)
@@ -533,11 +533,11 @@ function convertSingleAPIresultIntoResultSuggestion (stringifyiedRawResult : str
   }
 
   const type = apiResponseElement.type as ResultType
-  let chainId : ChainIDs
+  let chainId : ChainID
   if (TypeInfo[type].belongsToAllNetworks) {
-    chainId = ChainIDs.Any
+    chainId = ChainID.Any
   } else {
-    chainId = apiResponseElement.chain_id as ChainIDs
+    chainId = apiResponseElement.chain_id as ChainID
   }
 
   const howToFillresultSuggestionOutput = TypeInfo[type].howToFillresultSuggestionOutput
diff --git a/frontend/components/bc/searchbar/SuggestionRow.vue b/frontend/components/bc/searchbar/SuggestionRow.vue
index d51021c0d..a1146351d 100644
--- a/frontend/components/bc/searchbar/SuggestionRow.vue
+++ b/frontend/components/bc/searchbar/SuggestionRow.vue
@@ -3,7 +3,7 @@
  * If you want to change the behavior of the component or the information it displays, it is possible that you simply need to change a few parameters
  * in searchbar.ts rather than altering the code of the component. The possibilities offered by this configuration file are explanined in readme.md
  */
-import { ChainIDs } from '~/types/network'
+import { ChainID } from '~/types/network'
 import {
   CategoryInfo,
   SubCategoryInfo,
@@ -71,7 +71,7 @@ const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivat
     :class="[barShape,colorTheme,dropdownLayout,deactivationClass]"
   >
     <!-- In this mode, all possible cells are shown (this was the very first design on Figma) -->
-    <div v-if="props.suggestion.chainId !== ChainIDs.Any" class="cell-icons" :class="[barShape,dropdownLayout,deactivationClass]">
+    <div v-if="props.suggestion.chainId !== ChainID.Any" class="cell-icons" :class="[barShape,dropdownLayout,deactivationClass]">
       <BcSearchbarTypeIcons :type="props.suggestion.type" class="type-icon not-alone" />
       <IconNetwork
         :chain-id="props.suggestion.chainId"
@@ -121,7 +121,7 @@ const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivat
     :class="[barShape,colorTheme,dropdownLayout,deactivationClass]"
   >
     <!-- In this mode, we show less cells and their content comes from dedicated functions instead of a pure copy of `props.suggestion.output` -->
-    <div v-if="props.suggestion.chainId !== ChainIDs.Any" class="cell-icons" :class="[barShape,deactivationClass]">
+    <div v-if="props.suggestion.chainId !== ChainID.Any" class="cell-icons" :class="[barShape,deactivationClass]">
       <BcSearchbarTypeIcons :type="props.suggestion.type" class="type-icon not-alone" />
       <IconNetwork
         :chain-id="props.suggestion.chainId"
diff --git a/frontend/components/bc/toggle/MultiBar.vue b/frontend/components/bc/toggle/MultiBar.vue
index 360464ef2..3239286b0 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { type MultiBarItem } from '~/types/multiBar'
 
 interface Props {
-  icons: MultiBarItem[]
+  buttons: MultiBarItem[]
 }
 
 const props = defineProps<Props>()
@@ -11,7 +11,7 @@ const props = defineProps<Props>()
 const selected = defineModel<string[]>({ required: true })
 
 const inital: Record<string, boolean> = {}
-const modelValues = ref<Record<string, boolean>>(props.icons.reduce((map, { value }) => {
+const modelValues = ref<Record<string, boolean>>(props.buttons.reduce((map, { value }) => {
   map[value] = selected.value.includes(value)
   return map
 }, inital))
@@ -31,16 +31,17 @@ watch(modelValues, () => {
 <template>
   <div class="bc-togglebar">
     <BcToggleMultiBarButton
-      v-for="icon in props.icons"
+      v-for="icon in props.buttons"
       :key="icon.value"
       v-model="modelValues[icon.value]"
       :class="icon.className"
       :icon="icon.icon"
       :tooltip="icon.tooltip"
+      :disabled="icon.disabled"
     >
       <template #icon>
         <slot :name="icon.value">
-          <component :is="icon.component" v-if="icon.component" v-bind="icon.componentProps" class="max" />
+          <component :is="icon.component" v-if="icon.component" v-bind="icon.componentProps" :class="icon.componentClass" />
           <FontAwesomeIcon v-else-if="icon.icon" :icon="icon.icon" />
         </slot>
       </template>
@@ -58,8 +59,4 @@ watch(modelValues, () => {
   border: solid 1px var(--container-border-color);
   border-radius: var(--border-radius);
 }
-.max {
-  width: 100%;
-  height: 100%;
-}
 </style>
diff --git a/frontend/components/bc/toggle/MultiBarButton.vue b/frontend/components/bc/toggle/MultiBarButton.vue
index 2fdb84e4d..6a4ffdb1a 100644
--- a/frontend/components/bc/toggle/MultiBarButton.vue
+++ b/frontend/components/bc/toggle/MultiBarButton.vue
@@ -6,6 +6,7 @@ import BcTooltip from '../BcTooltip.vue'
 interface Props {
   icon?: IconDefinition,
   falseIcon?: IconDefinition,
+  disabled?:boolean,
   tooltip?: string,
 }
 
@@ -28,7 +29,7 @@ const icon = computed(() => {
         <div>{{ selected ? $t('filter.enabled'): $t('filter.disabled') }}</div>
       </div>
     </template>
-    <ToggleButton v-model="selected" class="bc-toggle" on-label="''" off-icon="''">
+    <ToggleButton v-model="selected" class="bc-toggle" on-label="''" off-icon="''" :disabled="disabled">
       <template #icon="slotProps">
         <slot name="icon" v-bind="slotProps">
           <FontAwesomeIcon v-if="icon" :icon="icon" />
@@ -64,6 +65,10 @@ const icon = computed(() => {
       :deep(.p-button-label) {
         display: none;
       }
+      &.p-disabled{
+        opacity: 0.5;
+        cursor: default;
+      }
     }
   }
 }
diff --git a/frontend/components/bc/toggle/SingleBar.vue b/frontend/components/bc/toggle/SingleBar.vue
index 456d0920d..f60f5b364 100644
--- a/frontend/components/bc/toggle/SingleBar.vue
+++ b/frontend/components/bc/toggle/SingleBar.vue
@@ -10,7 +10,9 @@ interface Props {
     componentProps?: any,
     componentClass?: string,
     value: string,
-    disabled?: boolean
+    tooltip?: string,
+    disabled?: boolean,
+
   }[],
   allowDeselect?: boolean // if true, clicking the selected button will deselect it causing the whole SingleBar not to have a value
 }
@@ -47,6 +49,7 @@ function onButtonClicked (value: string) {
       :text="button.text"
       :sub-text="button.subText"
       :selected="values[button.value]"
+      :tooltip="button.tooltip"
       :disabled="button.disabled"
       @click="!button.disabled && onButtonClicked(button.value)"
     >
diff --git a/frontend/components/bc/toggle/SingleBarButton.vue b/frontend/components/bc/toggle/SingleBarButton.vue
index fc183123b..1e7ce05c1 100644
--- a/frontend/components/bc/toggle/SingleBarButton.vue
+++ b/frontend/components/bc/toggle/SingleBarButton.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import BcTooltip from '../BcTooltip.vue'
+
 interface Props {
   icon?: IconDefinition,
   text?: string,
   subText?: string,
   selected: boolean,
   disabled?:boolean,
+  tooltip?: string,
 }
 const props = defineProps<Props>()
 
@@ -14,24 +17,40 @@ const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
 </script>
 
 <template>
-  <ToggleButton class="bc-toggle" :disabled="disabled" :model-value="selected">
-    <template #icon="slotProps">
-      <slot name="icon" v-bind="slotProps">
-        <FontAwesomeIcon v-if="icon" :icon="icon" />
-      </slot>
-      <div class="label">
-        {{ text }}
-        <div v-if="subText" class="sub">
-          {{ subText }}
+  <BcTooltip :dont-open-permanently="true" :hover-delay="350">
+    <template #tooltip>
+      <div class="button-tooltip">
+        <div v-if="tooltip" class="individual">
+          {{ tooltip }}
         </div>
       </div>
     </template>
-  </ToggleButton>
+    <ToggleButton class="bc-toggle" :disabled="disabled" :model-value="selected">
+      <template #icon="slotProps">
+        <slot name="icon" v-bind="slotProps">
+          <FontAwesomeIcon v-if="icon" :icon="icon" />
+        </slot>
+        <div class="label">
+          {{ text }}
+          <div v-if="subText" class="sub">
+            {{ subText }}
+          </div>
+        </div>
+      </template>
+    </ToggleButton>
+  </BcTooltip>
 </template>
 
 <style lang="scss" scoped>
 @use '~/assets/css/fonts.scss';
 
+.button-tooltip{
+  width: max-content;
+  text-align: left;
+  .individual{
+    margin-bottom: var(--padding);
+  }
+}
 .bc-toggle {
   &.p-button {
     &.p-togglebutton {
diff --git a/frontend/components/dashboard/creation/DashboardCreationController.vue b/frontend/components/dashboard/creation/DashboardCreationController.vue
index bf799db01..d4756191e 100644
--- a/frontend/components/dashboard/creation/DashboardCreationController.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationController.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { type DashboardType } from '~/types/dashboard'
 import { type DashboardCreationDisplayType, type DashboardCreationState } from '~/types/dashboard/creation'
-import { ChainIDs } from '~/types/network'
+import { ChainID } from '~/types/network'
 import { API_PATH } from '~/types/customFetch'
 
 const { createValidatorDashboard, createAccountDashboard } = useUserDashboardStore()
@@ -20,7 +20,7 @@ const visible = ref<boolean>(false)
 const state = ref<DashboardCreationState>('')
 const type = ref<DashboardType | ''>('')
 const name = ref<string>('')
-const network = ref<ChainIDs>()
+const network = ref<ChainID>()
 const { dashboardKey, publicEntities } = useDashboardKey()
 const { fetch } = useCustomFetch()
 const route = useRoute()
diff --git a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
index 6be7295f3..2c2489dea 100644
--- a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
@@ -1,30 +1,21 @@
 <script lang="ts" setup>
 import { IconNetwork } from '#components'
-import { ChainInfo, ChainIDs } from '~/types/network'
+import { ChainInfo, ChainID } from '~/types/network'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 
-const { currentNetwork, isMainNet } = useNetworkStore()
+const { currentNetwork, availableNetworks, isNetworkDisabled } = useNetworkStore()
 
-// TODO: get the list from the API...
-let ValidatorDashboardNetworkList: ChainIDs[]
-if (isMainNet()) {
-  ValidatorDashboardNetworkList = [ChainIDs.Ethereum, ChainIDs.Gnosis]
-} else {
-  ValidatorDashboardNetworkList = [ChainIDs.Holesky, ChainIDs.Chiado]
-}
-// ... and remove this.
-
-const network = defineModel<ChainIDs>('network')
+const network = defineModel<ChainID>('network')
 const selection = ref<string>('')
 
-watch(selection, (value) => { network.value = Number(value) as ChainIDs })
+watch(selection, (value) => { network.value = Number(value) as ChainID })
 
-const buttonList = ValidatorDashboardNetworkList.map((chainId) => {
+const buttonList = availableNetworks.value.map((chainId) => {
   return {
     value: String(chainId),
     text: ChainInfo[chainId].family as string,
     subText: (ChainInfo[chainId].name !== ChainInfo[chainId].family as string) ? ChainInfo[chainId].name : ChainInfo[chainId].description,
-    disabled: !useRuntimeConfig().public.showInDevelopment && chainId !== currentNetwork.value, // TODO: simply set `false` for everything once dashboards can be created for all the networks in `ValidatorDashboardNetworkList`
+    disabled: isNetworkDisabled(chainId),
     component: IconNetwork,
     componentProps: { chainId, colored: false, harmonizePerceivedSize: true },
     componentClass: 'dashboard-creation-button-network-icon'
diff --git a/frontend/components/icon/IconNetwork.vue b/frontend/components/icon/IconNetwork.vue
index fc6604e19..c6f9787d0 100644
--- a/frontend/components/icon/IconNetwork.vue
+++ b/frontend/components/icon/IconNetwork.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChainFamily, ChainIDs, ChainInfo } from '~/types/network'
+import { ChainFamily, ChainID, ChainInfo } from '~/types/network'
 const colorMode = useColorMode()
 
 // Usage :
@@ -12,7 +12,7 @@ const props = defineProps({
   harmonizePerceivedSize: { type: Boolean, default: false } // makes some icons slightly smaller/bigger, to appear with a size "similar" to the others
 })
 
-const family = computed(() => ChainInfo[props.chainId as ChainIDs].family)
+const family = computed(() => ChainInfo[props.chainId as ChainID].family)
 const coloring = computed(() => !props.colored ? 'monochromatic' : (colorMode.value !== 'dark' || props.doNotAdaptToColorTheme ? '' : 'pastel'))
 const sizing = computed(() => props.harmonizePerceivedSize ? family.value : '')
 </script>
diff --git a/frontend/components/notifications/NetworkSelector.vue b/frontend/components/notifications/NetworkSelector.vue
deleted file mode 100644
index 6e96b75e4..000000000
--- a/frontend/components/notifications/NetworkSelector.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { MultiBarItem } from '~/types/multiBar'
-import { IconNetwork } from '#components'
-import { ChainInfo } from '~/types/network'
-
-const { availableNetworks } = useNetworkStore()
-
-const selection = ref<string[]>(['1'])
-
-const buttons = computed(() => {
-  const list: MultiBarItem[] = []
-  availableNetworks.value.forEach(chainId => list.push({
-    component: IconNetwork,
-    componentProps: { chainId, harmonizePerceivedSize: true, colored: true },
-    value: String(chainId),
-    tooltip: ChainInfo[chainId].name + ' ' + ChainInfo[chainId].description
-  }))
-  return list
-})
-</script>
-
-<template>
-  <BcToggleMultiBar v-model="selection" :icons="buttons" />
-</template>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 76c171001..d00d7c402 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
-import type { ChainIDs } from '~/types/network'
+import type { ChainID } from '~/types/network'
 
 const props = defineProps<{
   tPath: string,
@@ -13,7 +13,7 @@ const props = defineProps<{
 const { t } = useI18n()
 
 const type = computed(() => props.inputType || 'binary')
-const state = defineModel<boolean|number|ChainIDs[]>({ required: true })
+const state = defineModel<boolean|number|ChainID[]>({ required: true })
 const checked = ref<boolean>(false)
 const inputted = ref('')
 
@@ -134,7 +134,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
       />
     </div>
     <div v-else class="right">
-      <NotificationsNetworkSelector />
+      <BcNetworkSelector /><!--v-model:multiselect="state" -->
     </div>
   </div>
 </template>
diff --git a/frontend/components/playground/MiniParser.vue b/frontend/components/playground/MiniParser.vue
index 431c11c79..a74ea0e6a 100644
--- a/frontend/components/playground/MiniParser.vue
+++ b/frontend/components/playground/MiniParser.vue
@@ -3,7 +3,7 @@ const placeholder = 'Here is an example of translation that would be too complic
                     '- As we like both, the [chocolate](chocolink) that you bring _*may*_ be dark or with milk.\n' +
                     '- Da wir beide mögen, _*darf*_ die [Schokolade](chocolink), die du bringst, dunkel oder mit Milch sein.\n\n' +
                     'This component is called `MiniParser` because it has been programmed with the objective to minimize the overhead (it fits in 177 lines of code). *In the medium term, it will save more than 177 lines of code* across [the project](besturl), will save time (no layout to create for each text) and will avoid pain (when the layout depends on the language).\n\n' +
-                    'For example, in _SubscriptionRow.vue_, we simply have one line:\n\n`✨ <BcMiniParser :input="tAll(t, tPath)" class="tt-content" /> ✨`\n\n*instead of*\n\n_(shortening the following would keep it longer anyway, would make it unclear and invalid the day the text changes)_\n`💀 <div v-if="tPath.includes(\'offline_validator\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀   </ul>`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'offline_group\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 4) }}</li>`\n`💀   </ul>`\n`💀   <b>{{ tOf(t, tPath, 5) }}</b> {{ tOf(t, tPath, 6) }}`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'ignore_spam\')" class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <b>{{ tOf(t, tPath, 1) }}</b>`\n`💀   {{ tOf(t, tPath, 2) }}`\n`💀   <b>{{ tOf(t, tPath, 3) }}</b>`\n`💀 </div>`\n`💀 <div v-else class="tt-content">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀 </div>`\n\n' +
+                    'For example, in _SubscriptionRow.vue_, we simply have one line:\n\n`✨ <BcMiniParser :input="tAll(t, tPath)" /> ✨`\n\n*instead of*\n\n_(shortening the following would keep it longer anyway, would make it unclear and invalid the day the text changes)_\n`💀 <div v-if="tPath.includes(\'offline_validator\')">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀   </ul>`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'offline_group\')">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <ul>`\n`💀     <li>{{ tOf(t, tPath, 1) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 2) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 3) }}</li>`\n`💀     <li>{{ tOf(t, tPath, 4) }}</li>`\n`💀   </ul>`\n`💀   <b>{{ tOf(t, tPath, 5) }}</b> {{ tOf(t, tPath, 6) }}`\n`💀 </div>`\n`💀 <div v-else-if="tPath.includes(\'ignore_spam\')">`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀   <b>{{ tOf(t, tPath, 1) }}</b>`\n`💀   {{ tOf(t, tPath, 2) }}`\n`💀   <b>{{ tOf(t, tPath, 3) }}</b>`\n`💀 </div>`\n`💀 <div v-else>`\n`💀   {{ tOf(t, tPath, 0) }}`\n`💀 </div>`\n\n' +
                     'There are *several places* in the codebase where long hard-coded layouts like that one (potentially *invalid in other languages*) can be replaced with `<MiniParser/>` (shorter, simpler and language-safe).\n\n' +
                     '# Additional features\n' +
                     '- You can also give urls [directly](http://bitfly.at).\n- You can escape the tags \\*.\n- ...'
diff --git a/frontend/components/playground/PlaygroundIcons.vue b/frontend/components/playground/PlaygroundIcons.vue
index c4550f1c0..4b11280e9 100644
--- a/frontend/components/playground/PlaygroundIcons.vue
+++ b/frontend/components/playground/PlaygroundIcons.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getAllExistingChainIDs, ChainIDs } from '~/types/network'
+import { getAllExistingChainIDs, ChainID } from '~/types/network'
 </script>
 
 <template>
@@ -41,7 +41,7 @@ import { getAllExistingChainIDs, ChainIDs } from '~/types/network'
     <IconNetwork
       v-for="id of getAllExistingChainIDs(false)"
       :key="id"
-      :chain-id="id as ChainIDs"
+      :chain-id="id as ChainID"
       :colored="false"
       :harmonize-perceived-size="false"
       class="icon-size"
@@ -50,7 +50,7 @@ import { getAllExistingChainIDs, ChainIDs } from '~/types/network'
     <IconNetwork
       v-for="id of getAllExistingChainIDs(false)"
       :key="id"
-      :chain-id="id as ChainIDs"
+      :chain-id="id as ChainID"
       :colored="true"
       :harmonize-perceived-size="false"
       class="icon-size"
@@ -59,7 +59,7 @@ import { getAllExistingChainIDs, ChainIDs } from '~/types/network'
     <IconNetwork
       v-for="id of getAllExistingChainIDs(false)"
       :key="id"
-      :chain-id="id as ChainIDs"
+      :chain-id="id as ChainID"
       :colored="true"
       :harmonize-perceived-size="true"
       class="icon-size"
diff --git a/frontend/components/playground/PlaygroundStyling.vue b/frontend/components/playground/PlaygroundStyling.vue
index b31b5d99c..ecf0f1ded 100644
--- a/frontend/components/playground/PlaygroundStyling.vue
+++ b/frontend/components/playground/PlaygroundStyling.vue
@@ -126,7 +126,7 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
           <BcToggleMultiBarButton v-model="selected" :icon="faTable" />
         </div>
         <div>
-          <BcToggleMultiBar v-model="selectedList" :icons="completeList" style="margin-right: 10px;">
+          <BcToggleMultiBar v-model="selectedList" :buttons="completeList" style="margin-right: 10px;">
             <template #attestation>
               <IconSlotAttestation />
             </template>
diff --git a/frontend/components/slot/viz/SlotVizViewer.vue b/frontend/components/slot/viz/SlotVizViewer.vue
index c4ba77938..d9a785a95 100644
--- a/frontend/components/slot/viz/SlotVizViewer.vue
+++ b/frontend/components/slot/viz/SlotVizViewer.vue
@@ -108,7 +108,7 @@ watch(() => props, () => {
         </BcLink>
       </BCTooltip>
       <div class="filter-row">
-        <BcToggleMultiBar v-model="selectedCategories" :icons="icons" />
+        <BcToggleMultiBar v-model="selectedCategories" :buttons="icons" />
       </div>
       <h1 class="network">
         {{ networkInfo?.family }} {{ networkInfo?.name }}
diff --git a/frontend/composables/useRefPipe.ts b/frontend/composables/useRefPipe.ts
new file mode 100644
index 000000000..f7d4c0de0
--- /dev/null
+++ b/frontend/composables/useRefPipe.ts
@@ -0,0 +1,69 @@
+import { type WatchStopHandle } from 'vue'
+
+export interface ConverterCallBack<Tx, Ty> { (x: Tx) : Ty}
+
+export function useRefPipe () {
+  let stopBack: WatchStopHandle
+  let stopForth: WatchStopHandle
+
+  function bindPrimitiveRefs<T> (refA: Ref<T>, refB: Ref<T>) {
+    stopBack = watch(refA, (a: T) => {
+      if (a !== refB.value) {
+        refB.value = a
+      }
+    }, { immediate: true })
+    stopForth = watch(refB, (b: T) => {
+      if (b !== refA.value) {
+        refA.value = b
+      }
+    }, { immediate: true })
+  }
+
+  function bindPrimitiveRefsOfDifferentTypes<Ta, Tb> (refA: Ref<Ta>, refB: Ref<Tb>) {
+    stopBack = watch(refA, (a: Ta) => {
+      if (JSON.stringify(a) !== JSON.stringify(refB.value)) {
+        refB.value = <Tb>(a as unknown)
+      }
+    }, { immediate: true })
+    stopForth = watch(refB, (b: Tb) => {
+      if (JSON.stringify(b) !== JSON.stringify(refA.value)) {
+        refA.value = <Ta>(b as unknown)
+      }
+    }, { immediate: true })
+  }
+
+  function bindObjectRefs<T> (refA: Ref<T>, refB: Ref<T>) {
+    stopBack = watch(refA, (a: T) => {
+      if (JSON.stringify(a) !== JSON.stringify(refB.value)) {
+        refB.value = a
+      }
+    }, { immediate: true })
+    stopForth = watch(refB, (b: T) => {
+      if (JSON.stringify(b) !== JSON.stringify(refA.value)) {
+        refA.value = b
+      }
+    }, { immediate: true })
+  }
+
+  function bindArraysRefsOfDifferentTypes<Ta, Tb> (refA: Ref<Ta[]>, refB: Ref<Tb[]>, AtoB: ConverterCallBack<Ta, Tb>, BtoA: ConverterCallBack<Tb, Ta>) {
+    stopBack = watch(refA, (a: Ta[]) => {
+      const AasB = a.map(el => AtoB(el))
+      if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
+        refB.value = AasB
+      }
+    }, { immediate: true })
+    stopForth = watch(refB, (b: Tb[]) => {
+      const BasA = b.map(el => BtoA(el))
+      if (JSON.stringify(BasA) !== JSON.stringify(refA.value)) {
+        refA.value = BasA
+      }
+    }, { immediate: true })
+  }
+
+  onUnmounted(() => {
+    stopBack?.()
+    stopForth?.()
+  })
+
+  return { bindPrimitiveRefs, bindObjectRefs, bindPrimitiveRefsOfDifferentTypes, bindArraysRefsOfDifferentTypes }
+}
diff --git a/frontend/stores/dashboard/useUserDashboardStore.ts b/frontend/stores/dashboard/useUserDashboardStore.ts
index e10c2cac7..2d0c70219 100644
--- a/frontend/stores/dashboard/useUserDashboardStore.ts
+++ b/frontend/stores/dashboard/useUserDashboardStore.ts
@@ -5,7 +5,7 @@ import type { VDBPostReturnData } from '~/types/api/validator_dashboard'
 import { type DashboardKey, type DashboardType, type CookieDashboard, COOKIE_DASHBOARD_ID } from '~/types/dashboard'
 import { COOKIE_KEY } from '~/types/cookie'
 import { API_PATH } from '~/types/customFetch'
-import type { ChainIDs } from '~/types/network'
+import type { ChainID } from '~/types/network'
 
 const userDashboardStore = defineStore('user_dashboards_store', () => {
   const data = ref<UserDashboardsData | undefined | null>()
@@ -66,7 +66,7 @@ export function useUserDashboardStore () {
     dashboardCookie.value = JSON.stringify(db)
   }
 
-  async function createValidatorDashboard (name: string, network: ChainIDs, dashboardKey?: string):Promise<CookieDashboard |undefined> {
+  async function createValidatorDashboard (name: string, network: ChainID, dashboardKey?: string):Promise<CookieDashboard |undefined> {
     if (!isLoggedIn.value) {
       // Create local Validator dashboard
       const cd:CookieDashboard = { id: COOKIE_DASHBOARD_ID.VALIDATOR, name: '', hash: dashboardKey ?? '' }
diff --git a/frontend/stores/useNetworkStore.ts b/frontend/stores/useNetworkStore.ts
index 5c8906b64..0662d7356 100644
--- a/frontend/stores/useNetworkStore.ts
+++ b/frontend/stores/useNetworkStore.ts
@@ -4,17 +4,17 @@ import type { ApiDataResponse } from '~/types/api/common'
 import * as networkTs from '~/types/network'
 
 interface ApiChainInfo {
-  chain_id: networkTs.ChainIDs,
+  chain_id: networkTs.ChainID,
   name: string
 }
 
 const store = defineStore('network-store', () => {
   const data = ref<{
-    availableNetworks: networkTs.ChainIDs[],
-    currentNetwork: networkTs.ChainIDs
+    availableNetworks: networkTs.ChainID[],
+    currentNetwork: networkTs.ChainID
   }>({
-    availableNetworks: [networkTs.ChainIDs.Ethereum],
-    currentNetwork: networkTs.ChainIDs.Any // this impossible value by defaut must be kept, it ensures that the `computed` of `currentNetwork` selects the network of highest priority when `setCurrentNetwork()` has not been called yet
+    availableNetworks: [networkTs.ChainID.Ethereum],
+    currentNetwork: networkTs.ChainID.Any // this impossible value by defaut must be kept, it ensures that the `computed` of `currentNetwork` selects the network of highest priority when `setCurrentNetwork()` has not been called yet
   })
   return { data }
 })
@@ -43,7 +43,12 @@ export function useNetworkStore () {
   const currentNetwork = computed(() => availableNetworks.value.includes(data.value.currentNetwork) ? data.value.currentNetwork : availableNetworks.value[0])
   const networkInfo = computed(() => networkTs.ChainInfo[currentNetwork.value])
 
-  function setCurrentNetwork (chainId: networkTs.ChainIDs) {
+  function isNetworkDisabled (chainId: networkTs.ChainID) : boolean {
+    // TODO: return `true` for everything once we are ready
+    return !useRuntimeConfig().public.showInDevelopment && chainId !== currentNetwork.value
+  }
+
+  function setCurrentNetwork (chainId: networkTs.ChainID) {
     data.value.currentNetwork = chainId
   }
 
@@ -55,29 +60,30 @@ export function useNetworkStore () {
     return networkTs.isL1(currentNetwork.value)
   }
 
-  function epochsPerDay (): number {
+  function epochsPerDay () : number {
     return networkTs.epochsPerDay(currentNetwork.value)
   }
 
-  function epochToTs (epoch: number): number | undefined {
+  function epochToTs (epoch: number) : number | undefined {
     return networkTs.epochToTs(currentNetwork.value, epoch)
   }
 
-  function slotToTs (slot: number): number | undefined {
+  function slotToTs (slot: number) : number | undefined {
     return networkTs.slotToTs(currentNetwork.value, slot)
   }
 
-  function tsToSlot (ts: number): number {
+  function tsToSlot (ts: number) : number {
     return networkTs.tsToSlot(currentNetwork.value, ts)
   }
 
-  function slotToEpoch (slot: number): number {
+  function slotToEpoch (slot: number) : number {
     return networkTs.slotToEpoch(currentNetwork.value, slot)
   }
 
   return {
     loadAvailableNetworks,
     availableNetworks,
+    isNetworkDisabled,
     currentNetwork,
     networkInfo,
     setCurrentNetwork,
diff --git a/frontend/types/multiBar.ts b/frontend/types/multiBar.ts
index 00f36b7fb..9ddcbeab7 100644
--- a/frontend/types/multiBar.ts
+++ b/frontend/types/multiBar.ts
@@ -4,7 +4,9 @@ export type MultiBarItem = {
   icon?: IconDefinition
   component?: Component,
   componentProps?: any,
+  componentClass?: string,
   value: string,
   tooltip?: string,
-  className?: string
+  className?: string,
+  disabled?: boolean
 }
diff --git a/frontend/types/network.ts b/frontend/types/network.ts
index 9fca0d21f..9eca77080 100644
--- a/frontend/types/network.ts
+++ b/frontend/types/network.ts
@@ -9,7 +9,7 @@ export enum ChainFamily {
   Gnosis = 'Gnosis'
 }
 
-export enum ChainIDs {
+export enum ChainID {
   Any = 0, // to organize data internally (example of use: some ahead-results in the search bar belong to all networks)
 
   Ethereum = 1,
@@ -34,8 +34,8 @@ export interface ChainInfoFields {
   name: string,
   description: string,
   family: ChainFamily,
-  mainNet: ChainIDs, // if the network is a testnet, this field points to the non-test network
-  L1: ChainIDs, // if the network is a L2, this field points to the L1
+  mainNet: ChainID, // if the network is a testnet, this field points to the non-test network
+  L1: ChainID, // if the network is a L2, this field points to the L1
   clCurrency: CryptoCurrency,
   elCurrency: CryptoCurrency,
   timeStampSlot0: number, // if this property is 0, it means that the network has no slots
@@ -45,13 +45,13 @@ export interface ChainInfoFields {
   priority: number // default order of the networks on the screen (ex: in the drop-down of the search bar)
 }
 
-export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
-  [ChainIDs.Any]: {
+export const ChainInfo: Record<ChainID, ChainInfoFields> = {
+  [ChainID.Any]: {
     name: 'Any',
     description: 'Any network',
     family: ChainFamily.Any,
-    mainNet: ChainIDs.Any,
-    L1: ChainIDs.Any,
+    mainNet: ChainID.Any,
+    L1: ChainID.Any,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -61,12 +61,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 0 // data belonging to all networks is displayed first by default
   },
 
-  [ChainIDs.Ethereum]: {
+  [ChainID.Ethereum]: {
     name: 'Ethereum',
     description: 'Mainnet',
     family: ChainFamily.Ethereum,
-    mainNet: ChainIDs.Ethereum,
-    L1: ChainIDs.Ethereum,
+    mainNet: ChainID.Ethereum,
+    L1: ChainID.Ethereum,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 1606824023,
@@ -75,12 +75,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     path: '/ethereum',
     priority: 1
   },
-  [ChainIDs.Holesky]: {
+  [ChainID.Holesky]: {
     name: 'Holesky',
     description: 'Testnet',
     family: ChainFamily.Ethereum,
-    mainNet: ChainIDs.Ethereum,
-    L1: ChainIDs.Holesky,
+    mainNet: ChainID.Ethereum,
+    L1: ChainID.Holesky,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 1695902400,
@@ -89,12 +89,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     path: '/holesky',
     priority: 2
   },
-  [ChainIDs.Sepolia]: {
+  [ChainID.Sepolia]: {
     name: 'Sepolia',
     description: 'Testnet',
     family: ChainFamily.Ethereum,
-    mainNet: ChainIDs.Ethereum,
-    L1: ChainIDs.Sepolia,
+    mainNet: ChainID.Ethereum,
+    L1: ChainID.Sepolia,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 1655733600,
@@ -104,12 +104,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 3
   },
 
-  [ChainIDs.ArbitrumOneEthereum]: {
+  [ChainID.ArbitrumOneEthereum]: {
     name: 'Arbitrum One',
     description: 'L2',
     family: ChainFamily.Arbitrum,
-    mainNet: ChainIDs.ArbitrumOneEthereum,
-    L1: ChainIDs.Ethereum,
+    mainNet: ChainID.ArbitrumOneEthereum,
+    L1: ChainID.Ethereum,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -118,12 +118,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     path: '/arbitrum-one-ethereum',
     priority: 10
   },
-  [ChainIDs.ArbitrumNovaEthereum]: {
+  [ChainID.ArbitrumNovaEthereum]: {
     name: 'Arbitrum Nova',
     description: 'L2',
     family: ChainFamily.Arbitrum,
-    mainNet: ChainIDs.ArbitrumNovaEthereum,
-    L1: ChainIDs.Ethereum,
+    mainNet: ChainID.ArbitrumNovaEthereum,
+    L1: ChainID.Ethereum,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -132,12 +132,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     path: '/arbitrum-nova-ethereum',
     priority: 11
   },
-  [ChainIDs.ArbitrumOneSepolia]: {
+  [ChainID.ArbitrumOneSepolia]: {
     name: 'Arbitrum Sepolia',
     description: 'Testnet',
     family: ChainFamily.Arbitrum,
-    mainNet: ChainIDs.ArbitrumOneEthereum,
-    L1: ChainIDs.Sepolia,
+    mainNet: ChainID.ArbitrumOneEthereum,
+    L1: ChainID.Sepolia,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -147,12 +147,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 12
   },
 
-  [ChainIDs.OptimismEthereum]: {
+  [ChainID.OptimismEthereum]: {
     name: 'Optimism',
     description: 'L2',
     family: ChainFamily.Optimism,
-    mainNet: ChainIDs.OptimismEthereum,
-    L1: ChainIDs.Ethereum,
+    mainNet: ChainID.OptimismEthereum,
+    L1: ChainID.Ethereum,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -161,12 +161,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     path: '/optimism-ethereum',
     priority: 20
   },
-  [ChainIDs.OptimismSepolia]: {
+  [ChainID.OptimismSepolia]: {
     name: 'Optimism Sepolia',
     description: 'Testnet',
     family: ChainFamily.Optimism,
-    mainNet: ChainIDs.OptimismEthereum,
-    L1: ChainIDs.Sepolia,
+    mainNet: ChainID.OptimismEthereum,
+    L1: ChainID.Sepolia,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -176,12 +176,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 21
   },
 
-  [ChainIDs.BaseEthereum]: {
+  [ChainID.BaseEthereum]: {
     name: 'Base',
     description: 'L2',
     family: ChainFamily.Base,
-    mainNet: ChainIDs.BaseEthereum,
-    L1: ChainIDs.Ethereum,
+    mainNet: ChainID.BaseEthereum,
+    L1: ChainID.Ethereum,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -190,12 +190,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     path: '/base-ethereum',
     priority: 30
   },
-  [ChainIDs.BaseSepolia]: {
+  [ChainID.BaseSepolia]: {
     name: 'Base Sepolia',
     description: 'Testnet',
     family: ChainFamily.Base,
-    mainNet: ChainIDs.BaseEthereum,
-    L1: ChainIDs.Sepolia,
+    mainNet: ChainID.BaseEthereum,
+    L1: ChainID.Sepolia,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -205,12 +205,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 31
   },
 
-  [ChainIDs.Gnosis]: {
+  [ChainID.Gnosis]: {
     name: 'Gnosis',
     description: 'Mainnet',
     family: ChainFamily.Gnosis,
-    mainNet: ChainIDs.Gnosis,
-    L1: ChainIDs.Gnosis,
+    mainNet: ChainID.Gnosis,
+    L1: ChainID.Gnosis,
     clCurrency: 'GNO',
     elCurrency: 'xDAI',
     timeStampSlot0: 1638993340,
@@ -219,12 +219,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     path: '/gnosis',
     priority: 40
   },
-  [ChainIDs.Chiado]: {
+  [ChainID.Chiado]: {
     name: 'Chiado',
     description: 'Testnet',
     family: ChainFamily.Gnosis,
-    mainNet: ChainIDs.Gnosis,
-    L1: ChainIDs.Chiado,
+    mainNet: ChainID.Gnosis,
+    L1: ChainID.Chiado,
     clCurrency: 'GNO',
     elCurrency: 'xDAI',
     timeStampSlot0: 1665396300,
@@ -235,12 +235,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   }
 }
 
-export function getAllExistingChainIDs (sortByPriority : boolean) : ChainIDs[] {
-  const list : ChainIDs[] = []
+export function getAllExistingChainIDs (sortByPriority : boolean) : ChainID[] {
+  const list : ChainID[] = []
 
-  for (const id in ChainIDs) {
+  for (const id in ChainID) {
     if (isNaN(Number(id))) {
-      list.push(ChainIDs[id as keyof typeof ChainIDs])
+      list.push(ChainID[id as keyof typeof ChainID])
     }
   }
   if (sortByPriority) {
@@ -253,7 +253,7 @@ export function getAllExistingChainIDs (sortByPriority : boolean) : ChainIDs[] {
  * Should be used only when you test a network different from the current one.
  * Whereever you would write `isMainNet(currentNetwork.value)` you should rather use `isMainNet()` from `useNetworkStore.ts`.
  */
-export function isMainNet (network: ChainIDs) : boolean {
+export function isMainNet (network: ChainID) : boolean {
   return (ChainInfo[network].mainNet === network)
 }
 
@@ -261,7 +261,7 @@ export function isMainNet (network: ChainIDs) : boolean {
  * Should be used only when you test a network different from the current one.
  * Wherever you would write `isL1(currentNetwork.value)` you should rather use `isL1()` from `useNetworkStore.ts`.
  */
-export function isL1 (network: ChainIDs) : boolean {
+export function isL1 (network: ChainID) : boolean {
   return (ChainInfo[network].L1 === network)
 }
 
@@ -269,7 +269,7 @@ export function isL1 (network: ChainIDs) : boolean {
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `epochsPerDay(currentNetwork.value)` you should rather use `epochsPerDay()` from `useNetworkStore.ts`.
  */
-export function epochsPerDay (chainId: ChainIDs): number {
+export function epochsPerDay (chainId: ChainID): number {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined) {
     return 0
@@ -281,7 +281,7 @@ export function epochsPerDay (chainId: ChainIDs): number {
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `epochToTs(currentNetwork.value, epoch)` you should rather use `epochToTs(epoch)` from `useNetworkStore.ts`.
  */
-export function epochToTs (chainId: ChainIDs, epoch: number): number | undefined {
+export function epochToTs (chainId: ChainID, epoch: number): number | undefined {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined || epoch < 0) {
     return undefined
@@ -294,7 +294,7 @@ export function epochToTs (chainId: ChainIDs, epoch: number): number | undefined
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `slotToTs(currentNetwork.value, slot)` you should rather use `slotToTs(slot)` from `useNetworkStore.ts`.
  */
-export function slotToTs (chainId: ChainIDs, slot: number): number | undefined {
+export function slotToTs (chainId: ChainID, slot: number): number | undefined {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined || slot < 0) {
     return undefined
@@ -307,7 +307,7 @@ export function slotToTs (chainId: ChainIDs, slot: number): number | undefined {
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `tsToSlot(currentNetwork.value, ts)` you should rather use `tsToSlot(ts)` from `useNetworkStore.ts`.
  */
-export function tsToSlot (chainId: ChainIDs, ts: number): number {
+export function tsToSlot (chainId: ChainID, ts: number): number {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined) {
     return -1
@@ -319,7 +319,7 @@ export function tsToSlot (chainId: ChainIDs, ts: number): number {
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `slotToEpoch(currentNetwork.value, slot)` you should rather use `slotToEpoch(slot)` from `useNetworkStore.ts`.
  */
-export function slotToEpoch (chainId: ChainIDs, slot: number): number {
+export function slotToEpoch (chainId: ChainID, slot: number): number {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined) {
     return -1
@@ -331,6 +331,6 @@ export function slotToEpoch (chainId: ChainIDs, slot: number): number {
  * @param list List to sort. Its order will be modified because the function sorts in place.
  * @returns List sorted in place, so the same as parameter `list`.
  */
-export function sortChainIDsByPriority (list : ChainIDs[]) : ChainIDs[] {
+export function sortChainIDsByPriority (list : ChainID[]) : ChainID[] {
   return list.sort((a, b) => ChainInfo[a].priority - ChainInfo[b].priority)
 }
diff --git a/frontend/types/searchbar.ts b/frontend/types/searchbar.ts
index 450275607..38c6ac8bd 100644
--- a/frontend/types/searchbar.ts
+++ b/frontend/types/searchbar.ts
@@ -1,5 +1,5 @@
 import type { ComposerTranslation } from '@nuxtjs/i18n/dist/runtime/composables'
-import { ChainIDs } from '~/types/network'
+import { ChainID } from '~/types/network'
 import { type ApiErrorResponse, type SearchResult, type InternalPostSearchResponse } from '~/types/api/common'
 
 export enum SearchbarShape { // do not change the litterals, they are used as class names
@@ -79,7 +79,7 @@ export enum ResultType {
 // and the function returns one `Matching` element (or undefined).
 export type Matching = {
   closeness: number, // how close this result is to what the user inputted (lower value = better similarity)
-  network: ChainIDs, // the network that this result belongs to
+  network: ChainID, // the network that this result belongs to
   type: ResultType // the type of the result
 }
 /* When the user presses Enter, the callback function receives a simplified representation of the suggested results and returns one
@@ -92,7 +92,7 @@ export interface PickingCallBackFunction { (possibilities : Matching[]) : Matchi
 
 export interface SearchRequest {
   input: string,
-  networks: ChainIDs[],
+  networks: ChainID[],
   types: ResultType[],
   count?: boolean
 }
@@ -135,7 +135,7 @@ export interface ResultSuggestion {
   queryParam: string, // Data returned by the API that identifies this very result in the back-end. This is the most important data for callback function '@go' given in the props of the Searchbar component.
   closeness: number, // How close the suggested result is to the user input (important for graffitis and token names, later for other things if the back-end evolves to find other approximate results).
   count : number, // How many identical results are found (often 1 but the API can inform us if there is more). This value is NaN when there is at least 1 result but the API did not clarify how many.
-  chainId : ChainIDs, // Network that the result belongs to. If the result exists on all networks, it is `ChainIDs.Any` (so 0).
+  chainId : ChainID, // Network that the result belongs to. If the result exists on all networks, it is `ChainID.Any` (so 0).
   type : ResultType, // Tells what thing(s) this result corresponds to.
   rawResult: SingleAPIresult // Original data given by the API.
 }
@@ -148,7 +148,7 @@ export interface ResultSuggestionInternal extends ResultSuggestion {
 
 export interface OrganizedResults {
   networks: {
-    chainId: ChainIDs,
+    chainId: ChainID,
     types: {
       type: ResultType,
       suggestions: ResultSuggestionInternal[]
@@ -490,7 +490,7 @@ export interface SearchBar // your ref to the search-bar component must be of th
        extends ComponentPublicInstance, ExposedSearchbarMethods {}
 
 export type CategoryFilter = Map<Category, boolean> // for internal use
-export type NetworkFilter = Map<ChainIDs, boolean> // for internal use
+export type NetworkFilter = Map<ChainID, boolean> // for internal use
 export type SearchbarDropdownLayout = 'narrow-dropdown' | 'large-dropdown' // for internal use (do not change the litterals, they are used as class names)
 
 export function wasOutputDataGivenByTheAPI (type : ResultType, resultSuggestionOutputField : keyof HowToFillresultSuggestionOutput) : boolean {
diff --git a/frontend/types/subscriptionModal.ts b/frontend/types/subscriptionModal.ts
index 9fbf0548d..b1d6884a9 100644
--- a/frontend/types/subscriptionModal.ts
+++ b/frontend/types/subscriptionModal.ts
@@ -1,4 +1,4 @@
-import { ChainIDs } from './network'
+import { ChainID } from './network'
 
 export type ValidatorSubscriptionState = {
   offlineValidator: boolean,
@@ -18,6 +18,6 @@ export type AccountSubscriptionState = {
   erc20: number,
   erc721: boolean,
   erc1155: boolean,
-  networks: ChainIDs[],
+  networks: ChainID[],
   ignoreSpam: boolean
 }
diff --git a/frontend/utils/format.ts b/frontend/utils/format.ts
index 295b56696..86ed2bab0 100644
--- a/frontend/utils/format.ts
+++ b/frontend/utils/format.ts
@@ -2,7 +2,7 @@ import { commify } from '@ethersproject/units'
 import { DateTime, type StringUnitLength } from 'luxon'
 import { type ComposerTranslation } from 'vue-i18n'
 import type { AgeFormat } from '~/types/settings'
-import { ChainIDs, epochToTs, slotToTs } from '~/types/network'
+import { ChainID, epochToTs, slotToTs } from '~/types/network'
 
 export const ONE_MINUTE = 60
 export const ONE_HOUR = ONE_MINUTE * 60
@@ -144,7 +144,7 @@ export function formatGoTimestamp (timestamp: string | number, compareTimestamp?
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `formatEpochToDateTime(currentNetwork.value, ...)` you should rather use `formatEpochToDateTime(...)` from `useFormat.ts`.
  */
-export function formatEpochToDateTime (chainId: ChainIDs, epoch: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
+export function formatEpochToDateTime (chainId: ChainID, epoch: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
   return formatTs(epochToTs(chainId, epoch), timestamp, format, style, locales, withTime)
 }
 
@@ -152,7 +152,7 @@ export function formatEpochToDateTime (chainId: ChainIDs, epoch: number, timesta
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `formatSlotToDateTime(currentNetwork.value, ...)` you should rather use `formatSlotToDateTime(...)` from `useFormat.ts`.
  */
-export function formatSlotToDateTime (chainId: ChainIDs, slot: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
+export function formatSlotToDateTime (chainId: ChainID, slot: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
   return formatTs(slotToTs(chainId, slot), timestamp, format, style, locales, withTime)
 }
 
@@ -160,7 +160,7 @@ export function formatSlotToDateTime (chainId: ChainIDs, slot: number, timestamp
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `formatEpochToDate(currentNetwork.value, ...)` you should rather use `formatEpochToDate(...)` from `useFormat.ts`.
  */
-export function formatEpochToDate (chainId: ChainIDs, epoch: number, locales: string): string | null | undefined {
+export function formatEpochToDate (chainId: ChainID, epoch: number, locales: string): string | null | undefined {
   return formatEpochToDateTime(chainId, epoch, undefined, 'absolute', undefined, locales, false)
 }
 
diff --git a/frontend/utils/mock.ts b/frontend/utils/mock.ts
index 30f6201c7..994cb8398 100644
--- a/frontend/utils/mock.ts
+++ b/frontend/utils/mock.ts
@@ -1,5 +1,6 @@
 import type { InternalGetLatestStateResponse } from '~/types/api/latest_state'
 import type { ApiDataResponse } from '~/types/api/common'
+import { isMainNet } from '~/types/network'
 import { type SearchAheadAPIresponse, type ResultType, TypeInfo, Indirect } from '~/types/searchbar'
 
 const probabilityOfNoResultOrError = 0.0
@@ -353,13 +354,16 @@ interface ApiChainInfo {
 
 export function simulateAPIresponseAboutNetworkList () : ApiDataResponse<ApiChainInfo[]> {
   const result = { data: [] } as ApiDataResponse<ApiChainInfo[]>
-
-  result.data.push(
-    { chain_id: 1, name: 'ethereum' },
-    { chain_id: 17000, name: 'holesky' },
-    { chain_id: 100, name: 'gnosis' },
-    { chain_id: 10200, name: 'chiado' }
-  )
-
+  if (isMainNet(Number(useRuntimeConfig().public.chainIdByDefault))) {
+    result.data.push({ chain_id: 1, name: 'ethereum' }, { chain_id: 100, name: 'gnosis' })
+    if (useRuntimeConfig().public.showInDevelopment) {
+      result.data.push({ chain_id: 42161, name: 'arbitrum' }, { chain_id: 8453, name: 'base' })
+    }
+  } else {
+    result.data.push({ chain_id: 17000, name: 'holesky' }, { chain_id: 10200, name: 'chiado' })
+    if (useRuntimeConfig().public.showInDevelopment) {
+      result.data.push({ chain_id: 421614, name: 'arbitrum testnet' }, { chain_id: 84532, name: 'base testnet' })
+    }
+  }
   return result
 }

From 8e5c3b7e09a5936b4b71054eb5563cebfc6ec2ee Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 2 Jul 2024 16:17:02 +0200
Subject: [PATCH 14/69] (BIDS-2859) stoppers fixed

---
 frontend/composables/useRefPipe.ts | 38 ++++++++++++++----------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/frontend/composables/useRefPipe.ts b/frontend/composables/useRefPipe.ts
index f7d4c0de0..7e65d4c06 100644
--- a/frontend/composables/useRefPipe.ts
+++ b/frontend/composables/useRefPipe.ts
@@ -3,66 +3,64 @@ import { type WatchStopHandle } from 'vue'
 export interface ConverterCallBack<Tx, Ty> { (x: Tx) : Ty}
 
 export function useRefPipe () {
-  let stopBack: WatchStopHandle
-  let stopForth: WatchStopHandle
+  const stoppers: WatchStopHandle[] = []
 
   function bindPrimitiveRefs<T> (refA: Ref<T>, refB: Ref<T>) {
-    stopBack = watch(refA, (a: T) => {
+    stoppers.push(watch(refA, (a: T) => {
       if (a !== refB.value) {
         refB.value = a
       }
-    }, { immediate: true })
-    stopForth = watch(refB, (b: T) => {
+    }, { immediate: true }))
+    stoppers.push(watch(refB, (b: T) => {
       if (b !== refA.value) {
         refA.value = b
       }
-    }, { immediate: true })
+    }, { immediate: true }))
   }
 
   function bindPrimitiveRefsOfDifferentTypes<Ta, Tb> (refA: Ref<Ta>, refB: Ref<Tb>) {
-    stopBack = watch(refA, (a: Ta) => {
+    stoppers.push(watch(refA, (a: Ta) => {
       if (JSON.stringify(a) !== JSON.stringify(refB.value)) {
         refB.value = <Tb>(a as unknown)
       }
-    }, { immediate: true })
-    stopForth = watch(refB, (b: Tb) => {
+    }, { immediate: true }))
+    stoppers.push(watch(refB, (b: Tb) => {
       if (JSON.stringify(b) !== JSON.stringify(refA.value)) {
         refA.value = <Ta>(b as unknown)
       }
-    }, { immediate: true })
+    }, { immediate: true }))
   }
 
   function bindObjectRefs<T> (refA: Ref<T>, refB: Ref<T>) {
-    stopBack = watch(refA, (a: T) => {
+    stoppers.push(watch(refA, (a: T) => {
       if (JSON.stringify(a) !== JSON.stringify(refB.value)) {
         refB.value = a
       }
-    }, { immediate: true })
-    stopForth = watch(refB, (b: T) => {
+    }, { immediate: true }))
+    stoppers.push(watch(refB, (b: T) => {
       if (JSON.stringify(b) !== JSON.stringify(refA.value)) {
         refA.value = b
       }
-    }, { immediate: true })
+    }, { immediate: true }))
   }
 
   function bindArraysRefsOfDifferentTypes<Ta, Tb> (refA: Ref<Ta[]>, refB: Ref<Tb[]>, AtoB: ConverterCallBack<Ta, Tb>, BtoA: ConverterCallBack<Tb, Ta>) {
-    stopBack = watch(refA, (a: Ta[]) => {
+    stoppers.push(watch(refA, (a: Ta[]) => {
       const AasB = a.map(el => AtoB(el))
       if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
         refB.value = AasB
       }
-    }, { immediate: true })
-    stopForth = watch(refB, (b: Tb[]) => {
+    }, { immediate: true }))
+    stoppers.push(watch(refB, (b: Tb[]) => {
       const BasA = b.map(el => BtoA(el))
       if (JSON.stringify(BasA) !== JSON.stringify(refA.value)) {
         refA.value = BasA
       }
-    }, { immediate: true })
+    }, { immediate: true }))
   }
 
   onUnmounted(() => {
-    stopBack?.()
-    stopForth?.()
+    stoppers.forEach(stopper => stopper())
   })
 
   return { bindPrimitiveRefs, bindObjectRefs, bindPrimitiveRefsOfDifferentTypes, bindArraysRefsOfDifferentTypes }

From 06ec12fd1fcbd17e415508416d68bb54514b841f Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 2 Jul 2024 16:19:42 +0200
Subject: [PATCH 15/69] (BIDS-2859) consistent naming

---
 frontend/composables/useRefPipe.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/composables/useRefPipe.ts b/frontend/composables/useRefPipe.ts
index 7e65d4c06..4f5aa452b 100644
--- a/frontend/composables/useRefPipe.ts
+++ b/frontend/composables/useRefPipe.ts
@@ -5,7 +5,7 @@ export interface ConverterCallBack<Tx, Ty> { (x: Tx) : Ty}
 export function useRefPipe () {
   const stoppers: WatchStopHandle[] = []
 
-  function bindPrimitiveRefs<T> (refA: Ref<T>, refB: Ref<T>) {
+  function pipePrimitiveRefs<T> (refA: Ref<T>, refB: Ref<T>) {
     stoppers.push(watch(refA, (a: T) => {
       if (a !== refB.value) {
         refB.value = a
@@ -18,7 +18,7 @@ export function useRefPipe () {
     }, { immediate: true }))
   }
 
-  function bindPrimitiveRefsOfDifferentTypes<Ta, Tb> (refA: Ref<Ta>, refB: Ref<Tb>) {
+  function pipePrimitiveRefsOfDifferentTypes<Ta, Tb> (refA: Ref<Ta>, refB: Ref<Tb>) {
     stoppers.push(watch(refA, (a: Ta) => {
       if (JSON.stringify(a) !== JSON.stringify(refB.value)) {
         refB.value = <Tb>(a as unknown)
@@ -31,7 +31,7 @@ export function useRefPipe () {
     }, { immediate: true }))
   }
 
-  function bindObjectRefs<T> (refA: Ref<T>, refB: Ref<T>) {
+  function pipeObjectRefs<T> (refA: Ref<T>, refB: Ref<T>) {
     stoppers.push(watch(refA, (a: T) => {
       if (JSON.stringify(a) !== JSON.stringify(refB.value)) {
         refB.value = a
@@ -44,7 +44,7 @@ export function useRefPipe () {
     }, { immediate: true }))
   }
 
-  function bindArraysRefsOfDifferentTypes<Ta, Tb> (refA: Ref<Ta[]>, refB: Ref<Tb[]>, AtoB: ConverterCallBack<Ta, Tb>, BtoA: ConverterCallBack<Tb, Ta>) {
+  function pipeArraysRefsOfDifferentTypes<Ta, Tb> (refA: Ref<Ta[]>, refB: Ref<Tb[]>, AtoB: ConverterCallBack<Ta, Tb>, BtoA: ConverterCallBack<Tb, Ta>) {
     stoppers.push(watch(refA, (a: Ta[]) => {
       const AasB = a.map(el => AtoB(el))
       if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
@@ -63,5 +63,5 @@ export function useRefPipe () {
     stoppers.forEach(stopper => stopper())
   })
 
-  return { bindPrimitiveRefs, bindObjectRefs, bindPrimitiveRefsOfDifferentTypes, bindArraysRefsOfDifferentTypes }
+  return { pipePrimitiveRefs, pipeObjectRefs, pipePrimitiveRefsOfDifferentTypes, pipeArraysRefsOfDifferentTypes }
 }

From ff895bd4668418b15c9da8815ac0bede433ca6ac Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 2 Jul 2024 17:26:51 +0200
Subject: [PATCH 16/69] (BIDS-2859) useRefPipe() is now used, the gain of code
 simplicity and size is nice

---
 frontend/components/bc/NetworkSelector.vue    | 54 +++++--------------
 .../notifications/SubscriptionRow.vue         |  8 ++-
 frontend/composables/useRefPipe.ts            | 32 +++++------
 3 files changed, 36 insertions(+), 58 deletions(-)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index 4c6ac9e6d..2eb44bd22 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
+import type { ModelRef } from 'vue'
 import type { MultiBarItem } from '~/types/multiBar'
 import { IconNetwork } from '#components'
 import { ChainInfo, ChainID } from '~/types/network'
 
 const { availableNetworks, isNetworkDisabled } = useNetworkStore()
+const { pipeArraysRefsOfDifferentTypes, pipePrimitiveRefsOfDifferentTypes } = useRefPipe()
 
-/**
- * If `v-model:singleselect="..."` is in the props, then the user can select only one network.
- * If `v-model:multiselect="..."` is in the props, then the user can select several networks.
- */
-const liveStateMulti = defineModel<ChainID[]>('multiselect')
-const liveStateSingle = defineModel<ChainID>('singleselect')
+/** This ref is a chain ID if only one network can be selected, or an array of chain IDs if several networks can be selected. */
+const liveState = defineModel<ChainID|ChainID[]>()
 
-const selectionMulti = ref<string[]>([])
-const selectionSingle = ref<string>('')
+const selectionMulti = ref<string[]>()
+const selectionSingle = ref<string>()
 
 const buttons = computed(() => {
   const list: MultiBarItem[] = []
@@ -28,42 +26,16 @@ const buttons = computed(() => {
   return list
 })
 
-watch(liveStateMulti, (input: ChainID[]|undefined) => {
-  if (!input) {
-    selectionMulti.value = []
-    return
-  }
-  if (JSON.stringify(input) !== JSON.stringify(selectionMulti.value)) {
-    selectionMulti.value = input.map(id => String(id))
-  }
-})
-
-watch(liveStateSingle, (input: ChainID|undefined) => {
-  if (!input) {
-    selectionSingle.value = ''
-    return
-  }
-  if (String(input) !== selectionSingle.value) {
-    selectionSingle.value = String(input)
-  }
-})
-
-watch(selectionMulti, (output: string[]) => {
-  if (JSON.stringify(output) !== JSON.stringify(liveStateMulti.value)) {
-    liveStateMulti.value = output.map(id => Number(id) as ChainID)
-  }
-})
-
-watch(selectionSingle, (output: string) => {
-  if (Number(output) as ChainID !== liveStateSingle.value) {
-    liveStateSingle.value = Number(output) as ChainID
-  }
-})
+if (Array.isArray(liveState.value)) {
+  pipeArraysRefsOfDifferentTypes(selectionMulti, liveState as ModelRef<ChainID[]>)
+} else {
+  pipePrimitiveRefsOfDifferentTypes(selectionSingle, liveState)
+}
 </script>
 
 <template>
-  <BcToggleMultiBar v-if="liveStateMulti" v-model="selectionMulti" :buttons="buttons" />
-  <BcToggleSingleBar v-if="liveStateSingle" v-model="selectionSingle" :buttons="buttons" />
+  <BcToggleMultiBar v-if="selectionMulti" v-model="selectionMulti" :buttons="buttons" />
+  <BcToggleSingleBar v-if="selectionSingle" v-model="selectionSingle" :buttons="buttons" />
 </template>
 
 <style lang="scss">
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index d00d7c402..53c5dd12c 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -11,14 +11,20 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
+const { pipeObjectRefs } = useRefPipe()
 
 const type = computed(() => props.inputType || 'binary')
 const state = defineModel<boolean|number|ChainID[]>({ required: true })
+const networkSelectorState = ref<ChainID[]>([])
 const checked = ref<boolean>(false)
 const inputted = ref('')
 
 refreshUIfromState() // initial loading
 
+if (props.inputType === 'networks') {
+  pipeObjectRefs(networkSelectorState, state)
+}
+
 const tooltipLines = computed(() => {
   let options
   if (Array.isArray(state.value)) {
@@ -134,7 +140,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
       />
     </div>
     <div v-else class="right">
-      <BcNetworkSelector /><!--v-model:multiselect="state" -->
+      <BcNetworkSelector v-model="networkSelectorState" />
     </div>
   </div>
 </template>
diff --git a/frontend/composables/useRefPipe.ts b/frontend/composables/useRefPipe.ts
index 4f5aa452b..fd9c587be 100644
--- a/frontend/composables/useRefPipe.ts
+++ b/frontend/composables/useRefPipe.ts
@@ -1,58 +1,58 @@
-import { type WatchStopHandle } from 'vue'
+import { type ModelRef, type WatchStopHandle } from 'vue'
 
-export interface ConverterCallBack<Tx, Ty> { (x: Tx) : Ty}
+type MetaRef<T> = ModelRef<T|undefined> | Ref<T|undefined>
 
 export function useRefPipe () {
   const stoppers: WatchStopHandle[] = []
 
-  function pipePrimitiveRefs<T> (refA: Ref<T>, refB: Ref<T>) {
-    stoppers.push(watch(refA, (a: T) => {
+  function pipePrimitiveRefs<T> (refA: MetaRef<T>, refB: MetaRef<T>) {
+    stoppers.push(watch(refA, (a) => {
       if (a !== refB.value) {
         refB.value = a
       }
     }, { immediate: true }))
-    stoppers.push(watch(refB, (b: T) => {
+    stoppers.push(watch(refB, (b) => {
       if (b !== refA.value) {
         refA.value = b
       }
     }, { immediate: true }))
   }
 
-  function pipePrimitiveRefsOfDifferentTypes<Ta, Tb> (refA: Ref<Ta>, refB: Ref<Tb>) {
-    stoppers.push(watch(refA, (a: Ta) => {
+  function pipePrimitiveRefsOfDifferentTypes<Ta, Tb> (refA: MetaRef<Ta>, refB: MetaRef<Tb>) {
+    stoppers.push(watch(refA, (a) => {
       if (JSON.stringify(a) !== JSON.stringify(refB.value)) {
         refB.value = <Tb>(a as unknown)
       }
     }, { immediate: true }))
-    stoppers.push(watch(refB, (b: Tb) => {
+    stoppers.push(watch(refB, (b) => {
       if (JSON.stringify(b) !== JSON.stringify(refA.value)) {
         refA.value = <Ta>(b as unknown)
       }
     }, { immediate: true }))
   }
 
-  function pipeObjectRefs<T> (refA: Ref<T>, refB: Ref<T>) {
-    stoppers.push(watch(refA, (a: T) => {
+  function pipeObjectRefs<T> (refA: MetaRef<T>, refB: MetaRef<T>) {
+    stoppers.push(watch(refA, (a) => {
       if (JSON.stringify(a) !== JSON.stringify(refB.value)) {
         refB.value = a
       }
     }, { immediate: true }))
-    stoppers.push(watch(refB, (b: T) => {
+    stoppers.push(watch(refB, (b) => {
       if (JSON.stringify(b) !== JSON.stringify(refA.value)) {
         refA.value = b
       }
     }, { immediate: true }))
   }
 
-  function pipeArraysRefsOfDifferentTypes<Ta, Tb> (refA: Ref<Ta[]>, refB: Ref<Tb[]>, AtoB: ConverterCallBack<Ta, Tb>, BtoA: ConverterCallBack<Tb, Ta>) {
-    stoppers.push(watch(refA, (a: Ta[]) => {
-      const AasB = a.map(el => AtoB(el))
+  function pipeArraysRefsOfDifferentTypes<Ta, Tb> (refA: MetaRef<Ta[]>, refB: MetaRef<Tb[]>) {
+    stoppers.push(watch(refA, (a) => {
+      const AasB = a ? a.map(el => <Tb>(el as unknown)) : undefined
       if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
         refB.value = AasB
       }
     }, { immediate: true }))
-    stoppers.push(watch(refB, (b: Tb[]) => {
-      const BasA = b.map(el => BtoA(el))
+    stoppers.push(watch(refB, (b) => {
+      const BasA = b ? b.map(el => <Ta>(el as unknown)) : undefined
       if (JSON.stringify(BasA) !== JSON.stringify(refA.value)) {
         refA.value = BasA
       }

From 6c542a28b2ac955a9015e9b6aba24f057f0a8e09 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 2 Jul 2024 17:41:33 +0200
Subject: [PATCH 17/69] (BIDS-2859) useRefPipe() is now used, the gain of code
 simplicity and size is nice

---
 frontend/components/bc/NetworkSelector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index 2eb44bd22..e90556508 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -29,7 +29,7 @@ const buttons = computed(() => {
 if (Array.isArray(liveState.value)) {
   pipeArraysRefsOfDifferentTypes(selectionMulti, liveState as ModelRef<ChainID[]>)
 } else {
-  pipePrimitiveRefsOfDifferentTypes(selectionSingle, liveState)
+  pipePrimitiveRefsOfDifferentTypes(selectionSingle, liveState as ModelRef<ChainID>)
 }
 </script>
 

From 0b577d4f4054cf03658482c22d87387d23a90d65 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 2 Jul 2024 18:32:31 +0200
Subject: [PATCH 18/69] (BIDS-2859) important user instructions

---
 frontend/components/bc/NetworkSelector.vue    |  4 +-
 .../notifications/SubscriptionRow.vue         |  2 +-
 .../playground/PlaygroundDialog.vue           |  2 +-
 frontend/composables/useRefPipe.ts            | 56 ++++++++++---------
 4 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index e90556508..7838bde56 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -27,9 +27,9 @@ const buttons = computed(() => {
 })
 
 if (Array.isArray(liveState.value)) {
-  pipeArraysRefsOfDifferentTypes(selectionMulti, liveState as ModelRef<ChainID[]>)
+  pipeArraysRefsOfDifferentTypes(liveState as ModelRef<ChainID[]>, selectionMulti)
 } else {
-  pipePrimitiveRefsOfDifferentTypes(selectionSingle, liveState as ModelRef<ChainID>)
+  pipePrimitiveRefsOfDifferentTypes(liveState as ModelRef<ChainID>, selectionSingle)
 }
 </script>
 
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 53c5dd12c..c425cf652 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -22,7 +22,7 @@ const inputted = ref('')
 refreshUIfromState() // initial loading
 
 if (props.inputType === 'networks') {
-  pipeObjectRefs(networkSelectorState, state)
+  pipeObjectRefs(state, networkSelectorState)
 }
 
 const tooltipLines = computed(() => {
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 537fb0950..19f70988e 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -41,7 +41,7 @@ const accountSub: AccountSubscriptionState = {
   erc20: -1,
   erc721: true,
   erc1155: false,
-  networks: [1, 100, 8453],
+  networks: [17000, 10200],
   ignoreSpam: true
 }
 
diff --git a/frontend/composables/useRefPipe.ts b/frontend/composables/useRefPipe.ts
index fd9c587be..51788f3ea 100644
--- a/frontend/composables/useRefPipe.ts
+++ b/frontend/composables/useRefPipe.ts
@@ -5,58 +5,62 @@ type MetaRef<T> = ModelRef<T|undefined> | Ref<T|undefined>
 export function useRefPipe () {
   const stoppers: WatchStopHandle[] = []
 
+  /** Caution: Altough the bridge between the refs is two-way (ensuring that both values will always be equal), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref. */
   function pipePrimitiveRefs<T> (refA: MetaRef<T>, refB: MetaRef<T>) {
-    stoppers.push(watch(refA, (a) => {
-      if (a !== refB.value) {
-        refB.value = a
+    stoppers.push(watch(refA, () => {
+      if (refA.value !== refB.value) {
+        refB.value = refA.value
       }
     }, { immediate: true }))
-    stoppers.push(watch(refB, (b) => {
-      if (b !== refA.value) {
-        refA.value = b
+    stoppers.push(watch(refB, () => {
+      if (refB.value !== refA.value) {
+        refA.value = refB.value
       }
-    }, { immediate: true }))
+    }))
   }
 
+  /** Caution: Altough the bridge between the refs is two-way (ensuring that both values will always be equal), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref. */
   function pipePrimitiveRefsOfDifferentTypes<Ta, Tb> (refA: MetaRef<Ta>, refB: MetaRef<Tb>) {
-    stoppers.push(watch(refA, (a) => {
-      if (JSON.stringify(a) !== JSON.stringify(refB.value)) {
-        refB.value = <Tb>(a as unknown)
+    stoppers.push(watch(refA, () => {
+      if (JSON.stringify(refA.value) !== JSON.stringify(refB.value)) {
+        refB.value = (refA.value !== undefined) ? <Tb>(refA.value as unknown) : undefined
       }
     }, { immediate: true }))
-    stoppers.push(watch(refB, (b) => {
-      if (JSON.stringify(b) !== JSON.stringify(refA.value)) {
-        refA.value = <Ta>(b as unknown)
+    stoppers.push(watch(refB, () => {
+      if (JSON.stringify(refB.value) !== JSON.stringify(refA.value)) {
+        refA.value = (refB.value !== undefined) ? <Ta>(refB.value as unknown) : undefined
       }
-    }, { immediate: true }))
+    }))
   }
 
+  /** Caution: Altough the bridge between the refs is two-way (ensuring that both values will always be equal), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref. */
   function pipeObjectRefs<T> (refA: MetaRef<T>, refB: MetaRef<T>) {
-    stoppers.push(watch(refA, (a) => {
-      if (JSON.stringify(a) !== JSON.stringify(refB.value)) {
-        refB.value = a
+    stoppers.push(watch(refA, () => {
+      if (JSON.stringify(refA.value) !== JSON.stringify(refB.value)) {
+        refB.value = refA.value
       }
     }, { immediate: true }))
-    stoppers.push(watch(refB, (b) => {
-      if (JSON.stringify(b) !== JSON.stringify(refA.value)) {
-        refA.value = b
+    stoppers.push(watch(refB, () => {
+      if (JSON.stringify(refB.value) !== JSON.stringify(refA.value)) {
+        refA.value = refB.value
       }
-    }, { immediate: true }))
+    }))
   }
 
+  /** Caution: Altough the bridge between the refs is two-way (ensuring that both values will always be equal), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref. */
   function pipeArraysRefsOfDifferentTypes<Ta, Tb> (refA: MetaRef<Ta[]>, refB: MetaRef<Tb[]>) {
-    stoppers.push(watch(refA, (a) => {
-      const AasB = a ? a.map(el => <Tb>(el as unknown)) : undefined
+    stoppers.push(watch(refA, () => {
+      const AasB = refA.value ? refA.value.map(el => <Tb>(el as unknown)) : undefined
       if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
         refB.value = AasB
       }
     }, { immediate: true }))
-    stoppers.push(watch(refB, (b) => {
-      const BasA = b ? b.map(el => <Ta>(el as unknown)) : undefined
+    stoppers.push(watch(refB, () => {
+      const BasA = refB.value ? refB.value.map(el => <Ta>(el as unknown)) : undefined
       if (JSON.stringify(BasA) !== JSON.stringify(refA.value)) {
         refA.value = BasA
       }
-    }, { immediate: true }))
+    }))
   }
 
   onUnmounted(() => {

From ce57eab7a34b2db9f9ebd505964b8e7743c5fb2b Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 2 Jul 2024 22:39:22 +0200
Subject: [PATCH 19/69] (BIDS-2859) useRefBdridge shorter and more versatile

---
 frontend/components/bc/NetworkSelector.vue    |  6 +-
 .../notifications/SubscriptionRow.vue         |  5 +-
 frontend/composables/useRefBridge.ts          | 77 +++++++++++++++++++
 frontend/composables/useRefPipe.ts            | 71 -----------------
 4 files changed, 83 insertions(+), 76 deletions(-)
 create mode 100644 frontend/composables/useRefBridge.ts
 delete mode 100644 frontend/composables/useRefPipe.ts

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index 7838bde56..9aafec41c 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -5,7 +5,7 @@ import { IconNetwork } from '#components'
 import { ChainInfo, ChainID } from '~/types/network'
 
 const { availableNetworks, isNetworkDisabled } = useNetworkStore()
-const { pipeArraysRefsOfDifferentTypes, pipePrimitiveRefsOfDifferentTypes } = useRefPipe()
+const { bridgeArraysRefs, bridgePrimitiveRefs } = useRefBridge()
 
 /** This ref is a chain ID if only one network can be selected, or an array of chain IDs if several networks can be selected. */
 const liveState = defineModel<ChainID|ChainID[]>()
@@ -27,9 +27,9 @@ const buttons = computed(() => {
 })
 
 if (Array.isArray(liveState.value)) {
-  pipeArraysRefsOfDifferentTypes(liveState as ModelRef<ChainID[]>, selectionMulti)
+  bridgeArraysRefs(liveState as ModelRef<ChainID[]>, selectionMulti)
 } else {
-  pipePrimitiveRefsOfDifferentTypes(liveState as ModelRef<ChainID>, selectionSingle)
+  bridgePrimitiveRefs(liveState as ModelRef<ChainID>, selectionSingle)
 }
 </script>
 
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index c425cf652..4b0b9a482 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
+import type { ModelRef } from 'vue'
 import type { ChainID } from '~/types/network'
 
 const props = defineProps<{
@@ -11,7 +12,7 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
-const { pipeObjectRefs } = useRefPipe()
+const { bridgeArraysRefs } = useRefBridge()
 
 const type = computed(() => props.inputType || 'binary')
 const state = defineModel<boolean|number|ChainID[]>({ required: true })
@@ -22,7 +23,7 @@ const inputted = ref('')
 refreshUIfromState() // initial loading
 
 if (props.inputType === 'networks') {
-  pipeObjectRefs(state, networkSelectorState)
+  bridgeArraysRefs(state as ModelRef<ChainID[]>, networkSelectorState)
 }
 
 const tooltipLines = computed(() => {
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
new file mode 100644
index 000000000..ce3e5ce80
--- /dev/null
+++ b/frontend/composables/useRefBridge.ts
@@ -0,0 +1,77 @@
+import { type ModelRef, type WatchStopHandle } from 'vue'
+
+type vRef<T> = ModelRef<T|undefined> | Ref<T|undefined>
+interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
+
+// This composable solves 3 difficulties that arise when performing a two way binding of reactive variables:
+// 1. Different types. This is the main reason you need to bridge reactive variables: values of different types
+//    that must stay synchronized.
+// 2. Infinite loops. When one variable changes, the goal is to update the other one and you do not want that
+//    the update triggers the first one again and so on.
+// 3. At the moment the binding is created, it is typical that one variable has initial data and the other is
+//    empty. You do not want the empty one to erase the data when the binding starts. You want the data to
+//    update the other variable at first.
+
+export function useRefBridge () {
+  const stoppers: WatchStopHandle[] = []
+
+  /** Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref.
+   * @param AtoB (optional) Call-back function that converts the first value into the type of the second value. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
+   * @param BtoA (optional) Call-back function that converts the second value into the type of the first value. If not provided, a basic conversion is performed, which is safe only between strings and numbers. */
+  function bridgePrimitiveRefs<Ta, Tb> (refA: vRef<Ta>, refB: vRef<Tb>, AtoB?: ConverterCallback<Ta, Tb>, BtoA?: ConverterCallback<Tb, Ta>) : void {
+    stoppers.push(watch(refA, () => {
+      const AasB = (refA.value !== undefined) ? (AtoB ? AtoB(refA.value) : <Tb>(refA.value as unknown)) : undefined
+      if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
+        refB.value = AasB
+      }
+    }, { immediate: true }))
+    stoppers.push(watch(refB, () => {
+      const BasA = (refB.value !== undefined) ? (BtoA ? BtoA(refB.value) : <Ta>(refB.value as unknown)) : undefined
+      if (JSON.stringify(BasA) !== JSON.stringify(refA.value)) {
+        refA.value = BasA
+      }
+    }))
+  }
+
+  /** Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref.
+   * @param AtoB (optional) Call-back function that converts the elements of the first array into elements compatibles with the second array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
+   * @param BtoA (optional) Call-back function that converts the elements of the second array into elements compatibles with the first array. If not provided, a basic conversion is performed, which is safe only between strings and numbers. */
+  function bridgeArraysRefs<Ta, Tb> (refA: vRef<Ta[]>, refB: vRef<Tb[]>, AtoB?: ConverterCallback<Ta, Tb>, BtoA?: ConverterCallback<Tb, Ta>) : void {
+    stoppers.push(watch(refA, () => {
+      const AasB = refA.value ? refA.value.map(el => AtoB ? AtoB(el) : <Tb>(el as unknown)) : undefined
+      if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
+        refB.value = AasB
+      }
+    }, { immediate: true }))
+    stoppers.push(watch(refB, () => {
+      const BasA = refB.value ? refB.value.map(el => BtoA ? BtoA(el) : <Ta>(el as unknown)) : undefined
+      if (JSON.stringify(BasA) !== JSON.stringify(refA.value)) {
+        refA.value = BasA
+      }
+    }))
+  }
+
+  /** Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref.
+   * @param AtoB Call-back function that converts the first object into the type of the second object.
+   * @param BtoA Call-back function that converts the second object into the type of the first object. */
+  function bridgeObjectRefs<Ta, Tb> (refA: vRef<Ta>, refB: vRef<Tb>, AtoB: ConverterCallback<Ta, Tb>, BtoA: ConverterCallback<Tb, Ta>) : void {
+    stoppers.push(watch(refA, () => {
+      const AasB = (refA.value !== undefined) ? AtoB(refA.value) : undefined
+      if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
+        refB.value = AasB
+      }
+    }, { immediate: true }))
+    stoppers.push(watch(refB, () => {
+      const BasA = (refB.value !== undefined) ? BtoA(refB.value) : undefined
+      if (JSON.stringify(BasA) !== JSON.stringify(refA.value)) {
+        refA.value = BasA
+      }
+    }))
+  }
+
+  onUnmounted(() => {
+    stoppers.forEach(stopper => stopper())
+  })
+
+  return { bridgePrimitiveRefs, bridgeObjectRefs, bridgeArraysRefs }
+}
diff --git a/frontend/composables/useRefPipe.ts b/frontend/composables/useRefPipe.ts
deleted file mode 100644
index 51788f3ea..000000000
--- a/frontend/composables/useRefPipe.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { type ModelRef, type WatchStopHandle } from 'vue'
-
-type MetaRef<T> = ModelRef<T|undefined> | Ref<T|undefined>
-
-export function useRefPipe () {
-  const stoppers: WatchStopHandle[] = []
-
-  /** Caution: Altough the bridge between the refs is two-way (ensuring that both values will always be equal), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref. */
-  function pipePrimitiveRefs<T> (refA: MetaRef<T>, refB: MetaRef<T>) {
-    stoppers.push(watch(refA, () => {
-      if (refA.value !== refB.value) {
-        refB.value = refA.value
-      }
-    }, { immediate: true }))
-    stoppers.push(watch(refB, () => {
-      if (refB.value !== refA.value) {
-        refA.value = refB.value
-      }
-    }))
-  }
-
-  /** Caution: Altough the bridge between the refs is two-way (ensuring that both values will always be equal), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref. */
-  function pipePrimitiveRefsOfDifferentTypes<Ta, Tb> (refA: MetaRef<Ta>, refB: MetaRef<Tb>) {
-    stoppers.push(watch(refA, () => {
-      if (JSON.stringify(refA.value) !== JSON.stringify(refB.value)) {
-        refB.value = (refA.value !== undefined) ? <Tb>(refA.value as unknown) : undefined
-      }
-    }, { immediate: true }))
-    stoppers.push(watch(refB, () => {
-      if (JSON.stringify(refB.value) !== JSON.stringify(refA.value)) {
-        refA.value = (refB.value !== undefined) ? <Ta>(refB.value as unknown) : undefined
-      }
-    }))
-  }
-
-  /** Caution: Altough the bridge between the refs is two-way (ensuring that both values will always be equal), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref. */
-  function pipeObjectRefs<T> (refA: MetaRef<T>, refB: MetaRef<T>) {
-    stoppers.push(watch(refA, () => {
-      if (JSON.stringify(refA.value) !== JSON.stringify(refB.value)) {
-        refB.value = refA.value
-      }
-    }, { immediate: true }))
-    stoppers.push(watch(refB, () => {
-      if (JSON.stringify(refB.value) !== JSON.stringify(refA.value)) {
-        refA.value = refB.value
-      }
-    }))
-  }
-
-  /** Caution: Altough the bridge between the refs is two-way (ensuring that both values will always be equal), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref. */
-  function pipeArraysRefsOfDifferentTypes<Ta, Tb> (refA: MetaRef<Ta[]>, refB: MetaRef<Tb[]>) {
-    stoppers.push(watch(refA, () => {
-      const AasB = refA.value ? refA.value.map(el => <Tb>(el as unknown)) : undefined
-      if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
-        refB.value = AasB
-      }
-    }, { immediate: true }))
-    stoppers.push(watch(refB, () => {
-      const BasA = refB.value ? refB.value.map(el => <Ta>(el as unknown)) : undefined
-      if (JSON.stringify(BasA) !== JSON.stringify(refA.value)) {
-        refA.value = BasA
-      }
-    }))
-  }
-
-  onUnmounted(() => {
-    stoppers.forEach(stopper => stopper())
-  })
-
-  return { pipePrimitiveRefs, pipeObjectRefs, pipePrimitiveRefsOfDifferentTypes, pipeArraysRefsOfDifferentTypes }
-}

From c1db203c649aa5ca887232907103970128dca31e Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 3 Jul 2024 00:24:50 +0200
Subject: [PATCH 20/69] (BIDS-2859) useRefBridge: a bit faster on primitive
 types

---
 frontend/components/bc/NetworkSelector.vue    |  2 +-
 .../components/bc/toggle/MultiBarButton.vue   |  2 +-
 .../components/bc/toggle/SingleBarButton.vue  |  4 +--
 frontend/composables/useRefBridge.ts          | 28 +++++++++++--------
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index 9aafec41c..907555acb 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -10,7 +10,7 @@ const { bridgeArraysRefs, bridgePrimitiveRefs } = useRefBridge()
 /** This ref is a chain ID if only one network can be selected, or an array of chain IDs if several networks can be selected. */
 const liveState = defineModel<ChainID|ChainID[]>()
 
-const selectionMulti = ref<string[]>()
+let selectionMulti : ModelRef<string[]>
 const selectionSingle = ref<string>()
 
 const buttons = computed(() => {
diff --git a/frontend/components/bc/toggle/MultiBarButton.vue b/frontend/components/bc/toggle/MultiBarButton.vue
index 6a4ffdb1a..bfc2114e1 100644
--- a/frontend/components/bc/toggle/MultiBarButton.vue
+++ b/frontend/components/bc/toggle/MultiBarButton.vue
@@ -40,7 +40,7 @@ const icon = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-.button-tooltip{
+.button-tooltip {
   width: max-content;
   text-align: left;
   .individual{
diff --git a/frontend/components/bc/toggle/SingleBarButton.vue b/frontend/components/bc/toggle/SingleBarButton.vue
index 1e7ce05c1..8ed337b2a 100644
--- a/frontend/components/bc/toggle/SingleBarButton.vue
+++ b/frontend/components/bc/toggle/SingleBarButton.vue
@@ -17,7 +17,7 @@ const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
 </script>
 
 <template>
-  <BcTooltip :dont-open-permanently="true" :hover-delay="350">
+  <BcTooltip :dont-open-permanently="true" :hover-delay="350" :hide="!tooltip">
     <template #tooltip>
       <div class="button-tooltip">
         <div v-if="tooltip" class="individual">
@@ -44,7 +44,7 @@ const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
 <style lang="scss" scoped>
 @use '~/assets/css/fonts.scss';
 
-.button-tooltip{
+.button-tooltip {
   width: max-content;
   text-align: left;
   .individual{
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index ce3e5ce80..52515a49d 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -15,27 +15,31 @@ interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
 export function useRefBridge () {
   const stoppers: WatchStopHandle[] = []
 
-  /** Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref.
-   * @param AtoB (optional) Call-back function that converts the first value into the type of the second value. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
-   * @param BtoA (optional) Call-back function that converts the second value into the type of the first value. If not provided, a basic conversion is performed, which is safe only between strings and numbers. */
+  /** Bridges two reactive variables of primitive types (string, boolean, number, enum, etc).
+   *
+   * Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the second ref.
+   * @param AtoB (optional) Callback/Arrow function that converts the first value into the type of the second value. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
+   * @param BtoA (optional) Callback/Arrow function that converts the second value into the type of the first value. If not provided, a basic conversion is performed, which is safe only between strings and numbers. */
   function bridgePrimitiveRefs<Ta, Tb> (refA: vRef<Ta>, refB: vRef<Tb>, AtoB?: ConverterCallback<Ta, Tb>, BtoA?: ConverterCallback<Tb, Ta>) : void {
     stoppers.push(watch(refA, () => {
       const AasB = (refA.value !== undefined) ? (AtoB ? AtoB(refA.value) : <Tb>(refA.value as unknown)) : undefined
-      if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
+      if (AasB !== refB.value) {
         refB.value = AasB
       }
     }, { immediate: true }))
     stoppers.push(watch(refB, () => {
       const BasA = (refB.value !== undefined) ? (BtoA ? BtoA(refB.value) : <Ta>(refB.value as unknown)) : undefined
-      if (JSON.stringify(BasA) !== JSON.stringify(refA.value)) {
+      if (BasA !== refA.value) {
         refA.value = BasA
       }
     }))
   }
 
-  /** Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref.
-   * @param AtoB (optional) Call-back function that converts the elements of the first array into elements compatibles with the second array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
-   * @param BtoA (optional) Call-back function that converts the elements of the second array into elements compatibles with the first array. If not provided, a basic conversion is performed, which is safe only between strings and numbers. */
+  /** Bridges two reactive arrays.
+   *
+   * Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the second ref.
+   * @param AtoB (optional) Callback/Arrow function that converts the elements of the first array into elements compatibles with the second array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
+   * @param BtoA (optional) Callback/Arrow function that converts the elements of the second array into elements compatibles with the first array. If not provided, a basic conversion is performed, which is safe only between strings and numbers. */
   function bridgeArraysRefs<Ta, Tb> (refA: vRef<Ta[]>, refB: vRef<Tb[]>, AtoB?: ConverterCallback<Ta, Tb>, BtoA?: ConverterCallback<Tb, Ta>) : void {
     stoppers.push(watch(refA, () => {
       const AasB = refA.value ? refA.value.map(el => AtoB ? AtoB(el) : <Tb>(el as unknown)) : undefined
@@ -51,9 +55,11 @@ export function useRefBridge () {
     }))
   }
 
-  /** Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the empty ref.
-   * @param AtoB Call-back function that converts the first object into the type of the second object.
-   * @param BtoA Call-back function that converts the second object into the type of the first object. */
+  /** Bridges two reactive objects.
+   *
+   * Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the second ref.
+   * @param AtoB Callback/Arrow function that converts the first object into the type of the second object.
+   * @param BtoA Callback/Arrow function that converts the second object into the type of the first object. */
   function bridgeObjectRefs<Ta, Tb> (refA: vRef<Ta>, refB: vRef<Tb>, AtoB: ConverterCallback<Ta, Tb>, BtoA: ConverterCallback<Tb, Ta>) : void {
     stoppers.push(watch(refA, () => {
       const AasB = (refA.value !== undefined) ? AtoB(refA.value) : undefined

From 5e1ce6802e193c01ea7052ee7253df9dc700da55 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 3 Jul 2024 00:33:12 +0200
Subject: [PATCH 21/69] (BIDS-2859) useRefBridge: comments

---
 frontend/components/bc/NetworkSelector.vue    |  6 +++---
 .../notifications/SubscriptionRow.vue         |  4 ++--
 frontend/composables/useRefBridge.ts          | 20 +++++++++----------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index 907555acb..eae9d2f66 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -5,12 +5,12 @@ import { IconNetwork } from '#components'
 import { ChainInfo, ChainID } from '~/types/network'
 
 const { availableNetworks, isNetworkDisabled } = useNetworkStore()
-const { bridgeArraysRefs, bridgePrimitiveRefs } = useRefBridge()
+const { bridgeArrayRefs, bridgePrimitiveRefs } = useRefBridge()
 
 /** This ref is a chain ID if only one network can be selected, or an array of chain IDs if several networks can be selected. */
 const liveState = defineModel<ChainID|ChainID[]>()
 
-let selectionMulti : ModelRef<string[]>
+const selectionMulti = ref<string[]>()
 const selectionSingle = ref<string>()
 
 const buttons = computed(() => {
@@ -27,7 +27,7 @@ const buttons = computed(() => {
 })
 
 if (Array.isArray(liveState.value)) {
-  bridgeArraysRefs(liveState as ModelRef<ChainID[]>, selectionMulti)
+  bridgeArrayRefs(liveState as ModelRef<ChainID[]>, selectionMulti)
 } else {
   bridgePrimitiveRefs(liveState as ModelRef<ChainID>, selectionSingle)
 }
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 4b0b9a482..ac25d41aa 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
-const { bridgeArraysRefs } = useRefBridge()
+const { bridgeArrayRefs } = useRefBridge()
 
 const type = computed(() => props.inputType || 'binary')
 const state = defineModel<boolean|number|ChainID[]>({ required: true })
@@ -23,7 +23,7 @@ const inputted = ref('')
 refreshUIfromState() // initial loading
 
 if (props.inputType === 'networks') {
-  bridgeArraysRefs(state as ModelRef<ChainID[]>, networkSelectorState)
+  bridgeArrayRefs(state as ModelRef<ChainID[]>, networkSelectorState)
 }
 
 const tooltipLines = computed(() => {
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index 52515a49d..17e1ae91c 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -3,14 +3,14 @@ import { type ModelRef, type WatchStopHandle } from 'vue'
 type vRef<T> = ModelRef<T|undefined> | Ref<T|undefined>
 interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
 
-// This composable solves 3 difficulties that arise when performing a two way binding of reactive variables:
-// 1. Different types. This is the main reason you need to bridge reactive variables: values of different types
-//    that must stay synchronized.
-// 2. Infinite loops. When one variable changes, the goal is to update the other one and you do not want that
-//    the update triggers the first one again and so on.
-// 3. At the moment the binding is created, it is typical that one variable has initial data and the other is
-//    empty. You do not want the empty one to erase the data when the binding starts. You want the data to
-//    update the other variable at first.
+/** This composable solves 3 difficulties that arise when performing a two way binding of reactive variables:
+ *  1. Different types. This is the main reason you need to bridge reactive variables: values of different types
+ *     that must stay synchronized.
+ *  2. Infinite loops. When one variable changes, the goal is to update the other one and you do not want that
+ *     the update triggers the first one again and so on.
+ *  3. At the moment the binding is created, it is typical that one variable has initial data and the other is
+ *     empty. You do not want the empty one to erase the initial data when the binding starts. You want this data
+ *     to update the other variable at first. */
 
 export function useRefBridge () {
   const stoppers: WatchStopHandle[] = []
@@ -40,7 +40,7 @@ export function useRefBridge () {
    * Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the second ref.
    * @param AtoB (optional) Callback/Arrow function that converts the elements of the first array into elements compatibles with the second array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
    * @param BtoA (optional) Callback/Arrow function that converts the elements of the second array into elements compatibles with the first array. If not provided, a basic conversion is performed, which is safe only between strings and numbers. */
-  function bridgeArraysRefs<Ta, Tb> (refA: vRef<Ta[]>, refB: vRef<Tb[]>, AtoB?: ConverterCallback<Ta, Tb>, BtoA?: ConverterCallback<Tb, Ta>) : void {
+  function bridgeArrayRefs<Ta, Tb> (refA: vRef<Ta[]>, refB: vRef<Tb[]>, AtoB?: ConverterCallback<Ta, Tb>, BtoA?: ConverterCallback<Tb, Ta>) : void {
     stoppers.push(watch(refA, () => {
       const AasB = refA.value ? refA.value.map(el => AtoB ? AtoB(el) : <Tb>(el as unknown)) : undefined
       if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
@@ -79,5 +79,5 @@ export function useRefBridge () {
     stoppers.forEach(stopper => stopper())
   })
 
-  return { bridgePrimitiveRefs, bridgeObjectRefs, bridgeArraysRefs }
+  return { bridgePrimitiveRefs, bridgeArrayRefs, bridgeObjectRefs }
 }

From 6546991ba76ad90e1fba2120649fcd48af298d35 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 3 Jul 2024 13:02:38 +0200
Subject: [PATCH 22/69] (BIDS-2859) useRefBridge is better, thanks Alexander
 for the idea

---
 frontend/components/bc/NetworkSelector.vue    |  17 +--
 .../notifications/SubscriptionRow.vue         |   6 +-
 frontend/composables/useRefBridge.ts          | 128 +++++++++---------
 frontend/stores/useNetworkStore.ts            |   2 +-
 4 files changed, 68 insertions(+), 85 deletions(-)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index eae9d2f66..b3ae48e76 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import type { ModelRef } from 'vue'
 import type { MultiBarItem } from '~/types/multiBar'
 import { IconNetwork } from '#components'
 import { ChainInfo, ChainID } from '~/types/network'
 
 const { availableNetworks, isNetworkDisabled } = useNetworkStore()
-const { bridgeArrayRefs, bridgePrimitiveRefs } = useRefBridge()
 
 /** This ref is a chain ID if only one network can be selected, or an array of chain IDs if several networks can be selected. */
 const liveState = defineModel<ChainID|ChainID[]>()
 
-const selectionMulti = ref<string[]>()
-const selectionSingle = ref<string>()
+const selection = Array.isArray(liveState.value)
+  ? useArrayRefBridge<ChainID, string>(liveState as Ref<ChainID[]>)
+  : usePrimitiveRefBridge<ChainID, string>(liveState as Ref<ChainID>)
 
 const buttons = computed(() => {
   const list: MultiBarItem[] = []
@@ -25,17 +24,11 @@ const buttons = computed(() => {
   }))
   return list
 })
-
-if (Array.isArray(liveState.value)) {
-  bridgeArrayRefs(liveState as ModelRef<ChainID[]>, selectionMulti)
-} else {
-  bridgePrimitiveRefs(liveState as ModelRef<ChainID>, selectionSingle)
-}
 </script>
 
 <template>
-  <BcToggleMultiBar v-if="selectionMulti" v-model="selectionMulti" :buttons="buttons" />
-  <BcToggleSingleBar v-if="selectionSingle" v-model="selectionSingle" :buttons="buttons" />
+  <BcToggleMultiBar v-if="Array.isArray(selection)" v-model="selection" :buttons="buttons" />
+  <BcToggleSingleBar v-else v-model="selection" :buttons="buttons" />
 </template>
 
 <style lang="scss">
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index ac25d41aa..148ff942c 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -12,19 +12,15 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
-const { bridgeArrayRefs } = useRefBridge()
 
 const type = computed(() => props.inputType || 'binary')
 const state = defineModel<boolean|number|ChainID[]>({ required: true })
-const networkSelectorState = ref<ChainID[]>([])
 const checked = ref<boolean>(false)
 const inputted = ref('')
 
 refreshUIfromState() // initial loading
 
-if (props.inputType === 'networks') {
-  bridgeArrayRefs(state as ModelRef<ChainID[]>, networkSelectorState)
-}
+const networkSelectorState = (props.inputType !== 'networks') ? undefined : state as ModelRef<ChainID[]>
 
 const tooltipLines = computed(() => {
   let options
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index 17e1ae91c..70578b2c3 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -1,83 +1,77 @@
-import { type ModelRef, type WatchStopHandle } from 'vue'
+import { type ModelRef } from 'vue'
 
-type vRef<T> = ModelRef<T|undefined> | Ref<T|undefined>
 interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
 
-/** This composable solves 3 difficulties that arise when performing a two way binding of reactive variables:
+/** This composable creates a two-way pipe between reactive variables of 2 different types. The values circulate back
+ *  and forth transparently from A to B and B to A, the reactivity is preserved on both ends, the types are converted
+ *  when the values pass through.
+ *  It solves 3 difficulties:
  *  1. Different types. This is the main reason you need to bridge reactive variables: values of different types
  *     that must stay synchronized.
  *  2. Infinite loops. When one variable changes, the goal is to update the other one and you do not want that
  *     the update triggers the first one again and so on.
  *  3. At the moment the binding is created, it is typical that one variable has initial data and the other is
- *     empty. You do not want the empty one to erase the initial data when the binding starts. You want this data
- *     to update the other variable at first. */
-
-export function useRefBridge () {
-  const stoppers: WatchStopHandle[] = []
+ *     empty. You do not want the empty one to erase the initial data when the binding starts.
+ * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
+ * @param origToCreated (optional) Callback/Arrow function that converts an element in the original array into the type of the elements in the created array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
+ * @param createdToOrig (optional) Callback/Arrow function that converts an element in the created array into the type of the elements in the original array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
+ * */
+export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated[]> {
+  const createdRef = ref<Tcreated[]>()
+  const stopperForth = watch(origRef, () => {
+    const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : <Tcreated>(el as unknown)) : undefined
+    if (JSON.stringify(OasC) !== JSON.stringify(createdRef.value)) {
+      createdRef.value = OasC
+    }
+  }, { immediate: true })
+  const stopperBack = watch(createdRef, () => {
+    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : <Torig>(el as unknown)) : undefined
+    if (JSON.stringify(CasO) !== JSON.stringify(origRef.value)) {
+      origRef.value = CasO as Torig[]
+    }
+  })
 
-  /** Bridges two reactive variables of primitive types (string, boolean, number, enum, etc).
-   *
-   * Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the second ref.
-   * @param AtoB (optional) Callback/Arrow function that converts the first value into the type of the second value. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
-   * @param BtoA (optional) Callback/Arrow function that converts the second value into the type of the first value. If not provided, a basic conversion is performed, which is safe only between strings and numbers. */
-  function bridgePrimitiveRefs<Ta, Tb> (refA: vRef<Ta>, refB: vRef<Tb>, AtoB?: ConverterCallback<Ta, Tb>, BtoA?: ConverterCallback<Tb, Ta>) : void {
-    stoppers.push(watch(refA, () => {
-      const AasB = (refA.value !== undefined) ? (AtoB ? AtoB(refA.value) : <Tb>(refA.value as unknown)) : undefined
-      if (AasB !== refB.value) {
-        refB.value = AasB
-      }
-    }, { immediate: true }))
-    stoppers.push(watch(refB, () => {
-      const BasA = (refB.value !== undefined) ? (BtoA ? BtoA(refB.value) : <Ta>(refB.value as unknown)) : undefined
-      if (BasA !== refA.value) {
-        refA.value = BasA
-      }
-    }))
-  }
+  onUnmounted(() => {
+    stopperBack()
+    stopperForth()
+  })
 
-  /** Bridges two reactive arrays.
-   *
-   * Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the second ref.
-   * @param AtoB (optional) Callback/Arrow function that converts the elements of the first array into elements compatibles with the second array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
-   * @param BtoA (optional) Callback/Arrow function that converts the elements of the second array into elements compatibles with the first array. If not provided, a basic conversion is performed, which is safe only between strings and numbers. */
-  function bridgeArrayRefs<Ta, Tb> (refA: vRef<Ta[]>, refB: vRef<Tb[]>, AtoB?: ConverterCallback<Ta, Tb>, BtoA?: ConverterCallback<Tb, Ta>) : void {
-    stoppers.push(watch(refA, () => {
-      const AasB = refA.value ? refA.value.map(el => AtoB ? AtoB(el) : <Tb>(el as unknown)) : undefined
-      if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
-        refB.value = AasB
-      }
-    }, { immediate: true }))
-    stoppers.push(watch(refB, () => {
-      const BasA = refB.value ? refB.value.map(el => BtoA ? BtoA(el) : <Ta>(el as unknown)) : undefined
-      if (JSON.stringify(BasA) !== JSON.stringify(refA.value)) {
-        refA.value = BasA
-      }
-    }))
-  }
+  return createdRef as Ref<Tcreated[]>
+}
 
-  /** Bridges two reactive objects.
-   *
-   * Caution: Altough the bridge between the refs is two-way (ensuring that the values will always update each other), the order of the parameters here is very important. At the moment the bridge is created, the values of the refs are not yet equal (for example one ref has data and the other ref is still undefined). To make sure that the empty value does not cross the bridge to erase your initial data, the first parameter must be the ref containing the initial data. Then, at the creation of the bridge, the initial data fills the second ref.
-   * @param AtoB Callback/Arrow function that converts the first object into the type of the second object.
-   * @param BtoA Callback/Arrow function that converts the second object into the type of the first object. */
-  function bridgeObjectRefs<Ta, Tb> (refA: vRef<Ta>, refB: vRef<Tb>, AtoB: ConverterCallback<Ta, Tb>, BtoA: ConverterCallback<Tb, Ta>) : void {
-    stoppers.push(watch(refA, () => {
-      const AasB = (refA.value !== undefined) ? AtoB(refA.value) : undefined
-      if (JSON.stringify(AasB) !== JSON.stringify(refB.value)) {
-        refB.value = AasB
-      }
-    }, { immediate: true }))
-    stoppers.push(watch(refB, () => {
-      const BasA = (refB.value !== undefined) ? BtoA(refB.value) : undefined
-      if (JSON.stringify(BasA) !== JSON.stringify(refA.value)) {
-        refA.value = BasA
-      }
-    }))
-  }
+/** This composable creates a two-way pipe between reactive variables of 2 different types. The values circulate back
+ *  and forth transparently from A to B and B to A, the reactivity is preserved on both ends, the types are converted
+ *  when the values pass through.
+ *  It solves 3 difficulties:
+ *  1. Different types. This is the main reason you need to bridge reactive variables: values of different types
+ *     that must stay synchronized.
+ *  2. Infinite loops. When one variable changes, the goal is to update the other one and you do not want that
+ *     the update triggers the first one again and so on.
+ *  3. At the moment the binding is created, it is typical that one variable has initial data and the other is
+ *     empty. You do not want the empty one to erase the initial data when the binding starts.
+ * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
+ * @param origToCreated (optional) Callback/Arrow function that converts the value in the original ref into the type of the value in the created ref. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
+ * @param createdToOrig (optional) Callback/Arrow function that converts the value in the created ref into the type of the value in the original ref. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
+ * */
+export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated> {
+  const createdRef = ref<Tcreated>()
+  const stopperForth = watch(origRef, () => {
+    const OasC = (origRef.value !== undefined) ? (origToCreated ? origToCreated(origRef.value) : <Tcreated>(origRef.value as unknown)) : undefined
+    if (OasC !== createdRef.value) {
+      createdRef.value = OasC
+    }
+  }, { immediate: true })
+  const stopperBack = watch(createdRef, () => {
+    const CasO = (createdRef.value !== undefined) ? (createdToOrig ? createdToOrig(createdRef.value) : <Torig>(createdRef.value as unknown)) : undefined
+    if (CasO !== origRef.value) {
+      origRef.value = CasO as Torig
+    }
+  })
 
   onUnmounted(() => {
-    stoppers.forEach(stopper => stopper())
+    stopperBack()
+    stopperForth()
   })
 
-  return { bridgePrimitiveRefs, bridgeArrayRefs, bridgeObjectRefs }
+  return createdRef as Ref<Tcreated>
 }
diff --git a/frontend/stores/useNetworkStore.ts b/frontend/stores/useNetworkStore.ts
index 0662d7356..2b425e391 100644
--- a/frontend/stores/useNetworkStore.ts
+++ b/frontend/stores/useNetworkStore.ts
@@ -44,7 +44,7 @@ export function useNetworkStore () {
   const networkInfo = computed(() => networkTs.ChainInfo[currentNetwork.value])
 
   function isNetworkDisabled (chainId: networkTs.ChainID) : boolean {
-    // TODO: return `true` for everything once we are ready
+    // TODO: return `false` for everything once we are ready
     return !useRuntimeConfig().public.showInDevelopment && chainId !== currentNetwork.value
   }
 

From 834080796e79e826df78790ed3eb7295a1fea0ee Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Thu, 4 Jul 2024 13:25:30 +0200
Subject: [PATCH 23/69] (BIDS-2859) added features to SingleBar and MultiBar

---
 frontend/components/bc/NetworkSelector.vue    |  3 +-
 frontend/components/bc/toggle/MultiBar.vue    | 24 ++++----
 .../components/bc/toggle/MultiBarButton.vue   |  4 +-
 frontend/components/bc/toggle/SingleBar.vue   | 18 +++++-
 .../components/bc/toggle/SingleBarButton.vue  | 48 +++++++++------
 .../creation/DashboardCreationNetworkMask.vue |  5 ++
 .../creation/DashboardCreationTypeMask.vue    | 10 +++-
 ...iptionModal.vue => SubscriptionDialog.vue} |  4 +-
 .../notifications/SubscriptionRow.vue         | 40 +++++++------
 .../playground/PlaygroundDialog.vue           |  4 +-
 .../playground/PlaygroundStyling.vue          | 10 +++-
 frontend/composables/useRefBridge.ts          | 59 ++++++++++++++++---
 frontend/i18n/en.json                         |  6 +-
 13 files changed, 163 insertions(+), 72 deletions(-)
 rename frontend/components/notifications/{SubscriptionModal.vue => SubscriptionDialog.vue} (99%)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index b3ae48e76..46e8d3408 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -15,6 +15,7 @@ const selection = Array.isArray(liveState.value)
 const buttons = computed(() => {
   const list: MultiBarItem[] = []
   availableNetworks.value.forEach(chainId => list.push({
+    className: 'button-size',
     component: IconNetwork,
     componentProps: { chainId, harmonizePerceivedSize: true, colored: true },
     componentClass: 'maximum',
@@ -28,7 +29,7 @@ const buttons = computed(() => {
 
 <template>
   <BcToggleMultiBar v-if="Array.isArray(selection)" v-model="selection" :buttons="buttons" />
-  <BcToggleSingleBar v-else v-model="selection" :buttons="buttons" />
+  <BcToggleSingleBar v-else v-model="selection" :buttons="buttons" layout="minimal" />
 </template>
 
 <style lang="scss">
diff --git a/frontend/components/bc/toggle/MultiBar.vue b/frontend/components/bc/toggle/MultiBar.vue
index 3239286b0..115973dbe 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -10,11 +10,10 @@ const props = defineProps<Props>()
 
 const selected = defineModel<string[]>({ required: true })
 
-const inital: Record<string, boolean> = {}
 const modelValues = ref<Record<string, boolean>>(props.buttons.reduce((map, { value }) => {
   map[value] = selected.value.includes(value)
   return map
-}, inital))
+}, {} as Record<string, boolean>))
 
 watch(modelValues, () => {
   const list: string[] = []
@@ -25,24 +24,23 @@ watch(modelValues, () => {
   })
   selected.value = list
 }, { deep: true })
-
 </script>
 
 <template>
   <div class="bc-togglebar">
     <BcToggleMultiBarButton
-      v-for="icon in props.buttons"
-      :key="icon.value"
-      v-model="modelValues[icon.value]"
-      :class="icon.className"
-      :icon="icon.icon"
-      :tooltip="icon.tooltip"
-      :disabled="icon.disabled"
+      v-for="button in props.buttons"
+      :key="button.value"
+      v-model="modelValues[button.value]"
+      :class="button.className"
+      :icon="button.icon"
+      :tooltip="button.tooltip"
+      :disabled="button.disabled"
     >
       <template #icon>
-        <slot :name="icon.value">
-          <component :is="icon.component" v-if="icon.component" v-bind="icon.componentProps" :class="icon.componentClass" />
-          <FontAwesomeIcon v-else-if="icon.icon" :icon="icon.icon" />
+        <slot :name="button.value">
+          <component :is="button.component" v-if="button.component" v-bind="button.componentProps" :class="button.componentClass" />
+          <FontAwesomeIcon v-else-if="button.icon" :icon="button.icon" />
         </slot>
       </template>
     </BcToggleMultiBarButton>
diff --git a/frontend/components/bc/toggle/MultiBarButton.vue b/frontend/components/bc/toggle/MultiBarButton.vue
index bfc2114e1..f06caf724 100644
--- a/frontend/components/bc/toggle/MultiBarButton.vue
+++ b/frontend/components/bc/toggle/MultiBarButton.vue
@@ -48,10 +48,10 @@ const icon = computed(() => {
   }
 }
 .bc-toggle {
+  min-width: 30px;
+  min-height: 30px;
   &.p-button {
     &.p-togglebutton {
-      width: 30px;
-      height: 30px;
       padding: 2px;
       border-style: none;
       color: var(--container-color);
diff --git a/frontend/components/bc/toggle/SingleBar.vue b/frontend/components/bc/toggle/SingleBar.vue
index f60f5b364..1b73eaac8 100644
--- a/frontend/components/bc/toggle/SingleBar.vue
+++ b/frontend/components/bc/toggle/SingleBar.vue
@@ -2,7 +2,9 @@
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import type { Component } from 'vue'
 interface Props {
+  layout: 'minimal' | 'gaudy'
   buttons: {
+    className?: string,
     icon?: IconDefinition,
     text?: string,
     subText?: string,
@@ -12,7 +14,6 @@ interface Props {
     value: string,
     tooltip?: string,
     disabled?: boolean,
-
   }[],
   allowDeselect?: boolean // if true, clicking the selected button will deselect it causing the whole SingleBar not to have a value
 }
@@ -41,7 +42,7 @@ function onButtonClicked (value: string) {
 </script>
 
 <template>
-  <div class="bc-togglebar">
+  <div class="bc-togglebar" :class="layout">
     <BcToggleSingleBarButton
       v-for="button in props.buttons"
       :key="button.value"
@@ -51,6 +52,8 @@ function onButtonClicked (value: string) {
       :selected="values[button.value]"
       :tooltip="button.tooltip"
       :disabled="button.disabled"
+      :class="button.className"
+      :layout="layout"
       @click="!button.disabled && onButtonClicked(button.value)"
     >
       <template #icon>
@@ -65,6 +68,15 @@ function onButtonClicked (value: string) {
 <style lang="scss" scoped>
 .bc-togglebar {
   display: inline-flex;
-  gap: var(--padding);
+  &.gaudy {
+    gap: var(--padding);
+  }
+  &.minimal {
+    gap: var(--padding-small);
+    padding: 7px 10px;
+    background-color: var(--container-background);
+    border: solid 1px var(--container-border-color);
+    border-radius: var(--border-radius);
+  }
 }
 </style>
diff --git a/frontend/components/bc/toggle/SingleBarButton.vue b/frontend/components/bc/toggle/SingleBarButton.vue
index 8ed337b2a..9f217b507 100644
--- a/frontend/components/bc/toggle/SingleBarButton.vue
+++ b/frontend/components/bc/toggle/SingleBarButton.vue
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import BcTooltip from '../BcTooltip.vue'
 
 interface Props {
+  layout: 'minimal' | 'gaudy'
   icon?: IconDefinition,
   text?: string,
   subText?: string,
@@ -23,14 +24,15 @@ const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
         <div v-if="tooltip" class="individual">
           {{ tooltip }}
         </div>
+        <div>{{ selected ? $t('common.selected'): $t('common.deselected') }}</div>
       </div>
     </template>
-    <ToggleButton class="bc-toggle" :disabled="disabled" :model-value="selected">
+    <ToggleButton class="bc-toggle" :class="layout" :disabled="disabled" :model-value="selected">
       <template #icon="slotProps">
         <slot name="icon" v-bind="slotProps">
           <FontAwesomeIcon v-if="icon" :icon="icon" />
         </slot>
-        <div class="label">
+        <div v-if="text" class="label">
           {{ text }}
           <div v-if="subText" class="sub">
             {{ subText }}
@@ -52,26 +54,38 @@ const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
   }
 }
 .bc-toggle {
+  min-width: 30px;
+  min-height: 30px;
   &.p-button {
     &.p-togglebutton {
-      display: flex;
-      flex-grow: 1;
-      flex-direction: column;
-      gap: 11px;
+      &.gaudy {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        gap: 11px;
+        padding: v-bind(topBottomPadding) 0;
+        border: 1px var(--container-border-color) solid;
+        border-radius: var(--border-radius);
+        background-color: var(--container-background);
+        color: var(--text-color);
 
-      width: 100%;
-      height: 100%;
-      padding: v-bind(topBottomPadding) 0;
-      border: 1px var(--container-border-color) solid;
-      border-radius: var(--border-radius);
-      background-color: var(--container-background);
-      color: var(--text-color);
-
-      &.p-highlight {
-        border-color: var(--button-color-active);
-        color: var(--button-color-active);
+        &.p-highlight {
+          border-color: var(--button-color-active);
+          color: var(--button-color-active);
+        }
       }
+      &.minimal {
+        padding: 2px;
+        border-style: none;
+        color: var(--container-color);
+        background-color: var(--container-border-color);
 
+        &:not(.p-highlight) {
+          background-color: var(--container-background);
+        }
+      }
       :deep(.p-button-label) {
         display: none;
       }
diff --git a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
index 2c2489dea..cfbd38352 100644
--- a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
@@ -13,6 +13,7 @@ watch(selection, (value) => { network.value = Number(value) as ChainID })
 const buttonList = availableNetworks.value.map((chainId) => {
   return {
     value: String(chainId),
+    className: 'dashboard-creation-singletoggle-button',
     text: ChainInfo[chainId].family as string,
     subText: (ChainInfo[chainId].name !== ChainInfo[chainId].family as string) ? ChainInfo[chainId].name : ChainInfo[chainId].description,
     disabled: isNetworkDisabled(chainId),
@@ -46,6 +47,7 @@ const continueDisabled = computed(() => {
         :buttons="buttonList"
         :initial="String(currentNetwork)"
         :are-buttons-networks="true"
+        layout="gaudy"
       />
       <div class="row-container">
         <Button @click="emit('back')">
@@ -85,6 +87,9 @@ const continueDisabled = computed(() => {
 </style>
 
 <style lang="scss">
+  .dashboard-creation-singletoggle-button {
+    width: 100%;
+  }
   .dashboard-creation-button-network-icon {
     width: 100%;
     height: 100%;
diff --git a/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue b/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
index 203b41c73..54a0b9fe2 100644
--- a/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
@@ -15,6 +15,7 @@ const type = defineModel<DashboardType | ''>('type', { required: true })
 
 const typeButtons = [
   {
+    className: 'dashboard-network-creation-singletoggle-button',
     text: $t('dashboard.creation.type.accounts'),
     subText: $t('common.coming_soon'),
     value: 'account',
@@ -22,6 +23,7 @@ const typeButtons = [
     disabled: props.accountsDisabled
   },
   {
+    className: 'dashboard-network-creation-singletoggle-button',
     text: $t('dashboard.creation.type.validators'),
     value: 'validator',
     component: IconValidator,
@@ -56,7 +58,7 @@ const next = () => {
       <div class="subtitle_text">
         {{ $t('dashboard.creation.type.subtitle') }}
       </div>
-      <BcToggleSingleBar v-model="type" class="single-bar" :buttons="typeButtons" :initial="type" />
+      <BcToggleSingleBar v-model="type" class="single-bar" :buttons="typeButtons" :initial="type" layout="gaudy" />
       <div class="row-container">
         <InputText v-if="isLoggedIn" v-model="name" :placeholder="$t('dashboard.creation.type.placeholder')" class="input-field" @keypress.enter="next" />
         <Button class="button" :disabled="continueDisabled" @click="next">
@@ -97,3 +99,9 @@ const next = () => {
     }
   }
 </style>
+
+<style lang="scss">
+.dashboard-network-creation-singletoggle-button {
+  width: 100%;
+}
+</style>
diff --git a/frontend/components/notifications/SubscriptionModal.vue b/frontend/components/notifications/SubscriptionDialog.vue
similarity index 99%
rename from frontend/components/notifications/SubscriptionModal.vue
rename to frontend/components/notifications/SubscriptionDialog.vue
index 4f82f9acd..c31334450 100644
--- a/frontend/components/notifications/SubscriptionModal.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -30,9 +30,9 @@ watch(props, (props) => {
   if (props.validatorSub) {
     tPath = 'notifications.subscriptions.validators.'
     validatorSubModifiable.value = { offlineGroup: -1, realTime: false, ...structuredClone(toRaw(props.validatorSub)) }
-  } else {
+  } else if (props.accountSub) {
     tPath = 'notifications.subscriptions.accounts.'
-    accountSubModifiable.value = structuredClone(toRaw(props.accountSub!))
+    accountSubModifiable.value = structuredClone(toRaw(props.accountSub))
   }
 }, { immediate: true })
 
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 148ff942c..7d335945d 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -13,14 +13,31 @@ const props = defineProps<{
 
 const { t } = useI18n()
 
-const type = computed(() => props.inputType || 'binary')
 const state = defineModel<boolean|number|ChainID[]>({ required: true })
+const networkSelectorState = state as ModelRef<ChainID[]>
+
+const type = computed(() => props.inputType || 'binary')
 const checked = ref<boolean>(false)
 const inputted = ref('')
 
 refreshUIfromState() // initial loading
 
-const networkSelectorState = (props.inputType !== 'networks') ? undefined : state as ModelRef<ChainID[]>
+function refreshUIfromState () : void {
+  switch (type.value) {
+    case 'amount' :
+    case 'percent' :
+      state.value = state.value as number
+      inputted.value = String(state.value)
+      checked.value = (state.value >= 0)
+      correctUserInput()
+      break
+    case 'binary' :
+      checked.value = state.value as boolean
+      break
+    case 'networks' :
+      break
+  }
+}
 
 const tooltipLines = computed(() => {
   let options
@@ -83,22 +100,7 @@ function isThisAvalidInput (input: string | Ref<string>) : boolean {
   return !!input && !isNaN(Number(input)) && Number(input) >= 0
 }
 
-function refreshUIfromState () : void {
-  switch (type.value) {
-    case 'amount' :
-    case 'percent' :
-      state.value = state.value as number
-      inputted.value = String(state.value)
-      checked.value = (state.value >= 0)
-      correctUserInput()
-      break
-    case 'binary' :
-      checked.value = state.value as boolean
-      break
-    case 'networks' :
-      break
-  }
-}
+const test = ref<number>(10200)
 
 const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
 </script>
@@ -137,7 +139,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
       />
     </div>
     <div v-else class="right">
-      <BcNetworkSelector v-model="networkSelectorState" />
+      <BcNetworkSelector v-model="test" />
     </div>
   </div>
 </template>
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 19f70988e..349ac04bb 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BcDialogConfirm, NotificationsSubscriptionModal } from '#components'
+import { BcDialogConfirm, NotificationsSubscriptionDialog } from '#components'
 import type { ValidatorSubscriptionState, AccountSubscriptionState } from '~/types/subscriptionModal'
 
 const dialog = useDialog()
@@ -46,7 +46,7 @@ const accountSub: AccountSubscriptionState = {
 }
 
 function openSubscriptions (props: any) {
-  dialog.open(NotificationsSubscriptionModal, {
+  dialog.open(NotificationsSubscriptionDialog, {
     data: props,
     onClose: modified => onClose(modified?.data)
   })
diff --git a/frontend/components/playground/PlaygroundStyling.vue b/frontend/components/playground/PlaygroundStyling.vue
index ecf0f1ded..a4938532f 100644
--- a/frontend/components/playground/PlaygroundStyling.vue
+++ b/frontend/components/playground/PlaygroundStyling.vue
@@ -25,7 +25,7 @@ const completeList = [{ value: 'attestation' }, { value: 'proposal', component:
 const selectedList = ref<string[]>(['attestation', 'proposal'])
 
 const selectedType = ref<string>('Validators')
-const allTypes = [{ text: 'Accounts', value: 'Accounts', component: IconAccount }, { text: 'Validators', value: 'Validators', component: IconValidator }]
+const allTypes = [{ text: 'Accounts', value: 'Accounts', component: IconAccount, className: 'singletoggle-button' }, { text: 'Validators', value: 'Validators', component: IconValidator, className: 'singletoggle-button' }]
 
 const dropodownSelection = ref<string | undefined>()
 const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No' }, { value: 'maybe', label: 'Maybe we need a bigger label' }]
@@ -141,7 +141,7 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
       <h1>Single Toggle</h1>
       <div class="element_container">
         selectedType: {{ selectedType }}
-        <BcToggleSingleBar v-model="selectedType" :buttons="allTypes" class="single_bar_container" :allow-deselect="true" />
+        <BcToggleSingleBar v-model="selectedType" :buttons="allTypes" class="single_bar_container" layout="gaudy" :allow-deselect="true" />
       </div>
     </TabPanel>
     <TabPanel header="Dropdown">
@@ -216,3 +216,9 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
   width: 600px
 }
 </style>
+
+<style lang="scss">
+.singletoggle-button {
+  width: 100%;
+}
+</style>
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index 70578b2c3..926600ab4 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -2,15 +2,15 @@ import { type ModelRef } from 'vue'
 
 interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
 
-/** This composable creates a two-way pipe between reactive variables of 2 different types. The values circulate back
+/** This composable creates a two-way pipe between reactive arrays of 2 different types. The values circulate back
  *  and forth transparently from A to B and B to A, the reactivity is preserved on both ends, the types are converted
  *  when the values pass through.
  *  It solves 3 difficulties:
  *  1. Different types. This is the main reason you need to bridge reactive variables: values of different types
  *     that must stay synchronized.
- *  2. Infinite loops. When one variable changes, the goal is to update the other one and you do not want that
+ *  2. Infinite loops. When one array changes, the goal is to update the other one and you do not want that
  *     the update triggers the first one again and so on.
- *  3. At the moment the binding is created, it is typical that one variable has initial data and the other is
+ *  3. At the moment the binding is created, it is typical that one array has initial data and the other is
  *     empty. You do not want the empty one to erase the initial data when the binding starts.
  * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
  * @param origToCreated (optional) Callback/Arrow function that converts an element in the original array into the type of the elements in the created array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
@@ -19,13 +19,13 @@ interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
 export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated[]> {
   const createdRef = ref<Tcreated[]>()
   const stopperForth = watch(origRef, () => {
-    const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : <Tcreated>(el as unknown)) : undefined
+    const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : convertPrimitiveByDefault<Tcreated>(el)) : undefined
     if (JSON.stringify(OasC) !== JSON.stringify(createdRef.value)) {
       createdRef.value = OasC
     }
   }, { immediate: true })
   const stopperBack = watch(createdRef, () => {
-    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : <Torig>(el as unknown)) : undefined
+    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : convertPrimitiveByDefault<Torig>(el)) : undefined
     if (JSON.stringify(CasO) !== JSON.stringify(origRef.value)) {
       origRef.value = CasO as Torig[]
     }
@@ -39,6 +39,43 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
   return createdRef as Ref<Tcreated[]>
 }
 
+/** This composable creates a two-way pipe between reactive objects of 2 different structures. The values circulate back
+ *  and forth transparently from A to B and B to A, the reactivity is preserved on both ends, the structures are converted
+ *  when the values pass through.
+ *  It solves 3 difficulties:
+ *  1. Different structures. This is the main reason you need to bridge reactive objects: different objects
+ *     that must stay synchronized.
+ *  2. Infinite loops. When one object changes, the goal is to update the other one and you do not want that
+ *     the update triggers the first one again and so on.
+ *  3. At the moment the binding is created, it is typical that one object has initial data and the other is
+ *     empty. You do not want the empty one to erase the initial data when the binding starts.
+ * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
+ * @param origToCreated Callback/Arrow function that converts the object in the original ref into the structure of the object in the created ref.
+ * @param createdToOrig Callback/Arrow function that converts the object in the created ref into the structure of the object in the original ref.
+ * */
+export function useOBjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated> {
+  const createdRef = ref<Tcreated>()
+  const stopperForth = watch(origRef, () => {
+    const OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined
+    if (JSON.stringify(OasC) !== JSON.stringify(createdRef.value)) {
+      createdRef.value = OasC
+    }
+  }, { immediate: true })
+  const stopperBack = watch(createdRef, () => {
+    const CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined
+    if (JSON.stringify(CasO) !== JSON.stringify(origRef.value)) {
+      origRef.value = CasO as Torig
+    }
+  })
+
+  onUnmounted(() => {
+    stopperBack()
+    stopperForth()
+  })
+
+  return createdRef as Ref<Tcreated>
+}
+
 /** This composable creates a two-way pipe between reactive variables of 2 different types. The values circulate back
  *  and forth transparently from A to B and B to A, the reactivity is preserved on both ends, the types are converted
  *  when the values pass through.
@@ -56,13 +93,13 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
 export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated> {
   const createdRef = ref<Tcreated>()
   const stopperForth = watch(origRef, () => {
-    const OasC = (origRef.value !== undefined) ? (origToCreated ? origToCreated(origRef.value) : <Tcreated>(origRef.value as unknown)) : undefined
+    const OasC = (origRef.value !== undefined) ? (origToCreated ? origToCreated(origRef.value) : convertPrimitiveByDefault<Tcreated>(origRef.value)) : undefined
     if (OasC !== createdRef.value) {
       createdRef.value = OasC
     }
   }, { immediate: true })
   const stopperBack = watch(createdRef, () => {
-    const CasO = (createdRef.value !== undefined) ? (createdToOrig ? createdToOrig(createdRef.value) : <Torig>(createdRef.value as unknown)) : undefined
+    const CasO = (createdRef.value !== undefined) ? (createdToOrig ? createdToOrig(createdRef.value) : convertPrimitiveByDefault<Torig>(createdRef.value)) : undefined
     if (CasO !== origRef.value) {
       origRef.value = CasO as Torig
     }
@@ -75,3 +112,11 @@ export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|Mode
 
   return createdRef as Ref<Tcreated>
 }
+
+function convertPrimitiveByDefault<TO> (from: any) : TO {
+  switch (typeof from) {
+    case 'number' : return String(from) as TO
+    case 'string' : return Number(from) as TO
+    default : return from as TO
+  }
+}
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 688c4b321..0e3529c5f 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -49,7 +49,9 @@
     "current": "Current",
     "upcoming": "Upcoming", 
     "past": "Past",
-    "total": "Total"
+    "total": "Total",
+    "selected": "Selected",
+    "deselected": "Not selected"
   },
   "seo": {
     "title": "Open Source Ethereum Blockchain Explorer",
@@ -694,8 +696,6 @@
     "all_networks": "All"
   },
   "notifications": {
-    "TODO: INSERT HERE":" THE TRANSLATIONS FOR THE PARENT DIALOG",
-
     "subscriptions": {
       "dialog_title": "Edit Subscriptions",
       "validators" : {

From fa8f813904cd3d9278dd75e90c9ff6695973b512 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Thu, 4 Jul 2024 18:07:17 +0200
Subject: [PATCH 24/69] (BIDS-2859) MultiBar with one-way v-model

---
 frontend/components/bc/NetworkSelector.vue    | 50 ++++++++++++-------
 frontend/components/bc/toggle/MultiBar.vue    | 29 +++++++----
 .../components/bc/toggle/MultiBarButton.vue   | 27 +++++++---
 frontend/components/bc/toggle/SingleBar.vue   |  6 ++-
 .../components/bc/toggle/SingleBarButton.vue  |  2 +-
 .../creation/DashboardCreationNetworkMask.vue |  4 --
 .../creation/DashboardCreationTypeMask.vue    |  8 ---
 .../notifications/SubscriptionRow.vue         |  4 +-
 .../playground/PlaygroundStyling.vue          |  8 +--
 frontend/composables/useRefBridge.ts          | 38 ++++++++------
 frontend/i18n/en.json                         |  3 +-
 11 files changed, 107 insertions(+), 72 deletions(-)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index 46e8d3408..358cc0588 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -3,32 +3,48 @@ import type { MultiBarItem } from '~/types/multiBar'
 import { IconNetwork } from '#components'
 import { ChainInfo, ChainID } from '~/types/network'
 
+const props = defineProps<{
+  displayOnly?: boolean
+}>()
+
 const { availableNetworks, isNetworkDisabled } = useNetworkStore()
 
-/** This ref is a chain ID if only one network can be selected, or an array of chain IDs if several networks can be selected. */
-const liveState = defineModel<ChainID|ChainID[]>()
+/** If the v-model is:
+ *  - A ChainID: only one network can be selected by the user. Prop `displayOnly` must be false or omitted.
+ *  - An array of ChainID:
+ *    - and prop `displayOnly` is `false`/omitted: several networks can be selected by the user,
+ *    - and prop `displayOnly` is `true`: the networks in the array are shown to the user but they are unclickable. */
+const liveState = defineModel<ChainID|ChainID[]>({ required: false })
 
 const selection = Array.isArray(liveState.value)
-  ? useArrayRefBridge<ChainID, string>(liveState as Ref<ChainID[]>)
+  ? useArrayRefBridge<ChainID, string>(liveState as Ref<ChainID[]>, true)
   : usePrimitiveRefBridge<ChainID, string>(liveState as Ref<ChainID>)
 
-const buttons = computed(() => {
-  const list: MultiBarItem[] = []
-  availableNetworks.value.forEach(chainId => list.push({
-    className: 'button-size',
-    component: IconNetwork,
-    componentProps: { chainId, harmonizePerceivedSize: true, colored: true },
-    componentClass: 'maximum',
-    value: String(chainId),
-    disabled: isNetworkDisabled(chainId),
-    tooltip: ChainInfo[chainId].name + ' ' + ChainInfo[chainId].description
-  }))
-  return list
-})
+const buttons = shallowRef<MultiBarItem[]>([])
+
+if (props.displayOnly) {
+  watch(liveState as Ref<ChainID[]>, updateButtons, { immediate: true })
+} else {
+  watch(availableNetworks, updateButtons, { immediate: true })
+}
+
+function updateButtons (source: ChainID[]) : void {
+  buttons.value = []
+  source.forEach((chainId) => {
+      buttons.value!.push({
+        component: IconNetwork,
+        componentProps: { chainId, harmonizePerceivedSize: true, colored: true },
+        componentClass: 'maximum',
+        value: String(chainId),
+        disabled: isNetworkDisabled(chainId),
+        tooltip: ChainInfo[chainId].name + ' ' + ChainInfo[chainId].description
+      })
+  })
+}
 </script>
 
 <template>
-  <BcToggleMultiBar v-if="Array.isArray(selection)" v-model="selection" :buttons="buttons" />
+  <BcToggleMultiBar v-if="Array.isArray(selection)" v-model="selection" :buttons="buttons" :display-mode="displayOnly" />
   <BcToggleSingleBar v-else v-model="selection" :buttons="buttons" layout="minimal" />
 </template>
 
diff --git a/frontend/components/bc/toggle/MultiBar.vue b/frontend/components/bc/toggle/MultiBar.vue
index 115973dbe..f71cd2908 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -3,39 +3,45 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { type MultiBarItem } from '~/types/multiBar'
 
 interface Props {
+  displayMode?: boolean,
   buttons: MultiBarItem[]
 }
 
 const props = defineProps<Props>()
 
-const selected = defineModel<string[]>({ required: true })
+type ButtonStates = Record<string, boolean>
 
-const modelValues = ref<Record<string, boolean>>(props.buttons.reduce((map, { value }) => {
-  map[value] = selected.value.includes(value)
+const inOutSelection = defineModel<string[]>({ required: true })
+
+const buttonStates = ref<ButtonStates>(props.buttons.reduce((map, { value }) => {
+  map[value] = inOutSelection.value.includes(value)
   return map
-}, {} as Record<string, boolean>))
+}, {} as ButtonStates))
 
-watch(modelValues, () => {
+watch(buttonStates, () => {
   const list: string[] = []
-  Object.entries(modelValues.value).forEach(([key, value]) => {
+  Object.entries(buttonStates.value).forEach(([key, value]) => {
     if (value) {
       list.push(key)
     }
   })
-  selected.value = list
+  inOutSelection.value = list
 }, { deep: true })
+
+const displayModeClass = computed(() => props.displayMode ? 'read-only' : '')
 </script>
 
 <template>
-  <div class="bc-togglebar">
+  <div class="bc-togglebar" :class="displayModeClass">
     <BcToggleMultiBarButton
       v-for="button in props.buttons"
       :key="button.value"
-      v-model="modelValues[button.value]"
+      v-model="buttonStates[button.value]"
       :class="button.className"
       :icon="button.icon"
       :tooltip="button.tooltip"
       :disabled="button.disabled"
+      :display-mode-class="displayModeClass"
     >
       <template #icon>
         <slot :name="button.value">
@@ -56,5 +62,10 @@ watch(modelValues, () => {
   background-color: var(--container-background);
   border: solid 1px var(--container-border-color);
   border-radius: var(--border-radius);
+
+  &.read-only {
+    padding: 0px;
+    border: none;
+  }
 }
 </style>
diff --git a/frontend/components/bc/toggle/MultiBarButton.vue b/frontend/components/bc/toggle/MultiBarButton.vue
index f06caf724..09d0bc221 100644
--- a/frontend/components/bc/toggle/MultiBarButton.vue
+++ b/frontend/components/bc/toggle/MultiBarButton.vue
@@ -8,6 +8,7 @@ interface Props {
   falseIcon?: IconDefinition,
   disabled?:boolean,
   tooltip?: string,
+  displayModeClass?: string
 }
 
 const props = defineProps<Props>()
@@ -22,14 +23,23 @@ const icon = computed(() => {
 <template>
   <BcTooltip :dont-open-permanently="true" :hover-delay="350">
     <template #tooltip>
-      <div class="button-tooltip">
+      <div class="button-tooltip" :class="displayModeClass">
         <div v-if="tooltip" class="individual">
           {{ tooltip }}
         </div>
-        <div>{{ selected ? $t('filter.enabled'): $t('filter.disabled') }}</div>
+        <div v-if="displayModeClass !== 'read-only'">
+          {{ disabled ? $t('common.unavailable') : (selected ? $t('filter.enabled'): $t('filter.disabled')) }}
+        </div>
       </div>
     </template>
-    <ToggleButton v-model="selected" class="bc-toggle" on-label="''" off-icon="''" :disabled="disabled">
+    <ToggleButton
+      v-model="selected"
+      class="bc-toggle"
+      :class="displayModeClass"
+      on-label="''"
+      off-icon="''"
+      :disabled="disabled || displayModeClass === 'read-only'"
+    >
       <template #icon="slotProps">
         <slot name="icon" v-bind="slotProps">
           <FontAwesomeIcon v-if="icon" :icon="icon" />
@@ -43,7 +53,7 @@ const icon = computed(() => {
 .button-tooltip {
   width: max-content;
   text-align: left;
-  .individual{
+  .individual::not(.read-only) {
     margin-bottom: var(--padding);
   }
 }
@@ -57,7 +67,8 @@ const icon = computed(() => {
       color: var(--container-color);
       background-color: var(--container-border-color);
 
-      &:not(.p-highlight) {
+      &:not(.p-highlight),
+      &.read-only {
         background-color: var(--container-background);
       }
 
@@ -65,8 +76,10 @@ const icon = computed(() => {
       :deep(.p-button-label) {
         display: none;
       }
-      &.p-disabled{
-        opacity: 0.5;
+      &.p-disabled {
+        &:not(.read-only) {
+          opacity: 0.5;
+        }
         cursor: default;
       }
     }
diff --git a/frontend/components/bc/toggle/SingleBar.vue b/frontend/components/bc/toggle/SingleBar.vue
index 1b73eaac8..32a426d6d 100644
--- a/frontend/components/bc/toggle/SingleBar.vue
+++ b/frontend/components/bc/toggle/SingleBar.vue
@@ -52,7 +52,7 @@ function onButtonClicked (value: string) {
       :selected="values[button.value]"
       :tooltip="button.tooltip"
       :disabled="button.disabled"
-      :class="button.className"
+      :class="[layout, button.className]"
       :layout="layout"
       @click="!button.disabled && onButtonClicked(button.value)"
     >
@@ -78,5 +78,9 @@ function onButtonClicked (value: string) {
     border: solid 1px var(--container-border-color);
     border-radius: var(--border-radius);
   }
+  .gaudy {
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>
diff --git a/frontend/components/bc/toggle/SingleBarButton.vue b/frontend/components/bc/toggle/SingleBarButton.vue
index 9f217b507..cef049e68 100644
--- a/frontend/components/bc/toggle/SingleBarButton.vue
+++ b/frontend/components/bc/toggle/SingleBarButton.vue
@@ -24,7 +24,7 @@ const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
         <div v-if="tooltip" class="individual">
           {{ tooltip }}
         </div>
-        <div>{{ selected ? $t('common.selected'): $t('common.deselected') }}</div>
+        <div>{{ disabled ? $t('common.unavailable') : (selected ? $t('common.selected') : $t('common.deselected')) }}</div>
       </div>
     </template>
     <ToggleButton class="bc-toggle" :class="layout" :disabled="disabled" :model-value="selected">
diff --git a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
index cfbd38352..3c40b1333 100644
--- a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
@@ -13,7 +13,6 @@ watch(selection, (value) => { network.value = Number(value) as ChainID })
 const buttonList = availableNetworks.value.map((chainId) => {
   return {
     value: String(chainId),
-    className: 'dashboard-creation-singletoggle-button',
     text: ChainInfo[chainId].family as string,
     subText: (ChainInfo[chainId].name !== ChainInfo[chainId].family as string) ? ChainInfo[chainId].name : ChainInfo[chainId].description,
     disabled: isNetworkDisabled(chainId),
@@ -87,9 +86,6 @@ const continueDisabled = computed(() => {
 </style>
 
 <style lang="scss">
-  .dashboard-creation-singletoggle-button {
-    width: 100%;
-  }
   .dashboard-creation-button-network-icon {
     width: 100%;
     height: 100%;
diff --git a/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue b/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
index 54a0b9fe2..1c9b8a6b6 100644
--- a/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
@@ -15,7 +15,6 @@ const type = defineModel<DashboardType | ''>('type', { required: true })
 
 const typeButtons = [
   {
-    className: 'dashboard-network-creation-singletoggle-button',
     text: $t('dashboard.creation.type.accounts'),
     subText: $t('common.coming_soon'),
     value: 'account',
@@ -23,7 +22,6 @@ const typeButtons = [
     disabled: props.accountsDisabled
   },
   {
-    className: 'dashboard-network-creation-singletoggle-button',
     text: $t('dashboard.creation.type.validators'),
     value: 'validator',
     component: IconValidator,
@@ -99,9 +97,3 @@ const next = () => {
     }
   }
 </style>
-
-<style lang="scss">
-.dashboard-network-creation-singletoggle-button {
-  width: 100%;
-}
-</style>
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 7d335945d..21f969f52 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -100,8 +100,6 @@ function isThisAvalidInput (input: string | Ref<string>) : boolean {
   return !!input && !isNaN(Number(input)) && Number(input) >= 0
 }
 
-const test = ref<number>(10200)
-
 const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
 </script>
 
@@ -139,7 +137,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
       />
     </div>
     <div v-else class="right">
-      <BcNetworkSelector v-model="test" />
+      <BcNetworkSelector v-model="networkSelectorState" />
     </div>
   </div>
 </template>
diff --git a/frontend/components/playground/PlaygroundStyling.vue b/frontend/components/playground/PlaygroundStyling.vue
index a4938532f..a6a9cdd03 100644
--- a/frontend/components/playground/PlaygroundStyling.vue
+++ b/frontend/components/playground/PlaygroundStyling.vue
@@ -25,7 +25,7 @@ const completeList = [{ value: 'attestation' }, { value: 'proposal', component:
 const selectedList = ref<string[]>(['attestation', 'proposal'])
 
 const selectedType = ref<string>('Validators')
-const allTypes = [{ text: 'Accounts', value: 'Accounts', component: IconAccount, className: 'singletoggle-button' }, { text: 'Validators', value: 'Validators', component: IconValidator, className: 'singletoggle-button' }]
+const allTypes = [{ text: 'Accounts', value: 'Accounts', component: IconAccount }, { text: 'Validators', value: 'Validators', component: IconValidator }]
 
 const dropodownSelection = ref<string | undefined>()
 const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No' }, { value: 'maybe', label: 'Maybe we need a bigger label' }]
@@ -216,9 +216,3 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
   width: 600px
 }
 </style>
-
-<style lang="scss">
-.singletoggle-button {
-  width: 100%;
-}
-</style>
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index 926600ab4..5ae17da56 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -13,23 +13,28 @@ interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
  *  3. At the moment the binding is created, it is typical that one array has initial data and the other is
  *     empty. You do not want the empty one to erase the initial data when the binding starts.
  * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
+ * @param arraysInDifferentOrdersAreTheSame Tells whether arrays with the same content in different orders must be considered identical.
  * @param origToCreated (optional) Callback/Arrow function that converts an element in the original array into the type of the elements in the created array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * @param createdToOrig (optional) Callback/Arrow function that converts an element in the created array into the type of the elements in the original array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * */
-export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated[]> {
+export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, arraysInDifferentOrdersAreTheSame: boolean, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated[]> {
   const createdRef = ref<Tcreated[]>()
   const stopperForth = watch(origRef, () => {
-    const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : convertPrimitiveByDefault<Tcreated>(el)) : undefined
-    if (JSON.stringify(OasC) !== JSON.stringify(createdRef.value)) {
+    let OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : convertPrimitiveByDefault<Tcreated>(el)) : undefined
+    if (arraysInDifferentOrdersAreTheSame && OasC) { OasC = OasC.sort() }
+    const createdValue = (arraysInDifferentOrdersAreTheSame && createdRef.value) ? createdRef.value.sort() : createdRef.value
+    if (JSON.stringify(OasC) !== JSON.stringify(createdValue)) {
       createdRef.value = OasC
     }
-  }, { immediate: true })
+  }, { immediate: true, deep: true })
   const stopperBack = watch(createdRef, () => {
-    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : convertPrimitiveByDefault<Torig>(el)) : undefined
-    if (JSON.stringify(CasO) !== JSON.stringify(origRef.value)) {
+    let CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : convertPrimitiveByDefault<Torig>(el)) : undefined
+    if (arraysInDifferentOrdersAreTheSame && CasO) { CasO = CasO.sort() }
+    const originalValue = (arraysInDifferentOrdersAreTheSame && origRef.value) ? origRef.value.sort() : origRef.value
+    if (JSON.stringify(CasO) !== JSON.stringify(originalValue)) {
       origRef.value = CasO as Torig[]
     }
-  })
+  }, { deep: true })
 
   onUnmounted(() => {
     stopperBack()
@@ -52,21 +57,26 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
  * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
  * @param origToCreated Callback/Arrow function that converts the object in the original ref into the structure of the object in the created ref.
  * @param createdToOrig Callback/Arrow function that converts the object in the created ref into the structure of the object in the original ref.
+ * @param arraysInDifferentOrdersAreTheSame (optional, `true` by default) If one of the reactive objects is an array, tells whether arrays with the same content in different orders must be considered identical.
  * */
-export function useOBjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated> {
+export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>, arraysInDifferentOrdersAreTheSame: boolean = true) : Ref<Tcreated> {
   const createdRef = ref<Tcreated>()
   const stopperForth = watch(origRef, () => {
-    const OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined
-    if (JSON.stringify(OasC) !== JSON.stringify(createdRef.value)) {
+    let OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined
+    if (Array.isArray(OasC) && arraysInDifferentOrdersAreTheSame) { OasC = OasC.sort() }
+    const createdValue = (Array.isArray(createdRef.value) && arraysInDifferentOrdersAreTheSame) ? createdRef.value.sort() : createdRef.value
+    if (JSON.stringify(OasC) !== JSON.stringify(createdValue)) {
       createdRef.value = OasC
     }
-  }, { immediate: true })
+  }, { immediate: true, deep: true })
   const stopperBack = watch(createdRef, () => {
-    const CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined
-    if (JSON.stringify(CasO) !== JSON.stringify(origRef.value)) {
+    let CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined
+    if (Array.isArray(CasO) && arraysInDifferentOrdersAreTheSame) { CasO = CasO.sort() }
+    const originalValue = (Array.isArray(origRef.value) && arraysInDifferentOrdersAreTheSame) ? origRef.value.sort() : origRef.value
+    if (JSON.stringify(CasO) !== JSON.stringify(originalValue)) {
       origRef.value = CasO as Torig
     }
-  })
+  }, { deep: true })
 
   onUnmounted(() => {
     stopperBack()
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 0e3529c5f..724ed2a6d 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -51,7 +51,8 @@
     "past": "Past",
     "total": "Total",
     "selected": "Selected",
-    "deselected": "Not selected"
+    "deselected": "Not selected",
+    "unavailable": "Unavailable"
   },
   "seo": {
     "title": "Open Source Ethereum Blockchain Explorer",

From 7af487ab97d85528f08eec478f7d823940b5a73e Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Thu, 4 Jul 2024 18:10:06 +0200
Subject: [PATCH 25/69] (BIDS-2859) MultiBar with two-way v-model

---
 frontend/components/bc/toggle/MultiBar.vue | 26 +++++++++++++---------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/components/bc/toggle/MultiBar.vue b/frontend/components/bc/toggle/MultiBar.vue
index f71cd2908..53518c5ad 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -12,21 +12,27 @@ const props = defineProps<Props>()
 type ButtonStates = Record<string, boolean>
 
 const inOutSelection = defineModel<string[]>({ required: true })
+const buttonStates = useObjectRefBridge<string[], ButtonStates>(inOutSelection, convertInOutSelectionToButtonStates, convertButtonStatesToInOutSelection, true)
 
-const buttonStates = ref<ButtonStates>(props.buttons.reduce((map, { value }) => {
-  map[value] = inOutSelection.value.includes(value)
-  return map
-}, {} as ButtonStates))
+function convertInOutSelectionToButtonStates (selection: string[]) : ButtonStates {
+  const states = props.buttons.reduce((map, { value }) => {
+    map[value] = selection.includes(value)
+    return map
+  }, {} as ButtonStates)
+  return states
+}
 
-watch(buttonStates, () => {
-  const list: string[] = []
-  Object.entries(buttonStates.value).forEach(([key, value]) => {
+function convertButtonStatesToInOutSelection (states: ButtonStates) : string[] {
+  const selection: string[] = []
+  Object.entries(states).forEach(([key, value]) => {
     if (value) {
-      list.push(key)
+      selection.push(key)
     }
   })
-  inOutSelection.value = list
-}, { deep: true })
+  return selection
+}
+
+watch(() => props.buttons, () => { buttonStates.value = convertInOutSelectionToButtonStates(inOutSelection.value) })
 
 const displayModeClass = computed(() => props.displayMode ? 'read-only' : '')
 </script>

From 288660fd1cb2bead12242448ceda775beb0e1531 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Thu, 4 Jul 2024 19:02:39 +0200
Subject: [PATCH 26/69] (BIDS-2859) MultiBar: comment to make things clear

---
 frontend/components/bc/toggle/MultiBar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/components/bc/toggle/MultiBar.vue b/frontend/components/bc/toggle/MultiBar.vue
index 53518c5ad..39610ecdf 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -32,6 +32,7 @@ function convertButtonStatesToInOutSelection (states: ButtonStates) : string[] {
   return selection
 }
 
+// this line is independent of the bridge above (that addresses the on/off states), this line updates the component if the list of buttons comes late
 watch(() => props.buttons, () => { buttonStates.value = convertInOutSelectionToButtonStates(inOutSelection.value) })
 
 const displayModeClass = computed(() => props.displayMode ? 'read-only' : '')

From f4004a013e78741b6ebc33c488c1261204ced4dc Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Thu, 4 Jul 2024 19:36:25 +0200
Subject: [PATCH 27/69] (BIDS-2859) useRefBridge: the name of a parameter was
 totally unclear

---
 frontend/components/bc/NetworkSelector.vue |  6 +++---
 frontend/composables/useRefBridge.ts       | 24 +++++++++++-----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index 358cc0588..54e0d22ed 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -10,10 +10,10 @@ const props = defineProps<{
 const { availableNetworks, isNetworkDisabled } = useNetworkStore()
 
 /** If the v-model is:
- *  - A ChainID: only one network can be selected by the user. Prop `displayOnly` must be false or omitted.
+ *  - A ChainID: only one network can be selected by the user. Prop `:display-only` must be false or omitted.
  *  - An array of ChainID:
- *    - and prop `displayOnly` is `false`/omitted: several networks can be selected by the user,
- *    - and prop `displayOnly` is `true`: the networks in the array are shown to the user but they are unclickable. */
+ *    - and prop `:display-only` is `false`/omitted: several networks can be selected by the user,
+ *    - and prop `:display-only` is `true`: the networks in the array are shown to the user but they are unclickable. */
 const liveState = defineModel<ChainID|ChainID[]>({ required: false })
 
 const selection = Array.isArray(liveState.value)
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index 5ae17da56..bfe519f88 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -13,24 +13,24 @@ interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
  *  3. At the moment the binding is created, it is typical that one array has initial data and the other is
  *     empty. You do not want the empty one to erase the initial data when the binding starts.
  * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
- * @param arraysInDifferentOrdersAreTheSame Tells whether arrays with the same content in different orders must be considered identical.
+ * @param arraysWithSameElementsInDifferentOrdersAreTheSame Tells whether arrays with the same content in different orders must be considered identical.
  * @param origToCreated (optional) Callback/Arrow function that converts an element in the original array into the type of the elements in the created array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * @param createdToOrig (optional) Callback/Arrow function that converts an element in the created array into the type of the elements in the original array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * */
-export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, arraysInDifferentOrdersAreTheSame: boolean, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated[]> {
+export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, arraysWithSameElementsInDifferentOrdersAreTheSame: boolean, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated[]> {
   const createdRef = ref<Tcreated[]>()
   const stopperForth = watch(origRef, () => {
     let OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : convertPrimitiveByDefault<Tcreated>(el)) : undefined
-    if (arraysInDifferentOrdersAreTheSame && OasC) { OasC = OasC.sort() }
-    const createdValue = (arraysInDifferentOrdersAreTheSame && createdRef.value) ? createdRef.value.sort() : createdRef.value
+    if (arraysWithSameElementsInDifferentOrdersAreTheSame && OasC) { OasC = OasC.sort() }
+    const createdValue = (arraysWithSameElementsInDifferentOrdersAreTheSame && createdRef.value) ? createdRef.value.sort() : createdRef.value
     if (JSON.stringify(OasC) !== JSON.stringify(createdValue)) {
       createdRef.value = OasC
     }
   }, { immediate: true, deep: true })
   const stopperBack = watch(createdRef, () => {
     let CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : convertPrimitiveByDefault<Torig>(el)) : undefined
-    if (arraysInDifferentOrdersAreTheSame && CasO) { CasO = CasO.sort() }
-    const originalValue = (arraysInDifferentOrdersAreTheSame && origRef.value) ? origRef.value.sort() : origRef.value
+    if (arraysWithSameElementsInDifferentOrdersAreTheSame && CasO) { CasO = CasO.sort() }
+    const originalValue = (arraysWithSameElementsInDifferentOrdersAreTheSame && origRef.value) ? origRef.value.sort() : origRef.value
     if (JSON.stringify(CasO) !== JSON.stringify(originalValue)) {
       origRef.value = CasO as Torig[]
     }
@@ -57,22 +57,22 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
  * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
  * @param origToCreated Callback/Arrow function that converts the object in the original ref into the structure of the object in the created ref.
  * @param createdToOrig Callback/Arrow function that converts the object in the created ref into the structure of the object in the original ref.
- * @param arraysInDifferentOrdersAreTheSame (optional, `true` by default) If one of the reactive objects is an array, tells whether arrays with the same content in different orders must be considered identical.
+ * @param arraysWithSameElementsInDifferentOrdersAreTheSame (optional, `true` by default) If one of the reactive objects is an array, tells whether arrays with the same content in different orders must be considered identical.
  * */
-export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>, arraysInDifferentOrdersAreTheSame: boolean = true) : Ref<Tcreated> {
+export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>, arraysWithSameElementsInDifferentOrdersAreTheSame: boolean = true) : Ref<Tcreated> {
   const createdRef = ref<Tcreated>()
   const stopperForth = watch(origRef, () => {
     let OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined
-    if (Array.isArray(OasC) && arraysInDifferentOrdersAreTheSame) { OasC = OasC.sort() }
-    const createdValue = (Array.isArray(createdRef.value) && arraysInDifferentOrdersAreTheSame) ? createdRef.value.sort() : createdRef.value
+    if (Array.isArray(OasC) && arraysWithSameElementsInDifferentOrdersAreTheSame) { OasC = OasC.sort() }
+    const createdValue = (Array.isArray(createdRef.value) && arraysWithSameElementsInDifferentOrdersAreTheSame) ? createdRef.value.sort() : createdRef.value
     if (JSON.stringify(OasC) !== JSON.stringify(createdValue)) {
       createdRef.value = OasC
     }
   }, { immediate: true, deep: true })
   const stopperBack = watch(createdRef, () => {
     let CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined
-    if (Array.isArray(CasO) && arraysInDifferentOrdersAreTheSame) { CasO = CasO.sort() }
-    const originalValue = (Array.isArray(origRef.value) && arraysInDifferentOrdersAreTheSame) ? origRef.value.sort() : origRef.value
+    if (Array.isArray(CasO) && arraysWithSameElementsInDifferentOrdersAreTheSame) { CasO = CasO.sort() }
+    const originalValue = (Array.isArray(origRef.value) && arraysWithSameElementsInDifferentOrdersAreTheSame) ? origRef.value.sort() : origRef.value
     if (JSON.stringify(CasO) !== JSON.stringify(originalValue)) {
       origRef.value = CasO as Torig
     }

From ba6fb29da86ea7170a4ae4a73aaa96d7b874dcbf Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Thu, 4 Jul 2024 22:13:56 +0200
Subject: [PATCH 28/69] (BIDS-2859) changes in progress in SubscriptionRow

---
 frontend/components/bc/toggle/MultiBar.vue    |   8 +-
 .../components/bc/toggle/SingleBarButton.vue  |   4 +-
 .../notifications/SubscriptionRow.vue         | 114 +++++++++---------
 3 files changed, 62 insertions(+), 64 deletions(-)

diff --git a/frontend/components/bc/toggle/MultiBar.vue b/frontend/components/bc/toggle/MultiBar.vue
index 39610ecdf..024c582ba 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -12,9 +12,9 @@ const props = defineProps<Props>()
 type ButtonStates = Record<string, boolean>
 
 const inOutSelection = defineModel<string[]>({ required: true })
-const buttonStates = useObjectRefBridge<string[], ButtonStates>(inOutSelection, convertInOutSelectionToButtonStates, convertButtonStatesToInOutSelection, true)
+const buttonStates = useObjectRefBridge<string[], ButtonStates>(inOutSelection, receiveFromVModel, sendToVModel, true)
 
-function convertInOutSelectionToButtonStates (selection: string[]) : ButtonStates {
+function receiveFromVModel (selection: string[]) : ButtonStates {
   const states = props.buttons.reduce((map, { value }) => {
     map[value] = selection.includes(value)
     return map
@@ -22,7 +22,7 @@ function convertInOutSelectionToButtonStates (selection: string[]) : ButtonState
   return states
 }
 
-function convertButtonStatesToInOutSelection (states: ButtonStates) : string[] {
+function sendToVModel (states: ButtonStates) : string[] {
   const selection: string[] = []
   Object.entries(states).forEach(([key, value]) => {
     if (value) {
@@ -33,7 +33,7 @@ function convertButtonStatesToInOutSelection (states: ButtonStates) : string[] {
 }
 
 // this line is independent of the bridge above (that addresses the on/off states), this line updates the component if the list of buttons comes late
-watch(() => props.buttons, () => { buttonStates.value = convertInOutSelectionToButtonStates(inOutSelection.value) })
+watch(() => props.buttons, () => { buttonStates.value = receiveFromVModel(inOutSelection.value) })
 
 const displayModeClass = computed(() => props.displayMode ? 'read-only' : '')
 </script>
diff --git a/frontend/components/bc/toggle/SingleBarButton.vue b/frontend/components/bc/toggle/SingleBarButton.vue
index cef049e68..e83892a4e 100644
--- a/frontend/components/bc/toggle/SingleBarButton.vue
+++ b/frontend/components/bc/toggle/SingleBarButton.vue
@@ -59,11 +59,11 @@ const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
   &.p-button {
     &.p-togglebutton {
       &.gaudy {
-        width: 100%;
-        height: 100%;
         display: flex;
         flex-grow: 1;
         flex-direction: column;
+        width: 100%;
+        height: 100%;
         gap: 11px;
         padding: v-bind(topBottomPadding) 0;
         border: 1px var(--container-border-color) solid;
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 21f969f52..9fc9d485a 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -11,80 +11,61 @@ const props = defineProps<{
   default?: number
 }>()
 
+const type = computed(() => props.inputType || 'binary')
+
 const { t } = useI18n()
 
-const state = defineModel<boolean|number|ChainID[]>({ required: true })
-const networkSelectorState = state as ModelRef<ChainID[]>
+interface CheckboxAndText {
+  check: boolean,
+  text: string
+}
 
-const type = computed(() => props.inputType || 'binary')
-const checked = ref<boolean>(false)
-const inputted = ref('')
+const state = defineModel<boolean|number|ChainID[]>({ required: true })
+let networkSelectorState: ModelRef<ChainID[]>
+let checkboxAndText = undefined as unknown as Ref<CheckboxAndText>
 
-refreshUIfromState() // initial loading
+if (type.value === 'networks') {
+  networkSelectorState = state as ModelRef<ChainID[]>
+} else {
+  checkboxAndText = useObjectRefBridge<boolean|number, CheckboxAndText>(state as Ref<boolean|number>, receiveFromVModel, sendToVModel)
+}
 
-function refreshUIfromState () : void {
+function receiveFromVModel (state: boolean|number) : CheckboxAndText {
+  const output = {} as CheckboxAndText
   switch (type.value) {
     case 'amount' :
     case 'percent' :
-      state.value = state.value as number
-      inputted.value = String(state.value)
-      checked.value = (state.value >= 0)
-      correctUserInput()
+      output.text = correctUserInput(String(state))
+      output.check = (state as number >= 0)
       break
     case 'binary' :
-      checked.value = state.value as boolean
-      break
-    case 'networks' :
+      output.check = state as boolean
       break
   }
+  return output
 }
 
-const tooltipLines = computed(() => {
-  let options
-  if (Array.isArray(state.value)) {
-    options = { plural: state.value.length, list: state.value.join(', ') }
-  } else {
-    let plural: number
-    if (type.value === 'amount' || type.value === 'percent') {
-      plural = calculateCorrectNumber(inputted)
-    } else {
-      plural = state.value ? 2 : 1
-    }
-    options = { plural }
-  }
-  return tAll(t, props.tPath + '.hint', options)
-})
-
-function outputSetting () : void {
-  // outputs the setting
+function sendToVModel (state: CheckboxAndText) : boolean|number {
   switch (type.value) {
     case 'amount' :
-      state.value = checked.value && isThisAvalidInput(inputted) ? calculateCorrectNumber(inputted) : -1
-      break
+      return state.check && isThisAvalidInput(state.text) ? calculateCorrectNumber(state.text) : -1
     case 'percent' :
-      state.value = checked.value ? calculateCorrectNumber(inputted) : -1
-      break
+      return state.check ? calculateCorrectNumber(state.text) : -1
     case 'binary' :
-      state.value = checked.value
-      break
+      return state.check
   }
+  return 0
 }
 
-function correctUserInput () : void {
+function correctUserInput (input: string) : string {
   switch (type.value) {
-    case 'amount' :
-      inputted.value = isThisAvalidInput(inputted) ? String(calculateCorrectNumber(inputted)) : ''
-      break
-    case 'percent' :
-      inputted.value = String(calculateCorrectNumber(inputted))
-      break
+    case 'amount' : return isThisAvalidInput(input) ? String(calculateCorrectNumber(input)) : ''
+    case 'percent' : return String(calculateCorrectNumber(input))
   }
+  return ''
 }
 
-function calculateCorrectNumber (input: string | Ref<string>) : number {
-  if (typeof input !== 'string') {
-    input = input.value
-  }
+function calculateCorrectNumber (input: string) : number {
   let num = !isThisAvalidInput(input) ? (props.default ?? 0) : Number(input)
   if (type.value === 'percent') {
     if (num < 1) { num = 1 }
@@ -93,13 +74,32 @@ function calculateCorrectNumber (input: string | Ref<string>) : number {
   return num
 }
 
-function isThisAvalidInput (input: string | Ref<string>) : boolean {
-  if (typeof input !== 'string') {
-    input = input.value
-  }
+function isThisAvalidInput (input: string) : boolean {
   return !!input && !isNaN(Number(input)) && Number(input) >= 0
 }
 
+const tooltipLines = computed(() => {
+  let options
+  if (Array.isArray(state.value)) {
+    options = { plural: state.value.length, list: state.value.join(', ') }
+  } else {
+    let plural: number
+    if (type.value === 'amount' || type.value === 'percent') {
+      plural = calculateCorrectNumber(checkboxAndText.value.text)
+    } else {
+      plural = state.value ? 2 : 1
+    }
+    options = { plural }
+  }
+  return tAll(t, props.tPath + '.hint', options)
+})
+
+const textField = ref('')
+
+if (checkboxAndText) {
+  watch(() => checkboxAndText.value.text, () => { textField.value = checkboxAndText.value.text }, { immediate: true })
+}
+
 const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
 </script>
 
@@ -118,22 +118,20 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
     <div v-if="type != 'networks'" class="right">
       <div v-if="type == 'amount' || type == 'percent'" class="input">
         <InputText
-          v-model="inputted"
+          v-model="textField"
           type="text"
           :placeholder="t(tPath + '.placeholder')"
           :class="[deactivationClass,type]"
-          @change="outputSetting"
-          @blur="correctUserInput"
+          @blur="checkboxAndText.text = correctUserInput(textField)"
         />
         &nbsp;
       </div>
       <span v-if="type == 'percent'" :class="deactivationClass">%</span>
       <Checkbox
-        v-model="checked"
+        v-model="checkboxAndText.check"
         :binary="true"
         class="checkbox"
         :class="deactivationClass"
-        @change="outputSetting"
       />
     </div>
     <div v-else class="right">

From e75ba03e97be0d6fa1746d4a371e26c7bb22b685 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Fri, 5 Jul 2024 09:34:10 +0200
Subject: [PATCH 29/69] (BIDS-2859) some more work at different places

---
 frontend/components/bc/NetworkSelector.vue    |  2 +-
 frontend/components/bc/toggle/MultiBar.vue    | 14 +--
 .../notifications/SubscriptionDialog.vue      | 15 ++--
 .../notifications/SubscriptionRow.vue         | 45 +++++++---
 frontend/composables/useRefBridge.ts          | 90 ++++++++++++-------
 5 files changed, 103 insertions(+), 63 deletions(-)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index 54e0d22ed..d5dcebf73 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -17,7 +17,7 @@ const { availableNetworks, isNetworkDisabled } = useNetworkStore()
 const liveState = defineModel<ChainID|ChainID[]>({ required: false })
 
 const selection = Array.isArray(liveState.value)
-  ? useArrayRefBridge<ChainID, string>(liveState as Ref<ChainID[]>, true)
+  ? useArrayRefBridge<ChainID, string>(liveState as Ref<ChainID[]>)
   : usePrimitiveRefBridge<ChainID, string>(liveState as Ref<ChainID>)
 
 const buttons = shallowRef<MultiBarItem[]>([])
diff --git a/frontend/components/bc/toggle/MultiBar.vue b/frontend/components/bc/toggle/MultiBar.vue
index 024c582ba..e8bc0e392 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -11,20 +11,20 @@ const props = defineProps<Props>()
 
 type ButtonStates = Record<string, boolean>
 
-const inOutSelection = defineModel<string[]>({ required: true })
-const buttonStates = useObjectRefBridge<string[], ButtonStates>(inOutSelection, receiveFromVModel, sendToVModel, true)
+const selection = defineModel<string[]>({ required: true })
+const buttonStates = useObjectRefBridge<string[], ButtonStates>(selection, receiveFromVModel, sendToVModel)
 
-function receiveFromVModel (selection: string[]) : ButtonStates {
+function receiveFromVModel (data: string[]) : ButtonStates {
   const states = props.buttons.reduce((map, { value }) => {
-    map[value] = selection.includes(value)
+    map[value] = data.includes(value)
     return map
   }, {} as ButtonStates)
   return states
 }
 
-function sendToVModel (states: ButtonStates) : string[] {
+function sendToVModel (data: ButtonStates) : string[] {
   const selection: string[] = []
-  Object.entries(states).forEach(([key, value]) => {
+  Object.entries(data).forEach(([key, value]) => {
     if (value) {
       selection.push(key)
     }
@@ -33,7 +33,7 @@ function sendToVModel (states: ButtonStates) : string[] {
 }
 
 // this line is independent of the bridge above (that addresses the on/off states), this line updates the component if the list of buttons comes late
-watch(() => props.buttons, () => { buttonStates.value = receiveFromVModel(inOutSelection.value) })
+watch(() => props.buttons, () => { buttonStates.value = receiveFromVModel(selection.value) })
 
 const displayModeClass = computed(() => props.displayMode ? 'read-only' : '')
 </script>
diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index c31334450..67495f077 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -15,23 +15,20 @@ interface Props {
 const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
 const { t } = useI18n()
 
-const newDataReceived = ref<number>(0) // used in <template> to trigger Vue to refresh or hide the content
-let tPath: string
+const tPath = ref('')
 const validatorSubModifiable = ref({} as ValidatorSubscriptionStateComplete)
 const accountSubModifiable = ref({} as AccountSubscriptionState)
 const all = ref(false)
 
 watch(props, (props) => {
   if (!props || (!props.validatorSub && !props.accountSub)) {
-    newDataReceived.value = 0
     return
   }
-  newDataReceived.value++
   if (props.validatorSub) {
-    tPath = 'notifications.subscriptions.validators.'
+    tPath.value = 'notifications.subscriptions.validators.'
     validatorSubModifiable.value = { offlineGroup: -1, realTime: false, ...structuredClone(toRaw(props.validatorSub)) }
   } else if (props.accountSub) {
-    tPath = 'notifications.subscriptions.accounts.'
+    tPath.value = 'notifications.subscriptions.accounts.'
     accountSubModifiable.value = structuredClone(toRaw(props.accountSub))
   }
 }, { immediate: true })
@@ -43,7 +40,7 @@ const closeDialog = () => {
 </script>
 
 <template>
-  <div v-if="newDataReceived" class="content">
+  <div v-if="props && tPath" class="content">
     <div class="title">
       {{ t('notifications.subscriptions.dialog_title') }}
     </div>
@@ -52,7 +49,7 @@ const closeDialog = () => {
       {{ t(tPath+'explanation') }}
     </div>
 
-    <div v-if="props?.validatorSub">
+    <div v-if="props.validatorSub">
       <NotificationsSubscriptionRow v-model="validatorSubModifiable.offlineValidator" :t-path="tPath+'offline_validator'" :lacks-premium-subscription="false" class="row" />
       <NotificationsSubscriptionRow
         v-model="validatorSubModifiable.offlineGroup"
@@ -73,7 +70,7 @@ const closeDialog = () => {
       <NotificationsSubscriptionRow v-model="all" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" />
     </div>
 
-    <div v-else-if="props?.accountSub">
+    <div v-else-if="props.accountSub">
       <NotificationsSubscriptionRow v-model="accountSubModifiable.incoming" :t-path="tPath+'incoming'" :lacks-premium-subscription="false" class="row" />
       <NotificationsSubscriptionRow v-model="accountSubModifiable.outgoing" :t-path="tPath+'outgoing'" :lacks-premium-subscription="false" class="row" />
       <NotificationsSubscriptionRow v-model="accountSubModifiable.erc20" :t-path="tPath+'erc20'" :lacks-premium-subscription="false" input-type="amount" class="row" />
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 9fc9d485a..17f81c006 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -12,6 +12,7 @@ const props = defineProps<{
 }>()
 
 const type = computed(() => props.inputType || 'binary')
+// const textField = ref('')
 
 const { t } = useI18n()
 
@@ -20,9 +21,14 @@ interface CheckboxAndText {
   text: string
 }
 
+/** - if boolean: checked state of the checkbox
+ *  - if number: -1 means unchecked, another value means checked and copies the textfield (converted in a number)
+ *  - if array: list of selected networks */
 const state = defineModel<boolean|number|ChainID[]>({ required: true })
 let networkSelectorState: ModelRef<ChainID[]>
-let checkboxAndText = undefined as unknown as Ref<CheckboxAndText>
+let checkboxAndText: Ref<CheckboxAndText> | undefined
+
+// bridging the v-model with the data structures of this component
 
 if (type.value === 'networks') {
   networkSelectorState = state as ModelRef<ChainID[]>
@@ -35,8 +41,8 @@ function receiveFromVModel (state: boolean|number) : CheckboxAndText {
   switch (type.value) {
     case 'amount' :
     case 'percent' :
-      output.text = correctUserInput(String(state))
       output.check = (state as number >= 0)
+      output.text = correctUserInput(output.check, output.check ? String(state) : checkboxAndText!.value.text /* textField.value */)
       break
     case 'binary' :
       output.check = state as boolean
@@ -48,7 +54,6 @@ function receiveFromVModel (state: boolean|number) : CheckboxAndText {
 function sendToVModel (state: CheckboxAndText) : boolean|number {
   switch (type.value) {
     case 'amount' :
-      return state.check && isThisAvalidInput(state.text) ? calculateCorrectNumber(state.text) : -1
     case 'percent' :
       return state.check ? calculateCorrectNumber(state.text) : -1
     case 'binary' :
@@ -57,9 +62,11 @@ function sendToVModel (state: CheckboxAndText) : boolean|number {
   return 0
 }
 
-function correctUserInput (input: string) : string {
+// input validation / autocorrection
+
+function correctUserInput (checked: boolean, input: string) : string {
   switch (type.value) {
-    case 'amount' : return isThisAvalidInput(input) ? String(calculateCorrectNumber(input)) : ''
+    case 'amount' : return (isThisAvalidInput(input) || checked) ? String(calculateCorrectNumber(input)) : ''
     case 'percent' : return String(calculateCorrectNumber(input))
   }
   return ''
@@ -78,6 +85,8 @@ function isThisAvalidInput (input: string) : boolean {
   return !!input && !isNaN(Number(input)) && Number(input) >= 0
 }
 
+// calculation of the information to show in the tooltip
+
 const tooltipLines = computed(() => {
   let options
   if (Array.isArray(state.value)) {
@@ -85,7 +94,7 @@ const tooltipLines = computed(() => {
   } else {
     let plural: number
     if (type.value === 'amount' || type.value === 'percent') {
-      plural = calculateCorrectNumber(checkboxAndText.value.text)
+      plural = calculateCorrectNumber(checkboxAndText!.value.text)
     } else {
       plural = state.value ? 2 : 1
     }
@@ -94,10 +103,20 @@ const tooltipLines = computed(() => {
   return tAll(t, props.tPath + '.hint', options)
 })
 
-const textField = ref('')
-
+/*
+// input: keeping the text field up-to-date with new data coming from the parent through the bridge
 if (checkboxAndText) {
-  watch(() => checkboxAndText.value.text, () => { textField.value = checkboxAndText.value.text }, { immediate: true })
+  watch(checkboxAndText, (cat) => {
+    textField.value = cat.text
+  }, { immediate: true, deep: true })
+} */
+
+// output: on blur or enter, auto-correcting the text field /*and sending the corrected data to the bridge*/
+
+function acknowledgeInputtedText () {
+  // textField.value = correctUserInput(checkboxAndText!.value.check, textField.value)
+  // checkboxAndText!.value.text = textField.value
+  checkboxAndText!.value.text = correctUserInput(checkboxAndText!.value.check, checkboxAndText!.value.text)
 }
 
 const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
@@ -118,17 +137,19 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
     <div v-if="type != 'networks'" class="right">
       <div v-if="type == 'amount' || type == 'percent'" class="input">
         <InputText
-          v-model="textField"
+          v-if="checkboxAndText"
+          v-model="checkboxAndText.text"
           type="text"
           :placeholder="t(tPath + '.placeholder')"
           :class="[deactivationClass,type]"
-          @blur="checkboxAndText.text = correctUserInput(textField)"
+          @blur="acknowledgeInputtedText"
+          @keypress.enter="acknowledgeInputtedText"
         />
         &nbsp;
       </div>
       <span v-if="type == 'percent'" :class="deactivationClass">%</span>
       <Checkbox
-        v-model="checkboxAndText.check"
+        v-model="checkboxAndText!.check"
         :binary="true"
         class="checkbox"
         :class="deactivationClass"
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index bfe519f88..a147f35ba 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -13,27 +13,34 @@ interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
  *  3. At the moment the binding is created, it is typical that one array has initial data and the other is
  *     empty. You do not want the empty one to erase the initial data when the binding starts.
  * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
- * @param arraysWithSameElementsInDifferentOrdersAreTheSame Tells whether arrays with the same content in different orders must be considered identical.
  * @param origToCreated (optional) Callback/Arrow function that converts an element in the original array into the type of the elements in the created array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * @param createdToOrig (optional) Callback/Arrow function that converts an element in the created array into the type of the elements in the original array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * */
-export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, arraysWithSameElementsInDifferentOrdersAreTheSame: boolean, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated[]> {
+export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated[]> {
   const createdRef = ref<Tcreated[]>()
+  let pauseBack = false
+  let pauseForth = false
   const stopperForth = watch(origRef, () => {
-    let OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : convertPrimitiveByDefault<Tcreated>(el)) : undefined
-    if (arraysWithSameElementsInDifferentOrdersAreTheSame && OasC) { OasC = OasC.sort() }
-    const createdValue = (arraysWithSameElementsInDifferentOrdersAreTheSame && createdRef.value) ? createdRef.value.sort() : createdRef.value
-    if (JSON.stringify(OasC) !== JSON.stringify(createdValue)) {
-      createdRef.value = OasC
-    }
+    if (pauseForth) { return }
+    const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : convertPrimitiveByDefault<Tcreated>(el)) : undefined
+    // if (arraysWithSameElementsInDifferentOrdersAreTheSame && OasC) { OasC = OasC.sort() }
+    // const createdValue = (arraysWithSameElementsInDifferentOrdersAreTheSame && createdRef.value) ? createdRef.value.sort() : createdRef.value
+    // if (JSON.stringify(OasC) !== JSON.stringify(createdValue)) {
+    createdRef.value = OasC
+    // }
+    pauseBack = true
+    nextTick(() => { pauseBack = false })
   }, { immediate: true, deep: true })
   const stopperBack = watch(createdRef, () => {
-    let CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : convertPrimitiveByDefault<Torig>(el)) : undefined
-    if (arraysWithSameElementsInDifferentOrdersAreTheSame && CasO) { CasO = CasO.sort() }
-    const originalValue = (arraysWithSameElementsInDifferentOrdersAreTheSame && origRef.value) ? origRef.value.sort() : origRef.value
-    if (JSON.stringify(CasO) !== JSON.stringify(originalValue)) {
-      origRef.value = CasO as Torig[]
-    }
+    if (pauseBack) { return }
+    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : convertPrimitiveByDefault<Torig>(el)) : undefined
+    // if (arraysWithSameElementsInDifferentOrdersAreTheSame && CasO) { CasO = CasO.sort() }
+    // const originalValue = (arraysWithSameElementsInDifferentOrdersAreTheSame && origRef.value) ? origRef.value.sort() : origRef.value
+    // if (JSON.stringify(CasO) !== JSON.stringify(originalValue)) {
+    origRef.value = CasO as Torig[]
+    // }
+    pauseForth = true
+    nextTick(() => { pauseForth = false })
   }, { deep: true })
 
   onUnmounted(() => {
@@ -57,25 +64,32 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
  * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
  * @param origToCreated Callback/Arrow function that converts the object in the original ref into the structure of the object in the created ref.
  * @param createdToOrig Callback/Arrow function that converts the object in the created ref into the structure of the object in the original ref.
- * @param arraysWithSameElementsInDifferentOrdersAreTheSame (optional, `true` by default) If one of the reactive objects is an array, tells whether arrays with the same content in different orders must be considered identical.
  * */
-export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>, arraysWithSameElementsInDifferentOrdersAreTheSame: boolean = true) : Ref<Tcreated> {
+export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated> {
   const createdRef = ref<Tcreated>()
+  let pauseBack = false
+  let pauseForth = false
   const stopperForth = watch(origRef, () => {
-    let OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined
-    if (Array.isArray(OasC) && arraysWithSameElementsInDifferentOrdersAreTheSame) { OasC = OasC.sort() }
-    const createdValue = (Array.isArray(createdRef.value) && arraysWithSameElementsInDifferentOrdersAreTheSame) ? createdRef.value.sort() : createdRef.value
-    if (JSON.stringify(OasC) !== JSON.stringify(createdValue)) {
-      createdRef.value = OasC
-    }
+    if (pauseForth) { return }
+    const OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined
+    // if (Array.isArray(OasC) && arraysWithSameElementsInDifferentOrdersAreTheSame) { OasC = OasC.sort() }
+    // const createdValue = (Array.isArray(createdRef.value) && arraysWithSameElementsInDifferentOrdersAreTheSame) ? createdRef.value.sort() : createdRef.value
+    // if (JSON.stringify(OasC) !== JSON.stringify(createdValue)) {
+    createdRef.value = OasC
+    // }
+    pauseBack = true
+    nextTick(() => { pauseBack = false })
   }, { immediate: true, deep: true })
   const stopperBack = watch(createdRef, () => {
-    let CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined
-    if (Array.isArray(CasO) && arraysWithSameElementsInDifferentOrdersAreTheSame) { CasO = CasO.sort() }
-    const originalValue = (Array.isArray(origRef.value) && arraysWithSameElementsInDifferentOrdersAreTheSame) ? origRef.value.sort() : origRef.value
-    if (JSON.stringify(CasO) !== JSON.stringify(originalValue)) {
-      origRef.value = CasO as Torig
-    }
+    if (pauseBack) { return }
+    const CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined
+    // if (Array.isArray(CasO) && arraysWithSameElementsInDifferentOrdersAreTheSame) { CasO = CasO.sort() }
+    // const originalValue = (Array.isArray(origRef.value) && arraysWithSameElementsInDifferentOrdersAreTheSame) ? origRef.value.sort() : origRef.value
+    // if (JSON.stringify(CasO) !== JSON.stringify(originalValue)) {
+    origRef.value = CasO as Torig
+    // }
+    pauseForth = true
+    nextTick(() => { pauseForth = false })
   }, { deep: true })
 
   onUnmounted(() => {
@@ -102,17 +116,25 @@ export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRe
  * */
 export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated> {
   const createdRef = ref<Tcreated>()
+  let pauseBack = false
+  let pauseForth = false
   const stopperForth = watch(origRef, () => {
+    if (pauseForth) { return }
     const OasC = (origRef.value !== undefined) ? (origToCreated ? origToCreated(origRef.value) : convertPrimitiveByDefault<Tcreated>(origRef.value)) : undefined
-    if (OasC !== createdRef.value) {
-      createdRef.value = OasC
-    }
+    // if (OasC !== createdRef.value) {
+    createdRef.value = OasC
+    // }
+    pauseBack = true
+    nextTick(() => { pauseBack = false })
   }, { immediate: true })
   const stopperBack = watch(createdRef, () => {
+    if (pauseBack) { return }
     const CasO = (createdRef.value !== undefined) ? (createdToOrig ? createdToOrig(createdRef.value) : convertPrimitiveByDefault<Torig>(createdRef.value)) : undefined
-    if (CasO !== origRef.value) {
-      origRef.value = CasO as Torig
-    }
+    // if (CasO !== origRef.value) {
+    origRef.value = CasO as Torig
+    // }
+    pauseForth = true
+    nextTick(() => { pauseForth = false })
   })
 
   onUnmounted(() => {

From fdbe6e5adea4d5b3c1c814a941f383aae9e0a521 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Fri, 5 Jul 2024 18:02:04 +0200
Subject: [PATCH 30/69] (BIDS-2859) UI and all dependencies/utilities
 completed. Next commit will implement the sending of the preferences to the
 API

---
 .../notifications/SubscriptionDialog.vue      | 124 +++++++++++++-----
 .../notifications/SubscriptionRow.vue         |  65 ++++-----
 .../playground/PlaygroundDialog.vue           |   4 +-
 frontend/composables/useRefBridge.ts          |  45 +------
 frontend/types/subscriptionModal.ts           |   8 ++
 5 files changed, 125 insertions(+), 121 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 67495f077..2455264db 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import type { ValidatorSubscriptionState, AccountSubscriptionState } from '~/types/subscriptionModal'
-
-type ValidatorSubscriptionStateComplete = ValidatorSubscriptionState & {
-  offlineGroup: number,
-  realTime: boolean
-}
+import type { ValidatorSubscriptionState, AccountSubscriptionState, CheckboxAndNumber } from '~/types/subscriptionModal'
+import type { ChainID } from '~/types/network'
 
 interface Props {
   validatorSub?: ValidatorSubscriptionState,
@@ -12,27 +8,91 @@ interface Props {
   premiumUser: boolean
 }
 
+const MinimumTimeBetweenAPIcalls = 500 // ms
+const DefaultValueOfValidatorOptionsNeedingPremium = {
+  offlineGroup: -10, // means "10% and unchecked"
+  realTime: false
+  // ... add lines here if some options become premium in the future
+}
+const DefaultValueOfAccountOptionsNeedingPremium = {
+  // ... add lines here if some options become premium in the future
+}
+const OptionsOutsideTheScopeOfCheckboxall: Array<keyof(ValidatorSubscriptionState & AccountSubscriptionState)> =
+      ['networks', 'ignoreSpam']
+
+type AllPossibleOptions = ValidatorSubscriptionState & AccountSubscriptionState & typeof DefaultValueOfValidatorOptionsNeedingPremium & typeof DefaultValueOfAccountOptionsNeedingPremium
+type ModifiableOptions = Record<keyof AllPossibleOptions, CheckboxAndNumber|ChainID[]>
+
 const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
 const { t } = useI18n()
 
 const tPath = ref('')
-const validatorSubModifiable = ref({} as ValidatorSubscriptionStateComplete)
-const accountSubModifiable = ref({} as AccountSubscriptionState)
-const all = ref(false)
+const modifiableOptions = ref({} as ModifiableOptions)
+const allCheckbox = ref({ check: false } as CheckboxAndNumber)
+
+const debouncer = useDebounceValue<ModifiableOptions>({} as ModifiableOptions, MinimumTimeBetweenAPIcalls)
+watch(debouncer.value, sendUserPreferencesToAPI)
+
+let newDataJustLoaded = true // is used by the watcher of `modifiableOptions` to know when it is unnecessary to ouptut apparent changes to the API
 
 watch(props, (props) => {
   if (!props || (!props.validatorSub && !props.accountSub)) {
     return
   }
+  newDataJustLoaded = true
+  let options: AllPossibleOptions
   if (props.validatorSub) {
     tPath.value = 'notifications.subscriptions.validators.'
-    validatorSubModifiable.value = { offlineGroup: -1, realTime: false, ...structuredClone(toRaw(props.validatorSub)) }
-  } else if (props.accountSub) {
+    options = { ...DefaultValueOfValidatorOptionsNeedingPremium, ...structuredClone(toRaw(props.validatorSub)) } as AllPossibleOptions
+  } else {
     tPath.value = 'notifications.subscriptions.accounts.'
-    accountSubModifiable.value = structuredClone(toRaw(props.accountSub))
+    options = { ...DefaultValueOfAccountOptionsNeedingPremium, ...structuredClone(toRaw(props.accountSub)) } as AllPossibleOptions
+  }
+  modifiableOptions.value = {} as ModifiableOptions
+  for (const entry of Object.entries(options)) {
+    const key = entry[0] as keyof typeof options
+    if (Array.isArray(entry[1])) {
+      modifiableOptions.value[key] = entry[1]
+    } else {
+      switch (typeof entry[1]) {
+        case 'boolean' : modifiableOptions.value[key] = { check: entry[1], num: 0 }; break
+        case 'number' : modifiableOptions.value[key] = { check: entry[1] >= 0, num: Math.abs(entry[1]) }; break
+      }
+    }
   }
 }, { immediate: true })
 
+watch(allCheckbox, (option) => {
+  for (const k of Object.keys(modifiableOptions.value)) {
+    const key = k as keyof ModifiableOptions
+    if (isOptionAvailable(key) && !OptionsOutsideTheScopeOfCheckboxall.includes(key)) {
+      (modifiableOptions.value[key] as CheckboxAndNumber).check = option.check
+    }
+  }
+  // no need to call the API, the modifications that we did in `modifiableOptions.value` will trigger its watcher (that calls the API)
+})
+
+watch(modifiableOptions, (options) => {
+  allCheckbox.value.check = true
+  for (const k of Object.keys(modifiableOptions.value)) {
+    const key = k as keyof ModifiableOptions
+    if (isOptionAvailable(key) && !OptionsOutsideTheScopeOfCheckboxall.includes(key)) {
+      allCheckbox.value.check &&= (modifiableOptions.value[key] as CheckboxAndNumber).check
+    }
+  }
+  if (!newDataJustLoaded) {
+    // it will call `sendUserPreferencesToAPI()`
+    debouncer.bounce(options)
+  }
+  newDataJustLoaded = false
+}, { immediate: true, deep: true })
+
+function sendUserPreferencesToAPI () : void {
+// envoyer ce qi achange
+}
+
+const isOptionAvailable = (key: string) => props.value?.premiumUser || !(key in DefaultValueOfValidatorOptionsNeedingPremium || key in DefaultValueOfAccountOptionsNeedingPremium)
+
 const closeDialog = () => {
   const modified = true
   dialogRef?.value.close(modified)
@@ -50,36 +110,36 @@ const closeDialog = () => {
     </div>
 
     <div v-if="props.validatorSub">
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.offlineValidator" :t-path="tPath+'offline_validator'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.offlineValidator" :t-path="tPath+'offline_validator'" :lacks-premium-subscription="!isOptionAvailable('offlineValidator')" class="row" />
       <NotificationsSubscriptionRow
-        v-model="validatorSubModifiable.offlineGroup"
+        v-model="modifiableOptions.offlineGroup"
         :t-path="tPath+'offline_group'"
-        :lacks-premium-subscription="!props.premiumUser"
+        :lacks-premium-subscription="!isOptionAvailable('offlineGroup')"
         input-type="percent"
-        :default="10"
+        :default="DefaultValueOfValidatorOptionsNeedingPremium.offlineGroup"
         class="row"
       />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.missedAttestations" :t-path="tPath+'missed_attestations'" :lacks-premium-subscription="false" class="row" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.proposedBlock" :t-path="tPath+'proposed_block'" :lacks-premium-subscription="false" class="row" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.upcomingProposal" :t-path="tPath+'upcoming_proposal'" :lacks-premium-subscription="false" class="row" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.syncCommittee" :t-path="tPath+'sync_committee'" :lacks-premium-subscription="false" class="row" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.withdrawn" :t-path="tPath+'withdrawn'" :lacks-premium-subscription="false" class="row" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.slashed" :t-path="tPath+'slashed'" :lacks-premium-subscription="false" class="row" />
-      <NotificationsSubscriptionRow v-model="validatorSubModifiable.realTime" :t-path="tPath+'real_time'" :lacks-premium-subscription="!props.premiumUser" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.missedAttestations" :t-path="tPath+'missed_attestations'" :lacks-premium-subscription="!isOptionAvailable('missedAttestations')" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.proposedBlock" :t-path="tPath+'proposed_block'" :lacks-premium-subscription="!isOptionAvailable('proposedBlock')" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.upcomingProposal" :t-path="tPath+'upcoming_proposal'" :lacks-premium-subscription="!isOptionAvailable('upcomingProposal')" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.syncCommittee" :t-path="tPath+'sync_committee'" :lacks-premium-subscription="!isOptionAvailable('syncCommittee')" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.withdrawn" :t-path="tPath+'withdrawn'" :lacks-premium-subscription="!isOptionAvailable('withdrawn')" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.slashed" :t-path="tPath+'slashed'" :lacks-premium-subscription="!isOptionAvailable('slashed')" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.realTime" :t-path="tPath+'real_time'" :lacks-premium-subscription="!isOptionAvailable('realTime')" class="row" />
       <hr>
-      <NotificationsSubscriptionRow v-model="all" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="allCheckbox" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" />
     </div>
 
     <div v-else-if="props.accountSub">
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.incoming" :t-path="tPath+'incoming'" :lacks-premium-subscription="false" class="row" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.outgoing" :t-path="tPath+'outgoing'" :lacks-premium-subscription="false" class="row" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc20" :t-path="tPath+'erc20'" :lacks-premium-subscription="false" input-type="amount" class="row" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc721" :t-path="tPath+'erc721'" :lacks-premium-subscription="false" class="row" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.erc1155" :t-path="tPath+'erc1155'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.incoming" :t-path="tPath+'incoming'" :lacks-premium-subscription="!isOptionAvailable('incoming')" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.outgoing" :t-path="tPath+'outgoing'" :lacks-premium-subscription="!isOptionAvailable('outgoing')" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.erc20" :t-path="tPath+'erc20'" :lacks-premium-subscription="!isOptionAvailable('erc20')" input-type="amount" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.erc721" :t-path="tPath+'erc721'" :lacks-premium-subscription="!isOptionAvailable('erc721')" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.erc1155" :t-path="tPath+'erc1155'" :lacks-premium-subscription="!isOptionAvailable('erc1155')" class="row" />
       <hr>
-      <NotificationsSubscriptionRow v-model="all" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.networks" :t-path="tPath+'networks'" :lacks-premium-subscription="false" input-type="networks" class="row" />
-      <NotificationsSubscriptionRow v-model="accountSubModifiable.ignoreSpam" :t-path="tPath+'ignore_spam'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="allCheckbox" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.networks" :t-path="tPath+'networks'" :lacks-premium-subscription="!isOptionAvailable('networks')" input-type="networks" class="row" />
+      <NotificationsSubscriptionRow v-model="modifiableOptions.ignoreSpam" :t-path="tPath+'ignore_spam'" :lacks-premium-subscription="!isOptionAvailable('ignoreSpam')" class="row" />
     </div>
 
     <div class="footer">
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 17f81c006..a2c67ac09 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import type { ModelRef } from 'vue'
 import type { ChainID } from '~/types/network'
+import type { CheckboxAndNumber } from '~/types/subscriptionModal'
 
 const props = defineProps<{
   tPath: string,
@@ -11,8 +12,7 @@ const props = defineProps<{
   default?: number
 }>()
 
-const type = computed(() => props.inputType || 'binary')
-// const textField = ref('')
+const type = computed(() => props.inputType ?? 'binary')
 
 const { t } = useI18n()
 
@@ -21,59 +21,49 @@ interface CheckboxAndText {
   text: string
 }
 
-/** - if boolean: checked state of the checkbox
- *  - if number: -1 means unchecked, another value means checked and copies the textfield (converted in a number)
- *  - if array: list of selected networks */
-const state = defineModel<boolean|number|ChainID[]>({ required: true })
+const state = defineModel<CheckboxAndNumber|ChainID[]>({ required: true })
 let networkSelectorState: ModelRef<ChainID[]>
 let checkboxAndText: Ref<CheckboxAndText> | undefined
 
-// bridging the v-model with the data structures of this component
+// bridging the v-model (CheckboxAndNumber | ChainID[]) with the data of this component (CheckboxAndText | ChainID[])
 
 if (type.value === 'networks') {
   networkSelectorState = state as ModelRef<ChainID[]>
 } else {
-  checkboxAndText = useObjectRefBridge<boolean|number, CheckboxAndText>(state as Ref<boolean|number>, receiveFromVModel, sendToVModel)
+  checkboxAndText = useObjectRefBridge<CheckboxAndNumber, CheckboxAndText>(state as Ref<CheckboxAndNumber>, receiveFromVModel, sendToVModel)
 }
 
-function receiveFromVModel (state: boolean|number) : CheckboxAndText {
+function receiveFromVModel (state: CheckboxAndNumber) : CheckboxAndText {
   const output = {} as CheckboxAndText
-  switch (type.value) {
-    case 'amount' :
-    case 'percent' :
-      output.check = (state as number >= 0)
-      output.text = correctUserInput(output.check, output.check ? String(state) : checkboxAndText!.value.text /* textField.value */)
-      break
-    case 'binary' :
-      output.check = state as boolean
-      break
+  output.check = state.check
+  if (type.value === 'amount' || type.value === 'percent') {
+    output.text = isNaN(state.num) ? '' : String(state.num)
   }
   return output
 }
 
-function sendToVModel (state: CheckboxAndText) : boolean|number {
-  switch (type.value) {
-    case 'amount' :
-    case 'percent' :
-      return state.check ? calculateCorrectNumber(state.text) : -1
-    case 'binary' :
-      return state.check
+function sendToVModel (state: CheckboxAndText) : CheckboxAndNumber {
+  const output = {} as CheckboxAndNumber
+  output.check = state.check
+  if (type.value === 'amount' || type.value === 'percent') {
+    const corrected = correctUserInput(state.text)
+    output.num = (corrected === '') ? NaN : Number(corrected)
   }
-  return 0
+  return output
 }
 
 // input validation / autocorrection
 
-function correctUserInput (checked: boolean, input: string) : string {
+function correctUserInput (input: string) : string {
   switch (type.value) {
-    case 'amount' : return (isThisAvalidInput(input) || checked) ? String(calculateCorrectNumber(input)) : ''
+    case 'amount' : return isThisAvalidInput(input) ? String(calculateCorrectNumber(input)) : ''
     case 'percent' : return String(calculateCorrectNumber(input))
   }
   return ''
 }
 
 function calculateCorrectNumber (input: string) : number {
-  let num = !isThisAvalidInput(input) ? (props.default ?? 0) : Number(input)
+  let num = !isThisAvalidInput(input) ? Math.abs(props.default ?? 0) : Number(input)
   if (type.value === 'percent') {
     if (num < 1) { num = 1 }
     if (num > 100) { num = 100 }
@@ -103,20 +93,9 @@ const tooltipLines = computed(() => {
   return tAll(t, props.tPath + '.hint', options)
 })
 
-/*
-// input: keeping the text field up-to-date with new data coming from the parent through the bridge
-if (checkboxAndText) {
-  watch(checkboxAndText, (cat) => {
-    textField.value = cat.text
-  }, { immediate: true, deep: true })
-} */
-
-// output: on blur or enter, auto-correcting the text field /*and sending the corrected data to the bridge*/
-
+// output: on blur or enter, auto-correcting the text field
 function acknowledgeInputtedText () {
-  // textField.value = correctUserInput(checkboxAndText!.value.check, textField.value)
-  // checkboxAndText!.value.text = textField.value
-  checkboxAndText!.value.text = correctUserInput(checkboxAndText!.value.check, checkboxAndText!.value.text)
+  checkboxAndText!.value.text = correctUserInput(checkboxAndText!.value.text)
 }
 
 const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
@@ -156,7 +135,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
       />
     </div>
     <div v-else class="right">
-      <BcNetworkSelector v-model="networkSelectorState" />
+      <BcNetworkSelector v-model="networkSelectorState" :class="deactivationClass" />
     </div>
   </div>
 </template>
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 349ac04bb..a1553adad 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -38,10 +38,10 @@ const validatorSub: ValidatorSubscriptionState = {
 const accountSub: AccountSubscriptionState = {
   incoming: true,
   outgoing: true,
-  erc20: -1,
+  erc20: NaN,
   erc721: true,
   erc1155: false,
-  networks: [17000, 10200],
+  networks: [17000],
   ignoreSpam: true
 }
 
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index a147f35ba..ef72bfb31 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -23,22 +23,14 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
   const stopperForth = watch(origRef, () => {
     if (pauseForth) { return }
     const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : convertPrimitiveByDefault<Tcreated>(el)) : undefined
-    // if (arraysWithSameElementsInDifferentOrdersAreTheSame && OasC) { OasC = OasC.sort() }
-    // const createdValue = (arraysWithSameElementsInDifferentOrdersAreTheSame && createdRef.value) ? createdRef.value.sort() : createdRef.value
-    // if (JSON.stringify(OasC) !== JSON.stringify(createdValue)) {
     createdRef.value = OasC
-    // }
     pauseBack = true
     nextTick(() => { pauseBack = false })
   }, { immediate: true, deep: true })
   const stopperBack = watch(createdRef, () => {
     if (pauseBack) { return }
     const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : convertPrimitiveByDefault<Torig>(el)) : undefined
-    // if (arraysWithSameElementsInDifferentOrdersAreTheSame && CasO) { CasO = CasO.sort() }
-    // const originalValue = (arraysWithSameElementsInDifferentOrdersAreTheSame && origRef.value) ? origRef.value.sort() : origRef.value
-    // if (JSON.stringify(CasO) !== JSON.stringify(originalValue)) {
     origRef.value = CasO as Torig[]
-    // }
     pauseForth = true
     nextTick(() => { pauseForth = false })
   }, { deep: true })
@@ -72,22 +64,14 @@ export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRe
   const stopperForth = watch(origRef, () => {
     if (pauseForth) { return }
     const OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined
-    // if (Array.isArray(OasC) && arraysWithSameElementsInDifferentOrdersAreTheSame) { OasC = OasC.sort() }
-    // const createdValue = (Array.isArray(createdRef.value) && arraysWithSameElementsInDifferentOrdersAreTheSame) ? createdRef.value.sort() : createdRef.value
-    // if (JSON.stringify(OasC) !== JSON.stringify(createdValue)) {
     createdRef.value = OasC
-    // }
     pauseBack = true
     nextTick(() => { pauseBack = false })
   }, { immediate: true, deep: true })
   const stopperBack = watch(createdRef, () => {
     if (pauseBack) { return }
     const CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined
-    // if (Array.isArray(CasO) && arraysWithSameElementsInDifferentOrdersAreTheSame) { CasO = CasO.sort() }
-    // const originalValue = (Array.isArray(origRef.value) && arraysWithSameElementsInDifferentOrdersAreTheSame) ? origRef.value.sort() : origRef.value
-    // if (JSON.stringify(CasO) !== JSON.stringify(originalValue)) {
     origRef.value = CasO as Torig
-    // }
     pauseForth = true
     nextTick(() => { pauseForth = false })
   }, { deep: true })
@@ -115,34 +99,7 @@ export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRe
  * @param createdToOrig (optional) Callback/Arrow function that converts the value in the created ref into the type of the value in the original ref. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * */
 export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated> {
-  const createdRef = ref<Tcreated>()
-  let pauseBack = false
-  let pauseForth = false
-  const stopperForth = watch(origRef, () => {
-    if (pauseForth) { return }
-    const OasC = (origRef.value !== undefined) ? (origToCreated ? origToCreated(origRef.value) : convertPrimitiveByDefault<Tcreated>(origRef.value)) : undefined
-    // if (OasC !== createdRef.value) {
-    createdRef.value = OasC
-    // }
-    pauseBack = true
-    nextTick(() => { pauseBack = false })
-  }, { immediate: true })
-  const stopperBack = watch(createdRef, () => {
-    if (pauseBack) { return }
-    const CasO = (createdRef.value !== undefined) ? (createdToOrig ? createdToOrig(createdRef.value) : convertPrimitiveByDefault<Torig>(createdRef.value)) : undefined
-    // if (CasO !== origRef.value) {
-    origRef.value = CasO as Torig
-    // }
-    pauseForth = true
-    nextTick(() => { pauseForth = false })
-  })
-
-  onUnmounted(() => {
-    stopperBack()
-    stopperForth()
-  })
-
-  return createdRef as Ref<Tcreated>
+  return useObjectRefBridge<Torig, Tcreated>(origRef, origToCreated ?? convertPrimitiveByDefault, createdToOrig ?? convertPrimitiveByDefault)
 }
 
 function convertPrimitiveByDefault<TO> (from: any) : TO {
diff --git a/frontend/types/subscriptionModal.ts b/frontend/types/subscriptionModal.ts
index b1d6884a9..38b615e31 100644
--- a/frontend/types/subscriptionModal.ts
+++ b/frontend/types/subscriptionModal.ts
@@ -1,5 +1,6 @@
 import { ChainID } from './network'
 
+/** for an option of type `number`: to mean that no value exists in the DB yet, set it to NaN; to mean that it is has a value but it is deactivated, set it to a negative value (for example 10% becomes -10) */
 export type ValidatorSubscriptionState = {
   offlineValidator: boolean,
   offlineGroup?: number,
@@ -12,6 +13,7 @@ export type ValidatorSubscriptionState = {
   realTime?: boolean
 }
 
+/** for an option of type `number`: to mean that no value exists in the DB yet, set it to NaN; to mean that it is has a value but it is deactivated, set it to a negative value (for example $50 becomes -50) */
 export type AccountSubscriptionState = {
   incoming: boolean,
   outgoing: boolean,
@@ -21,3 +23,9 @@ export type AccountSubscriptionState = {
   networks: ChainID[],
   ignoreSpam: boolean
 }
+
+/** for internal use */
+export interface CheckboxAndNumber {
+  check: boolean,
+  num: number
+}

From d407d949bc2fba6c23d39f7c18cf1ff392acb1fb Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Fri, 5 Jul 2024 20:53:19 +0200
Subject: [PATCH 31/69] (BIDS-2859) preferences are now sent to the API

---
 .../notifications/SubscriptionDialog.vue      | 87 ++++++++++++++-----
 .../notifications/SubscriptionRow.vue         | 14 ++-
 .../playground/PlaygroundDialog.vue           |  6 +-
 frontend/composables/useCustomFetch.ts        | 10 ++-
 frontend/i18n/en.json                         |  5 +-
 frontend/types/customFetch.ts                 |  8 +-
 frontend/utils/misc.ts                        |  4 +
 7 files changed, 102 insertions(+), 32 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 2455264db..36025738e 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { ValidatorSubscriptionState, AccountSubscriptionState, CheckboxAndNumber } from '~/types/subscriptionModal'
 import type { ChainID } from '~/types/network'
+import type { ApiErrorResponse } from '~/types/api/common'
+import { API_PATH } from '~/types/customFetch'
 
 interface Props {
   validatorSub?: ValidatorSubscriptionState,
@@ -8,49 +10,51 @@ interface Props {
   premiumUser: boolean
 }
 
-const MinimumTimeBetweenAPIcalls = 500 // ms
+const TimeoutForSavingFailures = 2000 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost what you did half a minute ago, we hope you remember your preferences and do not mind going back to that dialog"
+const MinimumTimeBetweenAPIcalls = 700 // ms
 const DefaultValueOfValidatorOptionsNeedingPremium = {
   offlineGroup: -10, // means "10% and unchecked"
   realTime: false
-  // ... add lines here if some options become premium in the future
+  // ... add lines here to make options available to premium accounts only
 }
 const DefaultValueOfAccountOptionsNeedingPremium = {
-  // ... add lines here if some options become premium in the future
+  // add lines here to make options available to premium accounts only
 }
 const OptionsOutsideTheScopeOfCheckboxall: Array<keyof(ValidatorSubscriptionState & AccountSubscriptionState)> =
-      ['networks', 'ignoreSpam']
+      ['networks', 'ignoreSpam'] // options that are not in the group of the all-checkbox
 
 type AllPossibleOptions = ValidatorSubscriptionState & AccountSubscriptionState & typeof DefaultValueOfValidatorOptionsNeedingPremium & typeof DefaultValueOfAccountOptionsNeedingPremium
 type ModifiableOptions = Record<keyof AllPossibleOptions, CheckboxAndNumber|ChainID[]>
 
 const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
 const { t } = useI18n()
+const { fetch, setTimeout } = useCustomFetch()
+const toast = useBcToast()
 
 const tPath = ref('')
+let originalSettings = {} as AllPossibleOptions
 const modifiableOptions = ref({} as ModifiableOptions)
 const allCheckbox = ref({ check: false } as CheckboxAndNumber)
 
-const debouncer = useDebounceValue<ModifiableOptions>({} as ModifiableOptions, MinimumTimeBetweenAPIcalls)
+const debouncer = useDebounceValue<number>(0, MinimumTimeBetweenAPIcalls)
 watch(debouncer.value, sendUserPreferencesToAPI)
 
-let newDataJustLoaded = true // is used by the watcher of `modifiableOptions` to know when it is unnecessary to ouptut apparent changes to the API
+let dataNonce = 0 // is used by the watcher of `modifiableOptions` to know when it is unnecessary to send apparent changes to the API (it doesn't send if the nonce is 0)
 
 watch(props, (props) => {
   if (!props || (!props.validatorSub && !props.accountSub)) {
     return
   }
-  newDataJustLoaded = true
-  let options: AllPossibleOptions
   if (props.validatorSub) {
     tPath.value = 'notifications.subscriptions.validators.'
-    options = { ...DefaultValueOfValidatorOptionsNeedingPremium, ...structuredClone(toRaw(props.validatorSub)) } as AllPossibleOptions
+    originalSettings = { ...DefaultValueOfValidatorOptionsNeedingPremium, ...structuredClone(toRaw(props.validatorSub)) } as AllPossibleOptions
   } else {
     tPath.value = 'notifications.subscriptions.accounts.'
-    options = { ...DefaultValueOfAccountOptionsNeedingPremium, ...structuredClone(toRaw(props.accountSub)) } as AllPossibleOptions
+    originalSettings = { ...DefaultValueOfAccountOptionsNeedingPremium, ...structuredClone(toRaw(props.accountSub)) } as AllPossibleOptions
   }
   modifiableOptions.value = {} as ModifiableOptions
-  for (const entry of Object.entries(options)) {
-    const key = entry[0] as keyof typeof options
+  for (const entry of Object.entries(originalSettings)) {
+    const key = entry[0] as keyof typeof originalSettings
     if (Array.isArray(entry[1])) {
       modifiableOptions.value[key] = entry[1]
     } else {
@@ -60,6 +64,7 @@ watch(props, (props) => {
       }
     }
   }
+  dataNonce = 0
 }, { immediate: true })
 
 watch(allCheckbox, (option) => {
@@ -74,28 +79,66 @@ watch(allCheckbox, (option) => {
 
 watch(modifiableOptions, (options) => {
   allCheckbox.value.check = true
-  for (const k of Object.keys(modifiableOptions.value)) {
+  for (const k of Object.keys(options)) {
     const key = k as keyof ModifiableOptions
     if (isOptionAvailable(key) && !OptionsOutsideTheScopeOfCheckboxall.includes(key)) {
-      allCheckbox.value.check &&= (modifiableOptions.value[key] as CheckboxAndNumber).check
+      allCheckbox.value.check &&= (options[key] as CheckboxAndNumber).check
     }
   }
-  if (!newDataJustLoaded) {
+  if (dataNonce > 0) {
     // it will call `sendUserPreferencesToAPI()`
-    debouncer.bounce(options)
+    debouncer.bounce(dataNonce, false, true)
   }
-  newDataJustLoaded = false
+  dataNonce++
 }, { immediate: true, deep: true })
 
-function sendUserPreferencesToAPI () : void {
-// envoyer ce qi achange
+let lastSaveFailed = false
+
+async function sendUserPreferencesToAPI () {
+  // first we convert our internal structures to the format of the API
+  const output = {} as Record<string, any>
+  for (const entry of Object.entries(modifiableOptions.value)) {
+    const key = entry[0] as keyof ModifiableOptions
+    const snaKey = camelToSnakeCase(key)
+    if (Array.isArray(entry[1])) {
+      output[snaKey] = entry[1]
+    } else {
+      switch (typeof originalSettings[key]) {
+        case 'boolean' : output[snaKey] = entry[1].check; break
+        case 'number' : output[snaKey] = entry[1].num * (entry[1].check ? 1 : -1); break
+      }
+    }
+  }
+  // now we send the data
+  let response: ApiErrorResponse | undefined
+  try {
+    setTimeout(TimeoutForSavingFailures)
+    response = await fetch<ApiErrorResponse>(API_PATH.NOTIFICATION_SUBSCRIPTIONS, {
+      method: 'POST',
+      body: {
+        category: props.value?.accountSub ? 'accounts' : 'validators',
+        subscriptions: output
+      }
+    })
+  } catch {
+    response = undefined
+  }
+  if (!response || response.error) {
+    toast.showError({ summary: t('notifications.subscriptions.error_title'), group: t('notifications.subscriptions.error_group'), detail: t('notifications.subscriptions.error_message') })
+    lastSaveFailed = true // we will try again when the dialog closes
+  } else {
+    lastSaveFailed = false
+  }
 }
 
 const isOptionAvailable = (key: string) => props.value?.premiumUser || !(key in DefaultValueOfValidatorOptionsNeedingPremium || key in DefaultValueOfAccountOptionsNeedingPremium)
 
 const closeDialog = () => {
-  const modified = true
-  dialogRef?.value.close(modified)
+  if (lastSaveFailed) {
+    // second chance: we try not lose what the user has set
+    debouncer.bounce(dataNonce, false, true)
+  }
+  dialogRef?.value.close(true)
 }
 </script>
 
@@ -143,7 +186,7 @@ const closeDialog = () => {
     </div>
 
     <div class="footer">
-      <Button type="button" :label="t('notifications.subscriptions.save')" @click="closeDialog" />
+      <Button type="button" :label="t('notifications.subscriptions.button')" @click="closeDialog" />
     </div>
   </div>
 </template>
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index a2c67ac09..5b0685635 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -112,7 +112,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
         <BcMiniParser :input="tooltipLines" class="tt-content" />
       </template>
     </BcTooltip>
-    <BcPremiumGem v-if="lacksPremiumSubscription" />
+    <BcPremiumGem v-if="lacksPremiumSubscription" class="gem" />
     <div v-if="type != 'networks'" class="right">
       <div v-if="type == 'amount' || type == 'percent'" class="input">
         <InputText
@@ -154,10 +154,18 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
   @include fonts.small_text;
   align-items: center;
 
+  .caption {
+    margin-right: 3px;
+  }
+
   .info {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: 3px;
+    margin-right: 3px;
   }
+  .gem {
+    margin-left: 3px;
+  }
+
   .right {
     display: flex;
     position: relative;
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index a1553adad..ebba5d5e1 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -25,7 +25,7 @@ const openQuestion = (yesLabel?: string, noLabel?: string) => {
 
 const validatorSub: ValidatorSubscriptionState = {
   offlineValidator: true,
-  offlineGroup: 40,
+  offlineGroup: -40, // means "40% and deselected/unchecked"
   missedAttestations: true,
   proposedBlock: true,
   upcomingProposal: false,
@@ -38,7 +38,7 @@ const validatorSub: ValidatorSubscriptionState = {
 const accountSub: AccountSubscriptionState = {
   incoming: true,
   outgoing: true,
-  erc20: NaN,
+  erc20: NaN, // means "not in the database yet" (will leave the input field empty with a placeholder)
   erc721: true,
   erc1155: false,
   networks: [17000],
@@ -48,7 +48,7 @@ const accountSub: AccountSubscriptionState = {
 function openSubscriptions (props: any) {
   dialog.open(NotificationsSubscriptionDialog, {
     data: props,
-    onClose: modified => onClose(modified?.data)
+    onClose: response => onClose(response?.data)
   })
 }
 </script>
diff --git a/frontend/composables/useCustomFetch.ts b/frontend/composables/useCustomFetch.ts
index 71d17ea05..a59147796 100644
--- a/frontend/composables/useCustomFetch.ts
+++ b/frontend/composables/useCustomFetch.ts
@@ -17,6 +17,7 @@ export function useCustomFetch () {
   const { t: $t } = useI18n()
   const { $bcLogger } = useNuxtApp()
   const uuid = inject<{value: string}>('app-uuid')
+  let timeout = APIcallTimeout
 
   async function fetch<T> (pathName: PathName, options: NitroFetchOptions<string & {}> = { }, pathValues?: PathValues, query?: PathValues, dontShowError = false): Promise<T> {
     const map = mapping[pathName]
@@ -25,7 +26,7 @@ export function useCustomFetch () {
     }
 
     if (options.signal === undefined) {
-      options.signal = AbortSignal.timeout(APIcallTimeout)
+      options.signal = AbortSignal.timeout(timeout)
     }
 
     if (map.mockFunction !== undefined && map.mock) {
@@ -87,5 +88,10 @@ export function useCustomFetch () {
       throw (e)
     }
   }
-  return { fetch }
+
+  function setTimeout (delay: number) {
+    timeout = delay
+  }
+
+  return { fetch, setTimeout }
 }
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 724ed2a6d..4efda9832 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -779,7 +779,10 @@
           "hint": ["Ignores *zero value transfer tx's* and token tx's that have the *\"hidden\" token label*."]
         }
       },
-      "save":"Save"
+      "button":"Close",
+      "error_title": "Error",
+      "error_group": "Saving",
+      "error_message": "We could not save your preferences."
     }
   },
   "pricing": {
diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts
index ca6808754..b75c87775 100644
--- a/frontend/types/customFetch.ts
+++ b/frontend/types/customFetch.ts
@@ -40,7 +40,8 @@ export enum API_PATH {
   AVAILABLE_NETWORKS = '/availableNetworks',
   PRODUCT_SUMMARY = '/productSummary',
   STRIPE_CUSTOMER_PORTAL = '/stripe/customer-portal',
-  STRIPE_CHECKOUT_SESSION = '/stripe/checkout-session'
+  STRIPE_CHECKOUT_SESSION = '/stripe/checkout-session',
+  NOTIFICATION_SUBSCRIPTIONS = '/notifications/subscriptions'
 }
 
 export type PathValues = Record<string, string | number>
@@ -265,5 +266,10 @@ export const mapping: Record<string, MappingData> = {
     path: '/user/stripe/create-checkout-session',
     method: 'POST',
     mock: false
+  },
+  [API_PATH.NOTIFICATION_SUBSCRIPTIONS]: {
+    path: '/notifications/subscriptions',
+    method: 'POST',
+    mock: true
   }
 }
diff --git a/frontend/utils/misc.ts b/frontend/utils/misc.ts
index 9e8badc2b..1239d90c4 100644
--- a/frontend/utils/misc.ts
+++ b/frontend/utils/misc.ts
@@ -33,3 +33,7 @@ export function generateUUID () {
       return v.toString(16)
     })
 }
+
+export function camelToSnakeCase (str: string) : string {
+  return str.replace(/[A-Z]/g, big => '_' + big.toLowerCase())
+}

From 720a2eb42ed512703f605cb9f2bea17a9d1c35f5 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Fri, 5 Jul 2024 21:46:19 +0200
Subject: [PATCH 32/69] (BIDS-2859) details

---
 frontend/components/notifications/SubscriptionDialog.vue | 4 ++--
 frontend/utils/misc.ts                                   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 36025738e..735d062a2 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -10,8 +10,8 @@ interface Props {
   premiumUser: boolean
 }
 
-const TimeoutForSavingFailures = 2000 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost what you did half a minute ago, we hope you remember your preferences and do not mind going back to that dialog"
-const MinimumTimeBetweenAPIcalls = 700 // ms
+const TimeoutForSavingFailures = 2300 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost your preferences half a minute ago, we hope you remember them and do not mind going back to that dialog"
+const MinimumTimeBetweenAPIcalls = 700 // ms. Any change ends-up saved anyway, so we can prevent useless requests with a delay larger than usual.
 const DefaultValueOfValidatorOptionsNeedingPremium = {
   offlineGroup: -10, // means "10% and unchecked"
   realTime: false
diff --git a/frontend/utils/misc.ts b/frontend/utils/misc.ts
index 1239d90c4..e0047027d 100644
--- a/frontend/utils/misc.ts
+++ b/frontend/utils/misc.ts
@@ -35,5 +35,5 @@ export function generateUUID () {
 }
 
 export function camelToSnakeCase (str: string) : string {
-  return str.replace(/[A-Z]/g, big => '_' + big.toLowerCase())
+  return str[0].toLocaleLowerCase() + str.slice(1).replace(/[A-Z]/g, big => '_' + big.toLowerCase())
 }

From a95a8f005d4d06fa501e7cd529f25166326328e7 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Fri, 5 Jul 2024 21:49:05 +0200
Subject: [PATCH 33/69] (BIDS-2859) detail

---
 frontend/utils/misc.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/utils/misc.ts b/frontend/utils/misc.ts
index e0047027d..58aa9b8c6 100644
--- a/frontend/utils/misc.ts
+++ b/frontend/utils/misc.ts
@@ -35,5 +35,5 @@ export function generateUUID () {
 }
 
 export function camelToSnakeCase (str: string) : string {
-  return str[0].toLocaleLowerCase() + str.slice(1).replace(/[A-Z]/g, big => '_' + big.toLowerCase())
+  return str[0].toLowerCase() + str.slice(1).replace(/[A-Z]/g, big => '_' + big.toLowerCase())
 }

From efab02706a0da2ccc0449432ddc6359d32d7fb18 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Fri, 5 Jul 2024 23:02:48 +0200
Subject: [PATCH 34/69] (BIDS-2859) the last-chance-save could not work. Fixed

---
 frontend/components/notifications/SubscriptionDialog.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 735d062a2..d73d4f74b 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -133,10 +133,10 @@ async function sendUserPreferencesToAPI () {
 
 const isOptionAvailable = (key: string) => props.value?.premiumUser || !(key in DefaultValueOfValidatorOptionsNeedingPremium || key in DefaultValueOfAccountOptionsNeedingPremium)
 
-const closeDialog = () => {
+function closeDialog () : void {
   if (lastSaveFailed) {
-    // second chance: we try not lose what the user has set
-    debouncer.bounce(dataNonce, false, true)
+    // second chance: we try not to lose what the user has set
+    sendUserPreferencesToAPI()
   }
   dialogRef?.value.close(true)
 }

From 8fbf33f27d1fffd772e5826089ed49fcfa79e688 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Sat, 6 Jul 2024 10:21:51 +0200
Subject: [PATCH 35/69] (BIDS-2859) slight improvements

---
 frontend/components/bc/NetworkSelector.vue    |  18 +--
 .../bc/searchbar/NetworkSelector.vue          |  12 +-
 .../components/bc/searchbar/SearchbarMain.vue |  22 +--
 .../components/bc/searchbar/SuggestionRow.vue |   6 +-
 .../creation/DashboardCreationController.vue  |   4 +-
 .../creation/DashboardCreationNetworkMask.vue |  10 +-
 frontend/components/icon/IconNetwork.vue      |   4 +-
 .../notifications/SubscriptionDialog.vue      |   4 +-
 .../notifications/SubscriptionRow.vue         |  10 +-
 .../components/playground/PlaygroundIcons.vue |   8 +-
 frontend/composables/useRefBridge.ts          |  11 +-
 .../stores/dashboard/useUserDashboardStore.ts |   4 +-
 frontend/stores/useNetworkStore.ts            |  14 +-
 frontend/types/network.ts                     | 138 +++++++++---------
 frontend/types/searchbar.ts                   |  12 +-
 frontend/types/subscriptionModal.ts           |   4 +-
 frontend/utils/format.ts                      |   8 +-
 17 files changed, 145 insertions(+), 144 deletions(-)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index d5dcebf73..dbfb3d589 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MultiBarItem } from '~/types/multiBar'
 import { IconNetwork } from '#components'
-import { ChainInfo, ChainID } from '~/types/network'
+import { ChainInfo, ChainIDs } from '~/types/network'
 
 const props = defineProps<{
   displayOnly?: boolean
@@ -10,25 +10,25 @@ const props = defineProps<{
 const { availableNetworks, isNetworkDisabled } = useNetworkStore()
 
 /** If the v-model is:
- *  - A ChainID: only one network can be selected by the user. Prop `:display-only` must be false or omitted.
- *  - An array of ChainID:
+ *  - A ChainIDs: only one network can be selected by the user. Prop `:display-only` must be false or omitted.
+ *  - An array of ChainIDs:
  *    - and prop `:display-only` is `false`/omitted: several networks can be selected by the user,
  *    - and prop `:display-only` is `true`: the networks in the array are shown to the user but they are unclickable. */
-const liveState = defineModel<ChainID|ChainID[]>({ required: false })
+const liveState = defineModel<ChainIDs|ChainIDs[]>({ required: false })
 
 const selection = Array.isArray(liveState.value)
-  ? useArrayRefBridge<ChainID, string>(liveState as Ref<ChainID[]>)
-  : usePrimitiveRefBridge<ChainID, string>(liveState as Ref<ChainID>)
+  ? useArrayRefBridge<ChainIDs, string>(liveState as Ref<ChainIDs[]>)
+  : usePrimitiveRefBridge<ChainIDs, string>(liveState as Ref<ChainIDs>)
 
 const buttons = shallowRef<MultiBarItem[]>([])
 
 if (props.displayOnly) {
-  watch(liveState as Ref<ChainID[]>, updateButtons, { immediate: true })
+  watch(liveState as Ref<ChainIDs[]>, updateButtons, { immediate: true })
 } else {
   watch(availableNetworks, updateButtons, { immediate: true })
 }
 
-function updateButtons (source: ChainID[]) : void {
+function updateButtons (source: ChainIDs[]) : void {
   buttons.value = []
   source.forEach((chainId) => {
       buttons.value!.push({
@@ -37,7 +37,7 @@ function updateButtons (source: ChainID[]) : void {
         componentClass: 'maximum',
         value: String(chainId),
         disabled: isNetworkDisabled(chainId),
-        tooltip: ChainInfo[chainId].name + ' ' + ChainInfo[chainId].description
+        tooltip: ChainInfo[chainId].name.join(' ')
       })
   })
 }
diff --git a/frontend/components/bc/searchbar/NetworkSelector.vue b/frontend/components/bc/searchbar/NetworkSelector.vue
index 9fce53364..237b33ab5 100644
--- a/frontend/components/bc/searchbar/NetworkSelector.vue
+++ b/frontend/components/bc/searchbar/NetworkSelector.vue
@@ -2,7 +2,7 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCaretDown } from '@fortawesome/pro-solid-svg-icons'
 import { SearchbarShape, type SearchbarColors, type SearchbarDropdownLayout, type NetworkFilter } from '~/types/searchbar'
-import { ChainInfo, ChainID } from '~/types/network'
+import { ChainInfo, ChainIDs } from '~/types/network'
 
 const emit = defineEmits<{(e: 'change') : void}>()
 defineProps<{
@@ -10,7 +10,7 @@ defineProps<{
   colorTheme: SearchbarColors,
   dropdownLayout : SearchbarDropdownLayout
 }>()
-const liveState = defineModel<NetworkFilter>({ required: true }) // each entry has a ChainID as key and the state of the option as value. The component will write directly into it, so the data of the parent is always up-to-date.
+const liveState = defineModel<NetworkFilter>({ required: true }) // each entry has a ChainIDs as key and the state of the option as value. The component will write directly into it, so the data of the parent is always up-to-date.
 
 const { t } = useI18n()
 
@@ -19,7 +19,7 @@ const headState = ref<{look : 'on'|'off', network : string}>({
   network: ''
 })
 const listInDropdown = ref<{
-  chainId: ChainID,
+  chainId: ChainIDs,
   label: string,
   selected: boolean
 }[]>([])
@@ -73,15 +73,15 @@ function updateLocalState () {
   headState.value.look = (howManyAreSelected === 0) ? 'off' : 'on'
   // now we update the list used to fill the dropdown
   listInDropdown.value.length = 0
-  listInDropdown.value.push({ chainId: ChainID.Any, label: t('search_bar.all_networks'), selected: allNetworksAreSelected })
+  listInDropdown.value.push({ chainId: ChainIDs.Any, label: t('search_bar.all_networks'), selected: allNetworksAreSelected })
   for (const filter of liveState.value) {
-    listInDropdown.value.push({ chainId: filter[0], label: ChainInfo[filter[0]].name, selected: filter[1] })
+    listInDropdown.value.push({ chainId: filter[0], label: ChainInfo[filter[0]].name.join(' '), selected: filter[1] })
   }
 }
 
 function oneOptionChanged (index : number) {
   const selected = listInDropdown.value[index].selected
-  if (listInDropdown.value[index].chainId !== ChainID.Any) {
+  if (listInDropdown.value[index].chainId !== ChainIDs.Any) {
     liveState.value.set(listInDropdown.value[index].chainId, selected)
   } else {
     for (const filter of liveState.value) {
diff --git a/frontend/components/bc/searchbar/SearchbarMain.vue b/frontend/components/bc/searchbar/SearchbarMain.vue
index 2ff974348..02b80be6a 100644
--- a/frontend/components/bc/searchbar/SearchbarMain.vue
+++ b/frontend/components/bc/searchbar/SearchbarMain.vue
@@ -33,7 +33,7 @@ import {
   type CategoryFilter,
   type NetworkFilter
 } from '~/types/searchbar'
-import { ChainID, ChainInfo } from '~/types/network'
+import { ChainIDs, ChainInfo } from '~/types/network'
 import { API_PATH } from '~/types/customFetch'
 
 const MinimumTimeBetweenAPIcalls = 400 // ms
@@ -52,7 +52,7 @@ const props = defineProps<{
   colorTheme: SearchbarColors, // colors of the bar and its dropdown
   barPurpose: SearchbarPurpose, // what the bar will be used for
   screenWidthCausingSuddenChange: number, // this information is needed by MiddleEllipsis
-  onlyNetworks?: ChainID[], // the bar will search on these networks only
+  onlyNetworks?: ChainIDs[], // the bar will search on these networks only
   rowLacksPremiumSubscription?: PremiumRowCallBackFunction, // the bar calls this function for each row and deactivates the row if it returns `true`
   pickByDefault: PickingCallBackFunction, // see the declaration of the type to get an explanation
   keepDropdownOpen?: boolean // set to `true` if you want the drop down to stay open when the user clicks a suggestion. You can still close it by calling `<searchbar ref>.value.closeDropdown()` method.
@@ -89,7 +89,7 @@ const textFieldAndButton = ref<HTMLDivElement>()
 const textField = ref<HTMLInputElement>()
 
 let userInputNonce = 0
-const userInputNetworks = ref<NetworkFilter>(new Map<ChainID, boolean>()) // each entry will have a chain ID as key and the state of the option as value
+const userInputNetworks = ref<NetworkFilter>(new Map<ChainIDs, boolean>()) // each entry will have a chain ID as key and the state of the option as value
 const userInputCategories = ref<CategoryFilter>(new Map<Category, boolean>()) // each entry will have a Category as key and the state of the button as value
 let userInputNoNetworkIsSelected = true
 let userInputNoCategoryIsSelected = true
@@ -97,7 +97,7 @@ const userInputText = ref<string>('')
 let lastKnownText = ''
 
 const nextSearchScope = {
-  networks: new Set<ChainID>(),
+  networks: new Set<ChainIDs>(),
   categories: new Set<Category>()
 }
 
@@ -107,7 +107,7 @@ watch(debouncer.value, callAPIthenOrganizeResultsThenCallBack)
 const results = {
   raw: {
     stringifyiedList: new Set<string>(), // List of results returned by the API, without structure nor order. The list can be built in serveral steps (for a same text input, if the user selects new filters, the list can augment).
-    scopeMatrix: {} as Record<ChainID, Record<Category, boolean>> // tells which network × category combinations have been explored to obtain the current list of results (as the user can select/deselect successively filters in any order, the scope is not straightforward)
+    scopeMatrix: {} as Record<ChainIDs, Record<Category, boolean>> // tells which network × category combinations have been explored to obtain the current list of results (as the user can select/deselect successively filters in any order, the scope is not straightforward)
   },
   organized: {
     in: { networks: [] } as OrganizedResults, // filtered-in results, organized
@@ -140,7 +140,7 @@ function empty () {
 function clearRawResults () {
   results.raw.stringifyiedList.clear()
   for (const nw in results.raw.scopeMatrix) {
-    const network = nw as unknown as ChainID
+    const network = nw as unknown as ChainIDs
     for (const cat in results.raw.scopeMatrix[network]) {
       const category = cat as unknown as Category
       results.raw.scopeMatrix[network][category] = false
@@ -470,11 +470,11 @@ function filterAndOrganizeResults () {
     }
     // discarding findings that our configuration (given in the props) forbids
     const category = TypeInfo[toBeAdded.type].category
-    if ((toBeAdded.chainId !== ChainID.Any && !userInputNetworks.value.has(toBeAdded.chainId)) || !userInputCategories.value.has(category)) {
+    if ((toBeAdded.chainId !== ChainIDs.Any && !userInputNetworks.value.has(toBeAdded.chainId)) || !userInputCategories.value.has(category)) {
       continue
     }
     // determining whether the finding is filtered in or out, sending it to the corresponding list
-    const acceptTheChainID = userInputNetworks.value.get(toBeAdded.chainId) || userInputNoNetworkIsSelected || toBeAdded.chainId === ChainID.Any
+    const acceptTheChainID = userInputNetworks.value.get(toBeAdded.chainId) || userInputNoNetworkIsSelected || toBeAdded.chainId === ChainIDs.Any
     const acceptTheCategory = userInputCategories.value.get(category) || userInputNoCategoryIsSelected
     if (acceptTheChainID && acceptTheCategory) {
       resultsIn.push(toBeAdded)
@@ -533,11 +533,11 @@ function convertSingleAPIresultIntoResultSuggestion (stringifyiedRawResult : str
   }
 
   const type = apiResponseElement.type as ResultType
-  let chainId : ChainID
+  let chainId : ChainIDs
   if (TypeInfo[type].belongsToAllNetworks) {
-    chainId = ChainID.Any
+    chainId = ChainIDs.Any
   } else {
-    chainId = apiResponseElement.chain_id as ChainID
+    chainId = apiResponseElement.chain_id as ChainIDs
   }
 
   const howToFillresultSuggestionOutput = TypeInfo[type].howToFillresultSuggestionOutput
diff --git a/frontend/components/bc/searchbar/SuggestionRow.vue b/frontend/components/bc/searchbar/SuggestionRow.vue
index a1146351d..d51021c0d 100644
--- a/frontend/components/bc/searchbar/SuggestionRow.vue
+++ b/frontend/components/bc/searchbar/SuggestionRow.vue
@@ -3,7 +3,7 @@
  * If you want to change the behavior of the component or the information it displays, it is possible that you simply need to change a few parameters
  * in searchbar.ts rather than altering the code of the component. The possibilities offered by this configuration file are explanined in readme.md
  */
-import { ChainID } from '~/types/network'
+import { ChainIDs } from '~/types/network'
 import {
   CategoryInfo,
   SubCategoryInfo,
@@ -71,7 +71,7 @@ const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivat
     :class="[barShape,colorTheme,dropdownLayout,deactivationClass]"
   >
     <!-- In this mode, all possible cells are shown (this was the very first design on Figma) -->
-    <div v-if="props.suggestion.chainId !== ChainID.Any" class="cell-icons" :class="[barShape,dropdownLayout,deactivationClass]">
+    <div v-if="props.suggestion.chainId !== ChainIDs.Any" class="cell-icons" :class="[barShape,dropdownLayout,deactivationClass]">
       <BcSearchbarTypeIcons :type="props.suggestion.type" class="type-icon not-alone" />
       <IconNetwork
         :chain-id="props.suggestion.chainId"
@@ -121,7 +121,7 @@ const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivat
     :class="[barShape,colorTheme,dropdownLayout,deactivationClass]"
   >
     <!-- In this mode, we show less cells and their content comes from dedicated functions instead of a pure copy of `props.suggestion.output` -->
-    <div v-if="props.suggestion.chainId !== ChainID.Any" class="cell-icons" :class="[barShape,deactivationClass]">
+    <div v-if="props.suggestion.chainId !== ChainIDs.Any" class="cell-icons" :class="[barShape,deactivationClass]">
       <BcSearchbarTypeIcons :type="props.suggestion.type" class="type-icon not-alone" />
       <IconNetwork
         :chain-id="props.suggestion.chainId"
diff --git a/frontend/components/dashboard/creation/DashboardCreationController.vue b/frontend/components/dashboard/creation/DashboardCreationController.vue
index d4756191e..bf799db01 100644
--- a/frontend/components/dashboard/creation/DashboardCreationController.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationController.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { type DashboardType } from '~/types/dashboard'
 import { type DashboardCreationDisplayType, type DashboardCreationState } from '~/types/dashboard/creation'
-import { ChainID } from '~/types/network'
+import { ChainIDs } from '~/types/network'
 import { API_PATH } from '~/types/customFetch'
 
 const { createValidatorDashboard, createAccountDashboard } = useUserDashboardStore()
@@ -20,7 +20,7 @@ const visible = ref<boolean>(false)
 const state = ref<DashboardCreationState>('')
 const type = ref<DashboardType | ''>('')
 const name = ref<string>('')
-const network = ref<ChainID>()
+const network = ref<ChainIDs>()
 const { dashboardKey, publicEntities } = useDashboardKey()
 const { fetch } = useCustomFetch()
 const route = useRoute()
diff --git a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
index 3c40b1333..93cfdf6e9 100644
--- a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
@@ -1,20 +1,20 @@
 <script lang="ts" setup>
 import { IconNetwork } from '#components'
-import { ChainInfo, ChainID } from '~/types/network'
+import { ChainInfo, ChainIDs } from '~/types/network'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 
 const { currentNetwork, availableNetworks, isNetworkDisabled } = useNetworkStore()
 
-const network = defineModel<ChainID>('network')
+const network = defineModel<ChainIDs>('network')
 const selection = ref<string>('')
 
-watch(selection, (value) => { network.value = Number(value) as ChainID })
+watch(selection, (value) => { network.value = Number(value) as ChainIDs })
 
 const buttonList = availableNetworks.value.map((chainId) => {
   return {
     value: String(chainId),
-    text: ChainInfo[chainId].family as string,
-    subText: (ChainInfo[chainId].name !== ChainInfo[chainId].family as string) ? ChainInfo[chainId].name : ChainInfo[chainId].description,
+    text: ChainInfo[chainId].name[0],
+    subText: ChainInfo[chainId].name[1],
     disabled: isNetworkDisabled(chainId),
     component: IconNetwork,
     componentProps: { chainId, colored: false, harmonizePerceivedSize: true },
diff --git a/frontend/components/icon/IconNetwork.vue b/frontend/components/icon/IconNetwork.vue
index c6f9787d0..fc6604e19 100644
--- a/frontend/components/icon/IconNetwork.vue
+++ b/frontend/components/icon/IconNetwork.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChainFamily, ChainID, ChainInfo } from '~/types/network'
+import { ChainFamily, ChainIDs, ChainInfo } from '~/types/network'
 const colorMode = useColorMode()
 
 // Usage :
@@ -12,7 +12,7 @@ const props = defineProps({
   harmonizePerceivedSize: { type: Boolean, default: false } // makes some icons slightly smaller/bigger, to appear with a size "similar" to the others
 })
 
-const family = computed(() => ChainInfo[props.chainId as ChainID].family)
+const family = computed(() => ChainInfo[props.chainId as ChainIDs].family)
 const coloring = computed(() => !props.colored ? 'monochromatic' : (colorMode.value !== 'dark' || props.doNotAdaptToColorTheme ? '' : 'pastel'))
 const sizing = computed(() => props.harmonizePerceivedSize ? family.value : '')
 </script>
diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index d73d4f74b..63c7c3752 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ValidatorSubscriptionState, AccountSubscriptionState, CheckboxAndNumber } from '~/types/subscriptionModal'
-import type { ChainID } from '~/types/network'
+import type { ChainIDs } from '~/types/network'
 import type { ApiErrorResponse } from '~/types/api/common'
 import { API_PATH } from '~/types/customFetch'
 
@@ -24,7 +24,7 @@ const OptionsOutsideTheScopeOfCheckboxall: Array<keyof(ValidatorSubscriptionStat
       ['networks', 'ignoreSpam'] // options that are not in the group of the all-checkbox
 
 type AllPossibleOptions = ValidatorSubscriptionState & AccountSubscriptionState & typeof DefaultValueOfValidatorOptionsNeedingPremium & typeof DefaultValueOfAccountOptionsNeedingPremium
-type ModifiableOptions = Record<keyof AllPossibleOptions, CheckboxAndNumber|ChainID[]>
+type ModifiableOptions = Record<keyof AllPossibleOptions, CheckboxAndNumber|ChainIDs[]>
 
 const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
 const { t } = useI18n()
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 5b0685635..de232db43 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -2,7 +2,7 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import type { ModelRef } from 'vue'
-import type { ChainID } from '~/types/network'
+import type { ChainIDs } from '~/types/network'
 import type { CheckboxAndNumber } from '~/types/subscriptionModal'
 
 const props = defineProps<{
@@ -21,14 +21,14 @@ interface CheckboxAndText {
   text: string
 }
 
-const state = defineModel<CheckboxAndNumber|ChainID[]>({ required: true })
-let networkSelectorState: ModelRef<ChainID[]>
+const state = defineModel<CheckboxAndNumber|ChainIDs[]>({ required: true })
+let networkSelectorState: ModelRef<ChainIDs[]>
 let checkboxAndText: Ref<CheckboxAndText> | undefined
 
-// bridging the v-model (CheckboxAndNumber | ChainID[]) with the data of this component (CheckboxAndText | ChainID[])
+// bridging the v-model (CheckboxAndNumber | ChainIDs[]) with the data of this component (CheckboxAndText | ChainIDs[])
 
 if (type.value === 'networks') {
-  networkSelectorState = state as ModelRef<ChainID[]>
+  networkSelectorState = state as ModelRef<ChainIDs[]>
 } else {
   checkboxAndText = useObjectRefBridge<CheckboxAndNumber, CheckboxAndText>(state as Ref<CheckboxAndNumber>, receiveFromVModel, sendToVModel)
 }
diff --git a/frontend/components/playground/PlaygroundIcons.vue b/frontend/components/playground/PlaygroundIcons.vue
index 4b11280e9..c4550f1c0 100644
--- a/frontend/components/playground/PlaygroundIcons.vue
+++ b/frontend/components/playground/PlaygroundIcons.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getAllExistingChainIDs, ChainID } from '~/types/network'
+import { getAllExistingChainIDs, ChainIDs } from '~/types/network'
 </script>
 
 <template>
@@ -41,7 +41,7 @@ import { getAllExistingChainIDs, ChainID } from '~/types/network'
     <IconNetwork
       v-for="id of getAllExistingChainIDs(false)"
       :key="id"
-      :chain-id="id as ChainID"
+      :chain-id="id as ChainIDs"
       :colored="false"
       :harmonize-perceived-size="false"
       class="icon-size"
@@ -50,7 +50,7 @@ import { getAllExistingChainIDs, ChainID } from '~/types/network'
     <IconNetwork
       v-for="id of getAllExistingChainIDs(false)"
       :key="id"
-      :chain-id="id as ChainID"
+      :chain-id="id as ChainIDs"
       :colored="true"
       :harmonize-perceived-size="false"
       class="icon-size"
@@ -59,7 +59,7 @@ import { getAllExistingChainIDs, ChainID } from '~/types/network'
     <IconNetwork
       v-for="id of getAllExistingChainIDs(false)"
       :key="id"
-      :chain-id="id as ChainID"
+      :chain-id="id as ChainIDs"
       :colored="true"
       :harmonize-perceived-size="true"
       class="icon-size"
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index ef72bfb31..3e5d1a90b 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -29,8 +29,8 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
   }, { immediate: true, deep: true })
   const stopperBack = watch(createdRef, () => {
     if (pauseBack) { return }
-    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : convertPrimitiveByDefault<Torig>(el)) : undefined
-    origRef.value = CasO as Torig[]
+    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : convertPrimitiveByDefault<Torig>(el)) : undefined as unknown as Torig[]
+    origRef.value = CasO
     pauseForth = true
     nextTick(() => { pauseForth = false })
   }, { deep: true })
@@ -70,8 +70,8 @@ export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRe
   }, { immediate: true, deep: true })
   const stopperBack = watch(createdRef, () => {
     if (pauseBack) { return }
-    const CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined
-    origRef.value = CasO as Torig
+    const CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined as unknown as Torig
+    origRef.value = CasO
     pauseForth = true
     nextTick(() => { pauseForth = false })
   }, { deep: true })
@@ -106,6 +106,7 @@ function convertPrimitiveByDefault<TO> (from: any) : TO {
   switch (typeof from) {
     case 'number' : return String(from) as TO
     case 'string' : return Number(from) as TO
-    default : return from as TO
+    case 'undefined' : return undefined as TO
+    default : throw new TypeError('Type ' + typeof from + ' cannot be converted implicitely, please give the bridge a callback function achieving the conversion.')
   }
 }
diff --git a/frontend/stores/dashboard/useUserDashboardStore.ts b/frontend/stores/dashboard/useUserDashboardStore.ts
index 2d0c70219..e10c2cac7 100644
--- a/frontend/stores/dashboard/useUserDashboardStore.ts
+++ b/frontend/stores/dashboard/useUserDashboardStore.ts
@@ -5,7 +5,7 @@ import type { VDBPostReturnData } from '~/types/api/validator_dashboard'
 import { type DashboardKey, type DashboardType, type CookieDashboard, COOKIE_DASHBOARD_ID } from '~/types/dashboard'
 import { COOKIE_KEY } from '~/types/cookie'
 import { API_PATH } from '~/types/customFetch'
-import type { ChainID } from '~/types/network'
+import type { ChainIDs } from '~/types/network'
 
 const userDashboardStore = defineStore('user_dashboards_store', () => {
   const data = ref<UserDashboardsData | undefined | null>()
@@ -66,7 +66,7 @@ export function useUserDashboardStore () {
     dashboardCookie.value = JSON.stringify(db)
   }
 
-  async function createValidatorDashboard (name: string, network: ChainID, dashboardKey?: string):Promise<CookieDashboard |undefined> {
+  async function createValidatorDashboard (name: string, network: ChainIDs, dashboardKey?: string):Promise<CookieDashboard |undefined> {
     if (!isLoggedIn.value) {
       // Create local Validator dashboard
       const cd:CookieDashboard = { id: COOKIE_DASHBOARD_ID.VALIDATOR, name: '', hash: dashboardKey ?? '' }
diff --git a/frontend/stores/useNetworkStore.ts b/frontend/stores/useNetworkStore.ts
index 2b425e391..b67bf8548 100644
--- a/frontend/stores/useNetworkStore.ts
+++ b/frontend/stores/useNetworkStore.ts
@@ -4,17 +4,17 @@ import type { ApiDataResponse } from '~/types/api/common'
 import * as networkTs from '~/types/network'
 
 interface ApiChainInfo {
-  chain_id: networkTs.ChainID,
+  chain_id: networkTs.ChainIDs,
   name: string
 }
 
 const store = defineStore('network-store', () => {
   const data = ref<{
-    availableNetworks: networkTs.ChainID[],
-    currentNetwork: networkTs.ChainID
+    availableNetworks: networkTs.ChainIDs[],
+    currentNetwork: networkTs.ChainIDs
   }>({
-    availableNetworks: [networkTs.ChainID.Ethereum],
-    currentNetwork: networkTs.ChainID.Any // this impossible value by defaut must be kept, it ensures that the `computed` of `currentNetwork` selects the network of highest priority when `setCurrentNetwork()` has not been called yet
+    availableNetworks: [networkTs.ChainIDs.Ethereum],
+    currentNetwork: networkTs.ChainIDs.Any // this impossible value by defaut must be kept, it ensures that the `computed` of `currentNetwork` selects the network of highest priority when `setCurrentNetwork()` has not been called yet
   })
   return { data }
 })
@@ -43,12 +43,12 @@ export function useNetworkStore () {
   const currentNetwork = computed(() => availableNetworks.value.includes(data.value.currentNetwork) ? data.value.currentNetwork : availableNetworks.value[0])
   const networkInfo = computed(() => networkTs.ChainInfo[currentNetwork.value])
 
-  function isNetworkDisabled (chainId: networkTs.ChainID) : boolean {
+  function isNetworkDisabled (chainId: networkTs.ChainIDs) : boolean {
     // TODO: return `false` for everything once we are ready
     return !useRuntimeConfig().public.showInDevelopment && chainId !== currentNetwork.value
   }
 
-  function setCurrentNetwork (chainId: networkTs.ChainID) {
+  function setCurrentNetwork (chainId: networkTs.ChainIDs) {
     data.value.currentNetwork = chainId
   }
 
diff --git a/frontend/types/network.ts b/frontend/types/network.ts
index 9eca77080..4a46e837a 100644
--- a/frontend/types/network.ts
+++ b/frontend/types/network.ts
@@ -9,7 +9,7 @@ export enum ChainFamily {
   Gnosis = 'Gnosis'
 }
 
-export enum ChainID {
+export enum ChainIDs {
   Any = 0, // to organize data internally (example of use: some ahead-results in the search bar belong to all networks)
 
   Ethereum = 1,
@@ -31,11 +31,11 @@ export enum ChainID {
 }
 
 export interface ChainInfoFields {
-  name: string,
+  name: string[],
   description: string,
   family: ChainFamily,
-  mainNet: ChainID, // if the network is a testnet, this field points to the non-test network
-  L1: ChainID, // if the network is a L2, this field points to the L1
+  mainNet: ChainIDs, // if the network is a testnet, this field points to the non-test network
+  L1: ChainIDs, // if the network is a L2, this field points to the L1
   clCurrency: CryptoCurrency,
   elCurrency: CryptoCurrency,
   timeStampSlot0: number, // if this property is 0, it means that the network has no slots
@@ -45,13 +45,13 @@ export interface ChainInfoFields {
   priority: number // default order of the networks on the screen (ex: in the drop-down of the search bar)
 }
 
-export const ChainInfo: Record<ChainID, ChainInfoFields> = {
-  [ChainID.Any]: {
-    name: 'Any',
+export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
+  [ChainIDs.Any]: {
+    name: ['Any', 'network'],
     description: 'Any network',
     family: ChainFamily.Any,
-    mainNet: ChainID.Any,
-    L1: ChainID.Any,
+    mainNet: ChainIDs.Any,
+    L1: ChainIDs.Any,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -61,12 +61,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     priority: 0 // data belonging to all networks is displayed first by default
   },
 
-  [ChainID.Ethereum]: {
-    name: 'Ethereum',
+  [ChainIDs.Ethereum]: {
+    name: ['Ethereum', 'Mainnet'],
     description: 'Mainnet',
     family: ChainFamily.Ethereum,
-    mainNet: ChainID.Ethereum,
-    L1: ChainID.Ethereum,
+    mainNet: ChainIDs.Ethereum,
+    L1: ChainIDs.Ethereum,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 1606824023,
@@ -75,12 +75,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     path: '/ethereum',
     priority: 1
   },
-  [ChainID.Holesky]: {
-    name: 'Holesky',
+  [ChainIDs.Holesky]: {
+    name: ['Ethereum', 'Holesky'],
     description: 'Testnet',
     family: ChainFamily.Ethereum,
-    mainNet: ChainID.Ethereum,
-    L1: ChainID.Holesky,
+    mainNet: ChainIDs.Ethereum,
+    L1: ChainIDs.Holesky,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 1695902400,
@@ -89,12 +89,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     path: '/holesky',
     priority: 2
   },
-  [ChainID.Sepolia]: {
-    name: 'Sepolia',
+  [ChainIDs.Sepolia]: {
+    name: ['Ethereum', 'Sepolia'],
     description: 'Testnet',
     family: ChainFamily.Ethereum,
-    mainNet: ChainID.Ethereum,
-    L1: ChainID.Sepolia,
+    mainNet: ChainIDs.Ethereum,
+    L1: ChainIDs.Sepolia,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 1655733600,
@@ -104,12 +104,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     priority: 3
   },
 
-  [ChainID.ArbitrumOneEthereum]: {
-    name: 'Arbitrum One',
+  [ChainIDs.ArbitrumOneEthereum]: {
+    name: ['Arbitrum', 'One'],
     description: 'L2',
     family: ChainFamily.Arbitrum,
-    mainNet: ChainID.ArbitrumOneEthereum,
-    L1: ChainID.Ethereum,
+    mainNet: ChainIDs.ArbitrumOneEthereum,
+    L1: ChainIDs.Ethereum,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -118,12 +118,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     path: '/arbitrum-one-ethereum',
     priority: 10
   },
-  [ChainID.ArbitrumNovaEthereum]: {
-    name: 'Arbitrum Nova',
+  [ChainIDs.ArbitrumNovaEthereum]: {
+    name: ['Arbitrum', 'Nova'],
     description: 'L2',
     family: ChainFamily.Arbitrum,
-    mainNet: ChainID.ArbitrumNovaEthereum,
-    L1: ChainID.Ethereum,
+    mainNet: ChainIDs.ArbitrumNovaEthereum,
+    L1: ChainIDs.Ethereum,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -132,12 +132,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     path: '/arbitrum-nova-ethereum',
     priority: 11
   },
-  [ChainID.ArbitrumOneSepolia]: {
-    name: 'Arbitrum Sepolia',
+  [ChainIDs.ArbitrumOneSepolia]: {
+    name: ['Arbitrum', 'Sepolia'],
     description: 'Testnet',
     family: ChainFamily.Arbitrum,
-    mainNet: ChainID.ArbitrumOneEthereum,
-    L1: ChainID.Sepolia,
+    mainNet: ChainIDs.ArbitrumOneEthereum,
+    L1: ChainIDs.Sepolia,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -147,12 +147,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     priority: 12
   },
 
-  [ChainID.OptimismEthereum]: {
-    name: 'Optimism',
+  [ChainIDs.OptimismEthereum]: {
+    name: ['Optimism', 'L2'],
     description: 'L2',
     family: ChainFamily.Optimism,
-    mainNet: ChainID.OptimismEthereum,
-    L1: ChainID.Ethereum,
+    mainNet: ChainIDs.OptimismEthereum,
+    L1: ChainIDs.Ethereum,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -161,12 +161,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     path: '/optimism-ethereum',
     priority: 20
   },
-  [ChainID.OptimismSepolia]: {
-    name: 'Optimism Sepolia',
+  [ChainIDs.OptimismSepolia]: {
+    name: ['Optimism', 'Sepolia'],
     description: 'Testnet',
     family: ChainFamily.Optimism,
-    mainNet: ChainID.OptimismEthereum,
-    L1: ChainID.Sepolia,
+    mainNet: ChainIDs.OptimismEthereum,
+    L1: ChainIDs.Sepolia,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -176,12 +176,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     priority: 21
   },
 
-  [ChainID.BaseEthereum]: {
-    name: 'Base',
+  [ChainIDs.BaseEthereum]: {
+    name: ['Base', 'L2'],
     description: 'L2',
     family: ChainFamily.Base,
-    mainNet: ChainID.BaseEthereum,
-    L1: ChainID.Ethereum,
+    mainNet: ChainIDs.BaseEthereum,
+    L1: ChainIDs.Ethereum,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -190,12 +190,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     path: '/base-ethereum',
     priority: 30
   },
-  [ChainID.BaseSepolia]: {
-    name: 'Base Sepolia',
+  [ChainIDs.BaseSepolia]: {
+    name: ['Base', 'Sepolia'],
     description: 'Testnet',
     family: ChainFamily.Base,
-    mainNet: ChainID.BaseEthereum,
-    L1: ChainID.Sepolia,
+    mainNet: ChainIDs.BaseEthereum,
+    L1: ChainIDs.Sepolia,
     clCurrency: 'ETH',
     elCurrency: 'ETH',
     timeStampSlot0: 0,
@@ -205,12 +205,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     priority: 31
   },
 
-  [ChainID.Gnosis]: {
-    name: 'Gnosis',
+  [ChainIDs.Gnosis]: {
+    name: ['Gnosis', 'Mainnet'],
     description: 'Mainnet',
     family: ChainFamily.Gnosis,
-    mainNet: ChainID.Gnosis,
-    L1: ChainID.Gnosis,
+    mainNet: ChainIDs.Gnosis,
+    L1: ChainIDs.Gnosis,
     clCurrency: 'GNO',
     elCurrency: 'xDAI',
     timeStampSlot0: 1638993340,
@@ -219,12 +219,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
     path: '/gnosis',
     priority: 40
   },
-  [ChainID.Chiado]: {
-    name: 'Chiado',
+  [ChainIDs.Chiado]: {
+    name: ['Gnosis', 'Chiado'],
     description: 'Testnet',
     family: ChainFamily.Gnosis,
-    mainNet: ChainID.Gnosis,
-    L1: ChainID.Chiado,
+    mainNet: ChainIDs.Gnosis,
+    L1: ChainIDs.Chiado,
     clCurrency: 'GNO',
     elCurrency: 'xDAI',
     timeStampSlot0: 1665396300,
@@ -235,12 +235,12 @@ export const ChainInfo: Record<ChainID, ChainInfoFields> = {
   }
 }
 
-export function getAllExistingChainIDs (sortByPriority : boolean) : ChainID[] {
-  const list : ChainID[] = []
+export function getAllExistingChainIDs (sortByPriority : boolean) : ChainIDs[] {
+  const list : ChainIDs[] = []
 
-  for (const id in ChainID) {
+  for (const id in ChainIDs) {
     if (isNaN(Number(id))) {
-      list.push(ChainID[id as keyof typeof ChainID])
+      list.push(ChainIDs[id as keyof typeof ChainIDs])
     }
   }
   if (sortByPriority) {
@@ -253,7 +253,7 @@ export function getAllExistingChainIDs (sortByPriority : boolean) : ChainID[] {
  * Should be used only when you test a network different from the current one.
  * Whereever you would write `isMainNet(currentNetwork.value)` you should rather use `isMainNet()` from `useNetworkStore.ts`.
  */
-export function isMainNet (network: ChainID) : boolean {
+export function isMainNet (network: ChainIDs) : boolean {
   return (ChainInfo[network].mainNet === network)
 }
 
@@ -261,7 +261,7 @@ export function isMainNet (network: ChainID) : boolean {
  * Should be used only when you test a network different from the current one.
  * Wherever you would write `isL1(currentNetwork.value)` you should rather use `isL1()` from `useNetworkStore.ts`.
  */
-export function isL1 (network: ChainID) : boolean {
+export function isL1 (network: ChainIDs) : boolean {
   return (ChainInfo[network].L1 === network)
 }
 
@@ -269,7 +269,7 @@ export function isL1 (network: ChainID) : boolean {
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `epochsPerDay(currentNetwork.value)` you should rather use `epochsPerDay()` from `useNetworkStore.ts`.
  */
-export function epochsPerDay (chainId: ChainID): number {
+export function epochsPerDay (chainId: ChainIDs): number {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined) {
     return 0
@@ -281,7 +281,7 @@ export function epochsPerDay (chainId: ChainID): number {
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `epochToTs(currentNetwork.value, epoch)` you should rather use `epochToTs(epoch)` from `useNetworkStore.ts`.
  */
-export function epochToTs (chainId: ChainID, epoch: number): number | undefined {
+export function epochToTs (chainId: ChainIDs, epoch: number): number | undefined {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined || epoch < 0) {
     return undefined
@@ -294,7 +294,7 @@ export function epochToTs (chainId: ChainID, epoch: number): number | undefined
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `slotToTs(currentNetwork.value, slot)` you should rather use `slotToTs(slot)` from `useNetworkStore.ts`.
  */
-export function slotToTs (chainId: ChainID, slot: number): number | undefined {
+export function slotToTs (chainId: ChainIDs, slot: number): number | undefined {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined || slot < 0) {
     return undefined
@@ -307,7 +307,7 @@ export function slotToTs (chainId: ChainID, slot: number): number | undefined {
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `tsToSlot(currentNetwork.value, ts)` you should rather use `tsToSlot(ts)` from `useNetworkStore.ts`.
  */
-export function tsToSlot (chainId: ChainID, ts: number): number {
+export function tsToSlot (chainId: ChainIDs, ts: number): number {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined) {
     return -1
@@ -319,7 +319,7 @@ export function tsToSlot (chainId: ChainID, ts: number): number {
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `slotToEpoch(currentNetwork.value, slot)` you should rather use `slotToEpoch(slot)` from `useNetworkStore.ts`.
  */
-export function slotToEpoch (chainId: ChainID, slot: number): number {
+export function slotToEpoch (chainId: ChainIDs, slot: number): number {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined) {
     return -1
@@ -331,6 +331,6 @@ export function slotToEpoch (chainId: ChainID, slot: number): number {
  * @param list List to sort. Its order will be modified because the function sorts in place.
  * @returns List sorted in place, so the same as parameter `list`.
  */
-export function sortChainIDsByPriority (list : ChainID[]) : ChainID[] {
+export function sortChainIDsByPriority (list : ChainIDs[]) : ChainIDs[] {
   return list.sort((a, b) => ChainInfo[a].priority - ChainInfo[b].priority)
 }
diff --git a/frontend/types/searchbar.ts b/frontend/types/searchbar.ts
index 38c6ac8bd..450275607 100644
--- a/frontend/types/searchbar.ts
+++ b/frontend/types/searchbar.ts
@@ -1,5 +1,5 @@
 import type { ComposerTranslation } from '@nuxtjs/i18n/dist/runtime/composables'
-import { ChainID } from '~/types/network'
+import { ChainIDs } from '~/types/network'
 import { type ApiErrorResponse, type SearchResult, type InternalPostSearchResponse } from '~/types/api/common'
 
 export enum SearchbarShape { // do not change the litterals, they are used as class names
@@ -79,7 +79,7 @@ export enum ResultType {
 // and the function returns one `Matching` element (or undefined).
 export type Matching = {
   closeness: number, // how close this result is to what the user inputted (lower value = better similarity)
-  network: ChainID, // the network that this result belongs to
+  network: ChainIDs, // the network that this result belongs to
   type: ResultType // the type of the result
 }
 /* When the user presses Enter, the callback function receives a simplified representation of the suggested results and returns one
@@ -92,7 +92,7 @@ export interface PickingCallBackFunction { (possibilities : Matching[]) : Matchi
 
 export interface SearchRequest {
   input: string,
-  networks: ChainID[],
+  networks: ChainIDs[],
   types: ResultType[],
   count?: boolean
 }
@@ -135,7 +135,7 @@ export interface ResultSuggestion {
   queryParam: string, // Data returned by the API that identifies this very result in the back-end. This is the most important data for callback function '@go' given in the props of the Searchbar component.
   closeness: number, // How close the suggested result is to the user input (important for graffitis and token names, later for other things if the back-end evolves to find other approximate results).
   count : number, // How many identical results are found (often 1 but the API can inform us if there is more). This value is NaN when there is at least 1 result but the API did not clarify how many.
-  chainId : ChainID, // Network that the result belongs to. If the result exists on all networks, it is `ChainID.Any` (so 0).
+  chainId : ChainIDs, // Network that the result belongs to. If the result exists on all networks, it is `ChainIDs.Any` (so 0).
   type : ResultType, // Tells what thing(s) this result corresponds to.
   rawResult: SingleAPIresult // Original data given by the API.
 }
@@ -148,7 +148,7 @@ export interface ResultSuggestionInternal extends ResultSuggestion {
 
 export interface OrganizedResults {
   networks: {
-    chainId: ChainID,
+    chainId: ChainIDs,
     types: {
       type: ResultType,
       suggestions: ResultSuggestionInternal[]
@@ -490,7 +490,7 @@ export interface SearchBar // your ref to the search-bar component must be of th
        extends ComponentPublicInstance, ExposedSearchbarMethods {}
 
 export type CategoryFilter = Map<Category, boolean> // for internal use
-export type NetworkFilter = Map<ChainID, boolean> // for internal use
+export type NetworkFilter = Map<ChainIDs, boolean> // for internal use
 export type SearchbarDropdownLayout = 'narrow-dropdown' | 'large-dropdown' // for internal use (do not change the litterals, they are used as class names)
 
 export function wasOutputDataGivenByTheAPI (type : ResultType, resultSuggestionOutputField : keyof HowToFillresultSuggestionOutput) : boolean {
diff --git a/frontend/types/subscriptionModal.ts b/frontend/types/subscriptionModal.ts
index 38b615e31..0841967ac 100644
--- a/frontend/types/subscriptionModal.ts
+++ b/frontend/types/subscriptionModal.ts
@@ -1,4 +1,4 @@
-import { ChainID } from './network'
+import { ChainIDs } from './network'
 
 /** for an option of type `number`: to mean that no value exists in the DB yet, set it to NaN; to mean that it is has a value but it is deactivated, set it to a negative value (for example 10% becomes -10) */
 export type ValidatorSubscriptionState = {
@@ -20,7 +20,7 @@ export type AccountSubscriptionState = {
   erc20: number,
   erc721: boolean,
   erc1155: boolean,
-  networks: ChainID[],
+  networks: ChainIDs[],
   ignoreSpam: boolean
 }
 
diff --git a/frontend/utils/format.ts b/frontend/utils/format.ts
index 86ed2bab0..295b56696 100644
--- a/frontend/utils/format.ts
+++ b/frontend/utils/format.ts
@@ -2,7 +2,7 @@ import { commify } from '@ethersproject/units'
 import { DateTime, type StringUnitLength } from 'luxon'
 import { type ComposerTranslation } from 'vue-i18n'
 import type { AgeFormat } from '~/types/settings'
-import { ChainID, epochToTs, slotToTs } from '~/types/network'
+import { ChainIDs, epochToTs, slotToTs } from '~/types/network'
 
 export const ONE_MINUTE = 60
 export const ONE_HOUR = ONE_MINUTE * 60
@@ -144,7 +144,7 @@ export function formatGoTimestamp (timestamp: string | number, compareTimestamp?
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `formatEpochToDateTime(currentNetwork.value, ...)` you should rather use `formatEpochToDateTime(...)` from `useFormat.ts`.
  */
-export function formatEpochToDateTime (chainId: ChainID, epoch: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
+export function formatEpochToDateTime (chainId: ChainIDs, epoch: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
   return formatTs(epochToTs(chainId, epoch), timestamp, format, style, locales, withTime)
 }
 
@@ -152,7 +152,7 @@ export function formatEpochToDateTime (chainId: ChainID, epoch: number, timestam
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `formatSlotToDateTime(currentNetwork.value, ...)` you should rather use `formatSlotToDateTime(...)` from `useFormat.ts`.
  */
-export function formatSlotToDateTime (chainId: ChainID, slot: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
+export function formatSlotToDateTime (chainId: ChainIDs, slot: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
   return formatTs(slotToTs(chainId, slot), timestamp, format, style, locales, withTime)
 }
 
@@ -160,7 +160,7 @@ export function formatSlotToDateTime (chainId: ChainID, slot: number, timestamp?
  * Should be used only when you work with a network different from the current one.
  * Wherever you would write `formatEpochToDate(currentNetwork.value, ...)` you should rather use `formatEpochToDate(...)` from `useFormat.ts`.
  */
-export function formatEpochToDate (chainId: ChainID, epoch: number, locales: string): string | null | undefined {
+export function formatEpochToDate (chainId: ChainIDs, epoch: number, locales: string): string | null | undefined {
   return formatEpochToDateTime(chainId, epoch, undefined, 'absolute', undefined, locales, false)
 }
 

From e93bc01cc322ea621c7c91794cb771afb4608e53 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Sat, 6 Jul 2024 10:40:36 +0200
Subject: [PATCH 36/69] (BIDS-2859) last details

---
 frontend/components/bc/MiniParser.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/components/bc/MiniParser.vue b/frontend/components/bc/MiniParser.vue
index 1f919a6e0..910bcc350 100644
--- a/frontend/components/bc/MiniParser.vue
+++ b/frontend/components/bc/MiniParser.vue
@@ -24,9 +24,9 @@
  *    For each line:
  *      # or ## or ### at the beginning will show the line as a title (respectively h1, h2, h3)
  *      - at the beginning will show the line as an item in a list.
- *      words surrounded with _ will be surrounded with <i> tags
- *      words surrounded with * will be surrounded with <b> tags
- *      words surrounded with ` will be shown with a type-writter font and not parsed (formatting tags inside ` and ` are ineffective)
+ *      parts surrounded with _ will be surrounded with <i> tags
+ *      parts surrounded with * will be surrounded with <b> tags
+ *      parts surrounded with ` will be shown with a type-writter font and not parsed (formatting tags between ` and ` are ineffective)
  *      a link can be created by writing [a caption](and-a-url). The url can written directly or tell the name of a member of the object in props links.
  *    Mixes are possible: italic inside bold or bold inside italic, code in italic or bold (if you surround ` and ` with the tags)...
  *
@@ -39,8 +39,8 @@
  *    Depending on the stylesheet of your website, those tags might not display your text in italic and bold.
  *    If you want to force them to display italic and bold text against the style preferences of your website, you can define a class like so:
  *      .my-own-bi {
- *        :deep(b) { font-weight: bold }
  *        :deep(i) { font-style: italic }
+ *        :deep(b) { font-weight: bold }
  *      }
  *    and assign it to the parser:
  *      <BcMiniParser ... class="my-own-bi" />

From 15cb16cd3bd9487f2887e71c6ad7602c8bcc3aca Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Sat, 6 Jul 2024 12:36:15 +0200
Subject: [PATCH 37/69] (BIDS-2859) dashboard creation: showing only networks
 secured by validators (L1s)

---
 frontend/components/bc/SearchbarGeneral.vue   |  3 +-
 frontend/components/bc/header/MainHeader.vue  |  2 +-
 .../creation/DashboardCreationNetworkMask.vue | 28 +++++++++++--------
 .../components/slot/viz/SlotVizViewer.vue     |  2 +-
 frontend/composables/useBcSeo.ts              |  2 +-
 frontend/types/network.ts                     | 22 +++------------
 6 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/frontend/components/bc/SearchbarGeneral.vue b/frontend/components/bc/SearchbarGeneral.vue
index dd02072db..88d509239 100644
--- a/frontend/components/bc/SearchbarGeneral.vue
+++ b/frontend/components/bc/SearchbarGeneral.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { SearchbarShape, type SearchbarColors, SearchbarPurpose, ResultType, type ResultSuggestion, pickHighestPriorityAmongBestMatchings } from '~/types/searchbar'
-import { ChainInfo } from '~/types/network'
 
 defineProps<{
   barShape: SearchbarShape,
@@ -11,7 +10,7 @@ defineProps<{
 async function redirectToRelevantPage (result : ResultSuggestion) {
   let path : string
   let q = ''
-  const networkPath = '/networks' + ChainInfo[result.chainId].path
+  const networkPath = '/networks/' + result.chainId
 
   switch (result.type) {
     case ResultType.Tokens :
diff --git a/frontend/components/bc/header/MainHeader.vue b/frontend/components/bc/header/MainHeader.vue
index ca3f81e0c..a740c283c 100644
--- a/frontend/components/bc/header/MainHeader.vue
+++ b/frontend/components/bc/header/MainHeader.vue
@@ -123,7 +123,7 @@ const userMenu = computed(() => {
           <span class="name">beaconcha.in</span>
         </BcLink>
         <span class="variant">
-          v2 beta | {{ networkInfo.name }}
+          v2 beta | {{ networkInfo.name.join(' ') }}
         </span>
       </div>
 
diff --git a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
index 93cfdf6e9..f1a3d3951 100644
--- a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { IconNetwork } from '#components'
-import { ChainInfo, ChainIDs } from '~/types/network'
+import { ChainInfo, ChainIDs, isL1 } from '~/types/network'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 
 const { currentNetwork, availableNetworks, isNetworkDisabled } = useNetworkStore()
@@ -10,16 +10,22 @@ const selection = ref<string>('')
 
 watch(selection, (value) => { network.value = Number(value) as ChainIDs })
 
-const buttonList = availableNetworks.value.map((chainId) => {
-  return {
-    value: String(chainId),
-    text: ChainInfo[chainId].name[0],
-    subText: ChainInfo[chainId].name[1],
-    disabled: isNetworkDisabled(chainId),
-    component: IconNetwork,
-    componentProps: { chainId, colored: false, harmonizePerceivedSize: true },
-    componentClass: 'dashboard-creation-button-network-icon'
-  }
+const buttonList = computed(() => {
+  const list = [] as any[]
+  availableNetworks.value.forEach((chainId) => {
+    if (isL1(chainId)) {
+      list.push({
+        value: String(chainId),
+        text: ChainInfo[chainId].name[0],
+        subText: ChainInfo[chainId].name[1],
+        disabled: isNetworkDisabled(chainId),
+        component: IconNetwork,
+        componentProps: { chainId, colored: false, harmonizePerceivedSize: true },
+        componentClass: 'dashboard-creation-button-network-icon'
+      })
+    }
+  })
+  return list
 })
 
 const { t: $t } = useI18n()
diff --git a/frontend/components/slot/viz/SlotVizViewer.vue b/frontend/components/slot/viz/SlotVizViewer.vue
index d9a785a95..2818a3371 100644
--- a/frontend/components/slot/viz/SlotVizViewer.vue
+++ b/frontend/components/slot/viz/SlotVizViewer.vue
@@ -111,7 +111,7 @@ watch(() => props, () => {
         <BcToggleMultiBar v-model="selectedCategories" :buttons="icons" />
       </div>
       <h1 class="network">
-        {{ networkInfo?.family }} {{ networkInfo?.name }}
+        {{ networkInfo?.name.join(' ') }}
       </h1>
       <div class="header-right">
         <slot name="header-right" />
diff --git a/frontend/composables/useBcSeo.ts b/frontend/composables/useBcSeo.ts
index 289e0760c..d818eefe7 100644
--- a/frontend/composables/useBcSeo.ts
+++ b/frontend/composables/useBcSeo.ts
@@ -24,7 +24,7 @@ export function useBcSeo (pageTitle?: string | Ref<string | number | undefined>
     } else if (pageTitle?.value) {
       parts.splice(0, 0, `${pageTitle.value}`)
     }
-    return networkInfo.value.description + ' ' + networkInfo.value.name + ' ' + parts.join(' - ')
+    return networkInfo.value.description + ' ' + networkInfo.value.name.join(' ') + ' ' + parts.join(' - ')
   }
 
   useSeoMeta({
diff --git a/frontend/types/network.ts b/frontend/types/network.ts
index 4a46e837a..4c12f1368 100644
--- a/frontend/types/network.ts
+++ b/frontend/types/network.ts
@@ -41,7 +41,6 @@ export interface ChainInfoFields {
   timeStampSlot0: number, // if this property is 0, it means that the network has no slots
   secondsPerSlot: number, // if this property is 0, it means that the network has no slots
   slotsPerEpoch: number, // if this property is 0, it means that the network has no slots
-  path: string,
   priority: number // default order of the networks on the screen (ex: in the drop-down of the search bar)
 }
 
@@ -57,7 +56,6 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 12,
     slotsPerEpoch: 32,
-    path: '/undefined',
     priority: 0 // data belonging to all networks is displayed first by default
   },
 
@@ -72,7 +70,6 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 1606824023,
     secondsPerSlot: 12,
     slotsPerEpoch: 32,
-    path: '/ethereum',
     priority: 1
   },
   [ChainIDs.Holesky]: {
@@ -86,7 +83,6 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 1695902400,
     secondsPerSlot: 12,
     slotsPerEpoch: 32,
-    path: '/holesky',
     priority: 2
   },
   [ChainIDs.Sepolia]: {
@@ -100,12 +96,11 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 1655733600,
     secondsPerSlot: 12,
     slotsPerEpoch: 32,
-    path: '/sepolia',
     priority: 3
   },
 
   [ChainIDs.ArbitrumOneEthereum]: {
-    name: ['Arbitrum', 'One'],
+    name: ['Arbitrum One', 'Mainnet'],
     description: 'L2',
     family: ChainFamily.Arbitrum,
     mainNet: ChainIDs.ArbitrumOneEthereum,
@@ -115,11 +110,10 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    path: '/arbitrum-one-ethereum',
     priority: 10
   },
   [ChainIDs.ArbitrumNovaEthereum]: {
-    name: ['Arbitrum', 'Nova'],
+    name: ['Arbitrum Nova', 'Mainnet'],
     description: 'L2',
     family: ChainFamily.Arbitrum,
     mainNet: ChainIDs.ArbitrumNovaEthereum,
@@ -129,7 +123,6 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    path: '/arbitrum-nova-ethereum',
     priority: 11
   },
   [ChainIDs.ArbitrumOneSepolia]: {
@@ -143,12 +136,11 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    path: '/arbitrum-one-sepolia',
     priority: 12
   },
 
   [ChainIDs.OptimismEthereum]: {
-    name: ['Optimism', 'L2'],
+    name: ['Optimism', 'Mainnet'],
     description: 'L2',
     family: ChainFamily.Optimism,
     mainNet: ChainIDs.OptimismEthereum,
@@ -158,7 +150,6 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    path: '/optimism-ethereum',
     priority: 20
   },
   [ChainIDs.OptimismSepolia]: {
@@ -172,12 +163,11 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    path: '/optimism-sepolia',
     priority: 21
   },
 
   [ChainIDs.BaseEthereum]: {
-    name: ['Base', 'L2'],
+    name: ['Base', 'Mainnet'],
     description: 'L2',
     family: ChainFamily.Base,
     mainNet: ChainIDs.BaseEthereum,
@@ -187,7 +177,6 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    path: '/base-ethereum',
     priority: 30
   },
   [ChainIDs.BaseSepolia]: {
@@ -201,7 +190,6 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    path: '/base-sepolia',
     priority: 31
   },
 
@@ -216,7 +204,6 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 1638993340,
     secondsPerSlot: 5,
     slotsPerEpoch: 16,
-    path: '/gnosis',
     priority: 40
   },
   [ChainIDs.Chiado]: {
@@ -230,7 +217,6 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 1665396300,
     secondsPerSlot: 5,
     slotsPerEpoch: 16,
-    path: '/chiado',
     priority: 41
   }
 }

From 5f3402312025a28e1d8a423299a4c5acae910bee Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Sun, 7 Jul 2024 11:44:32 +0200
Subject: [PATCH 38/69] (BIDS-2859) small improvements

---
 frontend/components/bc/MiniParser.vue | 52 +++++++++++++--------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/frontend/components/bc/MiniParser.vue b/frontend/components/bc/MiniParser.vue
index 910bcc350..1fcc035a3 100644
--- a/frontend/components/bc/MiniParser.vue
+++ b/frontend/components/bc/MiniParser.vue
@@ -69,7 +69,7 @@ function parse (props: {input: string|string[]}) : VDOMnodes {
   } else {
     inputArray.lines = props.input
   }
-  inputArray.lines = inputArray.lines.map(line => replaceEscapements(line))
+  inputArray.lines = inputArray.lines.map(line => removeLeadingSpacesAndReplaceEscapements(line))
   inputArray.pos = 0
   const output: VDOMnodes = []
   while (inputArray.pos < inputArray.lines.length) {
@@ -109,27 +109,27 @@ function parseTextLine () : VNode|string {
 }
 
 function parseText (text: string) : VDOMnodes {
-  const { pos: openingTagPos, tag: openingTag } = findTag(text, 0)
-  const { pos: closingTagPos } = findTag(text, openingTagPos + openingTag.length, ClosingTags[openingTag])
-  if (openingTagPos < 0 || closingTagPos < 0) { // First case: no tag, we can copy the raw line. Second case: syntax error (either the closing tag has been forgotten or nested tags have their closure swapped)
-    return [cleanText(text)] // so we output the text without parsing it
-  }
-  // opening tag found.
-  const threeParts : VDOMnodes = []
-  if (openingTagPos > 0) {
-    threeParts.push(cleanText(text.slice(0, openingTagPos)))
-  }
-  const middle = text.slice(openingTagPos + openingTag.length, closingTagPos)
-  switch (openingTag) {
-    case Tag.Italic : threeParts.push(h('i', {}, parseText(middle))); break
-    case Tag.Bold : threeParts.push(h('b', {}, parseText(middle))); break
-    case Tag.Code : threeParts.push(h('span', { style: 'font-family: monospace;' }, cleanText(middle, true))); break
-    case Tag.LinkStart : threeParts.push(parseLink(middle)); break
-  }
-  if (closingTagPos + ClosingTags[openingTag].length < text.length) {
-    threeParts.push(...parseText(text.slice(closingTagPos + ClosingTags[openingTag].length)))
-  }
-  return threeParts
+  const parts: VDOMnodes = []
+  do {
+    const { pos: openingTagPos, tag: openingTag } = findTag(text, 0)
+    const { pos: closingTagPos } = findTag(text, openingTagPos + openingTag.length, ClosingTags[openingTag])
+    if (openingTagPos < 0 || closingTagPos < 0) { // First case: no tag, we can copy the raw line. Second case: syntax error (either the closing tag has been forgotten or nested tags have their closure swapped)
+      parts.push(cleanText(text)) // in both cases we output the text without parsing it
+      break
+    }
+    if (openingTagPos > 0) {
+      parts.push(cleanText(text.slice(0, openingTagPos)))
+    }
+    const middle = text.slice(openingTagPos + openingTag.length, closingTagPos)
+    switch (openingTag) {
+      case Tag.Italic : parts.push(h('i', {}, parseText(middle))); break
+      case Tag.Bold : parts.push(h('b', {}, parseText(middle))); break
+      case Tag.Code : parts.push(h('span', { style: 'font-family: monospace;' }, cleanText(middle, true))); break
+      case Tag.LinkStart : parts.push(parseLink(middle)); break
+    }
+    text = text.slice(closingTagPos + ClosingTags[openingTag].length)
+  } while (text)
+  return parts
 }
 
 function parseLink (text: string) : VNode|string {
@@ -157,15 +157,15 @@ function findTag (text: string, start: number, wanted?: Tag) : { pos: number, ta
   let closest = { pos: -1, tag: Tag.Italic }
   for (const tag of OpeningTags) {
     const found = findTag(text, start, tag)
-    if (found.pos >= 0 && (found.pos < closest.pos || closest.pos < 0)) {
+    if (found.pos >= 0 && (found.pos <= closest.pos || closest.pos < 0)) {
       closest = found
     }
   }
   return closest
 }
 
-/** replaces all `\` with `\u001B` and all `\\` with `\`  */
-function replaceEscapements (input: string) : string {
+/** replaces all `\` with `\u001B` and all `\\` with `\`  and removes spaces at the beginning */
+function removeLeadingSpacesAndReplaceEscapements (input: string) : string {
   const DoubleEsc = Escapement + Escapement
   let posIn = 0
   let output = ''
@@ -183,7 +183,7 @@ function replaceEscapements (input: string) : string {
         break
       }
   }
-  return (output + input.slice(posIn))
+  return (output + input.slice(posIn)).trimStart()
 }
 
 function cleanText (raw: string, forceSpaces = false) {

From 3a0cf34c8e007afa1eb69a997641970ec16631ee Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 8 Jul 2024 10:35:13 +0200
Subject: [PATCH 39/69] (BIDS-2859) rounds the fractionnal part of the % input
 to the nearest tenth

---
 frontend/components/notifications/SubscriptionRow.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index de232db43..e7f35a17f 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -67,6 +67,7 @@ function calculateCorrectNumber (input: string) : number {
   if (type.value === 'percent') {
     if (num < 1) { num = 1 }
     if (num > 100) { num = 100 }
+    num = Math.round(10 * num) / 10
   }
   return num
 }
@@ -189,7 +190,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
         width: 110px;
       }
       .percent {
-        width: 43px;
+        width: 48px;
       }
     }
     .checkbox {

From 9f55638dd70847d88555a04f4f40ef77d704b2fd Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 8 Jul 2024 11:08:42 +0200
Subject: [PATCH 40/69] (BIDS-2859) the duration of an epoch is now calculated
 from useNetworStore().networkInfo

---
 .../notifications/SubscriptionDialog.vue      |   9 +-
 .../notifications/SubscriptionRow.vue         |  22 ++-
 frontend/i18n/en.json                         | 176 +++++++++---------
 3 files changed, 108 insertions(+), 99 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 63c7c3752..b1473c33c 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -30,6 +30,7 @@ const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
 const { t } = useI18n()
 const { fetch, setTimeout } = useCustomFetch()
 const toast = useBcToast()
+const { networkInfo } = useNetworkStore()
 
 const tPath = ref('')
 let originalSettings = {} as AllPossibleOptions
@@ -162,7 +163,13 @@ function closeDialog () : void {
         :default="DefaultValueOfValidatorOptionsNeedingPremium.offlineGroup"
         class="row"
       />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.missedAttestations" :t-path="tPath+'missed_attestations'" :lacks-premium-subscription="!isOptionAvailable('missedAttestations')" class="row" />
+      <NotificationsSubscriptionRow
+        v-model="modifiableOptions.missedAttestations"
+        :t-path="tPath+'missed_attestations'"
+        :lacks-premium-subscription="!isOptionAvailable('missedAttestations')"
+        class="row"
+        :value-in-text="Math.round(networkInfo.secondsPerSlot*networkInfo.slotsPerEpoch/6)/10"
+      />
       <NotificationsSubscriptionRow v-model="modifiableOptions.proposedBlock" :t-path="tPath+'proposed_block'" :lacks-premium-subscription="!isOptionAvailable('proposedBlock')" class="row" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.upcomingProposal" :t-path="tPath+'upcoming_proposal'" :lacks-premium-subscription="!isOptionAvailable('upcomingProposal')" class="row" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.syncCommittee" :t-path="tPath+'sync_committee'" :lacks-premium-subscription="!isOptionAvailable('syncCommittee')" class="row" />
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index e7f35a17f..1829df05a 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -10,6 +10,7 @@ const props = defineProps<{
   lacksPremiumSubscription: boolean,
   inputType?: 'binary' | 'amount' | 'percent' | 'networks',
   default?: number
+  valueInText?: number
 }>()
 
 const type = computed(() => props.inputType ?? 'binary')
@@ -80,17 +81,20 @@ function isThisAvalidInput (input: string) : boolean {
 
 const tooltipLines = computed(() => {
   let options
-  if (Array.isArray(state.value)) {
-    options = { plural: state.value.length, list: state.value.join(', ') }
-  } else {
-    let plural: number
-    if (type.value === 'amount' || type.value === 'percent') {
-      plural = calculateCorrectNumber(checkboxAndText!.value.text)
+  if (props.valueInText !== undefined) {
+    options = { plural: props.valueInText }
+  } else
+    if (Array.isArray(state.value)) {
+      options = { plural: state.value.length, list: state.value.join(', ') }
     } else {
-      plural = state.value ? 2 : 1
+      let plural: number
+      if (type.value === 'amount' || type.value === 'percent') {
+        plural = calculateCorrectNumber(checkboxAndText!.value.text)
+      } else {
+        plural = state.value ? 2 : 1
+      }
+      options = { plural }
     }
-    options = { plural }
-  }
   return tAll(t, props.tPath + '.hint', options)
 })
 
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 6ecf1e1bb..f5e5a5bbf 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -303,6 +303,93 @@
       "clients": "Clients",
       "rocketpool": "Rocket Pool",
       "network": "Network"
+    },
+    "subscriptions": {
+      "dialog_title": "Edit Subscriptions",
+      "validators" : {
+        "explanation": "All notifications are sent after network finality (~20mins).",
+        "offline_validator": {
+          "option": "Validator is offline",
+          "hint": [
+            "We will trigger a notification:",
+            "- Once the validator has been offline for 3 epochs.",
+            "- Every 32 Epochs (~3 hours) during your downtime.",
+            "- Once you are back online again."
+          ]
+        },
+        "offline_group": {
+          "option":"Group is offline",
+          "hint": [
+            "We will trigger a notification:",
+            "- Once {count}% of your group is offline.",
+            "- Once you have been offline for 3 epochs.",
+            "- Every 32 Epochs (~3 hours) during your downtime.",
+            "- Once you are back online.",
+            "*Note:* Notification resets if you do not meet the threshold of {count}%."
+          ],
+          "placeholder": ""
+        },
+        "missed_attestations": {
+          "option":"Attestations missed",
+          "hint": "We will trigger every epoch ({count} minute) during downtime. | We will trigger every epoch ({count} minutes) during downtime."
+        },
+        "proposed_block": {
+          "option":"Block proposal (missed & success)"
+        },
+        "upcoming_proposal": {
+          "option":"Upcoming block proposal",
+          "hint": "May trigger false positive notifications during reorgs."
+        },
+        "sync_committee": {
+          "option":"Sync committee"
+        },
+        "withdrawn": {
+          "option":"Withdrawal processed"
+        },
+        "slashed": {
+          "option":"Validator got slashed"
+        },
+        "real_time": {
+          "option":"Realtime mode",
+          "hint": "Sends notifications after the first epoch and does not wait for finality to send notifications, which might cause false positive notifications."
+        },
+        "all": {
+          "option":"All events"
+        }
+      },
+      "accounts": {
+        "explanation": "",
+        "incoming": {
+          "option":"Incoming transactions"
+        },
+        "outgoing": {
+          "option":"Outgoing transactions"
+        },
+        "erc20": {
+          "option":"Track ERC20 token transfers",
+          "placeholder": "value > $0"
+        },
+        "erc721": {
+          "option":"Track ERC721 token transfers"
+        },
+        "erc1155": {
+          "option":"Track ERC1155 token transfers"
+        },
+        "all": {
+          "option":"All events"
+        },
+        "networks": {
+          "option":"Networks"
+        },
+        "ignore_spam": {
+          "option":"Ignore spam transactions",
+          "hint": ["Ignores *zero value transfer tx's* and token tx's that have the *\"hidden\" token label*."]
+        }
+      },
+      "button":"Close",
+      "error_title": "Error",
+      "error_group": "Saving",
+      "error_message": "We could not save your preferences."
     }
   },
   "dashboard": {
@@ -729,95 +816,6 @@
     "network_filter_label": "Networks:",
     "all_networks": "All"
   },
-  "notifications": {
-    "subscriptions": {
-      "dialog_title": "Edit Subscriptions",
-      "validators" : {
-        "explanation": "All notifications are sent after network finality (~20mins).",
-        "offline_validator": {
-          "option": "Validator is offline",
-          "hint": [
-            "We will trigger a notification:",
-            "- Once the validator has been offline for 3 epochs.",
-            "- Every 32 Epochs (~3 hours) during your downtime.",
-            "- Once you are back online again."
-          ]
-        },
-        "offline_group": {
-          "option":"Group is offline",
-          "hint": [
-            "We will trigger a notification:",
-            "- Once {count}% of your group is offline.",
-            "- Once you have been offline for 3 epochs.",
-            "- Every 32 Epochs (~3 hours) during your downtime.",
-            "- Once you are back online.",
-            "*Note:* Notification resets if you do not meet the threshold of {count}%."
-          ],
-          "placeholder": ""
-        },
-        "missed_attestations": {
-          "option":"Attestations missed",
-          "hint": "We will trigger every epoch (6.4 minutes) during downtime."
-        },
-        "proposed_block": {
-          "option":"Block proposal (missed & success)"
-        },
-        "upcoming_proposal": {
-          "option":"Upcoming block proposal",
-          "hint": "May trigger false positive notifications during reorgs."
-        },
-        "sync_committee": {
-          "option":"Sync committee"
-        },
-        "withdrawn": {
-          "option":"Withdrawal processed"
-        },
-        "slashed": {
-          "option":"Validator got slashed"
-        },
-        "real_time": {
-          "option":"Realtime mode",
-          "hint": "Sends notifications after the first epoch and does not wait for finality to send notifications, which might cause false positive notifications."
-        },
-        "all": {
-          "option":"All events"
-        }
-      },
-      "accounts": {
-        "explanation": "",
-        "incoming": {
-          "option":"Incoming transactions"
-        },
-        "outgoing": {
-          "option":"Outgoing transactions"
-        },
-        "erc20": {
-          "option":"Track ERC20 token transfers",
-          "placeholder": "value > $0"
-        },
-        "erc721": {
-          "option":"Track ERC721 token transfers"
-        },
-        "erc1155": {
-          "option":"Track ERC1155 token transfers"
-        },
-        "all": {
-          "option":"All events"
-        },
-        "networks": {
-          "option":"Networks"
-        },
-        "ignore_spam": {
-          "option":"Ignore spam transactions",
-          "hint": ["Ignores *zero value transfer tx's* and token tx's that have the *\"hidden\" token label*."]
-        }
-      },
-      "button":"Close",
-      "error_title": "Error",
-      "error_group": "Saving",
-      "error_message": "We could not save your preferences."
-    }
-  },
   "pricing": {
     "seo_title": "Premium Pricing",
     "compare": "Compare Plans",

From 25641b24edd568ac88e1477634f9fc0cc6adcb76 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 8 Jul 2024 12:03:26 +0200
Subject: [PATCH 41/69] (BIDS-2859) now we can change easily the identifier of
 each setting for the API

---
 .../notifications/SubscriptionDialog.vue      | 12 +++++------
 frontend/i18n/en.json                         |  2 +-
 frontend/types/subscriptionModal.ts           | 20 +++++++++++++++++++
 frontend/utils/misc.ts                        |  4 ----
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index b1473c33c..a87dee98a 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ValidatorSubscriptionState, AccountSubscriptionState, CheckboxAndNumber } from '~/types/subscriptionModal'
+import { type ValidatorSubscriptionState, type AccountSubscriptionState, SubscriptionJSONfields, type CheckboxAndNumber } from '~/types/subscriptionModal'
 import type { ChainIDs } from '~/types/network'
 import type { ApiErrorResponse } from '~/types/api/common'
 import { API_PATH } from '~/types/customFetch'
@@ -100,13 +100,13 @@ async function sendUserPreferencesToAPI () {
   const output = {} as Record<string, any>
   for (const entry of Object.entries(modifiableOptions.value)) {
     const key = entry[0] as keyof ModifiableOptions
-    const snaKey = camelToSnakeCase(key)
+    const apiKey = SubscriptionJSONfields[key]
     if (Array.isArray(entry[1])) {
-      output[snaKey] = entry[1]
+      output[apiKey] = entry[1]
     } else {
       switch (typeof originalSettings[key]) {
-        case 'boolean' : output[snaKey] = entry[1].check; break
-        case 'number' : output[snaKey] = entry[1].num * (entry[1].check ? 1 : -1); break
+        case 'boolean' : output[apiKey] = entry[1].check; break
+        case 'number' : output[apiKey] = entry[1].num * (entry[1].check ? 1 : -1); break
       }
     }
   }
@@ -117,7 +117,7 @@ async function sendUserPreferencesToAPI () {
     response = await fetch<ApiErrorResponse>(API_PATH.NOTIFICATION_SUBSCRIPTIONS, {
       method: 'POST',
       body: {
-        category: props.value?.accountSub ? 'accounts' : 'validators',
+        category: props.value!.accountSub ? 'accounts' : 'validators',
         subscriptions: output
       }
     })
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index f5e5a5bbf..0b1ef18f9 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -388,7 +388,7 @@
       },
       "button":"Close",
       "error_title": "Error",
-      "error_group": "Saving",
+      "error_group": "Notification subscriptions",
       "error_message": "We could not save your preferences."
     }
   },
diff --git a/frontend/types/subscriptionModal.ts b/frontend/types/subscriptionModal.ts
index 0841967ac..42a0a3753 100644
--- a/frontend/types/subscriptionModal.ts
+++ b/frontend/types/subscriptionModal.ts
@@ -24,6 +24,26 @@ export type AccountSubscriptionState = {
   ignoreSpam: boolean
 }
 
+/** for the communication with the API  // TODO: write here the identifiers actually used by the API */
+export const SubscriptionJSONfields: Record<keyof (ValidatorSubscriptionState&AccountSubscriptionState), string> = {
+  offlineValidator: 'offline_validator',
+  offlineGroup: 'offline_group',
+  missedAttestations: 'missed_attestations',
+  proposedBlock: 'proposed_block',
+  upcomingProposal: 'upcoming_proposal',
+  syncCommittee: 'sync_committee',
+  withdrawn: 'withdrawn',
+  slashed: 'slashed',
+  realTime: 'real_time',
+  incoming: 'incoming',
+  outgoing: 'outgoing',
+  erc20: 'erc20',
+  erc721: 'erc721',
+  erc1155: 'erc1155',
+  networks: 'networks',
+  ignoreSpam: 'ignore_spam'
+}
+
 /** for internal use */
 export interface CheckboxAndNumber {
   check: boolean,
diff --git a/frontend/utils/misc.ts b/frontend/utils/misc.ts
index 620fd9c82..1ff130e3b 100644
--- a/frontend/utils/misc.ts
+++ b/frontend/utils/misc.ts
@@ -41,7 +41,3 @@ export function isInt (value?: string): boolean {
   const parsed = parseInt(value)
   return !isNaN(parsed) && `${parsed}` === value
 }
-
-export function camelToSnakeCase (str: string) : string {
-  return str[0].toLowerCase() + str.slice(1).replace(/[A-Z]/g, big => '_' + big.toLowerCase())
-}

From eabb58d50f5720f3232f2b95fa5773e8bfc4f777 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 8 Jul 2024 12:25:00 +0200
Subject: [PATCH 42/69] (BIDS-2859) now we can change easily the identifier of
 each setting for the API

---
 frontend/types/subscriptionModal.ts | 63 ++++++++++++++++++++---------
 1 file changed, 43 insertions(+), 20 deletions(-)

diff --git a/frontend/types/subscriptionModal.ts b/frontend/types/subscriptionModal.ts
index 42a0a3753..a1e4bf069 100644
--- a/frontend/types/subscriptionModal.ts
+++ b/frontend/types/subscriptionModal.ts
@@ -1,5 +1,48 @@
 import { ChainIDs } from './network'
 
+/** translates our the names of our object members to/from the names used by the API  // TODO: write here the identifiers actually used by the API */
+export enum SubscriptionJSONfields {
+  offlineValidator = 'offline_validator',
+  offline_validator = 'offlineValidator',
+
+  offlineGroup = 'offline_group',
+  offline_group = 'offlineGroup',
+
+  missedAttestations = 'missed_attestations',
+  missed_attestations = 'missedAttestations',
+
+  proposedBlock = 'proposed_block',
+  proposed_block = 'proposedBlock',
+
+  upcomingProposal = 'upcoming_proposal',
+  upcoming_proposal = 'upcomingProposal',
+
+  syncCommittee = 'sync_committee',
+  sync_committee = 'syncCommittee',
+
+  withdrawn = 'withdrawn',
+
+  slashed = 'slashed',
+
+  realTime = 'real_time',
+  real_time = 'realTime',
+
+  incoming = 'incoming',
+
+  outgoing = 'outgoing',
+
+  erc20 = 'erc20',
+
+  erc721 = 'erc721',
+
+  erc1155 = 'erc1155',
+
+  networks = 'networks',
+
+  ignoreSpam = 'ignore_spam',
+  ignore_spam = 'ignoreSpam'
+}
+
 /** for an option of type `number`: to mean that no value exists in the DB yet, set it to NaN; to mean that it is has a value but it is deactivated, set it to a negative value (for example 10% becomes -10) */
 export type ValidatorSubscriptionState = {
   offlineValidator: boolean,
@@ -24,26 +67,6 @@ export type AccountSubscriptionState = {
   ignoreSpam: boolean
 }
 
-/** for the communication with the API  // TODO: write here the identifiers actually used by the API */
-export const SubscriptionJSONfields: Record<keyof (ValidatorSubscriptionState&AccountSubscriptionState), string> = {
-  offlineValidator: 'offline_validator',
-  offlineGroup: 'offline_group',
-  missedAttestations: 'missed_attestations',
-  proposedBlock: 'proposed_block',
-  upcomingProposal: 'upcoming_proposal',
-  syncCommittee: 'sync_committee',
-  withdrawn: 'withdrawn',
-  slashed: 'slashed',
-  realTime: 'real_time',
-  incoming: 'incoming',
-  outgoing: 'outgoing',
-  erc20: 'erc20',
-  erc721: 'erc721',
-  erc1155: 'erc1155',
-  networks: 'networks',
-  ignoreSpam: 'ignore_spam'
-}
-
 /** for internal use */
 export interface CheckboxAndNumber {
   check: boolean,

From 90862d85e2528da539201cd3ab97a3d6f0942fca Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 8 Jul 2024 12:28:56 +0200
Subject: [PATCH 43/69] (BIDS-2859) detail

---
 frontend/types/subscriptionModal.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/types/subscriptionModal.ts b/frontend/types/subscriptionModal.ts
index a1e4bf069..63e4f4f39 100644
--- a/frontend/types/subscriptionModal.ts
+++ b/frontend/types/subscriptionModal.ts
@@ -1,6 +1,6 @@
 import { ChainIDs } from './network'
 
-/** translates our the names of our object members to/from the names used by the API  // TODO: write here the identifiers actually used by the API */
+/** translates the names of the members of our objects to/from the names used by the API  // TODO: write here the identifiers actually used by the API */
 export enum SubscriptionJSONfields {
   offlineValidator = 'offline_validator',
   offline_validator = 'offlineValidator',

From c38375951ec468ab855442d5c7109ec4defe2145 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 9 Jul 2024 16:42:50 +0200
Subject: [PATCH 44/69] (BIDS-2859) several changes after review, not finished

---
 frontend/assets/css/main.scss                 |  4 +-
 frontend/components/bc/NetworkSelector.vue    | 70 +++++++++----------
 frontend/components/bc/header/MainHeader.vue  |  2 +-
 .../bc/searchbar/NetworkSelector.vue          |  2 +-
 frontend/components/bc/toggle/MultiBar.vue    |  8 +--
 .../components/bc/toggle/MultiBarButton.vue   | 10 +--
 .../creation/DashboardCreationNetworkMask.vue |  4 +-
 .../notifications/SubscriptionDialog.vue      | 32 ++++-----
 .../notifications/SubscriptionRow.vue         | 22 +++---
 .../playground/PlaygroundDialog.vue           |  4 +-
 .../components/slot/viz/SlotVizViewer.vue     |  2 +-
 frontend/composables/useBcSeo.ts              |  2 +-
 frontend/composables/useRefBridge.ts          |  8 +--
 frontend/types/network.ts                     | 42 +++++++----
 .../{ => notifications}/subscriptionModal.ts  |  6 +-
 15 files changed, 112 insertions(+), 106 deletions(-)
 rename frontend/types/{ => notifications}/subscriptionModal.ts (88%)

diff --git a/frontend/assets/css/main.scss b/frontend/assets/css/main.scss
index 04c31e4ab..2bf8cfc6c 100644
--- a/frontend/assets/css/main.scss
+++ b/frontend/assets/css/main.scss
@@ -27,9 +27,7 @@ a {
     pointer-events: none;
   }
 }
-hr {
-  color: var(--container-border-color);
-}
+
 .link {
   color: var(--link-color);
   cursor: pointer;
diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index dbfb3d589..eeb208d82 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -4,48 +4,48 @@ import { IconNetwork } from '#components'
 import { ChainInfo, ChainIDs } from '~/types/network'
 
 const props = defineProps<{
-  displayOnly?: boolean
+  readonlyNetworks?: ChainIDs[]
 }>()
 
 const { availableNetworks, isNetworkDisabled } = useNetworkStore()
 
-/** If the v-model is:
- *  - A ChainIDs: only one network can be selected by the user. Prop `:display-only` must be false or omitted.
- *  - An array of ChainIDs:
- *    - and prop `:display-only` is `false`/omitted: several networks can be selected by the user,
- *    - and prop `:display-only` is `true`: the networks in the array are shown to the user but they are unclickable. */
-const liveState = defineModel<ChainIDs|ChainIDs[]>({ required: false })
-
-const selection = Array.isArray(liveState.value)
-  ? useArrayRefBridge<ChainIDs, string>(liveState as Ref<ChainIDs[]>)
-  : usePrimitiveRefBridge<ChainIDs, string>(liveState as Ref<ChainIDs>)
-
-const buttons = shallowRef<MultiBarItem[]>([])
-
-if (props.displayOnly) {
-  watch(liveState as Ref<ChainIDs[]>, updateButtons, { immediate: true })
-} else {
-  watch(availableNetworks, updateButtons, { immediate: true })
-}
-
-function updateButtons (source: ChainIDs[]) : void {
-  buttons.value = []
-  source.forEach((chainId) => {
-      buttons.value!.push({
-        component: IconNetwork,
-        componentProps: { chainId, harmonizePerceivedSize: true, colored: true },
-        componentClass: 'maximum',
-        value: String(chainId),
-        disabled: isNetworkDisabled(chainId),
-        tooltip: ChainInfo[chainId].name.join(' ')
-      })
-  })
-}
+/** If prop `:readonly-networks` is given:
+ *   the networks in array `:readonly-networks` are shown to the user and they are unclickable,
+ *  Otherwise, give a v-model. If the v-model is
+ *   a ChainIDs: only one network can be selected by the user,
+ *   an array of ChainIDs: several networks can be selected by the user */
+const selection = defineModel<ChainIDs|ChainIDs[]>({ required: false })
+
+let barSelection: Ref<string> | Ref<string[]>
+if (props.readonlyNetworks) {
+  barSelection = ref<string[]>([])
+} else
+  if (Array.isArray(selection.value)) {
+    barSelection = useArrayRefBridge<ChainIDs, string>(selection as Ref<ChainIDs[]>)
+  } else {
+    barSelection = usePrimitiveRefBridge<ChainIDs, string>(selection as Ref<ChainIDs>)
+  }
+
+const buttons = computed(() => {
+  const list: MultiBarItem[] = []
+  const source = props.readonlyNetworks || availableNetworks.value
+  for (const chainId of source) {
+    list.push({
+      component: IconNetwork,
+      componentProps: { chainId, harmonizePerceivedSize: true, colored: true },
+      componentClass: 'maximum',
+      value: String(chainId),
+      disabled: isNetworkDisabled(chainId),
+      tooltip: ChainInfo[chainId].name
+    })
+  }
+  return list
+})
 </script>
 
 <template>
-  <BcToggleMultiBar v-if="Array.isArray(selection)" v-model="selection" :buttons="buttons" :display-mode="displayOnly" />
-  <BcToggleSingleBar v-else v-model="selection" :buttons="buttons" layout="minimal" />
+  <BcToggleMultiBar v-if="Array.isArray(barSelection)" v-model="barSelection" :buttons="buttons" :readonly-mode="!!readonlyNetworks" />
+  <BcToggleSingleBar v-else v-model="barSelection" :buttons="buttons" layout="minimal" />
 </template>
 
 <style lang="scss">
diff --git a/frontend/components/bc/header/MainHeader.vue b/frontend/components/bc/header/MainHeader.vue
index b98f38366..6e3044c6d 100644
--- a/frontend/components/bc/header/MainHeader.vue
+++ b/frontend/components/bc/header/MainHeader.vue
@@ -127,7 +127,7 @@ const userMenu = computed(() => {
           <span class="name">beaconcha.in</span>
         </BcLink>
         <span class="variant">
-          v2 beta | {{ networkInfo.name.join(' ') }}
+          v2 beta | {{ networkInfo.name }}
         </span>
       </div>
 
diff --git a/frontend/components/bc/searchbar/NetworkSelector.vue b/frontend/components/bc/searchbar/NetworkSelector.vue
index 237b33ab5..f037dcd3a 100644
--- a/frontend/components/bc/searchbar/NetworkSelector.vue
+++ b/frontend/components/bc/searchbar/NetworkSelector.vue
@@ -75,7 +75,7 @@ function updateLocalState () {
   listInDropdown.value.length = 0
   listInDropdown.value.push({ chainId: ChainIDs.Any, label: t('search_bar.all_networks'), selected: allNetworksAreSelected })
   for (const filter of liveState.value) {
-    listInDropdown.value.push({ chainId: filter[0], label: ChainInfo[filter[0]].name.join(' '), selected: filter[1] })
+    listInDropdown.value.push({ chainId: filter[0], label: ChainInfo[filter[0]].name, selected: filter[1] })
   }
 }
 
diff --git a/frontend/components/bc/toggle/MultiBar.vue b/frontend/components/bc/toggle/MultiBar.vue
index e8bc0e392..d2ae3722b 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { type MultiBarItem } from '~/types/multiBar'
 
 interface Props {
-  displayMode?: boolean,
+  readonlyMode?: boolean,
   buttons: MultiBarItem[]
 }
 
@@ -35,11 +35,11 @@ function sendToVModel (data: ButtonStates) : string[] {
 // this line is independent of the bridge above (that addresses the on/off states), this line updates the component if the list of buttons comes late
 watch(() => props.buttons, () => { buttonStates.value = receiveFromVModel(selection.value) })
 
-const displayModeClass = computed(() => props.displayMode ? 'read-only' : '')
+const readonlyClass = computed(() => props.readonlyMode ? 'read-only' : '')
 </script>
 
 <template>
-  <div class="bc-togglebar" :class="displayModeClass">
+  <div class="bc-togglebar" :class="readonlyClass">
     <BcToggleMultiBarButton
       v-for="button in props.buttons"
       :key="button.value"
@@ -48,7 +48,7 @@ const displayModeClass = computed(() => props.displayMode ? 'read-only' : '')
       :icon="button.icon"
       :tooltip="button.tooltip"
       :disabled="button.disabled"
-      :display-mode-class="displayModeClass"
+      :readonly-class="readonlyClass"
     >
       <template #icon>
         <slot :name="button.value">
diff --git a/frontend/components/bc/toggle/MultiBarButton.vue b/frontend/components/bc/toggle/MultiBarButton.vue
index 09d0bc221..f210493f9 100644
--- a/frontend/components/bc/toggle/MultiBarButton.vue
+++ b/frontend/components/bc/toggle/MultiBarButton.vue
@@ -8,7 +8,7 @@ interface Props {
   falseIcon?: IconDefinition,
   disabled?:boolean,
   tooltip?: string,
-  displayModeClass?: string
+  readonlyClass?: string
 }
 
 const props = defineProps<Props>()
@@ -23,11 +23,11 @@ const icon = computed(() => {
 <template>
   <BcTooltip :dont-open-permanently="true" :hover-delay="350">
     <template #tooltip>
-      <div class="button-tooltip" :class="displayModeClass">
+      <div class="button-tooltip" :class="readonlyClass">
         <div v-if="tooltip" class="individual">
           {{ tooltip }}
         </div>
-        <div v-if="displayModeClass !== 'read-only'">
+        <div v-if="readonlyClass !== 'read-only'">
           {{ disabled ? $t('common.unavailable') : (selected ? $t('filter.enabled'): $t('filter.disabled')) }}
         </div>
       </div>
@@ -35,10 +35,10 @@ const icon = computed(() => {
     <ToggleButton
       v-model="selected"
       class="bc-toggle"
-      :class="displayModeClass"
+      :class="readonlyClass"
       on-label="''"
       off-icon="''"
-      :disabled="disabled || displayModeClass === 'read-only'"
+      :disabled="disabled || readonlyClass === 'read-only'"
     >
       <template #icon="slotProps">
         <slot name="icon" v-bind="slotProps">
diff --git a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
index f1a3d3951..2b2f6b190 100644
--- a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
@@ -16,8 +16,8 @@ const buttonList = computed(() => {
     if (isL1(chainId)) {
       list.push({
         value: String(chainId),
-        text: ChainInfo[chainId].name[0],
-        subText: ChainInfo[chainId].name[1],
+        text: ChainInfo[chainId].nameParts[0],
+        subText: ChainInfo[chainId].nameParts[1],
         disabled: isNetworkDisabled(chainId),
         component: IconNetwork,
         componentProps: { chainId, colored: false, harmonizePerceivedSize: true },
diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index a87dee98a..36beafc10 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { type ValidatorSubscriptionState, type AccountSubscriptionState, SubscriptionJSONfields, type CheckboxAndNumber } from '~/types/subscriptionModal'
+import { type ValidatorSubscriptionState, type AccountSubscriptionState, SubscriptionJSONfields, type CheckboxAndNumber } from '~/types/notifications/subscriptionModal'
 import type { ChainIDs } from '~/types/network'
 import type { ApiErrorResponse } from '~/types/api/common'
 import { API_PATH } from '~/types/customFetch'
 
 interface Props {
   validatorSub?: ValidatorSubscriptionState,
-  accountSub?: AccountSubscriptionState,
-  premiumUser: boolean
+  accountSub?: AccountSubscriptionState
 }
 
 const TimeoutForSavingFailures = 2300 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost your preferences half a minute ago, we hope you remember them and do not mind going back to that dialog"
@@ -31,6 +30,7 @@ const { t } = useI18n()
 const { fetch, setTimeout } = useCustomFetch()
 const toast = useBcToast()
 const { networkInfo } = useNetworkStore()
+const { user } = useUserStore()
 
 const tPath = ref('')
 let originalSettings = {} as AllPossibleOptions
@@ -40,7 +40,7 @@ const allCheckbox = ref({ check: false } as CheckboxAndNumber)
 const debouncer = useDebounceValue<number>(0, MinimumTimeBetweenAPIcalls)
 watch(debouncer.value, sendUserPreferencesToAPI)
 
-let dataNonce = 0 // is used by the watcher of `modifiableOptions` to know when it is unnecessary to send apparent changes to the API (it doesn't send if the nonce is 0)
+let dataNonce = 0 // used by the watcher of `modifiableOptions` to know when it is unnecessary to send apparent changes to the API (it doesn't send if the nonce is 0)
 
 watch(props, (props) => {
   if (!props || (!props.validatorSub && !props.accountSub)) {
@@ -93,8 +93,6 @@ watch(modifiableOptions, (options) => {
   dataNonce++
 }, { immediate: true, deep: true })
 
-let lastSaveFailed = false
-
 async function sendUserPreferencesToAPI () {
   // first we convert our internal structures to the format of the API
   const output = {} as Record<string, any>
@@ -126,20 +124,13 @@ async function sendUserPreferencesToAPI () {
   }
   if (!response || response.error) {
     toast.showError({ summary: t('notifications.subscriptions.error_title'), group: t('notifications.subscriptions.error_group'), detail: t('notifications.subscriptions.error_message') })
-    lastSaveFailed = true // we will try again when the dialog closes
-  } else {
-    lastSaveFailed = false
   }
 }
 
-const isOptionAvailable = (key: string) => props.value?.premiumUser || !(key in DefaultValueOfValidatorOptionsNeedingPremium || key in DefaultValueOfAccountOptionsNeedingPremium)
+const isOptionAvailable = (key: string) => user.value?.premium_perks.ad_free || !(key in DefaultValueOfValidatorOptionsNeedingPremium || key in DefaultValueOfAccountOptionsNeedingPremium)
 
 function closeDialog () : void {
-  if (lastSaveFailed) {
-    // second chance: we try not to lose what the user has set
-    sendUserPreferencesToAPI()
-  }
-  dialogRef?.value.close(true)
+  dialogRef?.value.close()
 }
 </script>
 
@@ -176,7 +167,7 @@ function closeDialog () : void {
       <NotificationsSubscriptionRow v-model="modifiableOptions.withdrawn" :t-path="tPath+'withdrawn'" :lacks-premium-subscription="!isOptionAvailable('withdrawn')" class="row" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.slashed" :t-path="tPath+'slashed'" :lacks-premium-subscription="!isOptionAvailable('slashed')" class="row" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.realTime" :t-path="tPath+'real_time'" :lacks-premium-subscription="!isOptionAvailable('realTime')" class="row" />
-      <hr>
+      <div class="separation" />
       <NotificationsSubscriptionRow v-model="allCheckbox" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" />
     </div>
 
@@ -186,7 +177,7 @@ function closeDialog () : void {
       <NotificationsSubscriptionRow v-model="modifiableOptions.erc20" :t-path="tPath+'erc20'" :lacks-premium-subscription="!isOptionAvailable('erc20')" input-type="amount" class="row" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.erc721" :t-path="tPath+'erc721'" :lacks-premium-subscription="!isOptionAvailable('erc721')" class="row" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.erc1155" :t-path="tPath+'erc1155'" :lacks-premium-subscription="!isOptionAvailable('erc1155')" class="row" />
-      <hr>
+      <div class="separation" />
       <NotificationsSubscriptionRow v-model="allCheckbox" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.networks" :t-path="tPath+'networks'" :lacks-premium-subscription="!isOptionAvailable('networks')" input-type="networks" class="row" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.ignoreSpam" :t-path="tPath+'ignore_spam'" :lacks-premium-subscription="!isOptionAvailable('ignoreSpam')" class="row" />
@@ -214,7 +205,7 @@ function closeDialog () : void {
   .explanation {
     margin-bottom: var(--padding);
     @include fonts.small_text;
-    opacity: 0.6;
+    color: var(--text-color-discreet)
   }
 
   .row {
@@ -222,6 +213,11 @@ function closeDialog () : void {
     margin-bottom: 14px;
   }
 
+  .separation {
+    height: 1px;
+    background-color: var(--container-border-color);
+  }
+
   .footer {
     display: flex;
     justify-content: right;
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 1829df05a..6e2be8616 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import type { ModelRef } from 'vue'
 import type { ChainIDs } from '~/types/network'
-import type { CheckboxAndNumber } from '~/types/subscriptionModal'
+import type { CheckboxAndNumber } from '~/types/notifications/subscriptionModal'
 
 const props = defineProps<{
   tPath: string,
@@ -26,8 +26,6 @@ const state = defineModel<CheckboxAndNumber|ChainIDs[]>({ required: true })
 let networkSelectorState: ModelRef<ChainIDs[]>
 let checkboxAndText: Ref<CheckboxAndText> | undefined
 
-// bridging the v-model (CheckboxAndNumber | ChainIDs[]) with the data of this component (CheckboxAndText | ChainIDs[])
-
 if (type.value === 'networks') {
   networkSelectorState = state as ModelRef<ChainIDs[]>
 } else {
@@ -53,8 +51,6 @@ function sendToVModel (state: CheckboxAndText) : CheckboxAndNumber {
   return output
 }
 
-// input validation / autocorrection
-
 function correctUserInput (input: string) : string {
   switch (type.value) {
     case 'amount' : return isThisAvalidInput(input) ? String(calculateCorrectNumber(input)) : ''
@@ -77,8 +73,6 @@ function isThisAvalidInput (input: string) : boolean {
   return !!input && !isNaN(Number(input)) && Number(input) >= 0
 }
 
-// calculation of the information to show in the tooltip
-
 const tooltipLines = computed(() => {
   let options
   if (props.valueInText !== undefined) {
@@ -98,7 +92,6 @@ const tooltipLines = computed(() => {
   return tAll(t, props.tPath + '.hint', options)
 })
 
-// output: on blur or enter, auto-correcting the text field
 function acknowledgeInputtedText () {
   checkboxAndText!.value.text = correctUserInput(checkboxAndText!.value.text)
 }
@@ -111,6 +104,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
     <span class="caption" :class="deactivationClass">
       {{ t(tPath+'.option') }}
     </span>
+    <InputNumber />
     <BcTooltip v-if="tooltipLines[0]" :fit-content="true">
       <FontAwesomeIcon :icon="faInfoCircle" class="info" />
       <template #tooltip>
@@ -160,15 +154,19 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
   align-items: center;
 
   .caption {
-    margin-right: 3px;
+    margin-right: var(--padding-small);
+    &.deactivated {
+      opacity: unset;
+      color: var(--text-color-disabled);
+    }
   }
 
   .info {
-    margin-left: 3px;
-    margin-right: 3px;
+    margin-left: var(--padding-small);
+    margin-right: var(--padding-small);
   }
   .gem {
-    margin-left: 3px;
+    margin-left: var(--padding-small);
   }
 
   .right {
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index ebba5d5e1..119bd2567 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { BcDialogConfirm, NotificationsSubscriptionDialog } from '#components'
-import type { ValidatorSubscriptionState, AccountSubscriptionState } from '~/types/subscriptionModal'
+import type { ValidatorSubscriptionState, AccountSubscriptionState } from '~/types/notifications/subscriptionModal'
 
 const dialog = useDialog()
 
@@ -55,7 +55,7 @@ function openSubscriptions (props: any) {
 
 <template>
   <div class="container">
-    <Button @click="openSubscriptions({validatorSub, premiumUser: true})">
+    <Button @click="openSubscriptions({validatorSub, premiumUser: false})">
       Subscribe to notifications for your validators
     </Button>
     <Button @click="openSubscriptions({accountSub, premiumUser: true})">
diff --git a/frontend/components/slot/viz/SlotVizViewer.vue b/frontend/components/slot/viz/SlotVizViewer.vue
index 2818a3371..60b136bfb 100644
--- a/frontend/components/slot/viz/SlotVizViewer.vue
+++ b/frontend/components/slot/viz/SlotVizViewer.vue
@@ -111,7 +111,7 @@ watch(() => props, () => {
         <BcToggleMultiBar v-model="selectedCategories" :buttons="icons" />
       </div>
       <h1 class="network">
-        {{ networkInfo?.name.join(' ') }}
+        {{ networkInfo?.name }}
       </h1>
       <div class="header-right">
         <slot name="header-right" />
diff --git a/frontend/composables/useBcSeo.ts b/frontend/composables/useBcSeo.ts
index d818eefe7..289e0760c 100644
--- a/frontend/composables/useBcSeo.ts
+++ b/frontend/composables/useBcSeo.ts
@@ -24,7 +24,7 @@ export function useBcSeo (pageTitle?: string | Ref<string | number | undefined>
     } else if (pageTitle?.value) {
       parts.splice(0, 0, `${pageTitle.value}`)
     }
-    return networkInfo.value.description + ' ' + networkInfo.value.name.join(' ') + ' ' + parts.join(' - ')
+    return networkInfo.value.description + ' ' + networkInfo.value.name + ' ' + parts.join(' - ')
   }
 
   useSeoMeta({
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index 3e5d1a90b..34746ab32 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -22,14 +22,14 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
   let pauseForth = false
   const stopperForth = watch(origRef, () => {
     if (pauseForth) { return }
-    const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : convertPrimitiveByDefault<Tcreated>(el)) : undefined
+    const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : stringNumberConversion<Tcreated>(el)) : undefined
     createdRef.value = OasC
     pauseBack = true
     nextTick(() => { pauseBack = false })
   }, { immediate: true, deep: true })
   const stopperBack = watch(createdRef, () => {
     if (pauseBack) { return }
-    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : convertPrimitiveByDefault<Torig>(el)) : undefined as unknown as Torig[]
+    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : stringNumberConversion<Torig>(el)) : undefined as unknown as Torig[]
     origRef.value = CasO
     pauseForth = true
     nextTick(() => { pauseForth = false })
@@ -99,10 +99,10 @@ export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRe
  * @param createdToOrig (optional) Callback/Arrow function that converts the value in the created ref into the type of the value in the original ref. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * */
 export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated> {
-  return useObjectRefBridge<Torig, Tcreated>(origRef, origToCreated ?? convertPrimitiveByDefault, createdToOrig ?? convertPrimitiveByDefault)
+  return useObjectRefBridge<Torig, Tcreated>(origRef, origToCreated ?? stringNumberConversion, createdToOrig ?? stringNumberConversion)
 }
 
-function convertPrimitiveByDefault<TO> (from: any) : TO {
+function stringNumberConversion<TO> (from: any) : TO {
   switch (typeof from) {
     case 'number' : return String(from) as TO
     case 'string' : return Number(from) as TO
diff --git a/frontend/types/network.ts b/frontend/types/network.ts
index 4c12f1368..549f0f8aa 100644
--- a/frontend/types/network.ts
+++ b/frontend/types/network.ts
@@ -31,7 +31,8 @@ export enum ChainIDs {
 }
 
 export interface ChainInfoFields {
-  name: string[],
+  nameParts: string[],
+  name: string,
   description: string,
   family: ChainFamily,
   mainNet: ChainIDs, // if the network is a testnet, this field points to the non-test network
@@ -46,7 +47,8 @@ export interface ChainInfoFields {
 
 export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   [ChainIDs.Any]: {
-    name: ['Any', 'network'],
+    nameParts: ['Any', 'network'],
+    name: 'Any network',
     description: 'Any network',
     family: ChainFamily.Any,
     mainNet: ChainIDs.Any,
@@ -60,7 +62,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   },
 
   [ChainIDs.Ethereum]: {
-    name: ['Ethereum', 'Mainnet'],
+    nameParts: ['Ethereum', 'Mainnet'],
+    name: 'Ethereum Mainnet',
     description: 'Mainnet',
     family: ChainFamily.Ethereum,
     mainNet: ChainIDs.Ethereum,
@@ -73,7 +76,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 1
   },
   [ChainIDs.Holesky]: {
-    name: ['Ethereum', 'Holesky'],
+    nameParts: ['Ethereum', 'Holesky'],
+    name: 'Ethereum Holesky',
     description: 'Testnet',
     family: ChainFamily.Ethereum,
     mainNet: ChainIDs.Ethereum,
@@ -86,7 +90,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 2
   },
   [ChainIDs.Sepolia]: {
-    name: ['Ethereum', 'Sepolia'],
+    nameParts: ['Ethereum', 'Sepolia'],
+    name: 'Ethereum Sepolia',
     description: 'Testnet',
     family: ChainFamily.Ethereum,
     mainNet: ChainIDs.Ethereum,
@@ -100,7 +105,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   },
 
   [ChainIDs.ArbitrumOneEthereum]: {
-    name: ['Arbitrum One', 'Mainnet'],
+    nameParts: ['Arbitrum One', 'Mainnet'],
+    name: 'Arbitrum One Mainnet',
     description: 'L2',
     family: ChainFamily.Arbitrum,
     mainNet: ChainIDs.ArbitrumOneEthereum,
@@ -113,7 +119,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 10
   },
   [ChainIDs.ArbitrumNovaEthereum]: {
-    name: ['Arbitrum Nova', 'Mainnet'],
+    nameParts: ['Arbitrum Nova', 'Mainnet'],
+    name: 'Arbitrum Nova Mainnet',
     description: 'L2',
     family: ChainFamily.Arbitrum,
     mainNet: ChainIDs.ArbitrumNovaEthereum,
@@ -126,7 +133,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 11
   },
   [ChainIDs.ArbitrumOneSepolia]: {
-    name: ['Arbitrum', 'Sepolia'],
+    nameParts: ['Arbitrum', 'Sepolia'],
+    name: 'Arbitrum Sepolia',
     description: 'Testnet',
     family: ChainFamily.Arbitrum,
     mainNet: ChainIDs.ArbitrumOneEthereum,
@@ -140,7 +148,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   },
 
   [ChainIDs.OptimismEthereum]: {
-    name: ['Optimism', 'Mainnet'],
+    nameParts: ['Optimism', 'Mainnet'],
+    name: 'Optimism Mainnet',
     description: 'L2',
     family: ChainFamily.Optimism,
     mainNet: ChainIDs.OptimismEthereum,
@@ -153,7 +162,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 20
   },
   [ChainIDs.OptimismSepolia]: {
-    name: ['Optimism', 'Sepolia'],
+    nameParts: ['Optimism', 'Sepolia'],
+    name: 'Optimism Sepolia',
     description: 'Testnet',
     family: ChainFamily.Optimism,
     mainNet: ChainIDs.OptimismEthereum,
@@ -167,7 +177,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   },
 
   [ChainIDs.BaseEthereum]: {
-    name: ['Base', 'Mainnet'],
+    nameParts: ['Base', 'Mainnet'],
+    name: 'Base Mainnet',
     description: 'L2',
     family: ChainFamily.Base,
     mainNet: ChainIDs.BaseEthereum,
@@ -180,7 +191,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 30
   },
   [ChainIDs.BaseSepolia]: {
-    name: ['Base', 'Sepolia'],
+    nameParts: ['Base', 'Sepolia'],
+    name: 'Base Sepolia',
     description: 'Testnet',
     family: ChainFamily.Base,
     mainNet: ChainIDs.BaseEthereum,
@@ -194,7 +206,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   },
 
   [ChainIDs.Gnosis]: {
-    name: ['Gnosis', 'Mainnet'],
+    nameParts: ['Gnosis', 'Mainnet'],
+    name: 'Gnosis Mainnet',
     description: 'Mainnet',
     family: ChainFamily.Gnosis,
     mainNet: ChainIDs.Gnosis,
@@ -207,7 +220,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 40
   },
   [ChainIDs.Chiado]: {
-    name: ['Gnosis', 'Chiado'],
+    nameParts: ['Gnosis', 'Chiado'],
+    name: 'Gnosis Chiado',
     description: 'Testnet',
     family: ChainFamily.Gnosis,
     mainNet: ChainIDs.Gnosis,
diff --git a/frontend/types/subscriptionModal.ts b/frontend/types/notifications/subscriptionModal.ts
similarity index 88%
rename from frontend/types/subscriptionModal.ts
rename to frontend/types/notifications/subscriptionModal.ts
index 63e4f4f39..6c42ab985 100644
--- a/frontend/types/subscriptionModal.ts
+++ b/frontend/types/notifications/subscriptionModal.ts
@@ -1,4 +1,4 @@
-import { ChainIDs } from './network'
+import { ChainIDs } from '../network'
 
 /** translates the names of the members of our objects to/from the names used by the API  // TODO: write here the identifiers actually used by the API */
 export enum SubscriptionJSONfields {
@@ -44,7 +44,7 @@ export enum SubscriptionJSONfields {
 }
 
 /** for an option of type `number`: to mean that no value exists in the DB yet, set it to NaN; to mean that it is has a value but it is deactivated, set it to a negative value (for example 10% becomes -10) */
-export type ValidatorSubscriptionState = {
+export type ValidatorSubscriptionState = { // TODO: update the types once they are defined by the API
   offlineValidator: boolean,
   offlineGroup?: number,
   missedAttestations: boolean,
@@ -57,7 +57,7 @@ export type ValidatorSubscriptionState = {
 }
 
 /** for an option of type `number`: to mean that no value exists in the DB yet, set it to NaN; to mean that it is has a value but it is deactivated, set it to a negative value (for example $50 becomes -50) */
-export type AccountSubscriptionState = {
+export type AccountSubscriptionState = { // TODO: update the types once they are defined by the API
   incoming: boolean,
   outgoing: boolean,
   erc20: number,

From 8fcbc475b811ae168fa50d2253dfe6ddbddc35c3 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 10 Jul 2024 18:28:15 +0200
Subject: [PATCH 45/69] (BIDS-2859) new cool component that auto-corrects on
 blur but sends valid data in real time

---
 frontend/components/bc/InputNumber.vue        |  47 +++++++
 .../notifications/SubscriptionDialog.vue      |   8 +-
 .../notifications/SubscriptionRow.vue         |  73 ++---------
 .../playground/PlaygroundDialog.vue           |   8 +-
 frontend/composables/useRefBridge.ts          | 116 ++++++++++++------
 frontend/i18n/en.json                         |   6 +-
 .../types/notifications/subscriptionModal.ts  |   6 +-
 7 files changed, 152 insertions(+), 112 deletions(-)
 create mode 100644 frontend/components/bc/InputNumber.vue

diff --git a/frontend/components/bc/InputNumber.vue b/frontend/components/bc/InputNumber.vue
new file mode 100644
index 000000000..4ffe9d33b
--- /dev/null
+++ b/frontend/components/bc/InputNumber.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { Nullable } from 'primevue/ts-helpers'
+import InputNumber from 'primevue/inputnumber'
+
+const props = defineProps<{
+  min: number,
+  max: number,
+  maxFractionDigits: number
+}>()
+
+const parentVmodel = defineModel<number|null>({ required: true })
+
+const bridgedVmodel = usePrimitiveRefBridge<number|null, Nullable<number>>(parentVmodel, n => n, n => n ?? null)
+
+function sendValueIfValid (input: Nullable<number>) : void {
+  if (input !== undefined && input !== null) {
+    if (isNaN(input)) {
+      input = null
+    } else {
+      if (input < props.min || input > props.max) {
+        return
+      }
+      const stringifyied = String(input)
+      const comma = stringifyied.indexOf('.')
+      if (comma >= 0 && stringifyied.length - comma - 1 > props.maxFractionDigits) {
+        return
+      }
+    }
+  }
+  bridgedVmodel.deactivateBridge() // this allows us to output to the parent v-model the value without causing an injection of the value into the InputNumber v-model (that would trigger the autocorrect of InputNumber at each key stroke)
+  parentVmodel.value = input ?? null
+  bridgedVmodel.reactivateBridge(false)
+}
+</script>
+
+<template>
+  <InputNumber
+    v-model="bridgedVmodel"
+    :min="min"
+    :max="max"
+    :max-fraction-digits="maxFractionDigits"
+    @input="input => { if (typeof input.value !== 'string') sendValueIfValid(input.value) }"
+  />
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 36beafc10..17f2c8ff0 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -61,7 +61,7 @@ watch(props, (props) => {
     } else {
       switch (typeof entry[1]) {
         case 'boolean' : modifiableOptions.value[key] = { check: entry[1], num: 0 }; break
-        case 'number' : modifiableOptions.value[key] = { check: entry[1] >= 0, num: Math.abs(entry[1]) }; break
+        default : modifiableOptions.value[key] = { check: entry[1] != null && entry[1] >= 0, num: (entry[1] === null) ? null : Math.abs(entry[1]) }; break
       }
     }
   }
@@ -104,7 +104,7 @@ async function sendUserPreferencesToAPI () {
     } else {
       switch (typeof originalSettings[key]) {
         case 'boolean' : output[apiKey] = entry[1].check; break
-        case 'number' : output[apiKey] = entry[1].num * (entry[1].check ? 1 : -1); break
+        default : output[apiKey] = entry[1].num; if (!entry[1].check && entry[1].num !== null) { output[apiKey] *= -1 } ; break
       }
     }
   }
@@ -127,11 +127,11 @@ async function sendUserPreferencesToAPI () {
   }
 }
 
-const isOptionAvailable = (key: string) => user.value?.premium_perks.ad_free || !(key in DefaultValueOfValidatorOptionsNeedingPremium || key in DefaultValueOfAccountOptionsNeedingPremium)
-
 function closeDialog () : void {
   dialogRef?.value.close()
 }
+
+const isOptionAvailable = (key: string) => !user.value?.premium_perks.ad_free || !(key in DefaultValueOfValidatorOptionsNeedingPremium || key in DefaultValueOfAccountOptionsNeedingPremium)
 </script>
 
 <template>
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 6e2be8616..42630118f 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -17,60 +17,13 @@ const type = computed(() => props.inputType ?? 'binary')
 
 const { t } = useI18n()
 
-interface CheckboxAndText {
-  check: boolean,
-  text: string
-}
-
 const state = defineModel<CheckboxAndNumber|ChainIDs[]>({ required: true })
 let networkSelectorState: ModelRef<ChainIDs[]>
-let checkboxAndText: Ref<CheckboxAndText> | undefined
-
+let checkBoxAndInput: Ref<CheckboxAndNumber>
 if (type.value === 'networks') {
   networkSelectorState = state as ModelRef<ChainIDs[]>
 } else {
-  checkboxAndText = useObjectRefBridge<CheckboxAndNumber, CheckboxAndText>(state as Ref<CheckboxAndNumber>, receiveFromVModel, sendToVModel)
-}
-
-function receiveFromVModel (state: CheckboxAndNumber) : CheckboxAndText {
-  const output = {} as CheckboxAndText
-  output.check = state.check
-  if (type.value === 'amount' || type.value === 'percent') {
-    output.text = isNaN(state.num) ? '' : String(state.num)
-  }
-  return output
-}
-
-function sendToVModel (state: CheckboxAndText) : CheckboxAndNumber {
-  const output = {} as CheckboxAndNumber
-  output.check = state.check
-  if (type.value === 'amount' || type.value === 'percent') {
-    const corrected = correctUserInput(state.text)
-    output.num = (corrected === '') ? NaN : Number(corrected)
-  }
-  return output
-}
-
-function correctUserInput (input: string) : string {
-  switch (type.value) {
-    case 'amount' : return isThisAvalidInput(input) ? String(calculateCorrectNumber(input)) : ''
-    case 'percent' : return String(calculateCorrectNumber(input))
-  }
-  return ''
-}
-
-function calculateCorrectNumber (input: string) : number {
-  let num = !isThisAvalidInput(input) ? Math.abs(props.default ?? 0) : Number(input)
-  if (type.value === 'percent') {
-    if (num < 1) { num = 1 }
-    if (num > 100) { num = 100 }
-    num = Math.round(10 * num) / 10
-  }
-  return num
-}
-
-function isThisAvalidInput (input: string) : boolean {
-  return !!input && !isNaN(Number(input)) && Number(input) >= 0
+  checkBoxAndInput = state as ModelRef<CheckboxAndNumber>
 }
 
 const tooltipLines = computed(() => {
@@ -83,7 +36,7 @@ const tooltipLines = computed(() => {
     } else {
       let plural: number
       if (type.value === 'amount' || type.value === 'percent') {
-        plural = calculateCorrectNumber(checkboxAndText!.value.text)
+        plural = checkBoxAndInput!.value.num ?? Math.abs(props.default ?? 0)
       } else {
         plural = state.value ? 2 : 1
       }
@@ -92,10 +45,6 @@ const tooltipLines = computed(() => {
   return tAll(t, props.tPath + '.hint', options)
 })
 
-function acknowledgeInputtedText () {
-  checkboxAndText!.value.text = correctUserInput(checkboxAndText!.value.text)
-}
-
 const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
 </script>
 
@@ -104,7 +53,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
     <span class="caption" :class="deactivationClass">
       {{ t(tPath+'.option') }}
     </span>
-    <InputNumber />
+    {{ checkBoxAndInput?.num }}
     <BcTooltip v-if="tooltipLines[0]" :fit-content="true">
       <FontAwesomeIcon :icon="faInfoCircle" class="info" />
       <template #tooltip>
@@ -114,20 +63,20 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
     <BcPremiumGem v-if="lacksPremiumSubscription" class="gem" />
     <div v-if="type != 'networks'" class="right">
       <div v-if="type == 'amount' || type == 'percent'" class="input">
-        <InputText
-          v-if="checkboxAndText"
-          v-model="checkboxAndText.text"
-          type="text"
+        <BcInputNumber
+          v-if="checkBoxAndInput"
+          v-model="checkBoxAndInput.num"
+          :min="(type === 'amount') ? 0 : 1"
+          :max="(type === 'amount') ? 2**32 : 100"
+          :max-fraction-digits="(type === 'amount') ? 2 : 1"
           :placeholder="t(tPath + '.placeholder')"
           :class="[deactivationClass,type]"
-          @blur="acknowledgeInputtedText"
-          @keypress.enter="acknowledgeInputtedText"
         />
         &nbsp;
       </div>
       <span v-if="type == 'percent'" :class="deactivationClass">%</span>
       <Checkbox
-        v-model="checkboxAndText!.check"
+        v-model="checkBoxAndInput!.check"
         :binary="true"
         class="checkbox"
         :class="deactivationClass"
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 119bd2567..636523fd0 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -25,7 +25,7 @@ const openQuestion = (yesLabel?: string, noLabel?: string) => {
 
 const validatorSub: ValidatorSubscriptionState = {
   offlineValidator: true,
-  offlineGroup: -40, // means "40% and deselected/unchecked"
+  offlineGroup: -20, // means "20% and deselected/unchecked"
   missedAttestations: true,
   proposedBlock: true,
   upcomingProposal: false,
@@ -38,7 +38,7 @@ const validatorSub: ValidatorSubscriptionState = {
 const accountSub: AccountSubscriptionState = {
   incoming: true,
   outgoing: true,
-  erc20: NaN, // means "not in the database yet" (will leave the input field empty with a placeholder)
+  erc20: null, // means "not in the database yet" (will leave the input field empty with a placeholder)
   erc721: true,
   erc1155: false,
   networks: [17000],
@@ -55,10 +55,10 @@ function openSubscriptions (props: any) {
 
 <template>
   <div class="container">
-    <Button @click="openSubscriptions({validatorSub, premiumUser: false})">
+    <Button @click="openSubscriptions({validatorSub})">
       Subscribe to notifications for your validators
     </Button>
-    <Button @click="openSubscriptions({accountSub, premiumUser: true})">
+    <Button @click="openSubscriptions({accountSub})">
       Subscribe to notifications for your accounts
     </Button>
     <br>
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index 34746ab32..2c8530d9a 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -1,6 +1,10 @@
-import { type ModelRef } from 'vue'
+import { type ModelRef, type WatchStopHandle } from 'vue'
 
 interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
+interface BridgedRef<T> extends Ref<T> {
+   deactivateBridge: () => void,
+   reactivateBridge: (updateFromOriginalRef: boolean) => void
+}
 
 /** This composable creates a two-way pipe between reactive arrays of 2 different types. The values circulate back
  *  and forth transparently from A to B and B to A, the reactivity is preserved on both ends, the types are converted
@@ -16,31 +20,51 @@ interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
  * @param origToCreated (optional) Callback/Arrow function that converts an element in the original array into the type of the elements in the created array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * @param createdToOrig (optional) Callback/Arrow function that converts an element in the created array into the type of the elements in the original array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * */
-export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated[]> {
-  const createdRef = ref<Tcreated[]>()
+export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : BridgedRef<Tcreated[]> {
+  const createdRef = ref<Tcreated[]>() as BridgedRef<Tcreated[]>
   let pauseBack = false
   let pauseForth = false
-  const stopperForth = watch(origRef, () => {
-    if (pauseForth) { return }
-    const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : stringNumberConversion<Tcreated>(el)) : undefined
-    createdRef.value = OasC
+  let stopperBack: WatchStopHandle
+  let stopperForth: WatchStopHandle
+
+  function startBridge (updateFromOriginalRef: boolean) {
+    pauseBack = pauseForth = false
+    stopperForth = watch(origRef, () => {
+      if (pauseForth) { return }
+      const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : stringNumberConversion<Tcreated>(el)) : undefined as unknown as Tcreated[]
+      createdRef.value = OasC
+      pauseBack = true
+      nextTick(() => { pauseBack = false })
+    }, { immediate: updateFromOriginalRef, deep: true })
+    stopperBack = watch(createdRef, () => {
+      if (pauseBack) { return }
+      const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : stringNumberConversion<Torig>(el)) : undefined as unknown as Torig[]
+      origRef.value = CasO
+      pauseForth = true
+      nextTick(() => { pauseForth = false })
+    }, { deep: true })
+  }
+
+  function reactivateBridge (updateFromOriginalRef: boolean) {
+    nextTick(() => startBridge(updateFromOriginalRef))
+  }
+
+  function deactivateBridge () {
     pauseBack = true
-    nextTick(() => { pauseBack = false })
-  }, { immediate: true, deep: true })
-  const stopperBack = watch(createdRef, () => {
-    if (pauseBack) { return }
-    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : stringNumberConversion<Torig>(el)) : undefined as unknown as Torig[]
-    origRef.value = CasO
     pauseForth = true
-    nextTick(() => { pauseForth = false })
-  }, { deep: true })
-
-  onUnmounted(() => {
     stopperBack()
     stopperForth()
+  }
+
+  onUnmounted(() => {
+    stopperBack?.()
+    stopperForth?.()
   })
 
-  return createdRef as Ref<Tcreated[]>
+  createdRef.deactivateBridge = deactivateBridge
+  createdRef.reactivateBridge = reactivateBridge
+  startBridge(true)
+  return createdRef as BridgedRef<Tcreated[]>
 }
 
 /** This composable creates a two-way pipe between reactive objects of 2 different structures. The values circulate back
@@ -57,31 +81,51 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
  * @param origToCreated Callback/Arrow function that converts the object in the original ref into the structure of the object in the created ref.
  * @param createdToOrig Callback/Arrow function that converts the object in the created ref into the structure of the object in the original ref.
  * */
-export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated> {
-  const createdRef = ref<Tcreated>()
+export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>) : BridgedRef<Tcreated> {
+  const createdRef = ref<Tcreated>() as BridgedRef<Tcreated>
   let pauseBack = false
   let pauseForth = false
-  const stopperForth = watch(origRef, () => {
-    if (pauseForth) { return }
-    const OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined
-    createdRef.value = OasC
+  let stopperBack: WatchStopHandle
+  let stopperForth: WatchStopHandle
+
+  function startBridge (updateFromOriginalRef: boolean) {
+    pauseBack = pauseForth = false
+    stopperForth = watch(origRef, () => {
+      if (pauseForth) { return }
+      const OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined as unknown as Tcreated
+      createdRef.value = OasC
+      pauseBack = true
+      nextTick(() => { pauseBack = false })
+    }, { immediate: updateFromOriginalRef, deep: true })
+    stopperBack = watch(createdRef, () => {
+      if (pauseBack) { return }
+      const CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined as unknown as Torig
+      origRef.value = CasO
+      pauseForth = true
+      nextTick(() => { pauseForth = false })
+    }, { deep: true })
+  }
+
+  function reactivateBridge (updateFromOriginalRef: boolean) {
+    nextTick(() => startBridge(updateFromOriginalRef))
+  }
+
+  function deactivateBridge () {
     pauseBack = true
-    nextTick(() => { pauseBack = false })
-  }, { immediate: true, deep: true })
-  const stopperBack = watch(createdRef, () => {
-    if (pauseBack) { return }
-    const CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined as unknown as Torig
-    origRef.value = CasO
     pauseForth = true
-    nextTick(() => { pauseForth = false })
-  }, { deep: true })
-
-  onUnmounted(() => {
     stopperBack()
     stopperForth()
+  }
+
+  onUnmounted(() => {
+    stopperBack?.()
+    stopperForth?.()
   })
 
-  return createdRef as Ref<Tcreated>
+  createdRef.deactivateBridge = deactivateBridge
+  createdRef.reactivateBridge = reactivateBridge
+  startBridge(true)
+  return createdRef as BridgedRef<Tcreated>
 }
 
 /** This composable creates a two-way pipe between reactive variables of 2 different types. The values circulate back
@@ -98,7 +142,7 @@ export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRe
  * @param origToCreated (optional) Callback/Arrow function that converts the value in the original ref into the type of the value in the created ref. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * @param createdToOrig (optional) Callback/Arrow function that converts the value in the created ref into the type of the value in the original ref. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
  * */
-export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : Ref<Tcreated> {
+export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : BridgedRef<Tcreated> {
   return useObjectRefBridge<Torig, Tcreated>(origRef, origToCreated ?? stringNumberConversion, createdToOrig ?? stringNumberConversion)
 }
 
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 0b1ef18f9..aeccc135e 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -366,14 +366,14 @@
           "option":"Outgoing transactions"
         },
         "erc20": {
-          "option":"Track ERC20 token transfers",
+          "option":"ERC20 token transfers",
           "placeholder": "value > $0"
         },
         "erc721": {
-          "option":"Track ERC721 token transfers"
+          "option":"ERC721 token transfers"
         },
         "erc1155": {
-          "option":"Track ERC1155 token transfers"
+          "option":"ERC1155 token transfers"
         },
         "all": {
           "option":"All events"
diff --git a/frontend/types/notifications/subscriptionModal.ts b/frontend/types/notifications/subscriptionModal.ts
index 6c42ab985..6f0253aec 100644
--- a/frontend/types/notifications/subscriptionModal.ts
+++ b/frontend/types/notifications/subscriptionModal.ts
@@ -46,7 +46,7 @@ export enum SubscriptionJSONfields {
 /** for an option of type `number`: to mean that no value exists in the DB yet, set it to NaN; to mean that it is has a value but it is deactivated, set it to a negative value (for example 10% becomes -10) */
 export type ValidatorSubscriptionState = { // TODO: update the types once they are defined by the API
   offlineValidator: boolean,
-  offlineGroup?: number,
+  offlineGroup?: number|null,
   missedAttestations: boolean,
   proposedBlock: boolean,
   upcomingProposal: boolean,
@@ -60,7 +60,7 @@ export type ValidatorSubscriptionState = { // TODO: update the types once they a
 export type AccountSubscriptionState = { // TODO: update the types once they are defined by the API
   incoming: boolean,
   outgoing: boolean,
-  erc20: number,
+  erc20: number|null,
   erc721: boolean,
   erc1155: boolean,
   networks: ChainIDs[],
@@ -70,5 +70,5 @@ export type AccountSubscriptionState = { // TODO: update the types once they are
 /** for internal use */
 export interface CheckboxAndNumber {
   check: boolean,
-  num: number
+  num: number|null
 }

From 0e63b5a61f006075335292d28f7108ce6eb1a20e Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 10 Jul 2024 19:03:41 +0200
Subject: [PATCH 46/69] (BIDS-2859) new cool component that auto-corrects on
 blur but sends valid data in real time

---
 frontend/composables/useRefBridge.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index 2c8530d9a..b3df0e8e7 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -64,7 +64,7 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
   createdRef.deactivateBridge = deactivateBridge
   createdRef.reactivateBridge = reactivateBridge
   startBridge(true)
-  return createdRef as BridgedRef<Tcreated[]>
+  return createdRef
 }
 
 /** This composable creates a two-way pipe between reactive objects of 2 different structures. The values circulate back
@@ -125,7 +125,7 @@ export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRe
   createdRef.deactivateBridge = deactivateBridge
   createdRef.reactivateBridge = reactivateBridge
   startBridge(true)
-  return createdRef as BridgedRef<Tcreated>
+  return createdRef
 }
 
 /** This composable creates a two-way pipe between reactive variables of 2 different types. The values circulate back

From 9337cb024e411b4d4a5f976efaa7dddba7dd23c4 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 10 Jul 2024 20:12:37 +0200
Subject: [PATCH 47/69] (BIDS-2859) lighter code in the bridge

---
 frontend/components/bc/InputNumber.vue        |   6 +-
 .../notifications/SubscriptionRow.vue         |  32 ++---
 frontend/composables/useRefBridge.ts          | 110 +++++++-----------
 3 files changed, 65 insertions(+), 83 deletions(-)

diff --git a/frontend/components/bc/InputNumber.vue b/frontend/components/bc/InputNumber.vue
index 4ffe9d33b..a79b819aa 100644
--- a/frontend/components/bc/InputNumber.vue
+++ b/frontend/components/bc/InputNumber.vue
@@ -29,7 +29,7 @@ function sendValueIfValid (input: Nullable<number>) : void {
   }
   bridgedVmodel.deactivateBridge() // this allows us to output to the parent v-model the value without causing an injection of the value into the InputNumber v-model (that would trigger the autocorrect of InputNumber at each key stroke)
   parentVmodel.value = input ?? null
-  bridgedVmodel.reactivateBridge(false)
+  bridgedVmodel.reactivateBridge()
 }
 </script>
 
@@ -39,9 +39,13 @@ function sendValueIfValid (input: Nullable<number>) : void {
     :min="min"
     :max="max"
     :max-fraction-digits="maxFractionDigits"
+    class="why-the-hell-dont-they-fix-this-bug"
     @input="input => { if (typeof input.value !== 'string') sendValueIfValid(input.value) }"
   />
 </template>
 
 <style scoped lang="scss">
+.why-the-hell-dont-they-fix-this-bug {
+  :deep(input) { width: 100%; }
+}
 </style>
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 42630118f..94497a64f 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -13,17 +13,17 @@ const props = defineProps<{
   valueInText?: number
 }>()
 
-const type = computed(() => props.inputType ?? 'binary')
+const rowType = computed(() => props.inputType ?? 'binary')
 
 const { t } = useI18n()
 
-const state = defineModel<CheckboxAndNumber|ChainIDs[]>({ required: true })
+const parentVmodel = defineModel<CheckboxAndNumber|ChainIDs[]>({ required: true })
 let networkSelectorState: ModelRef<ChainIDs[]>
 let checkBoxAndInput: Ref<CheckboxAndNumber>
-if (type.value === 'networks') {
-  networkSelectorState = state as ModelRef<ChainIDs[]>
+if (rowType.value === 'networks') {
+  networkSelectorState = parentVmodel as ModelRef<ChainIDs[]>
 } else {
-  checkBoxAndInput = state as ModelRef<CheckboxAndNumber>
+  checkBoxAndInput = parentVmodel as ModelRef<CheckboxAndNumber>
 }
 
 const tooltipLines = computed(() => {
@@ -31,14 +31,14 @@ const tooltipLines = computed(() => {
   if (props.valueInText !== undefined) {
     options = { plural: props.valueInText }
   } else
-    if (Array.isArray(state.value)) {
-      options = { plural: state.value.length, list: state.value.join(', ') }
+    if (Array.isArray(parentVmodel.value)) {
+      options = { plural: parentVmodel.value.length, list: parentVmodel.value.join(', ') }
     } else {
       let plural: number
-      if (type.value === 'amount' || type.value === 'percent') {
+      if (rowType.value === 'amount' || rowType.value === 'percent') {
         plural = checkBoxAndInput!.value.num ?? Math.abs(props.default ?? 0)
       } else {
-        plural = state.value ? 2 : 1
+        plural = parentVmodel.value ? 2 : 1
       }
       options = { plural }
     }
@@ -61,20 +61,20 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
       </template>
     </BcTooltip>
     <BcPremiumGem v-if="lacksPremiumSubscription" class="gem" />
-    <div v-if="type != 'networks'" class="right">
-      <div v-if="type == 'amount' || type == 'percent'" class="input">
+    <div v-if="rowType != 'networks'" class="right">
+      <div v-if="rowType == 'amount' || rowType == 'percent'" class="input">
         <BcInputNumber
           v-if="checkBoxAndInput"
           v-model="checkBoxAndInput.num"
-          :min="(type === 'amount') ? 0 : 1"
-          :max="(type === 'amount') ? 2**32 : 100"
-          :max-fraction-digits="(type === 'amount') ? 2 : 1"
+          :min="(rowType === 'amount') ? 0 : 1"
+          :max="(rowType === 'amount') ? 2**32 : 100"
+          :max-fraction-digits="(rowType === 'amount') ? 2 : 1"
           :placeholder="t(tPath + '.placeholder')"
-          :class="[deactivationClass,type]"
+          :class="[deactivationClass,rowType]"
         />
         &nbsp;
       </div>
-      <span v-if="type == 'percent'" :class="deactivationClass">%</span>
+      <span v-if="rowType == 'percent'" :class="deactivationClass">%</span>
       <Checkbox
         v-model="checkBoxAndInput!.check"
         :binary="true"
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index b3df0e8e7..441d7891d 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -1,9 +1,9 @@
-import { type ModelRef, type WatchStopHandle } from 'vue'
+import { type ModelRef } from 'vue'
 
 interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
 interface BridgedRef<T> extends Ref<T> {
    deactivateBridge: () => void,
-   reactivateBridge: (updateFromOriginalRef: boolean) => void
+   reactivateBridge: () => void
 }
 
 /** This composable creates a two-way pipe between reactive arrays of 2 different types. The values circulate back
@@ -24,46 +24,35 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
   const createdRef = ref<Tcreated[]>() as BridgedRef<Tcreated[]>
   let pauseBack = false
   let pauseForth = false
-  let stopperBack: WatchStopHandle
-  let stopperForth: WatchStopHandle
 
-  function startBridge (updateFromOriginalRef: boolean) {
-    pauseBack = pauseForth = false
-    stopperForth = watch(origRef, () => {
-      if (pauseForth) { return }
-      const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : stringNumberConversion<Tcreated>(el)) : undefined as unknown as Tcreated[]
-      createdRef.value = OasC
-      pauseBack = true
-      nextTick(() => { pauseBack = false })
-    }, { immediate: updateFromOriginalRef, deep: true })
-    stopperBack = watch(createdRef, () => {
-      if (pauseBack) { return }
-      const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : stringNumberConversion<Torig>(el)) : undefined as unknown as Torig[]
-      origRef.value = CasO
-      pauseForth = true
-      nextTick(() => { pauseForth = false })
-    }, { deep: true })
+  createdRef.reactivateBridge = () => {
+    nextTick(() => {
+      pauseBack = false
+      pauseForth = false
+    })
   }
 
-  function reactivateBridge (updateFromOriginalRef: boolean) {
-    nextTick(() => startBridge(updateFromOriginalRef))
-  }
-
-  function deactivateBridge () {
+  createdRef.deactivateBridge = () => {
     pauseBack = true
     pauseForth = true
-    stopperBack()
-    stopperForth()
   }
 
-  onUnmounted(() => {
-    stopperBack?.()
-    stopperForth?.()
-  })
+  watch(origRef, () => {
+    if (pauseForth) { return }
+    const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : stringNumberConversion<Tcreated>(el)) : undefined as unknown as Tcreated[]
+    createdRef.value = OasC
+    pauseBack = true
+    nextTick(() => { pauseBack = false })
+  }, { immediate: true, deep: true })
+
+  watch(createdRef, () => {
+    if (pauseBack) { return }
+    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : stringNumberConversion<Torig>(el)) : undefined as unknown as Torig[]
+    origRef.value = CasO
+    pauseForth = true
+    nextTick(() => { pauseForth = false })
+  }, { deep: true })
 
-  createdRef.deactivateBridge = deactivateBridge
-  createdRef.reactivateBridge = reactivateBridge
-  startBridge(true)
   return createdRef
 }
 
@@ -85,46 +74,35 @@ export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRe
   const createdRef = ref<Tcreated>() as BridgedRef<Tcreated>
   let pauseBack = false
   let pauseForth = false
-  let stopperBack: WatchStopHandle
-  let stopperForth: WatchStopHandle
 
-  function startBridge (updateFromOriginalRef: boolean) {
-    pauseBack = pauseForth = false
-    stopperForth = watch(origRef, () => {
-      if (pauseForth) { return }
-      const OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined as unknown as Tcreated
-      createdRef.value = OasC
-      pauseBack = true
-      nextTick(() => { pauseBack = false })
-    }, { immediate: updateFromOriginalRef, deep: true })
-    stopperBack = watch(createdRef, () => {
-      if (pauseBack) { return }
-      const CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined as unknown as Torig
-      origRef.value = CasO
-      pauseForth = true
-      nextTick(() => { pauseForth = false })
-    }, { deep: true })
+  createdRef.reactivateBridge = () => {
+    nextTick(() => {
+      pauseBack = false
+      pauseForth = false
+    })
   }
 
-  function reactivateBridge (updateFromOriginalRef: boolean) {
-    nextTick(() => startBridge(updateFromOriginalRef))
-  }
-
-  function deactivateBridge () {
+  createdRef.deactivateBridge = () => {
     pauseBack = true
     pauseForth = true
-    stopperBack()
-    stopperForth()
   }
 
-  onUnmounted(() => {
-    stopperBack?.()
-    stopperForth?.()
-  })
+  watch(origRef, () => {
+    if (pauseForth) { return }
+    const OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined as unknown as Tcreated
+    createdRef.value = OasC
+    pauseBack = true
+    nextTick(() => { pauseBack = false })
+  }, { immediate: true, deep: true })
+
+  watch(createdRef, () => {
+    if (pauseBack) { return }
+    const CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined as unknown as Torig
+    origRef.value = CasO
+    pauseForth = true
+    nextTick(() => { pauseForth = false })
+  }, { deep: true })
 
-  createdRef.deactivateBridge = deactivateBridge
-  createdRef.reactivateBridge = reactivateBridge
-  startBridge(true)
   return createdRef
 }
 

From d1b5629ef40a36fd6171c1745a98638fa83d81b6 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 10 Jul 2024 20:27:47 +0200
Subject: [PATCH 48/69] (BIDS-2859) better verbs

---
 frontend/components/bc/InputNumber.vue |  4 ++--
 frontend/composables/useRefBridge.ts   | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/components/bc/InputNumber.vue b/frontend/components/bc/InputNumber.vue
index a79b819aa..a17c6fbc9 100644
--- a/frontend/components/bc/InputNumber.vue
+++ b/frontend/components/bc/InputNumber.vue
@@ -27,9 +27,9 @@ function sendValueIfValid (input: Nullable<number>) : void {
       }
     }
   }
-  bridgedVmodel.deactivateBridge() // this allows us to output to the parent v-model the value without causing an injection of the value into the InputNumber v-model (that would trigger the autocorrect of InputNumber at each key stroke)
+  bridgedVmodel.pauseBridge() // this allows us to output to the parent v-model the value without causing an injection of the value into the InputNumber v-model (that would trigger the autocorrect of InputNumber at each key stroke)
   parentVmodel.value = input ?? null
-  bridgedVmodel.reactivateBridge()
+  bridgedVmodel.wakeupBridge()
 }
 </script>
 
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index 441d7891d..70e53930c 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -2,8 +2,8 @@ import { type ModelRef } from 'vue'
 
 interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
 interface BridgedRef<T> extends Ref<T> {
-   deactivateBridge: () => void,
-   reactivateBridge: () => void
+   pauseBridge: () => void,
+   wakeupBridge: () => void
 }
 
 /** This composable creates a two-way pipe between reactive arrays of 2 different types. The values circulate back
@@ -25,14 +25,14 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
   let pauseBack = false
   let pauseForth = false
 
-  createdRef.reactivateBridge = () => {
+  createdRef.wakeupBridge = () => {
     nextTick(() => {
       pauseBack = false
       pauseForth = false
     })
   }
 
-  createdRef.deactivateBridge = () => {
+  createdRef.pauseBridge = () => {
     pauseBack = true
     pauseForth = true
   }
@@ -75,14 +75,14 @@ export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRe
   let pauseBack = false
   let pauseForth = false
 
-  createdRef.reactivateBridge = () => {
+  createdRef.wakeupBridge = () => {
     nextTick(() => {
       pauseBack = false
       pauseForth = false
     })
   }
 
-  createdRef.deactivateBridge = () => {
+  createdRef.pauseBridge = () => {
     pauseBack = true
     pauseForth = true
   }

From db7cc3eda3d6c1a02eb9019825960853a7269026 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 10 Jul 2024 21:17:57 +0200
Subject: [PATCH 49/69] (BIDS-2859) fixed a bug with the "All" checkbox

---
 frontend/components/bc/InputNumber.vue           |  1 -
 .../notifications/SubscriptionDialog.vue         | 16 ++++++++--------
 .../components/notifications/SubscriptionRow.vue |  4 +++-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/components/bc/InputNumber.vue b/frontend/components/bc/InputNumber.vue
index a17c6fbc9..46fb89c3f 100644
--- a/frontend/components/bc/InputNumber.vue
+++ b/frontend/components/bc/InputNumber.vue
@@ -9,7 +9,6 @@ const props = defineProps<{
 }>()
 
 const parentVmodel = defineModel<number|null>({ required: true })
-
 const bridgedVmodel = usePrimitiveRefBridge<number|null, Nullable<number>>(parentVmodel, n => n, n => n ?? null)
 
 function sendValueIfValid (input: Nullable<number>) : void {
diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 17f2c8ff0..94cea5a92 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -35,7 +35,7 @@ const { user } = useUserStore()
 const tPath = ref('')
 let originalSettings = {} as AllPossibleOptions
 const modifiableOptions = ref({} as ModifiableOptions)
-const allCheckbox = ref({ check: false } as CheckboxAndNumber)
+const checkboxAll = ref({ check: false } as CheckboxAndNumber)
 
 const debouncer = useDebounceValue<number>(0, MinimumTimeBetweenAPIcalls)
 watch(debouncer.value, sendUserPreferencesToAPI)
@@ -68,22 +68,22 @@ watch(props, (props) => {
   dataNonce = 0
 }, { immediate: true })
 
-watch(allCheckbox, (option) => {
+function checkboxAllhasBeenClicked (checked: boolean) : void {
   for (const k of Object.keys(modifiableOptions.value)) {
     const key = k as keyof ModifiableOptions
     if (isOptionAvailable(key) && !OptionsOutsideTheScopeOfCheckboxall.includes(key)) {
-      (modifiableOptions.value[key] as CheckboxAndNumber).check = option.check
+      (modifiableOptions.value[key] as CheckboxAndNumber).check = checked
     }
   }
   // no need to call the API, the modifications that we did in `modifiableOptions.value` will trigger its watcher (that calls the API)
-})
+}
 
 watch(modifiableOptions, (options) => {
-  allCheckbox.value.check = true
+  checkboxAll.value.check = true
   for (const k of Object.keys(options)) {
     const key = k as keyof ModifiableOptions
     if (isOptionAvailable(key) && !OptionsOutsideTheScopeOfCheckboxall.includes(key)) {
-      allCheckbox.value.check &&= (options[key] as CheckboxAndNumber).check
+      checkboxAll.value.check &&= (options[key] as CheckboxAndNumber).check
     }
   }
   if (dataNonce > 0) {
@@ -168,7 +168,7 @@ const isOptionAvailable = (key: string) => !user.value?.premium_perks.ad_free ||
       <NotificationsSubscriptionRow v-model="modifiableOptions.slashed" :t-path="tPath+'slashed'" :lacks-premium-subscription="!isOptionAvailable('slashed')" class="row" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.realTime" :t-path="tPath+'real_time'" :lacks-premium-subscription="!isOptionAvailable('realTime')" class="row" />
       <div class="separation" />
-      <NotificationsSubscriptionRow v-model="allCheckbox" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="checkboxAll" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" @checkbox-click="checkboxAllhasBeenClicked" />
     </div>
 
     <div v-else-if="props.accountSub">
@@ -178,7 +178,7 @@ const isOptionAvailable = (key: string) => !user.value?.premium_perks.ad_free ||
       <NotificationsSubscriptionRow v-model="modifiableOptions.erc721" :t-path="tPath+'erc721'" :lacks-premium-subscription="!isOptionAvailable('erc721')" class="row" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.erc1155" :t-path="tPath+'erc1155'" :lacks-premium-subscription="!isOptionAvailable('erc1155')" class="row" />
       <div class="separation" />
-      <NotificationsSubscriptionRow v-model="allCheckbox" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" />
+      <NotificationsSubscriptionRow v-model="checkboxAll" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" @checkbox-click="checkboxAllhasBeenClicked" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.networks" :t-path="tPath+'networks'" :lacks-premium-subscription="!isOptionAvailable('networks')" input-type="networks" class="row" />
       <NotificationsSubscriptionRow v-model="modifiableOptions.ignoreSpam" :t-path="tPath+'ignore_spam'" :lacks-premium-subscription="!isOptionAvailable('ignoreSpam')" class="row" />
     </div>
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 94497a64f..3da1e79eb 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -13,6 +13,8 @@ const props = defineProps<{
   valueInText?: number
 }>()
 
+const emitEvent = defineEmits<{(e: 'checkboxClick', checked: boolean) : void}>()
+
 const rowType = computed(() => props.inputType ?? 'binary')
 
 const { t } = useI18n()
@@ -53,7 +55,6 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
     <span class="caption" :class="deactivationClass">
       {{ t(tPath+'.option') }}
     </span>
-    {{ checkBoxAndInput?.num }}
     <BcTooltip v-if="tooltipLines[0]" :fit-content="true">
       <FontAwesomeIcon :icon="faInfoCircle" class="info" />
       <template #tooltip>
@@ -80,6 +81,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
         :binary="true"
         class="checkbox"
         :class="deactivationClass"
+        @click="emitEvent('checkboxClick', !checkBoxAndInput!.check)"
       />
     </div>
     <div v-else class="right">

From 37feb41fb2d0006271b8cca8a63078c612c87f44 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 10 Jul 2024 21:49:57 +0200
Subject: [PATCH 50/69] (BIDS-2859) real-time output is done for invalid inputs
 too (outputs  as expected)

---
 frontend/components/bc/InputNumber.vue | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/frontend/components/bc/InputNumber.vue b/frontend/components/bc/InputNumber.vue
index 46fb89c3f..b9de93776 100644
--- a/frontend/components/bc/InputNumber.vue
+++ b/frontend/components/bc/InputNumber.vue
@@ -11,23 +11,18 @@ const props = defineProps<{
 const parentVmodel = defineModel<number|null>({ required: true })
 const bridgedVmodel = usePrimitiveRefBridge<number|null, Nullable<number>>(parentVmodel, n => n, n => n ?? null)
 
-function sendValueIfValid (input: Nullable<number>) : void {
-  if (input !== undefined && input !== null) {
-    if (isNaN(input)) {
+function sendValue (input: Nullable<number>) : void {
+  if (input === undefined || input === null || isNaN(input) || input < props.min || input > props.max) {
+    input = null
+  } else {
+    const stringifyied = String(input)
+    const comma = stringifyied.indexOf('.')
+    if (comma >= 0 && stringifyied.length - comma - 1 > props.maxFractionDigits) {
       input = null
-    } else {
-      if (input < props.min || input > props.max) {
-        return
-      }
-      const stringifyied = String(input)
-      const comma = stringifyied.indexOf('.')
-      if (comma >= 0 && stringifyied.length - comma - 1 > props.maxFractionDigits) {
-        return
-      }
     }
   }
-  bridgedVmodel.pauseBridge() // this allows us to output to the parent v-model the value without causing an injection of the value into the InputNumber v-model (that would trigger the autocorrect of InputNumber at each key stroke)
-  parentVmodel.value = input ?? null
+  bridgedVmodel.pauseBridge() // this allows us to output the value to the parent v-model without causing an injection of the value back into the InputNumber v-model (that would trigger the autocorrect of InputNumber at each key stroke)
+  parentVmodel.value = input
   bridgedVmodel.wakeupBridge()
 }
 </script>
@@ -38,8 +33,9 @@ function sendValueIfValid (input: Nullable<number>) : void {
     :min="min"
     :max="max"
     :max-fraction-digits="maxFractionDigits"
+    locale="en-US"
     class="why-the-hell-dont-they-fix-this-bug"
-    @input="input => { if (typeof input.value !== 'string') sendValueIfValid(input.value) }"
+    @input="input => { if (typeof input.value !== 'string') sendValue(input.value) }"
   />
 </template>
 

From 6acc3fc13fbb6d8032e6d17e549719028cbde5da Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Thu, 11 Jul 2024 15:11:26 +0200
Subject: [PATCH 51/69] (BIDS-2859) rework after review completed

---
 frontend/components/bc/InputNumber.vue        |   4 +-
 .../notifications/SubscriptionDialog.vue      | 140 ++++++++++--------
 .../notifications/SubscriptionRow.vue         |  27 ++--
 .../playground/PlaygroundDialog.vue           |  34 ++---
 frontend/composables/useRefBridge.ts          | 120 +++++----------
 frontend/i18n/en.json                         |  32 ++--
 .../types/notifications/subscriptionModal.ts  |  87 +++--------
 7 files changed, 191 insertions(+), 253 deletions(-)

diff --git a/frontend/components/bc/InputNumber.vue b/frontend/components/bc/InputNumber.vue
index b9de93776..e835f599a 100644
--- a/frontend/components/bc/InputNumber.vue
+++ b/frontend/components/bc/InputNumber.vue
@@ -21,9 +21,9 @@ function sendValue (input: Nullable<number>) : void {
       input = null
     }
   }
-  bridgedVmodel.pauseBridge() // this allows us to output the value to the parent v-model without causing an injection of the value back into the InputNumber v-model (that would trigger the autocorrect of InputNumber at each key stroke)
+  bridgedVmodel.pauseBridgeFromNowOn() // this allows us to output the value to the parent v-model without causing an injection of the value back into the InputNumber v-model (that would empty InputNumber at each key stroke if the input is invalid)
   parentVmodel.value = input
-  bridgedVmodel.wakeupBridge()
+  bridgedVmodel.wakeupBridgeAtNextTick()
 }
 </script>
 
diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 94cea5a92..53f79e1a9 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -1,29 +1,43 @@
 <script setup lang="ts">
-import { type ValidatorSubscriptionState, type AccountSubscriptionState, SubscriptionJSONfields, type CheckboxAndNumber } from '~/types/notifications/subscriptionModal'
+import type { NotificationEventsValidatorDashboard, NotificationEventsAccountDashboard, CheckboxAndNumber, InputRow } from '~/types/notifications/subscriptionModal'
 import type { ChainIDs } from '~/types/network'
 import type { ApiErrorResponse } from '~/types/api/common'
 import { API_PATH } from '~/types/customFetch'
 
 interface Props {
-  validatorSub?: ValidatorSubscriptionState,
-  accountSub?: AccountSubscriptionState
+  validatorSub?: NotificationEventsValidatorDashboard,
+  accountSub?: NotificationEventsAccountDashboard
 }
 
+// #### DIALOG SETTINGS ####
+
 const TimeoutForSavingFailures = 2300 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost your preferences half a minute ago, we hope you remember them and do not mind going back to that dialog"
 const MinimumTimeBetweenAPIcalls = 700 // ms. Any change ends-up saved anyway, so we can prevent useless requests with a delay larger than usual.
 const DefaultValueOfValidatorOptionsNeedingPremium = {
-  offlineGroup: -10, // means "10% and unchecked"
-  realTime: false
+  group_offline: -10, // means "10% and unchecked"
+  realtime_mode: false
   // ... add lines here to make options available to premium accounts only
 }
 const DefaultValueOfAccountOptionsNeedingPremium = {
   // add lines here to make options available to premium accounts only
 }
-const OptionsOutsideTheScopeOfCheckboxall: Array<keyof(ValidatorSubscriptionState & AccountSubscriptionState)> =
-      ['networks', 'ignoreSpam'] // options that are not in the group of the all-checkbox
-
-type AllPossibleOptions = ValidatorSubscriptionState & AccountSubscriptionState & typeof DefaultValueOfValidatorOptionsNeedingPremium & typeof DefaultValueOfAccountOptionsNeedingPremium
-type ModifiableOptions = Record<keyof AllPossibleOptions, CheckboxAndNumber|ChainIDs[]>
+const orderOfTheRowsInValidatorModal: Array<keyof NotificationEventsValidatorDashboard | 'ALL'> =
+  ['validator_offline', 'group_offline', 'attestations_missed', 'block_proposal', 'upcoming_block_proposal', 'sync', 'withdrawal_processed', 'slashed', 'realtime_mode', 'ALL']
+const orderOfTheRowsInAccountModal: Array<keyof NotificationEventsAccountDashboard | 'ALL'> =
+  ['incoming_transactions', 'outgoing_transactions', 'track_erc20_token_transfers', 'track_erc721_token_transfers', 'track_erc1155_token_transfers', 'ALL', 'networks', 'ignore_spam_transactions']
+const OptionsOutsideTheScopeOfCheckboxall: Array<keyof(NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard)> =
+  ['networks', 'ignore_spam_transactions'] // options that are not in the group of the all-checkbox
+const RowsThatExpectAnAmount: Array<keyof(NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard)> =
+  ['track_erc20_token_transfers']
+const RowsThatExpectAPercentage: Array<keyof(NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard)> =
+  ['group_offline']
+const RowsThatExpectANetwork: Array<keyof(NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard)> =
+  ['networks']
+
+// #### END OF DIALOG SETTINGS ####
+
+type AllOptions = NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard & typeof DefaultValueOfValidatorOptionsNeedingPremium & typeof DefaultValueOfAccountOptionsNeedingPremium
+type ModifiableOptions = Record<keyof AllOptions, CheckboxAndNumber|ChainIDs[]>
 
 const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
 const { t } = useI18n()
@@ -33,7 +47,8 @@ const { networkInfo } = useNetworkStore()
 const { user } = useUserStore()
 
 const tPath = ref('')
-let originalSettings = {} as AllPossibleOptions
+let orderOfTheRows: typeof orderOfTheRowsInValidatorModal | typeof orderOfTheRowsInAccountModal = []
+let originalSettings = {} as AllOptions
 const modifiableOptions = ref({} as ModifiableOptions)
 const checkboxAll = ref({ check: false } as CheckboxAndNumber)
 
@@ -48,10 +63,12 @@ watch(props, (props) => {
   }
   if (props.validatorSub) {
     tPath.value = 'notifications.subscriptions.validators.'
-    originalSettings = { ...DefaultValueOfValidatorOptionsNeedingPremium, ...structuredClone(toRaw(props.validatorSub)) } as AllPossibleOptions
+    originalSettings = { ...DefaultValueOfValidatorOptionsNeedingPremium, ...structuredClone(toRaw(props.validatorSub)) } as AllOptions
+    orderOfTheRows = orderOfTheRowsInValidatorModal
   } else {
     tPath.value = 'notifications.subscriptions.accounts.'
-    originalSettings = { ...DefaultValueOfAccountOptionsNeedingPremium, ...structuredClone(toRaw(props.accountSub)) } as AllPossibleOptions
+    originalSettings = { ...DefaultValueOfAccountOptionsNeedingPremium, ...structuredClone(toRaw(props.accountSub)) } as AllOptions
+    orderOfTheRows = orderOfTheRowsInAccountModal
   }
   modifiableOptions.value = {} as ModifiableOptions
   for (const entry of Object.entries(originalSettings)) {
@@ -60,8 +77,18 @@ watch(props, (props) => {
       modifiableOptions.value[key] = entry[1]
     } else {
       switch (typeof entry[1]) {
-        case 'boolean' : modifiableOptions.value[key] = { check: entry[1], num: 0 }; break
-        default : modifiableOptions.value[key] = { check: entry[1] != null && entry[1] >= 0, num: (entry[1] === null) ? null : Math.abs(entry[1]) }; break
+        case 'boolean' :
+          modifiableOptions.value[key] = {
+            check: entry[1],
+            num: 0
+          }
+          break
+        default :
+          modifiableOptions.value[key] = {
+            check: (entry[1] != null && entry[1] >= 0),
+            num: (entry[1] === null) ? null : Math.abs(entry[1])
+          }
+          break
       }
     }
   }
@@ -98,13 +125,17 @@ async function sendUserPreferencesToAPI () {
   const output = {} as Record<string, any>
   for (const entry of Object.entries(modifiableOptions.value)) {
     const key = entry[0] as keyof ModifiableOptions
-    const apiKey = SubscriptionJSONfields[key]
     if (Array.isArray(entry[1])) {
-      output[apiKey] = entry[1]
+      output[key] = entry[1]
     } else {
       switch (typeof originalSettings[key]) {
-        case 'boolean' : output[apiKey] = entry[1].check; break
-        default : output[apiKey] = entry[1].num; if (!entry[1].check && entry[1].num !== null) { output[apiKey] *= -1 } ; break
+        case 'boolean' :
+          output[key] = entry[1].check
+          break
+        default :
+          output[key] = entry[1].num
+          if (!entry[1].check && entry[1].num !== null) { output[key] *= -1 }
+          break
       }
     }
   }
@@ -131,7 +162,14 @@ function closeDialog () : void {
   dialogRef?.value.close()
 }
 
-const isOptionAvailable = (key: string) => !user.value?.premium_perks.ad_free || !(key in DefaultValueOfValidatorOptionsNeedingPremium || key in DefaultValueOfAccountOptionsNeedingPremium)
+const isOptionAvailable = (key: keyof AllOptions) => !user.value?.premium_perks.ad_free || !(key in DefaultValueOfValidatorOptionsNeedingPremium || key in DefaultValueOfAccountOptionsNeedingPremium)
+
+function getRowType (key: keyof AllOptions) : InputRow {
+  if (RowsThatExpectAnAmount.includes(key)) { return 'amount' }
+  if (RowsThatExpectAPercentage.includes(key)) { return 'percent' }
+  if (RowsThatExpectANetwork.includes(key)) { return 'networks' }
+  return 'binary'
+}
 </script>
 
 <template>
@@ -144,43 +182,26 @@ const isOptionAvailable = (key: string) => !user.value?.premium_perks.ad_free ||
       {{ t(tPath+'explanation') }}
     </div>
 
-    <div v-if="props.validatorSub">
-      <NotificationsSubscriptionRow v-model="modifiableOptions.offlineValidator" :t-path="tPath+'offline_validator'" :lacks-premium-subscription="!isOptionAvailable('offlineValidator')" class="row" />
+    <div v-for="row of orderOfTheRows" :key="row" class="row-container">
       <NotificationsSubscriptionRow
-        v-model="modifiableOptions.offlineGroup"
-        :t-path="tPath+'offline_group'"
-        :lacks-premium-subscription="!isOptionAvailable('offlineGroup')"
-        input-type="percent"
-        :default="DefaultValueOfValidatorOptionsNeedingPremium.offlineGroup"
+        v-if="row != 'ALL'"
+        v-model="modifiableOptions[row]"
+        :t-path="tPath+row"
+        :lacks-premium-subscription="!isOptionAvailable(row)"
+        :input-type="getRowType(row)"
+        :value-in-text="(row == 'attestations_missed') ? Math.round(networkInfo.secondsPerSlot*networkInfo.slotsPerEpoch/6)/10 : undefined"
         class="row"
       />
+      <div v-if="row == 'ALL'" class="separation" />
       <NotificationsSubscriptionRow
-        v-model="modifiableOptions.missedAttestations"
-        :t-path="tPath+'missed_attestations'"
-        :lacks-premium-subscription="!isOptionAvailable('missedAttestations')"
+        v-if="row == 'ALL'"
+        v-model="checkboxAll"
+        :t-path="tPath+'all'"
+        :lacks-premium-subscription="false"
+        input-type="binary"
         class="row"
-        :value-in-text="Math.round(networkInfo.secondsPerSlot*networkInfo.slotsPerEpoch/6)/10"
+        @checkbox-click="checkboxAllhasBeenClicked"
       />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.proposedBlock" :t-path="tPath+'proposed_block'" :lacks-premium-subscription="!isOptionAvailable('proposedBlock')" class="row" />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.upcomingProposal" :t-path="tPath+'upcoming_proposal'" :lacks-premium-subscription="!isOptionAvailable('upcomingProposal')" class="row" />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.syncCommittee" :t-path="tPath+'sync_committee'" :lacks-premium-subscription="!isOptionAvailable('syncCommittee')" class="row" />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.withdrawn" :t-path="tPath+'withdrawn'" :lacks-premium-subscription="!isOptionAvailable('withdrawn')" class="row" />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.slashed" :t-path="tPath+'slashed'" :lacks-premium-subscription="!isOptionAvailable('slashed')" class="row" />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.realTime" :t-path="tPath+'real_time'" :lacks-premium-subscription="!isOptionAvailable('realTime')" class="row" />
-      <div class="separation" />
-      <NotificationsSubscriptionRow v-model="checkboxAll" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" @checkbox-click="checkboxAllhasBeenClicked" />
-    </div>
-
-    <div v-else-if="props.accountSub">
-      <NotificationsSubscriptionRow v-model="modifiableOptions.incoming" :t-path="tPath+'incoming'" :lacks-premium-subscription="!isOptionAvailable('incoming')" class="row" />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.outgoing" :t-path="tPath+'outgoing'" :lacks-premium-subscription="!isOptionAvailable('outgoing')" class="row" />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.erc20" :t-path="tPath+'erc20'" :lacks-premium-subscription="!isOptionAvailable('erc20')" input-type="amount" class="row" />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.erc721" :t-path="tPath+'erc721'" :lacks-premium-subscription="!isOptionAvailable('erc721')" class="row" />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.erc1155" :t-path="tPath+'erc1155'" :lacks-premium-subscription="!isOptionAvailable('erc1155')" class="row" />
-      <div class="separation" />
-      <NotificationsSubscriptionRow v-model="checkboxAll" :t-path="tPath+'all'" :lacks-premium-subscription="false" class="row" @checkbox-click="checkboxAllhasBeenClicked" />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.networks" :t-path="tPath+'networks'" :lacks-premium-subscription="!isOptionAvailable('networks')" input-type="networks" class="row" />
-      <NotificationsSubscriptionRow v-model="modifiableOptions.ignoreSpam" :t-path="tPath+'ignore_spam'" :lacks-premium-subscription="!isOptionAvailable('ignoreSpam')" class="row" />
     </div>
 
     <div class="footer">
@@ -208,14 +229,15 @@ const isOptionAvailable = (key: string) => !user.value?.premium_perks.ad_free ||
     color: var(--text-color-discreet)
   }
 
-  .row {
-    margin-top: 14px;
-    margin-bottom: 14px;
-  }
-
-  .separation {
-    height: 1px;
-    background-color: var(--container-border-color);
+  .row-container {
+    position: relative;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    .separation {
+      height: 1px;
+      background-color: var(--container-border-color);
+      margin-bottom: 16px;
+    }
   }
 
   .footer {
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 3da1e79eb..63cf78134 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -3,26 +3,23 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import type { ModelRef } from 'vue'
 import type { ChainIDs } from '~/types/network'
-import type { CheckboxAndNumber } from '~/types/notifications/subscriptionModal'
+import type { CheckboxAndNumber, InputRow } from '~/types/notifications/subscriptionModal'
 
 const props = defineProps<{
   tPath: string,
   lacksPremiumSubscription: boolean,
-  inputType?: 'binary' | 'amount' | 'percent' | 'networks',
-  default?: number
+  inputType: InputRow,
   valueInText?: number
 }>()
 
 const emitEvent = defineEmits<{(e: 'checkboxClick', checked: boolean) : void}>()
 
-const rowType = computed(() => props.inputType ?? 'binary')
-
 const { t } = useI18n()
 
 const parentVmodel = defineModel<CheckboxAndNumber|ChainIDs[]>({ required: true })
 let networkSelectorState: ModelRef<ChainIDs[]>
 let checkBoxAndInput: Ref<CheckboxAndNumber>
-if (rowType.value === 'networks') {
+if (props.inputType === 'networks') {
   networkSelectorState = parentVmodel as ModelRef<ChainIDs[]>
 } else {
   checkBoxAndInput = parentVmodel as ModelRef<CheckboxAndNumber>
@@ -37,8 +34,8 @@ const tooltipLines = computed(() => {
       options = { plural: parentVmodel.value.length, list: parentVmodel.value.join(', ') }
     } else {
       let plural: number
-      if (rowType.value === 'amount' || rowType.value === 'percent') {
-        plural = checkBoxAndInput!.value.num ?? Math.abs(props.default ?? 0)
+      if (props.inputType === 'amount' || props.inputType === 'percent') {
+        plural = checkBoxAndInput!.value.num ?? 0
       } else {
         plural = parentVmodel.value ? 2 : 1
       }
@@ -62,20 +59,20 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
       </template>
     </BcTooltip>
     <BcPremiumGem v-if="lacksPremiumSubscription" class="gem" />
-    <div v-if="rowType != 'networks'" class="right">
-      <div v-if="rowType == 'amount' || rowType == 'percent'" class="input">
+    <div v-if="inputType != 'networks'" class="right">
+      <div v-if="inputType == 'amount' || inputType == 'percent'" class="input">
         <BcInputNumber
           v-if="checkBoxAndInput"
           v-model="checkBoxAndInput.num"
-          :min="(rowType === 'amount') ? 0 : 1"
-          :max="(rowType === 'amount') ? 2**32 : 100"
-          :max-fraction-digits="(rowType === 'amount') ? 2 : 1"
+          :min="(inputType === 'amount') ? 0 : 1"
+          :max="(inputType === 'amount') ? 2**32 : 100"
+          :max-fraction-digits="(inputType === 'amount') ? 2 : 1"
           :placeholder="t(tPath + '.placeholder')"
-          :class="[deactivationClass,rowType]"
+          :class="[deactivationClass,inputType]"
         />
         &nbsp;
       </div>
-      <span v-if="rowType == 'percent'" :class="deactivationClass">%</span>
+      <span v-if="inputType == 'percent'" :class="deactivationClass">%</span>
       <Checkbox
         v-model="checkBoxAndInput!.check"
         :binary="true"
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 636523fd0..5c467a010 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { BcDialogConfirm, NotificationsSubscriptionDialog } from '#components'
-import type { ValidatorSubscriptionState, AccountSubscriptionState } from '~/types/notifications/subscriptionModal'
+import type { NotificationEventsValidatorDashboard, NotificationEventsAccountDashboard } from '~/types/notifications/subscriptionModal'
 
 const dialog = useDialog()
 
@@ -23,26 +23,26 @@ const openQuestion = (yesLabel?: string, noLabel?: string) => {
   })
 }
 
-const validatorSub: ValidatorSubscriptionState = {
-  offlineValidator: true,
-  offlineGroup: -20, // means "20% and deselected/unchecked"
-  missedAttestations: true,
-  proposedBlock: true,
-  upcomingProposal: false,
-  syncCommittee: true,
-  withdrawn: true,
+const validatorSub: NotificationEventsValidatorDashboard = {
+  validator_offline: true,
+  group_offline: -20, // means "20% and deselected/unchecked"
+  attestations_missed: true,
+  block_proposal: true,
+  upcoming_block_proposal: false,
+  sync: true,
+  withdrawal_processed: true,
   slashed: false,
-  realTime: false
+  realtime_mode: false
 }
 
-const accountSub: AccountSubscriptionState = {
-  incoming: true,
-  outgoing: true,
-  erc20: null, // means "not in the database yet" (will leave the input field empty with a placeholder)
-  erc721: true,
-  erc1155: false,
+const accountSub: NotificationEventsAccountDashboard = {
+  incoming_transactions: true,
+  outgoing_transactions: true,
+  track_erc20_token_transfers: null, // means "not in the database yet" (will leave the input field empty with a placeholder)
+  track_erc721_token_transfers: true,
+  track_erc1155_token_transfers: false,
   networks: [17000],
-  ignoreSpam: true
+  ignore_spam_transactions: true
 }
 
 function openSubscriptions (props: any) {
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index 70e53930c..191129d82 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -1,95 +1,71 @@
 import { type ModelRef } from 'vue'
 
+export interface BridgeRef<T> extends Ref<T> {
+  pauseBridgeFromNowOn: () => void,
+  wakeupBridgeAtNextTick: () => void
+}
 interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
-interface BridgedRef<T> extends Ref<T> {
-   pauseBridge: () => void,
-   wakeupBridge: () => void
+
+/** This composable creates a two-way pipe between reactive variables of 2 different types. The values circulate back
+ *  and forth transparently from A to B and B to A, the reactivity is preserved on both ends, the types are converted
+ *  when the values pass through, infinite loops (refs triggering each other) are prevented.
+ * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
+ * @param origToCreated (optional) Callback/Arrow function that converts the value in the original ref into the type of the value in the created ref. For strings and numbers, the function can be omitted (then the bridge converts the strings to numbers and vice-versa).
+ * @param createdToOrig (optional) Callback/Arrow function that converts the value in the created ref into the type of the value in the original ref. For strings and numbers, the function can be omitted (then the bridge converts the strings to numbers and vice-versa).
+ * @returns a `BridgeRef` that is essentially a regular Vue `Ref` (you use it the same way, you can assign it to regular refs and v-models, no difference), containing two methods that you can call to control the bridge if needed (`.pauseBridgeFromNowOn()` and `.wakeupBridgeAtNextTick()`).
+ * */
+export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : BridgeRef<Tcreated> {
+  return createBridge<Torig, Tcreated, Torig, Tcreated>(origRef, origToCreated ?? stringNumberConversion<Tcreated>, createdToOrig ?? stringNumberConversion<Torig>, false)
 }
 
 /** This composable creates a two-way pipe between reactive arrays of 2 different types. The values circulate back
  *  and forth transparently from A to B and B to A, the reactivity is preserved on both ends, the types are converted
- *  when the values pass through.
- *  It solves 3 difficulties:
- *  1. Different types. This is the main reason you need to bridge reactive variables: values of different types
- *     that must stay synchronized.
- *  2. Infinite loops. When one array changes, the goal is to update the other one and you do not want that
- *     the update triggers the first one again and so on.
- *  3. At the moment the binding is created, it is typical that one array has initial data and the other is
- *     empty. You do not want the empty one to erase the initial data when the binding starts.
+ *  when the values pass through, infinite loops (refs triggering each other) are prevented.
  * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
- * @param origToCreated (optional) Callback/Arrow function that converts an element in the original array into the type of the elements in the created array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
- * @param createdToOrig (optional) Callback/Arrow function that converts an element in the created array into the type of the elements in the original array. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
+ * @param origToCreated (optional) Callback/Arrow function that converts an element in the original array into the type of the elements in the created array. For strings and numbers, the function can be omitted (then the bridge converts the strings to numbers and vice-versa).
+ * @param createdToOrig (optional) Callback/Arrow function that converts an element in the created array into the type of the elements in the original array. For strings and numbers, the function can be omitted (then the bridge converts the strings to numbers and vice-versa).
+ * @returns a `BridgeRef` that is essentially a regular Vue `Ref` (you use it the same way, you can assign it to regular refs and v-models, no difference), containing two methods that you can call to control the bridge if needed (`.pauseBridgeFromNowOn()` and `.wakeupBridgeAtNextTick()`).
  * */
-export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : BridgedRef<Tcreated[]> {
-  const createdRef = ref<Tcreated[]>() as BridgedRef<Tcreated[]>
-  let pauseBack = false
-  let pauseForth = false
-
-  createdRef.wakeupBridge = () => {
-    nextTick(() => {
-      pauseBack = false
-      pauseForth = false
-    })
-  }
-
-  createdRef.pauseBridge = () => {
-    pauseBack = true
-    pauseForth = true
-  }
-
-  watch(origRef, () => {
-    if (pauseForth) { return }
-    const OasC = origRef.value ? origRef.value.map(el => origToCreated ? origToCreated(el) : stringNumberConversion<Tcreated>(el)) : undefined as unknown as Tcreated[]
-    createdRef.value = OasC
-    pauseBack = true
-    nextTick(() => { pauseBack = false })
-  }, { immediate: true, deep: true })
-
-  watch(createdRef, () => {
-    if (pauseBack) { return }
-    const CasO = createdRef.value ? createdRef.value.map(el => createdToOrig ? createdToOrig(el) : stringNumberConversion<Torig>(el)) : undefined as unknown as Torig[]
-    origRef.value = CasO
-    pauseForth = true
-    nextTick(() => { pauseForth = false })
-  }, { deep: true })
-
-  return createdRef
+export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : BridgeRef<Tcreated[]> {
+  return createBridge<Torig, Tcreated, Torig[], Tcreated[]>(origRef, origToCreated ?? stringNumberConversion<Tcreated>, createdToOrig ?? stringNumberConversion<Torig>, true)
 }
 
 /** This composable creates a two-way pipe between reactive objects of 2 different structures. The values circulate back
  *  and forth transparently from A to B and B to A, the reactivity is preserved on both ends, the structures are converted
- *  when the values pass through.
- *  It solves 3 difficulties:
- *  1. Different structures. This is the main reason you need to bridge reactive objects: different objects
- *     that must stay synchronized.
- *  2. Infinite loops. When one object changes, the goal is to update the other one and you do not want that
- *     the update triggers the first one again and so on.
- *  3. At the moment the binding is created, it is typical that one object has initial data and the other is
- *     empty. You do not want the empty one to erase the initial data when the binding starts.
+ *  when the values pass through, infinite loops (refs triggering each other) are prevented.
  * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
  * @param origToCreated Callback/Arrow function that converts the object in the original ref into the structure of the object in the created ref.
  * @param createdToOrig Callback/Arrow function that converts the object in the created ref into the structure of the object in the original ref.
+ * @returns a `BridgeRef` that is essentially a regular Vue `Ref` (you use it the same way, you can assign it to regular refs and v-models, no difference), containing two methods that you can call to control the bridge if needed (`.pauseBridgeFromNowOn()` and `.wakeupBridgeAtNextTick()`).
  * */
-export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>) : BridgedRef<Tcreated> {
-  const createdRef = ref<Tcreated>() as BridgedRef<Tcreated>
+export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>) : BridgeRef<Tcreated> {
+  return createBridge<Torig, Tcreated, Torig, Tcreated>(origRef, origToCreated, createdToOrig, false)
+}
+
+function createBridge <Torig, Tcreated, TorigWhole, TcreatedWhole> (origRef: Ref<TorigWhole>|ModelRef<TorigWhole>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>, bothEndsAreArrays: boolean) : BridgeRef<TcreatedWhole> {
+  const createdRef = ref<TcreatedWhole>() as BridgeRef<TcreatedWhole>
   let pauseBack = false
   let pauseForth = false
 
-  createdRef.wakeupBridge = () => {
+  createdRef.wakeupBridgeAtNextTick = () => {
     nextTick(() => {
       pauseBack = false
       pauseForth = false
     })
   }
 
-  createdRef.pauseBridge = () => {
+  createdRef.pauseBridgeFromNowOn = () => {
     pauseBack = true
     pauseForth = true
   }
 
   watch(origRef, () => {
     if (pauseForth) { return }
-    const OasC = (origRef.value !== undefined) ? origToCreated(origRef.value) : undefined as unknown as Tcreated
+    const OasC = (
+      (origRef.value !== undefined)
+        ? bothEndsAreArrays ? (origRef.value as Torig[]).map(el => origToCreated(el)) : origToCreated(origRef.value as Torig)
+        : undefined
+    ) as TcreatedWhole
     createdRef.value = OasC
     pauseBack = true
     nextTick(() => { pauseBack = false })
@@ -97,7 +73,11 @@ export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRe
 
   watch(createdRef, () => {
     if (pauseBack) { return }
-    const CasO = (createdRef.value !== undefined) ? createdToOrig(createdRef.value) : undefined as unknown as Torig
+    const CasO = (
+      (createdRef.value !== undefined)
+        ? bothEndsAreArrays ? (createdRef.value as Tcreated[]).map(el => createdToOrig(el)) : createdToOrig(createdRef.value as Tcreated)
+        : undefined
+    ) as TorigWhole
     origRef.value = CasO
     pauseForth = true
     nextTick(() => { pauseForth = false })
@@ -106,24 +86,6 @@ export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRe
   return createdRef
 }
 
-/** This composable creates a two-way pipe between reactive variables of 2 different types. The values circulate back
- *  and forth transparently from A to B and B to A, the reactivity is preserved on both ends, the types are converted
- *  when the values pass through.
- *  It solves 3 difficulties:
- *  1. Different types. This is the main reason you need to bridge reactive variables: values of different types
- *     that must stay synchronized.
- *  2. Infinite loops. When one variable changes, the goal is to update the other one and you do not want that
- *     the update triggers the first one again and so on.
- *  3. At the moment the binding is created, it is typical that one variable has initial data and the other is
- *     empty. You do not want the empty one to erase the initial data when the binding starts.
- * @param origRef Ref that you want to bridge with the new ref that this function will create for you.
- * @param origToCreated (optional) Callback/Arrow function that converts the value in the original ref into the type of the value in the created ref. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
- * @param createdToOrig (optional) Callback/Arrow function that converts the value in the created ref into the type of the value in the original ref. If not provided, a basic conversion is performed, which is safe only between strings and numbers.
- * */
-export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : BridgedRef<Tcreated> {
-  return useObjectRefBridge<Torig, Tcreated>(origRef, origToCreated ?? stringNumberConversion, createdToOrig ?? stringNumberConversion)
-}
-
 function stringNumberConversion<TO> (from: any) : TO {
   switch (typeof from) {
     case 'number' : return String(from) as TO
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index aeccc135e..cda6bb0f6 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -308,7 +308,7 @@
       "dialog_title": "Edit Subscriptions",
       "validators" : {
         "explanation": "All notifications are sent after network finality (~20mins).",
-        "offline_validator": {
+        "validator_offline": {
           "option": "Validator is offline",
           "hint": [
             "We will trigger a notification:",
@@ -317,39 +317,39 @@
             "- Once you are back online again."
           ]
         },
-        "offline_group": {
+        "group_offline": {
           "option":"Group is offline",
           "hint": [
             "We will trigger a notification:",
-            "- Once {count}% of your group is offline.",
+            "- Once validators in your group are offline. | - Once {count}% of your group is offline. | - Once {count}% of your group is offline.",
             "- Once you have been offline for 3 epochs.",
             "- Every 32 Epochs (~3 hours) during your downtime.",
             "- Once you are back online.",
-            "*Note:* Notification resets if you do not meet the threshold of {count}%."
+            "*Note:* Notification resets if you do not meet the threshold given in the input field. | *Note:* Notification resets if you do not meet the threshold of {count}%. | *Note:* Notification resets if you do not meet the threshold of {count}%."
           ],
           "placeholder": ""
         },
-        "missed_attestations": {
+        "attestations_missed": {
           "option":"Attestations missed",
           "hint": "We will trigger every epoch ({count} minute) during downtime. | We will trigger every epoch ({count} minutes) during downtime."
         },
-        "proposed_block": {
+        "block_proposal": {
           "option":"Block proposal (missed & success)"
         },
-        "upcoming_proposal": {
+        "upcoming_block_proposal": {
           "option":"Upcoming block proposal",
           "hint": "May trigger false positive notifications during reorgs."
         },
-        "sync_committee": {
+        "sync": {
           "option":"Sync committee"
         },
-        "withdrawn": {
+        "withdrawal_processed": {
           "option":"Withdrawal processed"
         },
         "slashed": {
           "option":"Validator got slashed"
         },
-        "real_time": {
+        "realtime_mode": {
           "option":"Realtime mode",
           "hint": "Sends notifications after the first epoch and does not wait for finality to send notifications, which might cause false positive notifications."
         },
@@ -359,20 +359,20 @@
       },
       "accounts": {
         "explanation": "",
-        "incoming": {
+        "incoming_transactions": {
           "option":"Incoming transactions"
         },
-        "outgoing": {
+        "outgoing_transactions": {
           "option":"Outgoing transactions"
         },
-        "erc20": {
+        "track_erc20_token_transfers": {
           "option":"ERC20 token transfers",
           "placeholder": "value > $0"
         },
-        "erc721": {
+        "track_erc721_token_transfers": {
           "option":"ERC721 token transfers"
         },
-        "erc1155": {
+        "track_erc1155_token_transfers": {
           "option":"ERC1155 token transfers"
         },
         "all": {
@@ -381,7 +381,7 @@
         "networks": {
           "option":"Networks"
         },
-        "ignore_spam": {
+        "ignore_spam_transactions": {
           "option":"Ignore spam transactions",
           "hint": ["Ignores *zero value transfer tx's* and token tx's that have the *\"hidden\" token label*."]
         }
diff --git a/frontend/types/notifications/subscriptionModal.ts b/frontend/types/notifications/subscriptionModal.ts
index 6f0253aec..1fd094103 100644
--- a/frontend/types/notifications/subscriptionModal.ts
+++ b/frontend/types/notifications/subscriptionModal.ts
@@ -1,70 +1,25 @@
-import { ChainIDs } from '../network'
-
-/** translates the names of the members of our objects to/from the names used by the API  // TODO: write here the identifiers actually used by the API */
-export enum SubscriptionJSONfields {
-  offlineValidator = 'offline_validator',
-  offline_validator = 'offlineValidator',
-
-  offlineGroup = 'offline_group',
-  offline_group = 'offlineGroup',
-
-  missedAttestations = 'missed_attestations',
-  missed_attestations = 'missedAttestations',
-
-  proposedBlock = 'proposed_block',
-  proposed_block = 'proposedBlock',
-
-  upcomingProposal = 'upcoming_proposal',
-  upcoming_proposal = 'upcomingProposal',
-
-  syncCommittee = 'sync_committee',
-  sync_committee = 'syncCommittee',
-
-  withdrawn = 'withdrawn',
-
-  slashed = 'slashed',
-
-  realTime = 'real_time',
-  real_time = 'realTime',
-
-  incoming = 'incoming',
-
-  outgoing = 'outgoing',
-
-  erc20 = 'erc20',
-
-  erc721 = 'erc721',
-
-  erc1155 = 'erc1155',
-
-  networks = 'networks',
-
-  ignoreSpam = 'ignore_spam',
-  ignore_spam = 'ignoreSpam'
-}
-
-/** for an option of type `number`: to mean that no value exists in the DB yet, set it to NaN; to mean that it is has a value but it is deactivated, set it to a negative value (for example 10% becomes -10) */
-export type ValidatorSubscriptionState = { // TODO: update the types once they are defined by the API
-  offlineValidator: boolean,
-  offlineGroup?: number|null,
-  missedAttestations: boolean,
-  proposedBlock: boolean,
-  upcomingProposal: boolean,
-  syncCommittee: boolean,
-  withdrawn: boolean,
-  slashed: boolean,
-  realTime?: boolean
+// TODO: import from '~/types/api/notifications.ts' once the corresponding PR is corrected and merged https://github.com/gobitfly/beaconchain/pull/573
+export interface NotificationEventsValidatorDashboard {
+  validator_offline: boolean;
+  group_offline: number|null /* float64 */;
+  attestations_missed: boolean;
+  block_proposal: boolean;
+  upcoming_block_proposal: boolean;
+  sync: boolean;
+  withdrawal_processed: boolean;
+  slashed: boolean;
+  realtime_mode: boolean;
 }
 
-/** for an option of type `number`: to mean that no value exists in the DB yet, set it to NaN; to mean that it is has a value but it is deactivated, set it to a negative value (for example $50 becomes -50) */
-export type AccountSubscriptionState = { // TODO: update the types once they are defined by the API
-  incoming: boolean,
-  outgoing: boolean,
-  erc20: number|null,
-  erc721: boolean,
-  erc1155: boolean,
-  networks: ChainIDs[],
-  ignoreSpam: boolean
+// TODO: import from '~/types/api/notifications.ts' once the corresponding PR is corrected and merged https://github.com/gobitfly/beaconchain/pull/573
+export interface NotificationEventsAccountDashboard {
+  incoming_transactions: boolean;
+  outgoing_transactions: boolean;
+  track_erc20_token_transfers: number|null /* float64 */;
+  track_erc721_token_transfers: boolean;
+  track_erc1155_token_transfers: boolean;
+  networks: number /* uint64 */[];
+  ignore_spam_transactions: boolean;
 }
 
 /** for internal use */
@@ -72,3 +27,5 @@ export interface CheckboxAndNumber {
   check: boolean,
   num: number|null
 }
+
+export type InputRow = 'binary' | 'amount' | 'percent' | 'networks'

From a825dcfb1627dc037bc58273c481ffd59c01e513 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Fri, 12 Jul 2024 14:09:50 +0200
Subject: [PATCH 52/69] (BIDS-2859) Safer code to handle the data. Next commit:
 adapting the data input and output to the decisions of Lucca

---
 .../notifications/SubscriptionDialog.vue      | 143 +++++++++---------
 .../notifications/SubscriptionRow.vue         |  45 +++---
 frontend/i18n/en.json                         |   4 +-
 .../types/notifications/subscriptionModal.ts  |  13 +-
 4 files changed, 101 insertions(+), 104 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index c180508a0..816998fa3 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { NotificationEventsValidatorDashboard, NotificationEventsAccountDashboard, CheckboxAndNumber, InputRow } from '~/types/notifications/subscriptionModal'
-import type { ChainIDs } from '~/types/network'
+import { warn } from 'vue'
+import type { NotificationEventsValidatorDashboard, NotificationEventsAccountDashboard, InternalEntry, APIentry } from '~/types/notifications/subscriptionModal'
+import { ChainFamily } from '~/types/network'
 import type { ApiErrorResponse } from '~/types/api/common'
 import { API_PATH } from '~/types/customFetch'
 
@@ -13,31 +14,27 @@ interface Props {
 
 const TimeoutForSavingFailures = 2300 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost your preferences half a minute ago, we hope you remember them and do not mind going back to that dialog"
 const MinimumTimeBetweenAPIcalls = 700 // ms. Any change ends-up saved anyway, so we can prevent useless requests with a delay larger than usual.
-const DefaultValueOfValidatorOptionsNeedingPremium = {
+const DefaultValues = {
   group_offline: -10, // means "10% and unchecked"
-  realtime_mode: false
-  // ... add lines here to make options available to premium accounts only
-}
-const DefaultValueOfAccountOptionsNeedingPremium = {
-  // add lines here to make options available to premium accounts only
+  realtime_mode: false,
+  track_erc20_token_transfers: null, // means "empty"
+  networks: []
 }
+type AllOptions = NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard & typeof DefaultValues
 const orderOfTheRowsInValidatorModal: Array<keyof NotificationEventsValidatorDashboard | 'ALL'> =
   ['validator_offline', 'group_offline', 'attestations_missed', 'block_proposal', 'upcoming_block_proposal', 'sync', 'withdrawal_processed', 'slashed', 'realtime_mode', 'ALL']
 const orderOfTheRowsInAccountModal: Array<keyof NotificationEventsAccountDashboard | 'ALL'> =
   ['incoming_transactions', 'outgoing_transactions', 'track_erc20_token_transfers', 'track_erc721_token_transfers', 'track_erc1155_token_transfers', 'ALL', 'networks', 'ignore_spam_transactions']
-const OptionsOutsideTheScopeOfCheckboxall: Array<keyof(NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard)> =
+const OptionsOutsideTheScopeOfCheckboxall: Array<keyof(AllOptions)> =
   ['networks', 'ignore_spam_transactions'] // options that are not in the group of the all-checkbox
-const RowsThatExpectAnAmount: Array<keyof(NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard)> =
-  ['track_erc20_token_transfers']
-const RowsThatExpectAPercentage: Array<keyof(NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard)> =
+const OptionsNeedingPremium: Array<keyof AllOptions> =
+  ['group_offline', 'realtime_mode']
+const RowsThatExpectAPercentage: Array<keyof AllOptions> =
   ['group_offline']
-const RowsThatExpectANetwork: Array<keyof(NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard)> =
-  ['networks']
 
 // #### END OF DIALOG SETTINGS ####
 
-type AllOptions = NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard & typeof DefaultValueOfValidatorOptionsNeedingPremium & typeof DefaultValueOfAccountOptionsNeedingPremium
-type ModifiableOptions = Record<keyof AllOptions, CheckboxAndNumber|ChainIDs[]>
+type ModifiableOptions = Record<keyof AllOptions, InternalEntry>
 
 const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
 const { t } = useI18n()
@@ -48,58 +45,73 @@ const { user } = useUserStore()
 
 const tPath = ref('')
 let orderOfTheRows: typeof orderOfTheRowsInValidatorModal | typeof orderOfTheRowsInAccountModal = []
-let originalSettings = {} as AllOptions
 const modifiableOptions = ref({} as ModifiableOptions)
-const checkboxAll = ref({ check: false } as CheckboxAndNumber)
+const checkboxAll = ref<InternalEntry>({ type: 'binary', check: false })
 
 const debouncer = useDebounceValue<number>(0, MinimumTimeBetweenAPIcalls)
 watch(debouncer.value, sendUserPreferencesToAPI)
 
-let dataNonce = 0 // used by the watcher of `modifiableOptions` to know when it is unnecessary to send apparent changes to the API (it doesn't send if the nonce is 0)
+let dataNonce = 0 // used by the watcher of `modifiableOptions` to know when it is unnecessary to send changes to the API (it doesn't send if the nonce is 0)
 
 watch(props, (props) => {
   if (!props || (!props.validatorSub && !props.accountSub)) {
     return
   }
+  let originalSettings = {} as AllOptions
   if (props.validatorSub) {
     tPath.value = 'notifications.subscriptions.validators.'
-    originalSettings = { ...DefaultValueOfValidatorOptionsNeedingPremium, ...structuredClone(toRaw(props.validatorSub)) } as AllOptions
+    originalSettings = toRaw(props.validatorSub) as AllOptions
     orderOfTheRows = orderOfTheRowsInValidatorModal
   } else {
     tPath.value = 'notifications.subscriptions.accounts.'
-    originalSettings = { ...DefaultValueOfAccountOptionsNeedingPremium, ...structuredClone(toRaw(props.accountSub)) } as AllOptions
+    originalSettings = toRaw(props.accountSub!) as AllOptions
     orderOfTheRows = orderOfTheRowsInAccountModal
   }
   modifiableOptions.value = {} as ModifiableOptions
-  for (const entry of Object.entries(originalSettings)) {
-    const key = entry[0] as keyof typeof originalSettings
-    if (Array.isArray(entry[1])) {
-      modifiableOptions.value[key] = entry[1]
+  dataNonce = 0
+  for (const key of orderOfTheRows) {
+    if (key === 'ALL') { continue }
+    modifiableOptions.value[key] = convertAPIentryIntoInternalEntry(originalSettings, key)
+  }
+}, { immediate: true })
+
+function convertAPIentryIntoInternalEntry (apiData: AllOptions, apiKey: keyof AllOptions) : InternalEntry {
+  let srcValue = apiData[apiKey]
+  if (srcValue === undefined || srcValue === null || (Array.isArray(srcValue) && !srcValue.length)) {
+    if (apiKey in DefaultValues) {
+      srcValue = DefaultValues[apiKey as keyof typeof DefaultValues]
     } else {
-      switch (typeof entry[1]) {
-        case 'boolean' :
-          modifiableOptions.value[key] = {
-            check: entry[1],
-            num: 0
-          }
-          break
-        default :
-          modifiableOptions.value[key] = {
-            check: (entry[1] != null && entry[1] >= 0),
-            num: (entry[1] === null) ? null : Math.abs(entry[1])
-          }
-          break
-      }
+      warn('Entry `', apiKey, '`is missing in the API data and we do not have a default value for it.')
+      return {} as InternalEntry
     }
+    dataNonce++ // this will trigger a call to the API to save the settings
   }
-  dataNonce = 0
-}, { immediate: true })
+  if (Array.isArray(srcValue)) {
+    return {
+      type: 'networks',
+      networks: [...srcValue]
+    }
+  }
+  switch (typeof srcValue) {
+    case 'boolean' :
+      return {
+        type: 'binary',
+        check: srcValue
+      }
+    default :
+      return {
+        type: (apiKey in RowsThatExpectAPercentage) ? 'percent' : 'amount',
+        check: srcValue !== null && srcValue >= 0,
+        num: srcValue === null ? null : Math.abs(srcValue)
+      }
+  }
+}
 
 function checkboxAllhasBeenClicked (checked: boolean) : void {
   for (const k of Object.keys(modifiableOptions.value)) {
     const key = k as keyof ModifiableOptions
     if (isOptionAvailable(key) && !OptionsOutsideTheScopeOfCheckboxall.includes(key)) {
-      (modifiableOptions.value[key] as CheckboxAndNumber).check = checked
+      modifiableOptions.value[key].check = checked
     }
   }
   // no need to call the API, the modifications that we did in `modifiableOptions.value` will trigger its watcher (that calls the API)
@@ -107,10 +119,10 @@ function checkboxAllhasBeenClicked (checked: boolean) : void {
 
 watch(modifiableOptions, (options) => {
   checkboxAll.value.check = true
-  for (const k of Object.keys(options)) {
+  for (const k in options) {
     const key = k as keyof ModifiableOptions
     if (isOptionAvailable(key) && !OptionsOutsideTheScopeOfCheckboxall.includes(key)) {
-      checkboxAll.value.check &&= (options[key] as CheckboxAndNumber).check
+      checkboxAll.value.check &&= options[key].check
     }
   }
   if (dataNonce > 0) {
@@ -122,21 +134,21 @@ watch(modifiableOptions, (options) => {
 
 async function sendUserPreferencesToAPI () {
   // first we convert our internal structures to the format of the API
-  const output = {} as Record<string, any>
-  for (const entry of Object.entries(modifiableOptions.value)) {
-    const key = entry[0] as keyof ModifiableOptions
-    if (Array.isArray(entry[1])) {
-      output[key] = entry[1]
-    } else {
-      switch (typeof originalSettings[key]) {
-        case 'boolean' :
-          output[key] = entry[1].check
-          break
-        default :
-          output[key] = entry[1].num
-          if (!entry[1].check && entry[1].num !== null) { output[key] *= -1 }
-          break
-      }
+  const output = {} as Record<string, APIentry>
+  for (const k in modifiableOptions.value) {
+    const key = k as keyof ModifiableOptions
+    const value = toRaw(modifiableOptions.value[key])
+    switch (value.type) {
+      case 'binary' :
+        output[key] = value.check
+        break
+      case 'amount' :
+      case 'percent' :
+        output[key] = (value.check || value.num === null) ? value.num : -value.num!
+        break
+      case 'networks' :
+        output[key] = value.networks
+        break
     }
   }
   // now we send the data
@@ -162,14 +174,7 @@ function closeDialog () : void {
   dialogRef?.value.close()
 }
 
-const isOptionAvailable = (key: keyof AllOptions) => user.value?.premium_perks.ad_free || !(key in DefaultValueOfValidatorOptionsNeedingPremium || key in DefaultValueOfAccountOptionsNeedingPremium)
-
-function getRowType (key: keyof AllOptions) : InputRow {
-  if (RowsThatExpectAnAmount.includes(key)) { return 'amount' }
-  if (RowsThatExpectAPercentage.includes(key)) { return 'percent' }
-  if (RowsThatExpectANetwork.includes(key)) { return 'networks' }
-  return 'binary'
-}
+const isOptionAvailable = (key: keyof AllOptions) => user.value?.premium_perks.ad_free || !OptionsNeedingPremium.includes(key)
 </script>
 
 <template>
@@ -179,7 +184,7 @@ function getRowType (key: keyof AllOptions) : InputRow {
     </div>
 
     <div v-if="t(tPath+'explanation')" class="explanation">
-      {{ t(tPath+'explanation') }}
+      {{ t(tPath+'explanation', (networkInfo.family === ChainFamily.Gnosis) ? 5 : 20) }}
     </div>
 
     <div v-for="row of orderOfTheRows" :key="row" class="row-container">
@@ -188,7 +193,6 @@ function getRowType (key: keyof AllOptions) : InputRow {
         v-model="modifiableOptions[row]"
         :t-path="tPath+row"
         :lacks-premium-subscription="!isOptionAvailable(row)"
-        :input-type="getRowType(row)"
         :value-in-text="(row == 'attestations_missed') ? Math.round(networkInfo.secondsPerSlot*networkInfo.slotsPerEpoch/6)/10 : undefined"
         class="row"
       />
@@ -198,7 +202,6 @@ function getRowType (key: keyof AllOptions) : InputRow {
         v-model="checkboxAll"
         :t-path="tPath+'all'"
         :lacks-premium-subscription="false"
-        input-type="binary"
         class="row"
         @checkbox-click="checkboxAllhasBeenClicked"
       />
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 63cf78134..7d212a229 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
-import type { ModelRef } from 'vue'
-import type { ChainIDs } from '~/types/network'
-import type { CheckboxAndNumber, InputRow } from '~/types/notifications/subscriptionModal'
+import type { InternalEntry } from '~/types/notifications/subscriptionModal'
 
 const props = defineProps<{
   tPath: string,
-  lacksPremiumSubscription: boolean,
-  inputType: InputRow,
+  lacksPremiumSubscription: boolean
   valueInText?: number
 }>()
 
@@ -16,14 +13,7 @@ const emitEvent = defineEmits<{(e: 'checkboxClick', checked: boolean) : void}>()
 
 const { t } = useI18n()
 
-const parentVmodel = defineModel<CheckboxAndNumber|ChainIDs[]>({ required: true })
-let networkSelectorState: ModelRef<ChainIDs[]>
-let checkBoxAndInput: Ref<CheckboxAndNumber>
-if (props.inputType === 'networks') {
-  networkSelectorState = parentVmodel as ModelRef<ChainIDs[]>
-} else {
-  checkBoxAndInput = parentVmodel as ModelRef<CheckboxAndNumber>
-}
+const parentVmodel = defineModel<InternalEntry>({ required: true })
 
 const tooltipLines = computed(() => {
   let options
@@ -34,8 +24,8 @@ const tooltipLines = computed(() => {
       options = { plural: parentVmodel.value.length, list: parentVmodel.value.join(', ') }
     } else {
       let plural: number
-      if (props.inputType === 'amount' || props.inputType === 'percent') {
-        plural = checkBoxAndInput!.value.num ?? 0
+      if (parentVmodel.value.type === 'amount' || parentVmodel.value.type === 'percent') {
+        plural = parentVmodel.value.num ?? 0
       } else {
         plural = parentVmodel.value ? 2 : 1
       }
@@ -59,30 +49,31 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
       </template>
     </BcTooltip>
     <BcPremiumGem v-if="lacksPremiumSubscription" class="gem" />
-    <div v-if="inputType != 'networks'" class="right">
-      <div v-if="inputType == 'amount' || inputType == 'percent'" class="input">
+    <div v-if="parentVmodel.type != 'networks'" class="right">
+      <div v-if="parentVmodel.type == 'amount' || parentVmodel.type == 'percent'" class="input">
         <BcInputNumber
-          v-if="checkBoxAndInput"
-          v-model="checkBoxAndInput.num"
-          :min="(inputType === 'amount') ? 0 : 1"
-          :max="(inputType === 'amount') ? 2**32 : 100"
-          :max-fraction-digits="(inputType === 'amount') ? 2 : 1"
+          v-if="parentVmodel.num !== undefined"
+          v-model="parentVmodel.num"
+          :min="(parentVmodel.type === 'amount') ? 0 : 1"
+          :max="(parentVmodel.type === 'amount') ? 2**32 : 100"
+          :max-fraction-digits="(parentVmodel.type === 'amount') ? 2 : 1"
           :placeholder="t(tPath + '.placeholder')"
-          :class="[deactivationClass,inputType]"
+          :class="[deactivationClass,parentVmodel.type]"
         />
         &nbsp;
       </div>
-      <span v-if="inputType == 'percent'" :class="deactivationClass">%</span>
+      <span v-if="parentVmodel.type == 'percent'" :class="deactivationClass">%</span>
       <Checkbox
-        v-model="checkBoxAndInput!.check"
+        v-if="parentVmodel.check !== undefined"
+        v-model="parentVmodel.check"
         :binary="true"
         class="checkbox"
         :class="deactivationClass"
-        @click="emitEvent('checkboxClick', !checkBoxAndInput!.check)"
+        @click="emitEvent('checkboxClick', !parentVmodel.check)"
       />
     </div>
     <div v-else class="right">
-      <BcNetworkSelector v-model="networkSelectorState" :class="deactivationClass" />
+      <BcNetworkSelector v-if="parentVmodel.networks !== undefined" v-model="parentVmodel.networks" :class="deactivationClass" />
     </div>
   </div>
 </template>
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 8a6b9936a..2986cf8c9 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -309,7 +309,7 @@
     "subscriptions": {
       "dialog_title": "Edit Subscriptions",
       "validators" : {
-        "explanation": "All notifications are sent after network finality (~20mins).",
+        "explanation": "All notifications are sent after network finality (~{count} min).",
         "validator_offline": {
           "option": "Validator is offline",
           "hint": [
@@ -369,7 +369,7 @@
         },
         "track_erc20_token_transfers": {
           "option":"ERC20 token transfers",
-          "placeholder": "value > $0"
+          "placeholder": "value ≥ $0"
         },
         "track_erc721_token_transfers": {
           "option":"ERC721 token transfers"
diff --git a/frontend/types/notifications/subscriptionModal.ts b/frontend/types/notifications/subscriptionModal.ts
index 1fd094103..d41dd74c8 100644
--- a/frontend/types/notifications/subscriptionModal.ts
+++ b/frontend/types/notifications/subscriptionModal.ts
@@ -1,3 +1,5 @@
+import { ChainIDs } from '../network'
+
 // TODO: import from '~/types/api/notifications.ts' once the corresponding PR is corrected and merged https://github.com/gobitfly/beaconchain/pull/573
 export interface NotificationEventsValidatorDashboard {
   validator_offline: boolean;
@@ -22,10 +24,11 @@ export interface NotificationEventsAccountDashboard {
   ignore_spam_transactions: boolean;
 }
 
-/** for internal use */
-export interface CheckboxAndNumber {
-  check: boolean,
-  num: number|null
+export interface InternalEntry {
+  type: 'binary' | 'amount' | 'percent' | 'networks'
+  networks?: ChainIDs[]
+  check?: boolean,
+  num?: number|null
 }
 
-export type InputRow = 'binary' | 'amount' | 'percent' | 'networks'
+export type APIentry = boolean | number | null | undefined | ChainIDs[]

From 42ccdf1edc3919e51b43ed452ebdd9f5a3d4ad5d Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Fri, 12 Jul 2024 14:58:54 +0200
Subject: [PATCH 53/69] (BIDS-2859) typos

---
 frontend/components/notifications/SubscriptionDialog.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 816998fa3..75a0cb7e3 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -71,11 +71,11 @@ watch(props, (props) => {
   dataNonce = 0
   for (const key of orderOfTheRows) {
     if (key === 'ALL') { continue }
-    modifiableOptions.value[key] = convertAPIentryIntoInternalEntry(originalSettings, key)
+    modifiableOptions.value[key] = convertAPIentryToInternalEntry(originalSettings, key)
   }
 }, { immediate: true })
 
-function convertAPIentryIntoInternalEntry (apiData: AllOptions, apiKey: keyof AllOptions) : InternalEntry {
+function convertAPIentryToInternalEntry (apiData: AllOptions, apiKey: keyof AllOptions) : InternalEntry {
   let srcValue = apiData[apiKey]
   if (srcValue === undefined || srcValue === null || (Array.isArray(srcValue) && !srcValue.length)) {
     if (apiKey in DefaultValues) {
@@ -107,7 +107,7 @@ function convertAPIentryIntoInternalEntry (apiData: AllOptions, apiKey: keyof Al
   }
 }
 
-function checkboxAllhasBeenClicked (checked: boolean) : void {
+function checkboxAllHasBeenClicked (checked: boolean) : void {
   for (const k of Object.keys(modifiableOptions.value)) {
     const key = k as keyof ModifiableOptions
     if (isOptionAvailable(key) && !OptionsOutsideTheScopeOfCheckboxall.includes(key)) {
@@ -203,7 +203,7 @@ const isOptionAvailable = (key: keyof AllOptions) => user.value?.premium_perks.a
         :t-path="tPath+'all'"
         :lacks-premium-subscription="false"
         class="row"
-        @checkbox-click="checkboxAllhasBeenClicked"
+        @checkbox-click="checkboxAllHasBeenClicked"
       />
     </div>
 

From 951d5d17bfb8e01654ce2030b85d792904ed1ea9 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 16 Jul 2024 16:13:24 +0200
Subject: [PATCH 54/69] (BIDS-2859) adapted to Lucca's choices

---
 frontend/components/bc/InputNumber.vue        |  8 +-
 .../notifications/SubscriptionDialog.vue      | 81 ++++++++++++-------
 .../notifications/SubscriptionRow.vue         |  2 +-
 .../playground/PlaygroundDialog.vue           | 43 +++++-----
 frontend/i18n/en.json                         | 32 ++++----
 frontend/types/customFetch.ts                 |  7 +-
 .../types/notifications/subscriptionModal.ts  | 41 +++++-----
 7 files changed, 119 insertions(+), 95 deletions(-)

diff --git a/frontend/components/bc/InputNumber.vue b/frontend/components/bc/InputNumber.vue
index e835f599a..93937850c 100644
--- a/frontend/components/bc/InputNumber.vue
+++ b/frontend/components/bc/InputNumber.vue
@@ -8,17 +8,17 @@ const props = defineProps<{
   maxFractionDigits: number
 }>()
 
-const parentVmodel = defineModel<number|null>({ required: true })
-const bridgedVmodel = usePrimitiveRefBridge<number|null, Nullable<number>>(parentVmodel, n => n, n => n ?? null)
+const parentVmodel = defineModel<number>({ required: true })
+const bridgedVmodel = usePrimitiveRefBridge<number, Nullable<number>>(parentVmodel, n => (isNaN(n) ? null : n), n => (n ?? NaN))
 
 function sendValue (input: Nullable<number>) : void {
   if (input === undefined || input === null || isNaN(input) || input < props.min || input > props.max) {
-    input = null
+    input = NaN
   } else {
     const stringifyied = String(input)
     const comma = stringifyied.indexOf('.')
     if (comma >= 0 && stringifyied.length - comma - 1 > props.maxFractionDigits) {
-      input = null
+      input = NaN
     }
   }
   bridgedVmodel.pauseBridgeFromNowOn() // this allows us to output the value to the parent v-model without causing an injection of the value back into the InputNumber v-model (that would empty InputNumber at each key stroke if the input is invalid)
diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 75a0cb7e3..8d6b8a56c 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -1,36 +1,47 @@
 <script setup lang="ts">
 import { warn } from 'vue'
-import type { NotificationEventsValidatorDashboard, NotificationEventsAccountDashboard, InternalEntry, APIentry } from '~/types/notifications/subscriptionModal'
+import type { NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard, InternalEntry, APIentry } from '~/types/notifications/subscriptionModal'
 import { ChainFamily } from '~/types/network'
 import type { ApiErrorResponse } from '~/types/api/common'
 import { API_PATH } from '~/types/customFetch'
 
 interface Props {
-  validatorSub?: NotificationEventsValidatorDashboard,
-  accountSub?: NotificationEventsAccountDashboard
+  dashboardId: number,
+  validatorSub?: NotificationSettingsValidatorDashboard,
+  accountSub?: NotificationSettingsAccountDashboard
 }
 
+type DefinedAPIentry = Exclude<APIentry, null|undefined>
+type AllOptions = NotificationSettingsValidatorDashboard & NotificationSettingsAccountDashboard
+
 // #### DIALOG SETTINGS ####
 
 const TimeoutForSavingFailures = 2300 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost your preferences half a minute ago, we hope you remember them and do not mind going back to that dialog"
 const MinimumTimeBetweenAPIcalls = 700 // ms. Any change ends-up saved anyway, so we can prevent useless requests with a delay larger than usual.
-const DefaultValues = {
-  group_offline: -10, // means "10% and unchecked"
-  realtime_mode: false,
-  track_erc20_token_transfers: null, // means "empty"
-  networks: []
-}
-type AllOptions = NotificationEventsValidatorDashboard & NotificationEventsAccountDashboard & typeof DefaultValues
-const orderOfTheRowsInValidatorModal: Array<keyof NotificationEventsValidatorDashboard | 'ALL'> =
-  ['validator_offline', 'group_offline', 'attestations_missed', 'block_proposal', 'upcoming_block_proposal', 'sync', 'withdrawal_processed', 'slashed', 'realtime_mode', 'ALL']
-const orderOfTheRowsInAccountModal: Array<keyof NotificationEventsAccountDashboard | 'ALL'> =
-  ['incoming_transactions', 'outgoing_transactions', 'track_erc20_token_transfers', 'track_erc721_token_transfers', 'track_erc1155_token_transfers', 'ALL', 'networks', 'ignore_spam_transactions']
+const DefaultValues = new Map<keyof AllOptions, DefinedAPIentry>([
+  ['group_offline_threshold', -10], // means "10% and unchecked"
+  ['is_real_time_mode_enabled', false],
+  ['is_erc20_token_transfers_subscribed', false],
+  ['erc20_token_transfers_threshold', NaN], // means "empty"
+  ['subscribed_chain_ids', []]
+])
+const orderOfTheRowsInValidatorModal: Array<keyof NotificationSettingsValidatorDashboard | 'ALL'> = [
+  'is_validator_offline_subscribed', 'group_offline_threshold', 'is_attestations_missed_subscribed', 'is_block_proposal_subscribed', 'is_upcoming_block_proposal_subscribed',
+  'is_sync_subscribed', 'is_withdrawal_processed_subscribed', 'is_slashed_subscribed', 'is_real_time_mode_enabled', 'ALL'
+]
+const orderOfTheRowsInAccountModal: Array<keyof NotificationSettingsAccountDashboard | 'ALL'> = [
+  'is_incoming_transactions_subscribed', 'is_outgoing_transactions_subscribed', 'erc20_token_transfers_threshold', 'is_erc721_token_transfers_subscribed',
+  'is_erc1155_token_transfers_subscribed', 'ALL', 'subscribed_chain_ids', 'is_ignore_spam_transactions_enabled'
+]
 const OptionsOutsideTheScopeOfCheckboxall: Array<keyof(AllOptions)> =
-  ['networks', 'ignore_spam_transactions'] // options that are not in the group of the all-checkbox
+  ['subscribed_chain_ids', 'is_ignore_spam_transactions_enabled'] // options that are not in the group of the all-checkbox
 const OptionsNeedingPremium: Array<keyof AllOptions> =
-  ['group_offline', 'realtime_mode']
+  ['group_offline_threshold', 'is_real_time_mode_enabled']
 const RowsThatExpectAPercentage: Array<keyof AllOptions> =
-  ['group_offline']
+  ['group_offline_threshold']
+const RowsWhoseCheckBoxIsInASeparateField = new Map<keyof AllOptions, keyof AllOptions>([
+  ['erc20_token_transfers_threshold', 'is_erc20_token_transfers_subscribed']
+])
 
 // #### END OF DIALOG SETTINGS ####
 
@@ -77,9 +88,9 @@ watch(props, (props) => {
 
 function convertAPIentryToInternalEntry (apiData: AllOptions, apiKey: keyof AllOptions) : InternalEntry {
   let srcValue = apiData[apiKey]
-  if (srcValue === undefined || srcValue === null || (Array.isArray(srcValue) && !srcValue.length)) {
-    if (apiKey in DefaultValues) {
-      srcValue = DefaultValues[apiKey as keyof typeof DefaultValues]
+  if (srcValue === undefined || srcValue === null || (typeof srcValue === 'number' && isNaN(srcValue)) || (Array.isArray(srcValue) && !srcValue.length)) {
+    if (DefaultValues.has(apiKey)) {
+      srcValue = DefaultValues.get(apiKey)!
     } else {
       warn('Entry `', apiKey, '`is missing in the API data and we do not have a default value for it.')
       return {} as InternalEntry
@@ -98,12 +109,19 @@ function convertAPIentryToInternalEntry (apiData: AllOptions, apiKey: keyof AllO
         type: 'binary',
         check: srcValue
       }
-    default :
+    case 'number' : {
+      let check: boolean
+      if (RowsWhoseCheckBoxIsInASeparateField.has(apiKey)) {
+        check = convertAPIentryToInternalEntry(apiData, RowsWhoseCheckBoxIsInASeparateField.get(apiKey)!).check!
+      } else {
+        check = srcValue > 0
+      }
       return {
         type: (apiKey in RowsThatExpectAPercentage) ? 'percent' : 'amount',
-        check: srcValue !== null && srcValue >= 0,
-        num: srcValue === null ? null : Math.abs(srcValue)
+        check,
+        num: Math.abs(srcValue)
       }
+    }
   }
 }
 
@@ -144,7 +162,10 @@ async function sendUserPreferencesToAPI () {
         break
       case 'amount' :
       case 'percent' :
-        output[key] = (value.check || value.num === null) ? value.num : -value.num!
+        output[key] = isNaN(value.num!) ? null : (value.check ? value.num : -value.num!)
+        if (RowsWhoseCheckBoxIsInASeparateField.has(key)) {
+          output[RowsWhoseCheckBoxIsInASeparateField.get(key)!] = !isNaN(value.num!) && value.check
+        }
         break
       case 'networks' :
         output[key] = value.networks
@@ -155,12 +176,12 @@ async function sendUserPreferencesToAPI () {
   let response: ApiErrorResponse | undefined
   try {
     setTimeout(TimeoutForSavingFailures)
-    response = await fetch<ApiErrorResponse>(API_PATH.NOTIFICATION_SUBSCRIPTIONS, {
+    response = await fetch<ApiErrorResponse>(API_PATH.SETTINGS_DASHBOARDS, {
       method: 'POST',
-      body: {
-        category: props.value!.accountSub ? 'accounts' : 'validators',
-        subscriptions: output
-      }
+      body: output
+    }, {
+      for: props.value!.accountSub ? 'accounts' : 'validators',
+      dashboardKey: String(props.value?.dashboardId)
     })
   } catch {
     response = undefined
@@ -193,7 +214,7 @@ const isOptionAvailable = (key: keyof AllOptions) => user.value?.premium_perks.a
         v-model="modifiableOptions[row]"
         :t-path="tPath+row"
         :lacks-premium-subscription="!isOptionAvailable(row)"
-        :value-in-text="(row == 'attestations_missed') ? Math.round(networkInfo.secondsPerSlot*networkInfo.slotsPerEpoch/6)/10 : undefined"
+        :value-in-text="(row == 'is_attestations_missed_subscribed') ? Math.round(networkInfo.secondsPerSlot*networkInfo.slotsPerEpoch/6)/10 : undefined"
         class="row"
       />
       <div v-if="row == 'ALL'" class="separation" />
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index 7d212a229..adce65c3e 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -25,7 +25,7 @@ const tooltipLines = computed(() => {
     } else {
       let plural: number
       if (parentVmodel.value.type === 'amount' || parentVmodel.value.type === 'percent') {
-        plural = parentVmodel.value.num ?? 0
+        plural = isNaN(parentVmodel.value.num!) ? 0 : parentVmodel.value.num!
       } else {
         plural = parentVmodel.value ? 2 : 1
       }
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 5c467a010..0da936d70 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { BcDialogConfirm, NotificationsSubscriptionDialog } from '#components'
-import type { NotificationEventsValidatorDashboard, NotificationEventsAccountDashboard } from '~/types/notifications/subscriptionModal'
+import type { NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard } from '~/types/notifications/subscriptionModal'
 
 const dialog = useDialog()
 
@@ -23,26 +23,27 @@ const openQuestion = (yesLabel?: string, noLabel?: string) => {
   })
 }
 
-const validatorSub: NotificationEventsValidatorDashboard = {
-  validator_offline: true,
-  group_offline: -20, // means "20% and deselected/unchecked"
-  attestations_missed: true,
-  block_proposal: true,
-  upcoming_block_proposal: false,
-  sync: true,
-  withdrawal_processed: true,
-  slashed: false,
-  realtime_mode: false
+const validatorSub: NotificationSettingsValidatorDashboard = {
+  is_validator_offline_subscribed: true,
+  group_offline_threshold: -20, // means "20% and deselected/unchecked"
+  is_attestations_missed_subscribed: true,
+  is_block_proposal_subscribed: true,
+  is_upcoming_block_proposal_subscribed: false,
+  is_sync_subscribed: true,
+  is_withdrawal_processed_subscribed: true,
+  is_slashed_subscribed: false,
+  is_real_time_mode_enabled: false
 }
 
-const accountSub: NotificationEventsAccountDashboard = {
-  incoming_transactions: true,
-  outgoing_transactions: true,
-  track_erc20_token_transfers: null, // means "not in the database yet" (will leave the input field empty with a placeholder)
-  track_erc721_token_transfers: true,
-  track_erc1155_token_transfers: false,
-  networks: [17000],
-  ignore_spam_transactions: true
+const accountSub: NotificationSettingsAccountDashboard = {
+  is_incoming_transactions_subscribed: true,
+  is_outgoing_transactions_subscribed: true,
+  is_erc20_token_transfers_subscribed: false,
+  erc20_token_transfers_threshold: NaN, // means "not in the database yet" (will leave the input field empty with a placeholder)
+  is_erc721_token_transfers_subscribed: true,
+  is_erc1155_token_transfers_subscribed: false,
+  subscribed_chain_ids: [17000],
+  is_ignore_spam_transactions_enabled: true
 }
 
 function openSubscriptions (props: any) {
@@ -55,10 +56,10 @@ function openSubscriptions (props: any) {
 
 <template>
   <div class="container">
-    <Button @click="openSubscriptions({validatorSub})">
+    <Button @click="openSubscriptions({dashboardId:1, validatorSub})">
       Subscribe to notifications for your validators
     </Button>
-    <Button @click="openSubscriptions({accountSub})">
+    <Button @click="openSubscriptions({dashboardId:1, accountSub})">
       Subscribe to notifications for your accounts
     </Button>
     <br>
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 2986cf8c9..fcde0463e 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -310,7 +310,7 @@
       "dialog_title": "Edit Subscriptions",
       "validators" : {
         "explanation": "All notifications are sent after network finality (~{count} min).",
-        "validator_offline": {
+        "is_validator_offline_subscribed": {
           "option": "Validator is offline",
           "hint": [
             "We will trigger a notification:",
@@ -319,7 +319,7 @@
             "- Once you are back online again."
           ]
         },
-        "group_offline": {
+        "group_offline_threshold": {
           "option":"Group is offline",
           "hint": [
             "We will trigger a notification:",
@@ -331,27 +331,27 @@
           ],
           "placeholder": ""
         },
-        "attestations_missed": {
+        "is_attestations_missed_subscribed": {
           "option":"Attestations missed",
           "hint": "We will trigger every epoch ({count} minute) during downtime. | We will trigger every epoch ({count} minutes) during downtime."
         },
-        "block_proposal": {
+        "is_block_proposal_subscribed": {
           "option":"Block proposal (missed & success)"
         },
-        "upcoming_block_proposal": {
+        "is_upcoming_block_proposal_subscribed": {
           "option":"Upcoming block proposal",
           "hint": "May trigger false positive notifications during reorgs."
         },
-        "sync": {
+        "is_sync_subscribed": {
           "option":"Sync committee"
         },
-        "withdrawal_processed": {
+        "is_withdrawal_processed_subscribed": {
           "option":"Withdrawal processed"
         },
-        "slashed": {
+        "is_slashed_subscribed": {
           "option":"Validator got slashed"
         },
-        "realtime_mode": {
+        "is_real_time_mode_enabled": {
           "option":"Realtime mode",
           "hint": "Sends notifications after the first epoch and does not wait for finality to send notifications, which might cause false positive notifications."
         },
@@ -361,29 +361,29 @@
       },
       "accounts": {
         "explanation": "",
-        "incoming_transactions": {
+        "is_incoming_transactions_subscribed": {
           "option":"Incoming transactions"
         },
-        "outgoing_transactions": {
+        "is_outgoing_transactions_subscribed": {
           "option":"Outgoing transactions"
         },
-        "track_erc20_token_transfers": {
+        "erc20_token_transfers_threshold": {
           "option":"ERC20 token transfers",
           "placeholder": "value ≥ $0"
         },
-        "track_erc721_token_transfers": {
+        "is_erc721_token_transfers_subscribed": {
           "option":"ERC721 token transfers"
         },
-        "track_erc1155_token_transfers": {
+        "is_erc1155_token_transfers_subscribed": {
           "option":"ERC1155 token transfers"
         },
         "all": {
           "option":"All events"
         },
-        "networks": {
+        "subscribed_chain_ids": {
           "option":"Networks"
         },
-        "ignore_spam_transactions": {
+        "is_ignore_spam_transactions_enabled": {
           "option":"Ignore spam transactions",
           "hint": ["Ignores *zero value transfer tx's* and token tx's that have the *\"hidden\" token label*."]
         }
diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts
index 5b8c687ac..4cc8b2413 100644
--- a/frontend/types/customFetch.ts
+++ b/frontend/types/customFetch.ts
@@ -46,7 +46,7 @@ export enum API_PATH {
   PRODUCT_SUMMARY = '/productSummary',
   STRIPE_CUSTOMER_PORTAL = '/stripe/customer-portal',
   STRIPE_CHECKOUT_SESSION = '/stripe/checkout-session',
-  NOTIFICATION_SUBSCRIPTIONS = '/notifications/subscriptions'
+  SETTINGS_DASHBOARDS = '/settings-dashboards'
 }
 
 export type PathValues = Record<string, string | number>
@@ -295,8 +295,9 @@ export const mapping: Record<string, MappingData> = {
     method: 'POST',
     mock: false
   },
-  [API_PATH.NOTIFICATION_SUBSCRIPTIONS]: {
-    path: '/notifications/subscriptions',
+  [API_PATH.SETTINGS_DASHBOARDS]: {
+    path: '/settings/dashboards/{for}/{dashboard_key}',
+    getPath: values => `/settings/dashboards/${values?.for}/${values?.dashboardKey}`,
     method: 'POST',
     mock: true
   }
diff --git a/frontend/types/notifications/subscriptionModal.ts b/frontend/types/notifications/subscriptionModal.ts
index d41dd74c8..ae6dbe0ec 100644
--- a/frontend/types/notifications/subscriptionModal.ts
+++ b/frontend/types/notifications/subscriptionModal.ts
@@ -1,34 +1,35 @@
 import { ChainIDs } from '../network'
 
 // TODO: import from '~/types/api/notifications.ts' once the corresponding PR is corrected and merged https://github.com/gobitfly/beaconchain/pull/573
-export interface NotificationEventsValidatorDashboard {
-  validator_offline: boolean;
-  group_offline: number|null /* float64 */;
-  attestations_missed: boolean;
-  block_proposal: boolean;
-  upcoming_block_proposal: boolean;
-  sync: boolean;
-  withdrawal_processed: boolean;
-  slashed: boolean;
-  realtime_mode: boolean;
+export interface NotificationSettingsValidatorDashboard {
+  is_validator_offline_subscribed: boolean;
+  group_offline_threshold: number /* float64 */;
+  is_attestations_missed_subscribed: boolean;
+  is_block_proposal_subscribed: boolean;
+  is_upcoming_block_proposal_subscribed: boolean;
+  is_sync_subscribed: boolean;
+  is_withdrawal_processed_subscribed: boolean;
+  is_slashed_subscribed: boolean;
+  is_real_time_mode_enabled: boolean;
 }
 
 // TODO: import from '~/types/api/notifications.ts' once the corresponding PR is corrected and merged https://github.com/gobitfly/beaconchain/pull/573
-export interface NotificationEventsAccountDashboard {
-  incoming_transactions: boolean;
-  outgoing_transactions: boolean;
-  track_erc20_token_transfers: number|null /* float64 */;
-  track_erc721_token_transfers: boolean;
-  track_erc1155_token_transfers: boolean;
-  networks: number /* uint64 */[];
-  ignore_spam_transactions: boolean;
+export interface NotificationSettingsAccountDashboard {
+  is_incoming_transactions_subscribed: boolean;
+  is_outgoing_transactions_subscribed: boolean;
+  is_erc20_token_transfers_subscribed: boolean;
+  erc20_token_transfers_threshold: number /* float64 */;
+  is_erc721_token_transfers_subscribed: boolean;
+  is_erc1155_token_transfers_subscribed: boolean;
+  subscribed_chain_ids: number /* uint64 */[];
+  is_ignore_spam_transactions_enabled: boolean;
 }
 
 export interface InternalEntry {
   type: 'binary' | 'amount' | 'percent' | 'networks'
   networks?: ChainIDs[]
   check?: boolean,
-  num?: number|null
+  num?: number
 }
 
-export type APIentry = boolean | number | null | undefined | ChainIDs[]
+export type APIentry = boolean | number | undefined | null | ChainIDs[]

From f33978ae5c5311e1dab873ec63f4c154a4545b73 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 17 Jul 2024 13:11:25 +0200
Subject: [PATCH 55/69] (BIDS-2859) matches 100% of the last info I got about
 the API

---
 .../notifications/SubscriptionDialog.vue      | 123 +++++++++---------
 .../playground/PlaygroundDialog.vue           |   4 +-
 frontend/types/customFetch.ts                 |   4 +-
 3 files changed, 69 insertions(+), 62 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 8d6b8a56c..5e045e4cb 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -7,6 +7,7 @@ import { API_PATH } from '~/types/customFetch'
 
 interface Props {
   dashboardId: number,
+  groupId: number,
   validatorSub?: NotificationSettingsValidatorDashboard,
   accountSub?: NotificationSettingsAccountDashboard
 }
@@ -18,12 +19,11 @@ type AllOptions = NotificationSettingsValidatorDashboard & NotificationSettingsA
 
 const TimeoutForSavingFailures = 2300 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost your preferences half a minute ago, we hope you remember them and do not mind going back to that dialog"
 const MinimumTimeBetweenAPIcalls = 700 // ms. Any change ends-up saved anyway, so we can prevent useless requests with a delay larger than usual.
-const DefaultValues = new Map<keyof AllOptions, DefinedAPIentry>([
-  ['group_offline_threshold', -10], // means "10% and unchecked"
-  ['is_real_time_mode_enabled', false],
-  ['is_erc20_token_transfers_subscribed', false],
-  ['erc20_token_transfers_threshold', NaN], // means "empty"
-  ['subscribed_chain_ids', []]
+const DefaultValues = new Map<keyof AllOptions, InternalEntry>([
+  ['group_offline_threshold', { type: 'percent', check: false, num: 10 }],
+  ['is_real_time_mode_enabled', { type: 'binary', check: false }],
+  ['erc20_token_transfers_threshold', { type: 'amount', check: false, num: NaN }], // NaN will leave the input field empty (the user sees the placeholder)
+  ['subscribed_chain_ids', { type: 'networks', networks: [] }]
 ])
 const orderOfTheRowsInValidatorModal: Array<keyof NotificationSettingsValidatorDashboard | 'ALL'> = [
   'is_validator_offline_subscribed', 'group_offline_threshold', 'is_attestations_missed_subscribed', 'is_block_proposal_subscribed', 'is_upcoming_block_proposal_subscribed',
@@ -33,15 +33,15 @@ const orderOfTheRowsInAccountModal: Array<keyof NotificationSettingsAccountDashb
   'is_incoming_transactions_subscribed', 'is_outgoing_transactions_subscribed', 'erc20_token_transfers_threshold', 'is_erc721_token_transfers_subscribed',
   'is_erc1155_token_transfers_subscribed', 'ALL', 'subscribed_chain_ids', 'is_ignore_spam_transactions_enabled'
 ]
+const RowsWhoseCheckBoxIsInASeparateField = new Map<keyof AllOptions, keyof AllOptions>([
+  ['erc20_token_transfers_threshold', 'is_erc20_token_transfers_subscribed']
+])
 const OptionsOutsideTheScopeOfCheckboxall: Array<keyof(AllOptions)> =
   ['subscribed_chain_ids', 'is_ignore_spam_transactions_enabled'] // options that are not in the group of the all-checkbox
 const OptionsNeedingPremium: Array<keyof AllOptions> =
   ['group_offline_threshold', 'is_real_time_mode_enabled']
 const RowsThatExpectAPercentage: Array<keyof AllOptions> =
   ['group_offline_threshold']
-const RowsWhoseCheckBoxIsInASeparateField = new Map<keyof AllOptions, keyof AllOptions>([
-  ['erc20_token_transfers_threshold', 'is_erc20_token_transfers_subscribed']
-])
 
 // #### END OF DIALOG SETTINGS ####
 
@@ -86,45 +86,6 @@ watch(props, (props) => {
   }
 }, { immediate: true })
 
-function convertAPIentryToInternalEntry (apiData: AllOptions, apiKey: keyof AllOptions) : InternalEntry {
-  let srcValue = apiData[apiKey]
-  if (srcValue === undefined || srcValue === null || (typeof srcValue === 'number' && isNaN(srcValue)) || (Array.isArray(srcValue) && !srcValue.length)) {
-    if (DefaultValues.has(apiKey)) {
-      srcValue = DefaultValues.get(apiKey)!
-    } else {
-      warn('Entry `', apiKey, '`is missing in the API data and we do not have a default value for it.')
-      return {} as InternalEntry
-    }
-    dataNonce++ // this will trigger a call to the API to save the settings
-  }
-  if (Array.isArray(srcValue)) {
-    return {
-      type: 'networks',
-      networks: [...srcValue]
-    }
-  }
-  switch (typeof srcValue) {
-    case 'boolean' :
-      return {
-        type: 'binary',
-        check: srcValue
-      }
-    case 'number' : {
-      let check: boolean
-      if (RowsWhoseCheckBoxIsInASeparateField.has(apiKey)) {
-        check = convertAPIentryToInternalEntry(apiData, RowsWhoseCheckBoxIsInASeparateField.get(apiKey)!).check!
-      } else {
-        check = srcValue > 0
-      }
-      return {
-        type: (apiKey in RowsThatExpectAPercentage) ? 'percent' : 'amount',
-        check,
-        num: Math.abs(srcValue)
-      }
-    }
-  }
-}
-
 function checkboxAllHasBeenClicked (checked: boolean) : void {
   for (const k of Object.keys(modifiableOptions.value)) {
     const key = k as keyof ModifiableOptions
@@ -132,7 +93,6 @@ function checkboxAllHasBeenClicked (checked: boolean) : void {
       modifiableOptions.value[key].check = checked
     }
   }
-  // no need to call the API, the modifications that we did in `modifiableOptions.value` will trigger its watcher (that calls the API)
 }
 
 watch(modifiableOptions, (options) => {
@@ -150,29 +110,71 @@ watch(modifiableOptions, (options) => {
   dataNonce++
 }, { immediate: true, deep: true })
 
+/** reads data that our parent received from the API and converts it to our internal format */
+function convertAPIentryToInternalEntry (apiData: AllOptions, apiKey: keyof AllOptions) : InternalEntry {
+  const srcValue = apiData[apiKey]
+  const type = getOptionType(apiData, apiKey)
+  if (!isOptionValueKnownInDB(srcValue) || (!isOptionActivatedInDB(apiData, apiKey) && type !== 'binary')) {
+    if (DefaultValues.has(apiKey)) {
+      return { ...DefaultValues.get(apiKey)! }
+    } else {
+      warn('A value for entry `' + apiKey + '` is not in the the database and the front-end does not have a default value for it.')
+      return {} as InternalEntry
+    }
+  }
+  switch (type) {
+    case 'networks' :
+      return {
+        type,
+        networks: [...srcValue as number[]]
+      }
+    case 'binary' :
+      return {
+        type,
+        check: srcValue as boolean
+      }
+    case 'percent' :
+      return {
+        type,
+        check: true, // the `false` case has been tackled at the beginning of the function, we returned a default value
+        num: srcValue as number * 100
+      }
+    case 'amount' :
+      return {
+        type,
+        check: true, // the `false` case has been tackled at the beginning of the function, we returned a default value
+        num: srcValue as number
+      }
+  }
+}
+
+/** converts our internal data to the format understood by the API and sends it */
 async function sendUserPreferencesToAPI () {
-  // first we convert our internal structures to the format of the API
-  const output = {} as Record<string, APIentry>
+  // conversion
+  const output = {} as Record<string, DefinedAPIentry>
   for (const k in modifiableOptions.value) {
     const key = k as keyof ModifiableOptions
     const value = toRaw(modifiableOptions.value[key])
     switch (value.type) {
       case 'binary' :
-        output[key] = value.check
+        output[key] = value.check!
         break
-      case 'amount' :
       case 'percent' :
-        output[key] = isNaN(value.num!) ? null : (value.check ? value.num : -value.num!)
+      case 'amount' : {
+        const num = (value.type === 'percent') ? value.num! / 100 : value.num!
+        const activate = !isNaN(num) && value.check!
+        output[key] = activate ? num : 0
         if (RowsWhoseCheckBoxIsInASeparateField.has(key)) {
-          output[RowsWhoseCheckBoxIsInASeparateField.get(key)!] = !isNaN(value.num!) && value.check
+          output[RowsWhoseCheckBoxIsInASeparateField.get(key)!] = activate
         }
         break
+      }
       case 'networks' :
-        output[key] = value.networks
+        output[key] = value.networks!
         break
     }
   }
-  // now we send the data
+  // sending
   let response: ApiErrorResponse | undefined
   try {
     setTimeout(TimeoutForSavingFailures)
@@ -181,7 +183,8 @@ async function sendUserPreferencesToAPI () {
       body: output
     }, {
       for: props.value!.accountSub ? 'accounts' : 'validators',
-      dashboardKey: String(props.value?.dashboardId)
+      dashboardKey: String(props.value?.dashboardId),
+      groupId: String(props.value?.groupId)
     })
   } catch {
     response = undefined
@@ -195,6 +198,10 @@ function closeDialog () : void {
   dialogRef?.value.close()
 }
 
+const isOptionValueKnownInDB = (value: APIentry) => value !== undefined && value !== null && (typeof value !== 'number' || !isNaN(value)) && (!Array.isArray(value) || !!value.length)
+const isOptionActivatedInDB = (apiData: AllOptions, key: keyof AllOptions) => RowsWhoseCheckBoxIsInASeparateField.has(key) ? !!apiData[RowsWhoseCheckBoxIsInASeparateField.get(key)!] : !!apiData[key]
+const getOptionType = (apiData: AllOptions, key: keyof AllOptions) => Array.isArray(apiData[key]) ? 'networks' : (typeof apiData[key] === 'boolean' ? 'binary' : (RowsThatExpectAPercentage.includes(key) ? 'percent' : 'amount'))
+
 const isOptionAvailable = (key: keyof AllOptions) => user.value?.premium_perks.ad_free || !OptionsNeedingPremium.includes(key)
 </script>
 
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 0da936d70..29d8d4d4a 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -56,10 +56,10 @@ function openSubscriptions (props: any) {
 
 <template>
   <div class="container">
-    <Button @click="openSubscriptions({dashboardId:1, validatorSub})">
+    <Button @click="openSubscriptions({dashboardId:1, groupId:1, validatorSub})">
       Subscribe to notifications for your validators
     </Button>
-    <Button @click="openSubscriptions({dashboardId:1, accountSub})">
+    <Button @click="openSubscriptions({dashboardId:1, groupId:1, accountSub})">
       Subscribe to notifications for your accounts
     </Button>
     <br>
diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts
index 4cc8b2413..815e813cf 100644
--- a/frontend/types/customFetch.ts
+++ b/frontend/types/customFetch.ts
@@ -296,8 +296,8 @@ export const mapping: Record<string, MappingData> = {
     mock: false
   },
   [API_PATH.SETTINGS_DASHBOARDS]: {
-    path: '/settings/dashboards/{for}/{dashboard_key}',
-    getPath: values => `/settings/dashboards/${values?.for}/${values?.dashboardKey}`,
+    path: '/settings/dashboards/{for}/{dashboard_key}/groups/{group_id}',
+    getPath: values => `/settings/dashboards/${values?.for}/${values?.dashboardKey}/groups/${values?.groupId}`,
     method: 'POST',
     mock: true
   }

From 310165c800125d75634cf5af881f468775ec3767 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 17 Jul 2024 16:06:44 +0200
Subject: [PATCH 56/69] (BIDS-2859) small improvement: when the API records
 separately the number and the activation state, we read/save the number even
 if the option is deactivated

---
 .../notifications/SubscriptionDialog.vue         | 16 ++++++++++------
 .../components/playground/PlaygroundDialog.vue   |  4 ++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 5e045e4cb..c1f3fe78c 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -114,7 +114,7 @@ watch(modifiableOptions, (options) => {
 function convertAPIentryToInternalEntry (apiData: AllOptions, apiKey: keyof AllOptions) : InternalEntry {
   const srcValue = apiData[apiKey]
   const type = getOptionType(apiData, apiKey)
-  if (!isOptionValueKnownInDB(srcValue) || (!isOptionActivatedInDB(apiData, apiKey) && type !== 'binary')) {
+  if (!isOptionValueKnownInDB(apiData, apiKey)) {
     if (DefaultValues.has(apiKey)) {
       return { ...DefaultValues.get(apiKey)! }
     } else {
@@ -136,13 +136,13 @@ function convertAPIentryToInternalEntry (apiData: AllOptions, apiKey: keyof AllO
     case 'percent' :
       return {
         type,
-        check: true, // the `false` case has been tackled at the beginning of the function, we returned a default value
+        check: isOptionActivatedInDB(apiData, apiKey),
         num: srcValue as number * 100
       }
     case 'amount' :
       return {
         type,
-        check: true, // the `false` case has been tackled at the beginning of the function, we returned a default value
+        check: isOptionActivatedInDB(apiData, apiKey),
         num: srcValue as number
       }
   }
@@ -163,9 +163,11 @@ async function sendUserPreferencesToAPI () {
       case 'amount' : {
         const num = (value.type === 'percent') ? value.num! / 100 : value.num!
         const activate = !isNaN(num) && value.check!
-        output[key] = activate ? num : 0
         if (RowsWhoseCheckBoxIsInASeparateField.has(key)) {
+          output[key] = !isNaN(num) ? num : 0
           output[RowsWhoseCheckBoxIsInASeparateField.get(key)!] = activate
+        } else {
+          output[key] = activate ? num : 0
         }
         break
       }
@@ -198,10 +200,12 @@ function closeDialog () : void {
   dialogRef?.value.close()
 }
 
-const isOptionValueKnownInDB = (value: APIentry) => value !== undefined && value !== null && (typeof value !== 'number' || !isNaN(value)) && (!Array.isArray(value) || !!value.length)
+const isOptionValueKnownInDB = (apiData: AllOptions, key: keyof AllOptions) =>
+  apiData[key] !== undefined && apiData[key] !== null &&
+  (typeof apiData[key] !== 'number' || apiData[key] as number > 0 || isOptionActivatedInDB(apiData, key)) &&
+  (!Array.isArray(apiData[key]) || !!(apiData[key] as Array<any>).length)
 const isOptionActivatedInDB = (apiData: AllOptions, key: keyof AllOptions) => RowsWhoseCheckBoxIsInASeparateField.has(key) ? !!apiData[RowsWhoseCheckBoxIsInASeparateField.get(key)!] : !!apiData[key]
 const getOptionType = (apiData: AllOptions, key: keyof AllOptions) => Array.isArray(apiData[key]) ? 'networks' : (typeof apiData[key] === 'boolean' ? 'binary' : (RowsThatExpectAPercentage.includes(key) ? 'percent' : 'amount'))
-
 const isOptionAvailable = (key: keyof AllOptions) => user.value?.premium_perks.ad_free || !OptionsNeedingPremium.includes(key)
 </script>
 
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 29d8d4d4a..8c41bdd4b 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -25,7 +25,7 @@ const openQuestion = (yesLabel?: string, noLabel?: string) => {
 
 const validatorSub: NotificationSettingsValidatorDashboard = {
   is_validator_offline_subscribed: true,
-  group_offline_threshold: -20, // means "20% and deselected/unchecked"
+  group_offline_threshold: 0, // means "deactivated/unchecked"
   is_attestations_missed_subscribed: true,
   is_block_proposal_subscribed: true,
   is_upcoming_block_proposal_subscribed: false,
@@ -39,7 +39,7 @@ const accountSub: NotificationSettingsAccountDashboard = {
   is_incoming_transactions_subscribed: true,
   is_outgoing_transactions_subscribed: true,
   is_erc20_token_transfers_subscribed: false,
-  erc20_token_transfers_threshold: NaN, // means "not in the database yet" (will leave the input field empty with a placeholder)
+  erc20_token_transfers_threshold: 90,
   is_erc721_token_transfers_subscribed: true,
   is_erc1155_token_transfers_subscribed: false,
   subscribed_chain_ids: [17000],

From f7f98fc5408d2634ecbcc4209091f7d0f96c479c Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Wed, 17 Jul 2024 16:10:58 +0200
Subject: [PATCH 57/69] (BIDS-2859) detail

---
 frontend/components/playground/PlaygroundDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 8c41bdd4b..8399eec8c 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -39,7 +39,7 @@ const accountSub: NotificationSettingsAccountDashboard = {
   is_incoming_transactions_subscribed: true,
   is_outgoing_transactions_subscribed: true,
   is_erc20_token_transfers_subscribed: false,
-  erc20_token_transfers_threshold: 90,
+  erc20_token_transfers_threshold: 0,
   is_erc721_token_transfers_subscribed: true,
   is_erc1155_token_transfers_subscribed: false,
   subscribed_chain_ids: [17000],

From 8bfb0254d83d96b5bc742023cc81f51dc4425c60 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 22 Jul 2024 11:15:37 +0200
Subject: [PATCH 58/69] (BIDS-2859) new endpoint to save settings

---
 .../components/notifications/SubscriptionDialog.vue    |  4 ++--
 frontend/types/customFetch.ts                          | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index c1f3fe78c..0fe0b1022 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -180,11 +180,11 @@ async function sendUserPreferencesToAPI () {
   let response: ApiErrorResponse | undefined
   try {
     setTimeout(TimeoutForSavingFailures)
-    response = await fetch<ApiErrorResponse>(API_PATH.SETTINGS_DASHBOARDS, {
+    response = await fetch<ApiErrorResponse>(API_PATH.SAVE_DASHBOARDS_SETTINGS, {
       method: 'POST',
       body: output
     }, {
-      for: props.value!.accountSub ? 'accounts' : 'validators',
+      for: props.value!.accountSub ? 'account' : 'validator',
       dashboardKey: String(props.value?.dashboardId),
       groupId: String(props.value?.groupId)
     })
diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts
index 815e813cf..a4fdb9419 100644
--- a/frontend/types/customFetch.ts
+++ b/frontend/types/customFetch.ts
@@ -46,7 +46,7 @@ export enum API_PATH {
   PRODUCT_SUMMARY = '/productSummary',
   STRIPE_CUSTOMER_PORTAL = '/stripe/customer-portal',
   STRIPE_CHECKOUT_SESSION = '/stripe/checkout-session',
-  SETTINGS_DASHBOARDS = '/settings-dashboards'
+  SAVE_DASHBOARDS_SETTINGS = '/settings-dashboards'
 }
 
 export type PathValues = Record<string, string | number>
@@ -295,10 +295,10 @@ export const mapping: Record<string, MappingData> = {
     method: 'POST',
     mock: false
   },
-  [API_PATH.SETTINGS_DASHBOARDS]: {
-    path: '/settings/dashboards/{for}/{dashboard_key}/groups/{group_id}',
-    getPath: values => `/settings/dashboards/${values?.for}/${values?.dashboardKey}/groups/${values?.groupId}`,
+  [API_PATH.SAVE_DASHBOARDS_SETTINGS]: {
+    path: '/users/me/notifications/settings/{for}-dashboards/{dashboard_key}/groups/{group_id}',
+    getPath: values => `/users/me/notifications/settings/${values?.for}-dashboards/${values?.dashboardKey}/groups/${values?.groupId}`,
     method: 'POST',
-    mock: true
+    mock: false
   }
 }

From 05b1b8355c3fa6d81d54743f9e62ad0b2b4c08b8 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 23 Jul 2024 11:39:08 +0200
Subject: [PATCH 59/69] (BIDS-2859) logic to save/debounce is in the table +
 now the table obtains its data from the actual API

---
 .../notifications/SubscriptionDialog.vue      | 107 +++++++----------
 .../NotificationsManagementDashboards.vue     | 113 +++++++++++++++---
 .../playground/PlaygroundDialog.vue           |  12 +-
 .../useNotificationsManagementDashboards.ts   |   6 +-
 frontend/i18n/en.json                         |   5 +-
 frontend/types/customFetch.ts                 |   8 +-
 frontend/types/notifications/management.ts    |  18 ---
 .../types/notifications/subscriptionModal.ts  |  25 ----
 8 files changed, 160 insertions(+), 134 deletions(-)
 delete mode 100644 frontend/types/notifications/management.ts

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 0fe0b1022..cb439d8d8 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -1,28 +1,25 @@
 <script setup lang="ts">
 import { warn } from 'vue'
-import type { NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard, InternalEntry, APIentry } from '~/types/notifications/subscriptionModal'
+import type { InternalEntry, APIentry } from '~/types/notifications/subscriptionModal'
+import type { NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard } from '~/types/api/notifications'
 import { ChainFamily } from '~/types/network'
-import type { ApiErrorResponse } from '~/types/api/common'
-import { API_PATH } from '~/types/customFetch'
+import type { DashboardType } from '~/types/dashboard'
+
+type AllOptions = NotificationSettingsValidatorDashboard & NotificationSettingsAccountDashboard
+type DefinedAPIentry = Exclude<APIentry, null|undefined>
 
 interface Props {
-  dashboardId: number,
-  groupId: number,
-  validatorSub?: NotificationSettingsValidatorDashboard,
-  accountSub?: NotificationSettingsAccountDashboard
+  dashboardType: DashboardType,
+  initialSettings: AllOptions,
+  saveUserSettings: (settings: Record<keyof AllOptions, DefinedAPIentry>) => void
 }
 
-type DefinedAPIentry = Exclude<APIentry, null|undefined>
-type AllOptions = NotificationSettingsValidatorDashboard & NotificationSettingsAccountDashboard
-
 // #### DIALOG SETTINGS ####
 
-const TimeoutForSavingFailures = 2300 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost your preferences half a minute ago, we hope you remember them and do not mind going back to that dialog"
-const MinimumTimeBetweenAPIcalls = 700 // ms. Any change ends-up saved anyway, so we can prevent useless requests with a delay larger than usual.
 const DefaultValues = new Map<keyof AllOptions, InternalEntry>([
   ['group_offline_threshold', { type: 'percent', check: false, num: 10 }],
   ['is_real_time_mode_enabled', { type: 'binary', check: false }],
-  ['erc20_token_transfers_threshold', { type: 'amount', check: false, num: NaN }], // NaN will leave the input field empty (the user sees the placeholder)
+  ['erc20_token_transfers_value_threshold', { type: 'amount', check: false, num: NaN }], // NaN will leave the input field empty (the user sees the placeholder)
   ['subscribed_chain_ids', { type: 'networks', networks: [] }]
 ])
 const orderOfTheRowsInValidatorModal: Array<keyof NotificationSettingsValidatorDashboard | 'ALL'> = [
@@ -30,11 +27,11 @@ const orderOfTheRowsInValidatorModal: Array<keyof NotificationSettingsValidatorD
   'is_sync_subscribed', 'is_withdrawal_processed_subscribed', 'is_slashed_subscribed', 'is_real_time_mode_enabled', 'ALL'
 ]
 const orderOfTheRowsInAccountModal: Array<keyof NotificationSettingsAccountDashboard | 'ALL'> = [
-  'is_incoming_transactions_subscribed', 'is_outgoing_transactions_subscribed', 'erc20_token_transfers_threshold', 'is_erc721_token_transfers_subscribed',
+  'is_incoming_transactions_subscribed', 'is_outgoing_transactions_subscribed', 'erc20_token_transfers_value_threshold', 'is_erc721_token_transfers_subscribed',
   'is_erc1155_token_transfers_subscribed', 'ALL', 'subscribed_chain_ids', 'is_ignore_spam_transactions_enabled'
 ]
 const RowsWhoseCheckBoxIsInASeparateField = new Map<keyof AllOptions, keyof AllOptions>([
-  ['erc20_token_transfers_threshold', 'is_erc20_token_transfers_subscribed']
+  ['erc20_token_transfers_value_threshold', 'is_erc20_token_transfers_subscribed']
 ])
 const OptionsOutsideTheScopeOfCheckboxall: Array<keyof(AllOptions)> =
   ['subscribed_chain_ids', 'is_ignore_spam_transactions_enabled'] // options that are not in the group of the all-checkbox
@@ -49,40 +46,39 @@ type ModifiableOptions = Record<keyof AllOptions, InternalEntry>
 
 const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
 const { t } = useI18n()
-const { fetch, setTimeout } = useCustomFetch()
-const toast = useBcToast()
 const { networkInfo } = useNetworkStore()
 const { user } = useUserStore()
 
 const tPath = ref('')
 let orderOfTheRows: typeof orderOfTheRowsInValidatorModal | typeof orderOfTheRowsInAccountModal = []
+let originalSettings: AllOptions
 const modifiableOptions = ref({} as ModifiableOptions)
 const checkboxAll = ref<InternalEntry>({ type: 'binary', check: false })
 
-const debouncer = useDebounceValue<number>(0, MinimumTimeBetweenAPIcalls)
-watch(debouncer.value, sendUserPreferencesToAPI)
-
 let dataNonce = 0 // used by the watcher of `modifiableOptions` to know when it is unnecessary to send changes to the API (it doesn't send if the nonce is 0)
 
 watch(props, (props) => {
-  if (!props || (!props.validatorSub && !props.accountSub)) {
+  if (!props || !props.initialSettings) {
     return
   }
-  let originalSettings = {} as AllOptions
-  if (props.validatorSub) {
-    tPath.value = 'notifications.subscriptions.validators.'
-    originalSettings = toRaw(props.validatorSub) as AllOptions
-    orderOfTheRows = orderOfTheRowsInValidatorModal
-  } else {
-    tPath.value = 'notifications.subscriptions.accounts.'
-    originalSettings = toRaw(props.accountSub!) as AllOptions
-    orderOfTheRows = orderOfTheRowsInAccountModal
+  originalSettings = toRaw(props.initialSettings)
+  switch (props.dashboardType) {
+    case 'validator' :
+      tPath.value = 'notifications.subscriptions.validators.'
+      orderOfTheRows = orderOfTheRowsInValidatorModal
+      break
+    case 'notifications' :
+      tPath.value = 'notifications.subscriptions.accounts.'
+      orderOfTheRows = orderOfTheRowsInAccountModal
+      break
+    default :
+      return
   }
   modifiableOptions.value = {} as ModifiableOptions
   dataNonce = 0
   for (const key of orderOfTheRows) {
     if (key === 'ALL') { continue }
-    modifiableOptions.value[key] = convertAPIentryToInternalEntry(originalSettings, key)
+    modifiableOptions.value[key] = convertAPIentryToInternalEntry(key)
   }
 }, { immediate: true })
 
@@ -104,17 +100,16 @@ watch(modifiableOptions, (options) => {
     }
   }
   if (dataNonce > 0) {
-    // it will call `sendUserPreferencesToAPI()`
-    debouncer.bounce(dataNonce, false, true)
+    sendUserPreferencesToAPI()
   }
   dataNonce++
 }, { immediate: true, deep: true })
 
 /** reads data that our parent received from the API and converts it to our internal format */
-function convertAPIentryToInternalEntry (apiData: AllOptions, apiKey: keyof AllOptions) : InternalEntry {
-  const srcValue = apiData[apiKey]
-  const type = getOptionType(apiData, apiKey)
-  if (!isOptionValueKnownInDB(apiData, apiKey)) {
+function convertAPIentryToInternalEntry (apiKey: keyof AllOptions) : InternalEntry {
+  const srcValue = originalSettings[apiKey]
+  const type = getOptionType(apiKey)
+  if (!isOptionValueKnownInDB(apiKey)) {
     if (DefaultValues.has(apiKey)) {
       return { ...DefaultValues.get(apiKey)! }
     } else {
@@ -136,22 +131,22 @@ function convertAPIentryToInternalEntry (apiData: AllOptions, apiKey: keyof AllO
     case 'percent' :
       return {
         type,
-        check: isOptionActivatedInDB(apiData, apiKey),
+        check: isOptionActivatedInDB(apiKey),
         num: srcValue as number * 100
       }
     case 'amount' :
       return {
         type,
-        check: isOptionActivatedInDB(apiData, apiKey),
+        check: isOptionActivatedInDB(apiKey),
         num: srcValue as number
       }
   }
 }
 
 /** converts our internal data to the format understood by the API and sends it */
-async function sendUserPreferencesToAPI () {
+function sendUserPreferencesToAPI () {
   // conversion
-  const output = {} as Record<string, DefinedAPIentry>
+  const output = {} as Record<keyof AllOptions, DefinedAPIentry>
   for (const k in modifiableOptions.value) {
     const key = k as keyof ModifiableOptions
     const value = toRaw(modifiableOptions.value[key])
@@ -177,35 +172,19 @@ async function sendUserPreferencesToAPI () {
     }
   }
   // sending
-  let response: ApiErrorResponse | undefined
-  try {
-    setTimeout(TimeoutForSavingFailures)
-    response = await fetch<ApiErrorResponse>(API_PATH.SAVE_DASHBOARDS_SETTINGS, {
-      method: 'POST',
-      body: output
-    }, {
-      for: props.value!.accountSub ? 'account' : 'validator',
-      dashboardKey: String(props.value?.dashboardId),
-      groupId: String(props.value?.groupId)
-    })
-  } catch {
-    response = undefined
-  }
-  if (!response || response.error) {
-    toast.showError({ summary: t('notifications.subscriptions.error_title'), group: t('notifications.subscriptions.error_group'), detail: t('notifications.subscriptions.error_message') })
-  }
+  props.value?.saveUserSettings(output)
 }
 
 function closeDialog () : void {
   dialogRef?.value.close()
 }
 
-const isOptionValueKnownInDB = (apiData: AllOptions, key: keyof AllOptions) =>
-  apiData[key] !== undefined && apiData[key] !== null &&
-  (typeof apiData[key] !== 'number' || apiData[key] as number > 0 || isOptionActivatedInDB(apiData, key)) &&
-  (!Array.isArray(apiData[key]) || !!(apiData[key] as Array<any>).length)
-const isOptionActivatedInDB = (apiData: AllOptions, key: keyof AllOptions) => RowsWhoseCheckBoxIsInASeparateField.has(key) ? !!apiData[RowsWhoseCheckBoxIsInASeparateField.get(key)!] : !!apiData[key]
-const getOptionType = (apiData: AllOptions, key: keyof AllOptions) => Array.isArray(apiData[key]) ? 'networks' : (typeof apiData[key] === 'boolean' ? 'binary' : (RowsThatExpectAPercentage.includes(key) ? 'percent' : 'amount'))
+const isOptionValueKnownInDB = (key: keyof AllOptions) =>
+  originalSettings[key] !== undefined && originalSettings[key] !== null &&
+  (typeof originalSettings[key] !== 'number' || originalSettings[key] as number > 0 || isOptionActivatedInDB(key)) &&
+  (!Array.isArray(originalSettings[key]) || !!(originalSettings[key] as Array<any>).length)
+const isOptionActivatedInDB = (key: keyof AllOptions) => RowsWhoseCheckBoxIsInASeparateField.has(key) ? !!originalSettings[RowsWhoseCheckBoxIsInASeparateField.get(key)!] : !!originalSettings[key]
+const getOptionType = (key: keyof AllOptions) => Array.isArray(originalSettings[key]) ? 'networks' : (typeof originalSettings[key] === 'boolean' ? 'binary' : (RowsThatExpectAPercentage.includes(key) ? 'percent' : 'amount'))
 const isOptionAvailable = (key: keyof AllOptions) => user.value?.premium_perks.ad_free || !OptionsNeedingPremium.includes(key)
 </script>
 
diff --git a/frontend/components/notifications/management/NotificationsManagementDashboards.vue b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
index 5416f6065..b800e484c 100644
--- a/frontend/components/notifications/management/NotificationsManagementDashboards.vue
+++ b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
@@ -6,17 +6,54 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import { getGroupLabel } from '~/utils/dashboard/group'
-import { type NotificationsManagementDashboardRow } from '~/types/notifications/management'
+import { API_PATH } from '~/types/customFetch'
+import type { ApiPagingResponse, ApiErrorResponse } from '~/types/api/common'
+import type { NotificationSettingsDashboardsTableRow, NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard } from '~/types/api/notifications'
 import type { DashboardType } from '~/types/dashboard'
 import { useNotificationsManagementDashboards } from '~/composables/notifications/useNotificationsManagementDashboards'
+import { NotificationsSubscriptionDialog } from '#components'
 
-const { t: $t } = useI18n()
+type AllOptions = NotificationSettingsValidatorDashboard & NotificationSettingsAccountDashboard
 
-const { dashboardGroups, query, cursor, pageSize, isLoading, onSort, setCursor, setPageSize, setSearch } = useNotificationsManagementDashboards()
+interface WrappedRow extends NotificationSettingsDashboardsTableRow {
+  dashboard_type: DashboardType,
+  dashboard_name: string,
+  subscriptions: string[],
+  identifier: string
+}
 
-const { groups } = useValidatorDashboardGroups()
+interface SettingsWithContext {
+  row: WrappedRow,
+  settings: AllOptions
+}
+
+// #### SETTINGS FOR THE SUBSCRIPTION DIALOGS ####
 
+const KeysBelongingToWebhookDialog : Array<keyof AllOptions> = [
+  'webhook_url', 'is_webhook_discord_enabled'
+]
+const KeysIndicatingASubscription : Array<keyof AllOptions> = [
+  'is_validator_offline_subscribed', 'group_offline_threshold', 'is_attestations_missed_subscribed', 'is_block_proposal_subscribed',
+  'is_upcoming_block_proposal_subscribed', 'is_sync_subscribed', 'is_withdrawal_processed_subscribed', 'is_slashed_subscribed', 'is_real_time_mode_enabled',
+  'is_incoming_transactions_subscribed', 'is_outgoing_transactions_subscribed', 'is_erc20_token_transfers_subscribed', 'is_erc721_token_transfers_subscribed',
+  'is_erc1155_token_transfers_subscribed', 'subscribed_chain_ids', 'is_ignore_spam_transactions_enabled'
+]
+const TimeoutForSavingFailures = 2300 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost your preferences half a minute ago, we hope you remember them and do not mind going back to that dialog"
+const MinimumTimeBetweenAPIcalls = 700 // ms. Any change ends-up saved anyway, so we can prevent useless requests with a delay larger than usual.
+
+// #### END OF SETTINGS FOR THE SUBSCRIPTION DIALOGS ####
+
+const { fetch, setTimeout } = useCustomFetch()
+const toast = useBcToast()
+const { t: $t } = useI18n()
+const dialog = useDialog()
+const { dashboardGroups, query, cursor, pageSize, isLoading, onSort, setCursor, setPageSize, setSearch } = useNotificationsManagementDashboards()
+const { groups } = useValidatorDashboardGroups()
 const { width } = useWindowSize()
+
+const debouncer = useDebounceValue<SettingsWithContext>({} as SettingsWithContext, MinimumTimeBetweenAPIcalls)
+watch(debouncer.value.value as readonly SettingsWithContext, saveUserSettings)
+
 const colsVisible = computed(() => {
   return {
     networks: width.value > 1101,
@@ -29,23 +66,49 @@ const groupNameLabel = (groupId?: number) => {
   return getGroupLabel($t, groupId, groups.value, 'Σ')
 }
 
-const wrappedDashboardGroups = computed(() => {
+const wrappedDashboardGroups: ComputedRef<ApiPagingResponse<WrappedRow>|undefined> = computed(() => {
   if (!dashboardGroups.value) {
     return
   }
   return {
     paging: dashboardGroups.value.paging,
-    data: dashboardGroups.value.data.map(d => ({ ...d, identifier: `${d.dashboard_type}-${d.dashboard_id}-${d.group_id}` }))
+    data: dashboardGroups.value.data.map(d => ({
+      ...d,
+      dashboard_type: dashboardType(d.is_account_dashboard),
+      dashboard_name: 'TODO: get the name of the dashboard',
+      subscriptions: subscriptionList(d),
+      identifier: `${dashboardType(d.is_account_dashboard)}-${d.dashboard_id}-${d.group_id}`
+    }))
+  }
+
+  function dashboardType (isAccountDashboard: boolean) : DashboardType {
+    return isAccountDashboard ? 'account' : 'validator'
+  }
+
+  function subscriptionList (row: NotificationSettingsDashboardsTableRow) : string[] {
+    const result: string[] = []
+    for (const key of KeysIndicatingASubscription) {
+      if ((row.settings as AllOptions)[key]) {
+        result.push($t('notifications.subscriptions.' + dashboardType(row.is_account_dashboard) + 's.' + key))
+      }
+    }
+    return result
   }
 })
 
-const onEdit = (col: 'delete' | 'subscriptions' | 'webhook' | 'networks', row: NotificationsManagementDashboardRow) => {
+const onEdit = (col: 'delete' | 'subscriptions' | 'webhook' | 'networks', row: WrappedRow) => {
+  const data = {
+    dashboardType: row.dashboard_type,
+    subscriptions: row.settings,
+    saveUserSettings: (settings: AllOptions) => debouncer.bounce({ row, settings }, false, true)
+  }
   switch (col) {
     case 'subscriptions':
-      alert('TODO: edit subscriptions' + row.group_id)
+      dialog.open(NotificationsSubscriptionDialog, { data })
       break
     case 'webhook':
-      alert('TODO: edit webhook' + row.group_id)
+      /* TODO: replace `WebhookDialog` with the name of Marcel's component
+      dialog.open(WebhookDialog, { data }) */
       break
     case 'networks':
       alert('TODO: edit networks' + row.group_id)
@@ -56,6 +119,26 @@ const onEdit = (col: 'delete' | 'subscriptions' | 'webhook' | 'networks', row: N
   }
 }
 
+async function saveUserSettings (settingsAndContext: SettingsWithContext) {
+  let response: ApiErrorResponse | undefined
+  try {
+    setTimeout(TimeoutForSavingFailures)
+    response = await fetch<ApiErrorResponse>(API_PATH.SAVE_DASHBOARDS_SETTINGS, {
+      method: 'PUT',
+      body: { ...settingsAndContext.row.settings, ...settingsAndContext.settings }
+    }, {
+      for: settingsAndContext.row.dashboard_type,
+      dashboardKey: String(settingsAndContext.row.dashboard_id),
+      groupId: String(settingsAndContext.row.group_id)
+    })
+  } catch {
+    response = undefined
+  }
+  if (!response || response.error) {
+    toast.showError({ summary: $t('notifications.subscriptions.error_title'), group: $t('notifications.subscriptions.error_group'), detail: $t('notifications.subscriptions.error_message') })
+  }
+}
+
 function getTypeIcon (type: DashboardType) {
   if (type === 'validator') {
     return faDesktop
@@ -137,7 +220,7 @@ function getTypeIcon (type: DashboardType) {
           <template #body="slotProps">
             <BcTablePopoutEdit
               :truncate-text="true"
-              :label="slotProps.data.webhook.url"
+              :label="slotProps.data.settings.webhook_url"
               @on-edit="() => onEdit('webhook', slotProps.data)"
             />
           </template>
@@ -152,12 +235,12 @@ function getTypeIcon (type: DashboardType) {
           <template #body="slotProps">
             <BcTablePopoutEdit
               :truncate-text="true"
-              :no-icon="slotProps.data.dashboard_type === 'validator'"
+              :no-icon="!slotProps.data.is_account_dashboard"
               @on-edit="onEdit('networks', slotProps.data)"
             >
               <template #content>
                 <IconNetwork
-                  v-for="chainId in slotProps.data.networks"
+                  v-for="chainId in slotProps.data.chain_ids"
                   :key="chainId"
                   :colored="true"
                   class="network-icon"
@@ -200,7 +283,7 @@ function getTypeIcon (type: DashboardType) {
 
               <BcTablePopoutEdit
                 class="value"
-                :label="slotProps.data.webhook.url"
+                :label="slotProps.data.settings.webhook_url"
                 @on-edit="() => onEdit('webhook', slotProps.data)"
               />
             </div>
@@ -211,13 +294,13 @@ function getTypeIcon (type: DashboardType) {
 
               <BcTablePopoutEdit
                 class="value"
-                :no-icon="slotProps.data.dashboard_type === 'validator'"
+                :no-icon="!slotProps.data.is_account_dashboard"
                 @on-edit="onEdit('networks', slotProps.data)"
               >
                 <template #content>
                   <div class="newtork-row">
                     <IconNetwork
-                      v-for="chainId in slotProps.data.networks"
+                      v-for="chainId in slotProps.data.chain_ids"
                       :key="chainId"
                       :colored="true"
                       class="network-icon"
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 8399eec8c..49d2c2ed0 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { BcDialogConfirm, NotificationsSubscriptionDialog } from '#components'
-import type { NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard } from '~/types/notifications/subscriptionModal'
+import type { NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard } from '~/types/api/notifications'
 
 const dialog = useDialog()
 
@@ -24,6 +24,8 @@ const openQuestion = (yesLabel?: string, noLabel?: string) => {
 }
 
 const validatorSub: NotificationSettingsValidatorDashboard = {
+  webhook_url: 'http://bablabla',
+  is_webhook_discord_enabled: true,
   is_validator_offline_subscribed: true,
   group_offline_threshold: 0, // means "deactivated/unchecked"
   is_attestations_missed_subscribed: true,
@@ -36,10 +38,12 @@ const validatorSub: NotificationSettingsValidatorDashboard = {
 }
 
 const accountSub: NotificationSettingsAccountDashboard = {
+  webhook_url: 'http://bablabla',
+  is_webhook_discord_enabled: true,
   is_incoming_transactions_subscribed: true,
   is_outgoing_transactions_subscribed: true,
   is_erc20_token_transfers_subscribed: false,
-  erc20_token_transfers_threshold: 0,
+  erc20_token_transfers_value_threshold: 0,
   is_erc721_token_transfers_subscribed: true,
   is_erc1155_token_transfers_subscribed: false,
   subscribed_chain_ids: [17000],
@@ -56,10 +60,10 @@ function openSubscriptions (props: any) {
 
 <template>
   <div class="container">
-    <Button @click="openSubscriptions({dashboardId:1, groupId:1, validatorSub})">
+    <Button @click="openSubscriptions({dashboardId:5295, groupId:0, validatorSub})">
       Subscribe to notifications for your validators
     </Button>
-    <Button @click="openSubscriptions({dashboardId:1, groupId:1, accountSub})">
+    <Button @click="openSubscriptions({dashboardId:5295, groupId:0, accountSub})">
       Subscribe to notifications for your accounts
     </Button>
     <br>
diff --git a/frontend/composables/notifications/useNotificationsManagementDashboards.ts b/frontend/composables/notifications/useNotificationsManagementDashboards.ts
index e4ca55e72..a3bef08c3 100644
--- a/frontend/composables/notifications/useNotificationsManagementDashboards.ts
+++ b/frontend/composables/notifications/useNotificationsManagementDashboards.ts
@@ -1,11 +1,11 @@
 import type { TableQueryParams } from '~/types/datatable'
 import { API_PATH } from '~/types/customFetch'
-import type { NotificationsManagementDashboardResponse } from '~/types/notifications/management'
+import type { InternalGetUserNotificationSettingsDashboardsResponse } from '~/types/api/notifications'
 
 export function useNotificationsManagementDashboards () {
   const { fetch } = useCustomFetch()
 
-  const data = ref < NotificationsManagementDashboardResponse>()
+  const data = ref < InternalGetUserNotificationSettingsDashboardsResponse>()
   const { query, pendingQuery, cursor, pageSize, onSort, setCursor, setPageSize, setSearch, setStoredQuery, isStoredQuery } = useTableQuery({ limit: 10, sort: 'dashboard_id:desc' }, 10)
   const isLoading = ref(false)
 
@@ -14,7 +14,7 @@ export function useNotificationsManagementDashboards () {
   async function getDashboardGroups (q?: TableQueryParams) {
     isLoading.value = true
     setStoredQuery(q)
-    const res = await fetch<NotificationsManagementDashboardResponse>(API_PATH.NOTIFICATIONS_MANAGEMENT_DASHBOARD, undefined, undefined, q)
+    const res = await fetch<InternalGetUserNotificationSettingsDashboardsResponse>(API_PATH.GET_NOTIFICATIONS_SETTINGS_DASHBOARD, undefined, undefined, q)
 
     isLoading.value = false
     if (!isStoredQuery(q)) {
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index a6f1bcf1b..e2932a117 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -368,7 +368,10 @@
         "is_outgoing_transactions_subscribed": {
           "option":"Outgoing transactions"
         },
-        "erc20_token_transfers_threshold": {
+        "is_erc20_token_transfers_subscribed": {
+          "option":"ERC20 token transfers"
+        },
+        "erc20_token_transfers_value_threshold": {
           "option":"ERC20 token transfers",
           "placeholder": "value ≥ $0"
         },
diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts
index a4fdb9419..78af2a15c 100644
--- a/frontend/types/customFetch.ts
+++ b/frontend/types/customFetch.ts
@@ -35,7 +35,7 @@ export enum API_PATH {
   DASHBOARD_CL_DEPOSITS_TOTAL = '/dashboard/clDepositsTotal',
   DASHBOARD_OVERVIEW = '/dashboard/overview',
   DASHBOARD_SLOTVIZ = '/dashboard/slotViz',
-  NOTIFICATIONS_MANAGEMENT_DASHBOARD = '/notifications/managementDashboard',
+  GET_NOTIFICATIONS_SETTINGS_DASHBOARD = '/notifications/managementDashboard',
   LATEST_STATE = '/latestState',
   NOTIFICATIONS_DASHBOARDS='/notifications/dashboards',
   REGISTER = '/register',
@@ -231,9 +231,9 @@ export const mapping: Record<string, MappingData> = {
     getPath: values => `/validator-dashboards/${values?.dashboardKey}/slot-viz`,
     mock: false
   },
-  [API_PATH.NOTIFICATIONS_MANAGEMENT_DASHBOARD]: {
-    path: '/notifications/management/dashboard',
-    mock: true
+  [API_PATH.GET_NOTIFICATIONS_SETTINGS_DASHBOARD]: {
+    path: '/users/me/notifications/settings/dashboards',
+    mock: false
   },
   [API_PATH.DASHBOARD_VALIDATOR_EPOCH_DUTY]: {
     path: '/validator-dashboards/{dashboard_id}/duties/{epoch}:',
diff --git a/frontend/types/notifications/management.ts b/frontend/types/notifications/management.ts
deleted file mode 100644
index df6fdcae9..000000000
--- a/frontend/types/notifications/management.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// TODO: replace with real api types, once ready
-
-import type { ApiPagingResponse } from '~/types/api/common'
-import type { DashboardType } from '~/types/dashboard'
-
-export interface NotificationsManagementDashboardRow {
-  group_id: number /* int64 */;
-  dashboard_id: number /* int64 */;
-  dashboard_name: number /* int64 */;
-  dashboard_type: DashboardType;
-  subscriptions: string[];
-  webhook: {
-    url: string;
-    via_discord: boolean;
-  };
-  networks: number[]
-}
-export type NotificationsManagementDashboardResponse = ApiPagingResponse<NotificationsManagementDashboardRow>;
diff --git a/frontend/types/notifications/subscriptionModal.ts b/frontend/types/notifications/subscriptionModal.ts
index ae6dbe0ec..5e2bfea2f 100644
--- a/frontend/types/notifications/subscriptionModal.ts
+++ b/frontend/types/notifications/subscriptionModal.ts
@@ -1,30 +1,5 @@
 import { ChainIDs } from '../network'
 
-// TODO: import from '~/types/api/notifications.ts' once the corresponding PR is corrected and merged https://github.com/gobitfly/beaconchain/pull/573
-export interface NotificationSettingsValidatorDashboard {
-  is_validator_offline_subscribed: boolean;
-  group_offline_threshold: number /* float64 */;
-  is_attestations_missed_subscribed: boolean;
-  is_block_proposal_subscribed: boolean;
-  is_upcoming_block_proposal_subscribed: boolean;
-  is_sync_subscribed: boolean;
-  is_withdrawal_processed_subscribed: boolean;
-  is_slashed_subscribed: boolean;
-  is_real_time_mode_enabled: boolean;
-}
-
-// TODO: import from '~/types/api/notifications.ts' once the corresponding PR is corrected and merged https://github.com/gobitfly/beaconchain/pull/573
-export interface NotificationSettingsAccountDashboard {
-  is_incoming_transactions_subscribed: boolean;
-  is_outgoing_transactions_subscribed: boolean;
-  is_erc20_token_transfers_subscribed: boolean;
-  erc20_token_transfers_threshold: number /* float64 */;
-  is_erc721_token_transfers_subscribed: boolean;
-  is_erc1155_token_transfers_subscribed: boolean;
-  subscribed_chain_ids: number /* uint64 */[];
-  is_ignore_spam_transactions_enabled: boolean;
-}
-
 export interface InternalEntry {
   type: 'binary' | 'amount' | 'percent' | 'networks'
   networks?: ChainIDs[]

From 794f8ffac0fa9b8a8256f98552daa8dd02713d8c Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 23 Jul 2024 12:06:15 +0200
Subject: [PATCH 60/69] (BIDS-2859) logic to save/debounce is in the table +
 now the table obtains its data from the actual API

---
 .../components/notifications/SubscriptionDialog.vue |  4 ++--
 .../NotificationsManagementDashboards.vue           | 13 +++++--------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index cb439d8d8..3d19d8eaa 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -14,7 +14,7 @@ interface Props {
   saveUserSettings: (settings: Record<keyof AllOptions, DefinedAPIentry>) => void
 }
 
-// #### DIALOG SETTINGS ####
+// #### CONFIGURATION OF THE DIALOGS ####
 
 const DefaultValues = new Map<keyof AllOptions, InternalEntry>([
   ['group_offline_threshold', { type: 'percent', check: false, num: 10 }],
@@ -40,7 +40,7 @@ const OptionsNeedingPremium: Array<keyof AllOptions> =
 const RowsThatExpectAPercentage: Array<keyof AllOptions> =
   ['group_offline_threshold']
 
-// #### END OF DIALOG SETTINGS ####
+// #### END OF CONFIGURATION OF THE DIALOGS ####
 
 type ModifiableOptions = Record<keyof AllOptions, InternalEntry>
 
diff --git a/frontend/components/notifications/management/NotificationsManagementDashboards.vue b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
index b800e484c..384385bbf 100644
--- a/frontend/components/notifications/management/NotificationsManagementDashboards.vue
+++ b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
@@ -27,21 +27,18 @@ interface SettingsWithContext {
   settings: AllOptions
 }
 
-// #### SETTINGS FOR THE SUBSCRIPTION DIALOGS ####
+// #### CONFIGURATION RELATED TO THE SUBSCRIPTION DIALOGS ####
 
-const KeysBelongingToWebhookDialog : Array<keyof AllOptions> = [
-  'webhook_url', 'is_webhook_discord_enabled'
-]
 const KeysIndicatingASubscription : Array<keyof AllOptions> = [
   'is_validator_offline_subscribed', 'group_offline_threshold', 'is_attestations_missed_subscribed', 'is_block_proposal_subscribed',
   'is_upcoming_block_proposal_subscribed', 'is_sync_subscribed', 'is_withdrawal_processed_subscribed', 'is_slashed_subscribed', 'is_real_time_mode_enabled',
   'is_incoming_transactions_subscribed', 'is_outgoing_transactions_subscribed', 'is_erc20_token_transfers_subscribed', 'is_erc721_token_transfers_subscribed',
-  'is_erc1155_token_transfers_subscribed', 'subscribed_chain_ids', 'is_ignore_spam_transactions_enabled'
+  'is_erc1155_token_transfers_subscribed', 'is_ignore_spam_transactions_enabled'
 ]
 const TimeoutForSavingFailures = 2300 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost your preferences half a minute ago, we hope you remember them and do not mind going back to that dialog"
 const MinimumTimeBetweenAPIcalls = 700 // ms. Any change ends-up saved anyway, so we can prevent useless requests with a delay larger than usual.
 
-// #### END OF SETTINGS FOR THE SUBSCRIPTION DIALOGS ####
+// #### END OF CONFIGURATION RELATED TO THE SUBSCRIPTION DIALOGS ####
 
 const { fetch, setTimeout } = useCustomFetch()
 const toast = useBcToast()
@@ -52,7 +49,7 @@ const { groups } = useValidatorDashboardGroups()
 const { width } = useWindowSize()
 
 const debouncer = useDebounceValue<SettingsWithContext>({} as SettingsWithContext, MinimumTimeBetweenAPIcalls)
-watch(debouncer.value.value as readonly SettingsWithContext, saveUserSettings)
+watch(debouncer.value as Ref<SettingsWithContext>, saveUserSettings)
 
 const colsVisible = computed(() => {
   return {
@@ -89,7 +86,7 @@ const wrappedDashboardGroups: ComputedRef<ApiPagingResponse<WrappedRow>|undefine
     const result: string[] = []
     for (const key of KeysIndicatingASubscription) {
       if ((row.settings as AllOptions)[key]) {
-        result.push($t('notifications.subscriptions.' + dashboardType(row.is_account_dashboard) + 's.' + key))
+        result.push($t('notifications.subscriptions.' + dashboardType(row.is_account_dashboard) + 's.' + key + '.option'))
       }
     }
     return result

From d3bfa1db4777983591dc838bc456007f0c93c2d8 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 23 Jul 2024 13:39:01 +0200
Subject: [PATCH 61/69] (BIDS-2859) details

---
 frontend/components/icon/IconNetwork.vue           |  2 +-
 .../NotificationsManagementDashboards.vue          | 14 ++++++++------
 .../components/playground/PlaygroundDialog.vue     |  5 +++--
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/components/icon/IconNetwork.vue b/frontend/components/icon/IconNetwork.vue
index fc6604e19..669f67e40 100644
--- a/frontend/components/icon/IconNetwork.vue
+++ b/frontend/components/icon/IconNetwork.vue
@@ -12,7 +12,7 @@ const props = defineProps({
   harmonizePerceivedSize: { type: Boolean, default: false } // makes some icons slightly smaller/bigger, to appear with a size "similar" to the others
 })
 
-const family = computed(() => ChainInfo[props.chainId as ChainIDs].family)
+const family = computed(() => (props.chainId in ChainInfo) ? ChainInfo[props.chainId as ChainIDs].family : ChainFamily.Ethereum)
 const coloring = computed(() => !props.colored ? 'monochromatic' : (colorMode.value !== 'dark' || props.doNotAdaptToColorTheme ? '' : 'pastel'))
 const sizing = computed(() => props.harmonizePerceivedSize ? family.value : '')
 </script>
diff --git a/frontend/components/notifications/management/NotificationsManagementDashboards.vue b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
index 384385bbf..259c065b0 100644
--- a/frontend/components/notifications/management/NotificationsManagementDashboards.vue
+++ b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
@@ -11,6 +11,7 @@ import type { ApiPagingResponse, ApiErrorResponse } from '~/types/api/common'
 import type { NotificationSettingsDashboardsTableRow, NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard } from '~/types/api/notifications'
 import type { DashboardType } from '~/types/dashboard'
 import { useNotificationsManagementDashboards } from '~/composables/notifications/useNotificationsManagementDashboards'
+import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
 import { NotificationsSubscriptionDialog } from '#components'
 
 type AllOptions = NotificationSettingsValidatorDashboard & NotificationSettingsAccountDashboard
@@ -45,6 +46,7 @@ const toast = useBcToast()
 const { t: $t } = useI18n()
 const dialog = useDialog()
 const { dashboardGroups, query, cursor, pageSize, isLoading, onSort, setCursor, setPageSize, setSearch } = useNotificationsManagementDashboards()
+const { getDashboardLabel } = useUserDashboardStore()
 const { groups } = useValidatorDashboardGroups()
 const { width } = useWindowSize()
 
@@ -71,22 +73,22 @@ const wrappedDashboardGroups: ComputedRef<ApiPagingResponse<WrappedRow>|undefine
     paging: dashboardGroups.value.paging,
     data: dashboardGroups.value.data.map(d => ({
       ...d,
-      dashboard_type: dashboardType(d.is_account_dashboard),
-      dashboard_name: 'TODO: get the name of the dashboard',
+      dashboard_type: dashboardType(d),
+      dashboard_name: getDashboardLabel(String(d.dashboard_id), dashboardType(d)),
       subscriptions: subscriptionList(d),
-      identifier: `${dashboardType(d.is_account_dashboard)}-${d.dashboard_id}-${d.group_id}`
+      identifier: `${dashboardType(d)}-${d.dashboard_id}-${d.group_id}`
     }))
   }
 
-  function dashboardType (isAccountDashboard: boolean) : DashboardType {
-    return isAccountDashboard ? 'account' : 'validator'
+  function dashboardType (row: NotificationSettingsDashboardsTableRow) : DashboardType {
+    return row.is_account_dashboard ? 'account' : 'validator'
   }
 
   function subscriptionList (row: NotificationSettingsDashboardsTableRow) : string[] {
     const result: string[] = []
     for (const key of KeysIndicatingASubscription) {
       if ((row.settings as AllOptions)[key]) {
-        result.push($t('notifications.subscriptions.' + dashboardType(row.is_account_dashboard) + 's.' + key + '.option'))
+        result.push($t('notifications.subscriptions.' + dashboardType(row) + 's.' + key + '.option'))
       }
     }
     return result
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 49d2c2ed0..bec643540 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -60,10 +60,11 @@ function openSubscriptions (props: any) {
 
 <template>
   <div class="container">
-    <Button @click="openSubscriptions({dashboardId:5295, groupId:0, validatorSub})">
+    Note: to test the saving of the options to the API, open the dialogs from the notification dashboard. The communication with the API is implemented there.
+    <Button @click="openSubscriptions({ dashboardType: 'validator', initialSettings: validatorSub, saveUserSettings: () => {} })">
       Subscribe to notifications for your validators
     </Button>
-    <Button @click="openSubscriptions({dashboardId:5295, groupId:0, accountSub})">
+    <Button @click="openSubscriptions({ dashboardType: 'account', initialSettings: accountSub, saveUserSettings: () => {} })">
       Subscribe to notifications for your accounts
     </Button>
     <br>

From facb078a99e92e90cfa1f0a2c2a67b675ce1056a Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 23 Jul 2024 13:50:10 +0200
Subject: [PATCH 62/69] (BIDS-2859) the new table works, but not the dialogs
 (need more debugging)

---
 frontend/components/notifications/SubscriptionDialog.vue | 2 +-
 frontend/components/playground/PlaygroundDialog.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 3d19d8eaa..23db44390 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -67,7 +67,7 @@ watch(props, (props) => {
       tPath.value = 'notifications.subscriptions.validators.'
       orderOfTheRows = orderOfTheRowsInValidatorModal
       break
-    case 'notifications' :
+    case 'account' :
       tPath.value = 'notifications.subscriptions.accounts.'
       orderOfTheRows = orderOfTheRowsInAccountModal
       break
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index bec643540..bacfed5e3 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -60,7 +60,7 @@ function openSubscriptions (props: any) {
 
 <template>
   <div class="container">
-    Note: to test the saving of the options to the API, open the dialogs from the notification dashboard. The communication with the API is implemented there.
+    Note: to test the saving of the options to the API, open the dialogs from the notification dashboard.<br>The communication with the API is implemented there.
     <Button @click="openSubscriptions({ dashboardType: 'validator', initialSettings: validatorSub, saveUserSettings: () => {} })">
       Subscribe to notifications for your validators
     </Button>

From 19705519b3232a92546d18147f7429f5edd50b67 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 23 Jul 2024 15:48:19 +0200
Subject: [PATCH 63/69] (BIDS-2859) ready for review

---
 .../components/bc/table/BcTablePopoutEdit.vue |  8 +++--
 .../notifications/SubscriptionDialog.vue      |  1 +
 .../NotificationsManagementDashboards.vue     | 30 +++++--------------
 3 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/frontend/components/bc/table/BcTablePopoutEdit.vue b/frontend/components/bc/table/BcTablePopoutEdit.vue
index 45ac4aeca..362d0f2ea 100644
--- a/frontend/components/bc/table/BcTablePopoutEdit.vue
+++ b/frontend/components/bc/table/BcTablePopoutEdit.vue
@@ -12,20 +12,21 @@ interface Props {
   truncateText?: boolean,
 }
 defineProps<Props>()
-
 </script>
+
 <template>
   <div class="bc-poput-edit" :class="{ 'truncate-text': truncateText }">
     <slot name="content">
-      <span v-if="label" class="content">
+      <BcTooltip v-if="label" :hide="!truncateText" :fit-content="true" class="content" :text="label">
         {{ label }}
-      </span>
+      </BcTooltip>
     </slot>
     <div class="icon">
       <FontAwesomeIcon v-if="!noIcon" class="link" :icon="faEdit" @click="() => emit('onEdit')" />
     </div>
   </div>
 </template>
+
 <style lang="scss" scoped>
 @use "~/assets/css/utils.scss";
 
@@ -37,6 +38,7 @@ defineProps<Props>()
 
     .content {
       @include utils.truncate-text;
+      user-select: none;
     }
   }
 
diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index 23db44390..a2cdfc914 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -58,6 +58,7 @@ const checkboxAll = ref<InternalEntry>({ type: 'binary', check: false })
 let dataNonce = 0 // used by the watcher of `modifiableOptions` to know when it is unnecessary to send changes to the API (it doesn't send if the nonce is 0)
 
 watch(props, (props) => {
+  console.log(props)
   if (!props || !props.initialSettings) {
     return
   }
diff --git a/frontend/components/notifications/management/NotificationsManagementDashboards.vue b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
index 259c065b0..2dc4adffc 100644
--- a/frontend/components/notifications/management/NotificationsManagementDashboards.vue
+++ b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
@@ -96,14 +96,14 @@ const wrappedDashboardGroups: ComputedRef<ApiPagingResponse<WrappedRow>|undefine
 })
 
 const onEdit = (col: 'delete' | 'subscriptions' | 'webhook' | 'networks', row: WrappedRow) => {
-  const data = {
+  const dialogProps = {
     dashboardType: row.dashboard_type,
-    subscriptions: row.settings,
+    initialSettings: row.settings,
     saveUserSettings: (settings: AllOptions) => debouncer.bounce({ row, settings }, false, true)
   }
   switch (col) {
     case 'subscriptions':
-      dialog.open(NotificationsSubscriptionDialog, { data })
+      dialog.open(NotificationsSubscriptionDialog, { data: dialogProps })
       break
     case 'webhook':
       /* TODO: replace `WebhookDialog` with the name of Marcel's component
@@ -238,13 +238,8 @@ function getTypeIcon (type: DashboardType) {
               @on-edit="onEdit('networks', slotProps.data)"
             >
               <template #content>
-                <IconNetwork
-                  v-for="chainId in slotProps.data.chain_ids"
-                  :key="chainId"
-                  :colored="true"
-                  class="network-icon"
-                  :chain-id="chainId"
-                />
+                <BcNetworkSelector :readonly-networks="slotProps.data.chain_ids" />
+                &nbsp;
               </template>
             </BcTablePopoutEdit>
           </template>
@@ -298,13 +293,8 @@ function getTypeIcon (type: DashboardType) {
               >
                 <template #content>
                   <div class="newtork-row">
-                    <IconNetwork
-                      v-for="chainId in slotProps.data.chain_ids"
-                      :key="chainId"
-                      :colored="true"
-                      class="network-icon"
-                      :chain-id="chainId"
-                    />
+                    <BcNetworkSelector :readonly-networks="slotProps.data.chain_ids" />
+                    &nbsp;
                   </div>
                 </template>
               </BcTablePopoutEdit>
@@ -348,12 +338,6 @@ function getTypeIcon (type: DashboardType) {
   margin-right: var(--padding);
 }
 
-.network-icon {
-  margin-right: var(--padding);
-  height: 20px;
-  width: 20px;
-}
-
 .newtork-row {
   display: flex;
 }

From 255b7be2323bb64523d7f48a099e66ccb9a17b7d Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Tue, 23 Jul 2024 15:51:01 +0200
Subject: [PATCH 64/69] (BIDS-2859) ready for review

---
 frontend/components/notifications/SubscriptionDialog.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/SubscriptionDialog.vue
index a2cdfc914..23db44390 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/SubscriptionDialog.vue
@@ -58,7 +58,6 @@ const checkboxAll = ref<InternalEntry>({ type: 'binary', check: false })
 let dataNonce = 0 // used by the watcher of `modifiableOptions` to know when it is unnecessary to send changes to the API (it doesn't send if the nonce is 0)
 
 watch(props, (props) => {
-  console.log(props)
   if (!props || !props.initialSettings) {
     return
   }

From c1e459f4398bc57dafcee09cea9b9c201025f89b Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Thu, 25 Jul 2024 13:27:40 +0200
Subject: [PATCH 65/69] (BIDS-2859) MiniParser moved to another PR

---
 frontend/components/bc/MiniParser.vue         | 226 ------------------
 .../notifications/SubscriptionRow.vue         |  33 ++-
 frontend/i18n/en.json                         |  18 +-
 3 files changed, 37 insertions(+), 240 deletions(-)
 delete mode 100644 frontend/components/bc/MiniParser.vue

diff --git a/frontend/components/bc/MiniParser.vue b/frontend/components/bc/MiniParser.vue
deleted file mode 100644
index 1fcc035a3..000000000
--- a/frontend/components/bc/MiniParser.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<script setup lang="ts">
-/** Component outputting HTML by interpreting simple tags found in the input.
- *
- *  Usage:
- *
- *    Simplest case:
- *      <BcMiniParser :input="stringOrArrayOfStrings" />
- *    You can pass an object containing links:
- *      <BcMiniParser :input="stringOrArrayOfStrings" :links="{darklink: 'www.choco.com', milkyurl: 'index.html'}" />
- *    (see the example just below to understand the purpose of prop links)
- *
- *  Example of input:
- *
- *    # About chocolate
- *    We will eat `chocolate` in 2 cases:
- *    - If your *validator* is online
- *    - During *the _nice_ days* of Easter\*.
- *    It can be [very dark](darklink) or [with _milk_](milkyurl), we enjoy both.
- *    \*note that Christmas is also a good moment to do so
- *
- *  Language:
- *
- *    The input can be either a string (that can hold several lines of text) or an array of strings (each element is a single line of text).
- *    For each line:
- *      # or ## or ### at the beginning will show the line as a title (respectively h1, h2, h3)
- *      - at the beginning will show the line as an item in a list.
- *      parts surrounded with _ will be surrounded with <i> tags
- *      parts surrounded with * will be surrounded with <b> tags
- *      parts surrounded with ` will be shown with a type-writter font and not parsed (formatting tags between ` and ` are ineffective)
- *      a link can be created by writing [a caption](and-a-url). The url can written directly or tell the name of a member of the object in props links.
- *    Mixes are possible: italic inside bold or bold inside italic, code in italic or bold (if you surround ` and ` with the tags)...
- *
- *    If you need to display a character that is a tag, escape it with `\` and the parser will not interpret it.
- *    As Javascript itself uses `\` as an escaping mark, you will need to type `\\` and `\\\\` to express respectively `\` and `\\` when you
- *    hard-code the input in JS.
- *
- *  About <i> and <b>:
- *
- *    Depending on the stylesheet of your website, those tags might not display your text in italic and bold.
- *    If you want to force them to display italic and bold text against the style preferences of your website, you can define a class like so:
- *      .my-own-bi {
- *        :deep(i) { font-style: italic }
- *        :deep(b) { font-weight: bold }
- *      }
- *    and assign it to the parser:
- *      <BcMiniParser ... class="my-own-bi" />
-*/
-
-import { type VNode } from 'vue'
-import { BcLink } from '#components'
-import { Target } from '~/types/links'
-
-const Escapement = '\\'
-enum Tag { H1 = '#', H2 = '##', H3 = '###', Item = '-', Italic = '_', Bold = '*', Code = '`', LinkStart = '[', LinkMid = '](', LinkEnd = ')' }
-const OpeningTags = [Tag.Italic, Tag.Bold, Tag.Code, Tag.LinkStart]
-const ClosingTags: Record<string, Tag> = { [Tag.Italic]: Tag.Italic, [Tag.Bold]: Tag.Bold, [Tag.Code]: Tag.Code, [Tag.LinkStart]: Tag.LinkEnd }
-
-const props = defineProps<{ input: string|string[], links?: Record<string, string> }>()
-
-type VDOMnodes = Array<VNode|string>
-enum LineType { Useless, Blank, Title, List, Div }
-const ESC = '\u001B'
-const inputArray = { lines: [] as string[], pos: 0 as number }
-
-function parse (props: {input: string|string[]}) : VDOMnodes {
-  if (!Array.isArray(props.input)) {
-    if (typeof props.input !== 'string') { return [] }
-    inputArray.lines = (props.input.includes('\r\n')) ? props.input.split('\r\n') : props.input.split('\n')
-  } else {
-    inputArray.lines = props.input
-  }
-  inputArray.lines = inputArray.lines.map(line => removeLeadingSpacesAndReplaceEscapements(line))
-  inputArray.pos = 0
-  const output: VDOMnodes = []
-  while (inputArray.pos < inputArray.lines.length) {
-    switch (getLineType()) {
-      case LineType.Title : output.push(parseTitle()); break
-      case LineType.List : output.push(parseList()); break
-      case LineType.Blank :
-      case LineType.Div : output.push(parseTextLine()); break
-      default: inputArray.pos++
-    }
-  }
-  return output
-}
-
-function parseTitle () : VNode {
-  const { height, tag } = getTitleType(inputArray.pos)!
-  return h('h' + height, {}, parseText(inputArray.lines[inputArray.pos++].slice(tag.length)))
-}
-
-function parseList () : VNode {
-  const items : VDOMnodes = []
-  while (inputArray.pos < inputArray.lines.length && getLineType() === LineType.List) {
-    items.push(h('li', {}, parseText(inputArray.lines[inputArray.pos].slice(Tag.Item.length)))) // new item
-    inputArray.pos++
-  }
-  return h('ul', {}, items)
-}
-
-function parseTextLine () : VNode|string {
-  let output: VNode|string = ''
-  switch (getLineType()) {
-    case LineType.Div : output = h('div', {}, parseText(inputArray.lines[inputArray.pos])); break
-    case LineType.Blank : output = h('br', {}); break
-  }
-  inputArray.pos++
-  return output
-}
-
-function parseText (text: string) : VDOMnodes {
-  const parts: VDOMnodes = []
-  do {
-    const { pos: openingTagPos, tag: openingTag } = findTag(text, 0)
-    const { pos: closingTagPos } = findTag(text, openingTagPos + openingTag.length, ClosingTags[openingTag])
-    if (openingTagPos < 0 || closingTagPos < 0) { // First case: no tag, we can copy the raw line. Second case: syntax error (either the closing tag has been forgotten or nested tags have their closure swapped)
-      parts.push(cleanText(text)) // in both cases we output the text without parsing it
-      break
-    }
-    if (openingTagPos > 0) {
-      parts.push(cleanText(text.slice(0, openingTagPos)))
-    }
-    const middle = text.slice(openingTagPos + openingTag.length, closingTagPos)
-    switch (openingTag) {
-      case Tag.Italic : parts.push(h('i', {}, parseText(middle))); break
-      case Tag.Bold : parts.push(h('b', {}, parseText(middle))); break
-      case Tag.Code : parts.push(h('span', { style: 'font-family: monospace;' }, cleanText(middle, true))); break
-      case Tag.LinkStart : parts.push(parseLink(middle)); break
-    }
-    text = text.slice(closingTagPos + ClosingTags[openingTag].length)
-  } while (text)
-  return parts
-}
-
-function parseLink (text: string) : VNode|string {
-  // note: param `text` is of the form  `caption of the link](urlRef`  (both ends have been removed by the calling function)
-  const { pos: middleTagPos } = findTag(text, 0, Tag.LinkMid)
-  if (middleTagPos <= 0) {
-    return cleanText(text)
-  }
-  const urlRef = text.slice(middleTagPos + Tag.LinkMid.length)
-  const to = props.links && urlRef in props.links ? props.links[urlRef] : urlRef
-  const target = (to.includes('://') || to.startsWith('www.')) ? Target.External : Target.Internal // correct 99% of the time I suppose
-  return h(BcLink, { to, target, class: 'link' }, () => parseText(text.slice(0, middleTagPos)))
-}
-
-/** @param wanted If given, finds the first valid occurence of this tag (this mode is used for closing tags). If omitted, finds the first opening tag that the parser recognises.
- *  @returns -1 if not found */
-function findTag (text: string, start: number, wanted?: Tag) : { pos: number, tag: Tag } {
-  if (wanted !== undefined) {
-    let pos = start - wanted.length
-    do {
-      pos = text.indexOf(wanted, pos + wanted.length)
-    } while (pos >= 1 && (text[pos - 1] === ESC || (text.slice(start, pos).split(Tag.Code).length - text.slice(start, pos).split(ESC + Tag.Code).length) % 2)) // are ignored: escaped tags and tags between ` and `
-    return { pos, tag: wanted }
-  }
-  let closest = { pos: -1, tag: Tag.Italic }
-  for (const tag of OpeningTags) {
-    const found = findTag(text, start, tag)
-    if (found.pos >= 0 && (found.pos <= closest.pos || closest.pos < 0)) {
-      closest = found
-    }
-  }
-  return closest
-}
-
-/** replaces all `\` with `\u001B` and all `\\` with `\`  and removes spaces at the beginning */
-function removeLeadingSpacesAndReplaceEscapements (input: string) : string {
-  const DoubleEsc = Escapement + Escapement
-  let posIn = 0
-  let output = ''
-  while (posIn < input.length) {
-    const double = input.indexOf(DoubleEsc, posIn)
-    const single = input.indexOf(Escapement, posIn)
-    if (double >= 0 && (double <= single || single < 0)) {
-      output += input.slice(posIn, double) + Escapement
-      posIn = double + DoubleEsc.length
-    } else
-      if (single >= 0) {
-        output += input.slice(posIn, single) + ESC
-        posIn = single + Escapement.length
-      } else {
-        break
-      }
-  }
-  return (output + input.slice(posIn)).trimStart()
-}
-
-function cleanText (raw: string, forceSpaces = false) {
-  if (forceSpaces) {
-    raw = raw.replaceAll(' ', '\xA0')
-  }
-  return raw.replaceAll(ESC, '')
-}
-
-function getTitleType (pos: number) : { height: number, tag: Tag } | undefined {
-  for (const title of [{ height: 3, tag: Tag.H3 }, { height: 2, tag: Tag.H2 }, { height: 1, tag: Tag.H1 }]) {
-    if (inputArray.lines[pos].startsWith(title.tag)) { return title }
-  }
-}
-
-function getLineType () : LineType {
-  const pos = inputArray.pos
-  if (inputArray.lines[pos].length > 0) {
-    if (getTitleType(pos)) { return LineType.Title }
-    if (inputArray.lines[pos].startsWith(Tag.Item)) { return LineType.List }
-    return LineType.Div
-  }
-  if (pos === 0 || pos === inputArray.lines.length - 1 || getTitleType(pos - 1) || getTitleType(pos + 1)) { return LineType.Useless }
-  return LineType.Blank
-}
-</script>
-
-<template>
-  <div>
-    <parse :input="props.input" />
-  </div>
-</template>
-
-<style lang="scss">
-ul {
-  padding: 0;
-  margin: 0;
-  padding-left: 1.4em;
-}
-</style>
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/SubscriptionRow.vue
index adce65c3e..3faf782c2 100644
--- a/frontend/components/notifications/SubscriptionRow.vue
+++ b/frontend/components/notifications/SubscriptionRow.vue
@@ -45,7 +45,33 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
     <BcTooltip v-if="tooltipLines[0]" :fit-content="true">
       <FontAwesomeIcon :icon="faInfoCircle" class="info" />
       <template #tooltip>
-        <BcMiniParser :input="tooltipLines" class="tt-content" />
+        <div v-if="tPath.includes('is_validator_offline_subscribed')" class="tt-content">
+          {{ tooltipLines[0] }}
+          <ul>
+            <li>{{ tooltipLines[1] }}</li>
+            <li>{{ tooltipLines[2] }}</li>
+            <li>{{ tooltipLines[3] }}</li>
+          </ul>
+        </div>
+        <div v-else-if="tPath.includes('group_offline_threshold')" class="tt-content">
+          {{ tooltipLines[0] }}
+          <ul>
+            <li>{{ tooltipLines[1] }}</li>
+            <li>{{ tooltipLines[2] }}</li>
+            <li>{{ tooltipLines[3] }}</li>
+            <li>{{ tooltipLines[4] }}</li>
+          </ul>
+          <b>{{ tooltipLines[5] }}</b> {{ tooltipLines[6] }}
+        </div>
+        <div v-else-if="tPath.includes('is_ignore_spam_transactions_enabled')" class="tt-content">
+          {{ tooltipLines[0] }}
+          <b>{{ tooltipLines[1] }}</b>
+          {{ tooltipLines[2] }}
+          <b>{{ tooltipLines[3] }}</b>{{ tooltipLines[4] }}
+        </div>
+        <div v-else class="tt-content">
+          {{ tooltipLines[0] }}
+        </div>
       </template>
     </BcTooltip>
     <BcPremiumGem v-if="lacksPremiumSubscription" class="gem" />
@@ -147,10 +173,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
   ul {
     padding: 0;
     margin: 0;
-    padding-left: 1.3em;
-    li::marker {
-      font-size: 0.6rem;
-    }
+    padding-left: 1.4em;
   }
   .italic {
     font-style: italic;
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index e2932a117..62c35478c 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -315,20 +315,20 @@
           "option": "Validator is offline",
           "hint": [
             "We will trigger a notification:",
-            "- Once the validator has been offline for 3 epochs.",
-            "- Every 32 Epochs (~3 hours) during your downtime.",
-            "- Once you are back online again."
+            "Once the validator has been offline for 3 epochs.",
+            "Every 32 Epochs (~3 hours) during your downtime.",
+            "Once you are back online again."
           ]
         },
         "group_offline_threshold": {
           "option":"Group is offline",
           "hint": [
             "We will trigger a notification:",
-            "- Once validators in your group are offline. | - Once {count}% of your group is offline. | - Once {count}% of your group is offline.",
-            "- Once you have been offline for 3 epochs.",
-            "- Every 32 Epochs (~3 hours) during your downtime.",
-            "- Once you are back online.",
-            "*Note:* Notification resets if you do not meet the threshold given in the input field. | *Note:* Notification resets if you do not meet the threshold of {count}%. | *Note:* Notification resets if you do not meet the threshold of {count}%."
+            "Once validators in your group are offline. | Once {count}% of your group is offline. | Once {count}% of your group is offline.",
+            "Once you have been offline for 3 epochs.",
+            "Every 32 Epochs (~3 hours) during your downtime.",
+            "Once you are back online.",
+            "Note:", "Notification resets if you do not meet the threshold given in the input field. | Notification resets if you do not meet the threshold of {count}%. | Notification resets if you do not meet the threshold of {count}%."
           ],
           "placeholder": ""
         },
@@ -389,7 +389,7 @@
         },
         "is_ignore_spam_transactions_enabled": {
           "option":"Ignore spam transactions",
-          "hint": ["Ignores *zero value transfer tx's* and token tx's that have the *\"hidden\" token label*."]
+          "hint": ["Ignores", "zero value transfer tx's", "and token tx's that have the", "\"hidden\" token label", "."]
         }
       },
       "button":"Close",

From 1cf0d4e6adfbdd4d15c75d888773bf1ae3a1002f Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 29 Jul 2024 11:37:53 +0200
Subject: [PATCH 66/69] (BIDS-2859) little changes after the last little
 comments

---
 frontend/components/bc/NetworkSelector.vue    | 11 ++++-----
 .../NotificationsManagementDashboards.vue     |  6 ++---
 .../{ => management}/SubscriptionDialog.vue   |  4 ++--
 .../{ => management}/SubscriptionRow.vue      |  0
 .../playground/PlaygroundDialog.vue           |  4 ++--
 frontend/types/network.ts                     | 24 +++++++++----------
 6 files changed, 24 insertions(+), 25 deletions(-)
 rename frontend/components/notifications/{ => management}/SubscriptionDialog.vue (99%)
 rename frontend/components/notifications/{ => management}/SubscriptionRow.vue (100%)

diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index eeb208d82..00f4de475 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -19,12 +19,11 @@ const selection = defineModel<ChainIDs|ChainIDs[]>({ required: false })
 let barSelection: Ref<string> | Ref<string[]>
 if (props.readonlyNetworks) {
   barSelection = ref<string[]>([])
-} else
-  if (Array.isArray(selection.value)) {
-    barSelection = useArrayRefBridge<ChainIDs, string>(selection as Ref<ChainIDs[]>)
-  } else {
-    barSelection = usePrimitiveRefBridge<ChainIDs, string>(selection as Ref<ChainIDs>)
-  }
+} else if (Array.isArray(selection.value)) {
+  barSelection = useArrayRefBridge<ChainIDs, string>(selection as Ref<ChainIDs[]>)
+} else {
+  barSelection = usePrimitiveRefBridge<ChainIDs, string>(selection as Ref<ChainIDs>)
+}
 
 const buttons = computed(() => {
   const list: MultiBarItem[] = []
diff --git a/frontend/components/notifications/management/NotificationsManagementDashboards.vue b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
index 2dc4adffc..6901627bd 100644
--- a/frontend/components/notifications/management/NotificationsManagementDashboards.vue
+++ b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
@@ -12,7 +12,7 @@ import type { NotificationSettingsDashboardsTableRow, NotificationSettingsValida
 import type { DashboardType } from '~/types/dashboard'
 import { useNotificationsManagementDashboards } from '~/composables/notifications/useNotificationsManagementDashboards'
 import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
-import { NotificationsSubscriptionDialog } from '#components'
+import { NotificationsManagementSubscriptionDialog } from '#components'
 
 type AllOptions = NotificationSettingsValidatorDashboard & NotificationSettingsAccountDashboard
 
@@ -99,11 +99,11 @@ const onEdit = (col: 'delete' | 'subscriptions' | 'webhook' | 'networks', row: W
   const dialogProps = {
     dashboardType: row.dashboard_type,
     initialSettings: row.settings,
-    saveUserSettings: (settings: AllOptions) => debouncer.bounce({ row, settings }, false, true)
+    saveUserSettings: (settings: AllOptions) => debouncer.bounce({ row, settings }, true, true)
   }
   switch (col) {
     case 'subscriptions':
-      dialog.open(NotificationsSubscriptionDialog, { data: dialogProps })
+      dialog.open(NotificationsManagementSubscriptionDialog, { data: dialogProps })
       break
     case 'webhook':
       /* TODO: replace `WebhookDialog` with the name of Marcel's component
diff --git a/frontend/components/notifications/SubscriptionDialog.vue b/frontend/components/notifications/management/SubscriptionDialog.vue
similarity index 99%
rename from frontend/components/notifications/SubscriptionDialog.vue
rename to frontend/components/notifications/management/SubscriptionDialog.vue
index 23db44390..c374cd0a5 100644
--- a/frontend/components/notifications/SubscriptionDialog.vue
+++ b/frontend/components/notifications/management/SubscriptionDialog.vue
@@ -199,7 +199,7 @@ const isOptionAvailable = (key: keyof AllOptions) => user.value?.premium_perks.a
     </div>
 
     <div v-for="row of orderOfTheRows" :key="row" class="row-container">
-      <NotificationsSubscriptionRow
+      <NotificationsManagementSubscriptionRow
         v-if="row != 'ALL'"
         v-model="modifiableOptions[row]"
         :t-path="tPath+row"
@@ -208,7 +208,7 @@ const isOptionAvailable = (key: keyof AllOptions) => user.value?.premium_perks.a
         class="row"
       />
       <div v-if="row == 'ALL'" class="separation" />
-      <NotificationsSubscriptionRow
+      <NotificationsManagementSubscriptionRow
         v-if="row == 'ALL'"
         v-model="checkboxAll"
         :t-path="tPath+'all'"
diff --git a/frontend/components/notifications/SubscriptionRow.vue b/frontend/components/notifications/management/SubscriptionRow.vue
similarity index 100%
rename from frontend/components/notifications/SubscriptionRow.vue
rename to frontend/components/notifications/management/SubscriptionRow.vue
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index bacfed5e3..66f21559b 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BcDialogConfirm, NotificationsSubscriptionDialog } from '#components'
+import { BcDialogConfirm, NotificationsManagementSubscriptionDialog } from '#components'
 import type { NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard } from '~/types/api/notifications'
 
 const dialog = useDialog()
@@ -51,7 +51,7 @@ const accountSub: NotificationSettingsAccountDashboard = {
 }
 
 function openSubscriptions (props: any) {
-  dialog.open(NotificationsSubscriptionDialog, {
+  dialog.open(NotificationsManagementSubscriptionDialog, {
     data: props,
     onClose: response => onClose(response?.data)
   })
diff --git a/frontend/types/network.ts b/frontend/types/network.ts
index 549f0f8aa..1bc554a20 100644
--- a/frontend/types/network.ts
+++ b/frontend/types/network.ts
@@ -62,8 +62,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   },
 
   [ChainIDs.Ethereum]: {
-    nameParts: ['Ethereum', 'Mainnet'],
-    name: 'Ethereum Mainnet',
+    nameParts: ['Ethereum', ''],
+    name: 'Ethereum',
     description: 'Mainnet',
     family: ChainFamily.Ethereum,
     mainNet: ChainIDs.Ethereum,
@@ -105,8 +105,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   },
 
   [ChainIDs.ArbitrumOneEthereum]: {
-    nameParts: ['Arbitrum One', 'Mainnet'],
-    name: 'Arbitrum One Mainnet',
+    nameParts: ['Arbitrum One', ''],
+    name: 'Arbitrum One',
     description: 'L2',
     family: ChainFamily.Arbitrum,
     mainNet: ChainIDs.ArbitrumOneEthereum,
@@ -119,8 +119,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     priority: 10
   },
   [ChainIDs.ArbitrumNovaEthereum]: {
-    nameParts: ['Arbitrum Nova', 'Mainnet'],
-    name: 'Arbitrum Nova Mainnet',
+    nameParts: ['Arbitrum Nova', ''],
+    name: 'Arbitrum Nova',
     description: 'L2',
     family: ChainFamily.Arbitrum,
     mainNet: ChainIDs.ArbitrumNovaEthereum,
@@ -148,8 +148,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   },
 
   [ChainIDs.OptimismEthereum]: {
-    nameParts: ['Optimism', 'Mainnet'],
-    name: 'Optimism Mainnet',
+    nameParts: ['Optimism', ''],
+    name: 'Optimism',
     description: 'L2',
     family: ChainFamily.Optimism,
     mainNet: ChainIDs.OptimismEthereum,
@@ -177,8 +177,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   },
 
   [ChainIDs.BaseEthereum]: {
-    nameParts: ['Base', 'Mainnet'],
-    name: 'Base Mainnet',
+    nameParts: ['Base', ''],
+    name: 'Base',
     description: 'L2',
     family: ChainFamily.Base,
     mainNet: ChainIDs.BaseEthereum,
@@ -206,8 +206,8 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
   },
 
   [ChainIDs.Gnosis]: {
-    nameParts: ['Gnosis', 'Mainnet'],
-    name: 'Gnosis Mainnet',
+    nameParts: ['Gnosis', ''],
+    name: 'Gnosis',
     description: 'Mainnet',
     family: ChainFamily.Gnosis,
     mainNet: ChainIDs.Gnosis,

From 96d3666901041153a26c84a347afd6a0b8137031 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 29 Jul 2024 12:17:34 +0200
Subject: [PATCH 67/69] (BIDS-2859) better way to set the short timeout

---
 .../management/NotificationsManagementDashboards.vue     | 2 +-
 frontend/composables/useCustomFetch.ts                   | 9 ++-------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/frontend/components/notifications/management/NotificationsManagementDashboards.vue b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
index 6901627bd..4406cf847 100644
--- a/frontend/components/notifications/management/NotificationsManagementDashboards.vue
+++ b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
@@ -121,9 +121,9 @@ const onEdit = (col: 'delete' | 'subscriptions' | 'webhook' | 'networks', row: W
 async function saveUserSettings (settingsAndContext: SettingsWithContext) {
   let response: ApiErrorResponse | undefined
   try {
-    setTimeout(TimeoutForSavingFailures)
     response = await fetch<ApiErrorResponse>(API_PATH.SAVE_DASHBOARDS_SETTINGS, {
       method: 'PUT',
+      signal = AbortSignal.timeout(TimeoutForSavingFailures),
       body: { ...settingsAndContext.row.settings, ...settingsAndContext.settings }
     }, {
       for: settingsAndContext.row.dashboard_type,
diff --git a/frontend/composables/useCustomFetch.ts b/frontend/composables/useCustomFetch.ts
index 603e27e75..9ae0185ba 100644
--- a/frontend/composables/useCustomFetch.ts
+++ b/frontend/composables/useCustomFetch.ts
@@ -17,7 +17,6 @@ export function useCustomFetch () {
   const { t: $t } = useI18n()
   const { $bcLogger } = useNuxtApp()
   const uuid = inject<{value: string}>('app-uuid')
-  let timeout = APIcallTimeout
 
   async function fetch<T> (pathName: PathName, options: NitroFetchOptions<string & {}> = { }, pathValues?: PathValues, query?: PathValues, dontShowError = false): Promise<T> {
     const map = mapping[pathName]
@@ -26,7 +25,7 @@ export function useCustomFetch () {
     }
 
     if (options.signal === undefined) {
-      options.signal = AbortSignal.timeout(timeout)
+      options.signal = AbortSignal.timeout(APIcallTimeout)
     }
 
     if (map.mockFunction !== undefined && map.mock) {
@@ -95,9 +94,5 @@ export function useCustomFetch () {
     }
   }
 
-  function setTimeout (delay: number) {
-    timeout = delay
-  }
-
-  return { fetch, setTimeout }
+  return { fetch }
 }

From 30b6b2a08e36759713ee60d2aa8475d3336603c7 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 29 Jul 2024 12:22:24 +0200
Subject: [PATCH 68/69] (BIDS-2859) better way to set the short timeout

---
 .../management/NotificationsManagementDashboards.vue            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/notifications/management/NotificationsManagementDashboards.vue b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
index 4406cf847..0a5bc801f 100644
--- a/frontend/components/notifications/management/NotificationsManagementDashboards.vue
+++ b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
@@ -123,7 +123,7 @@ async function saveUserSettings (settingsAndContext: SettingsWithContext) {
   try {
     response = await fetch<ApiErrorResponse>(API_PATH.SAVE_DASHBOARDS_SETTINGS, {
       method: 'PUT',
-      signal = AbortSignal.timeout(TimeoutForSavingFailures),
+      signal: AbortSignal.timeout(TimeoutForSavingFailures),
       body: { ...settingsAndContext.row.settings, ...settingsAndContext.settings }
     }, {
       for: settingsAndContext.row.dashboard_type,

From 7a82bb332a5661202ebc7d391e84f73b1192ae21 Mon Sep 17 00:00:00 2001
From: thib-wien <thibaut.barthelemy@bitfly.at>
Date: Mon, 29 Jul 2024 12:25:45 +0200
Subject: [PATCH 69/69] (BIDS-2859) better way to set the short timeout

---
 .../management/NotificationsManagementDashboards.vue            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/notifications/management/NotificationsManagementDashboards.vue b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
index 0a5bc801f..ea550c546 100644
--- a/frontend/components/notifications/management/NotificationsManagementDashboards.vue
+++ b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
@@ -41,7 +41,7 @@ const MinimumTimeBetweenAPIcalls = 700 // ms. Any change ends-up saved anyway, s
 
 // #### END OF CONFIGURATION RELATED TO THE SUBSCRIPTION DIALOGS ####
 
-const { fetch, setTimeout } = useCustomFetch()
+const { fetch } = useCustomFetch()
 const toast = useBcToast()
 const { t: $t } = useI18n()
 const dialog = useDialog()