feat: add registered trademark symbol to BeaconScore

enzo-bitfly · enzo-bitfly · commit f1979765f8a2 · 2025-10-30T08:35:23.000+01:00
See: BC-47
diff --git a/frontend/components/bc/BcTranslation.vue b/frontend/components/bc/BcTranslation.vue
@@ -5,9 +5,6 @@ defineProps<{
    * The path to the key in the translation file (e.g. en.json)
    */
   keypath: TranslationKey,
-  linkpath?: TranslationKey,
-  listpath?: TranslationKey,
-  tag?: keyof HTMLElementTagNameMap,
   /**
    * URL to link to
    *
@@ -22,6 +19,13 @@ defineProps<{
    *   "link": "Click here"
    * }
    */
+  linkpath?: TranslationKey,
+  listpath?: TranslationKey,
+  /**
+   * Part of the translation to be shown as `superscript` (e.g. ®)
+   */
+  suppath?: TranslationKey,
+  tag?: keyof HTMLElementTagNameMap,
   to?: string,
 }>()
 </script>
@@ -36,7 +40,9 @@ defineProps<{
       <span
         v-if="boldpath"
         class="bc-translation-bold"
-      >{{ $t(boldpath) }}</span>
+      >
+        {{ $t(boldpath) }}
+      </span>
     </template>
     <template #link>
       <slot
@@ -67,6 +73,11 @@ defineProps<{
         </ul>
       </slot>
     </template>
+    <template #sup>
+      <sup v-if="suppath">
+        {{ $t(suppath) }}
+      </sup>
+    </template>
   </I18nT>
 </template>
 
diff --git a/frontend/components/dashboard/DashboardValidatorOverview.vue b/frontend/components/dashboard/DashboardValidatorOverview.vue
@@ -137,8 +137,13 @@ const aprInfos = [
     </DashboardValidatorOverviewItem>
     <DashboardValidatorOverviewItem
       :infos="efficiencyInfos"
-      :title="$t('dashboard.validator.overview.24h_beaconscore')"
     >
+      <template #title>
+        <BcTranslation
+          keypath="dashboard.validator.overview.24h_beaconscore"
+          suppath="base.common.registered_trademark_symbol"
+        />
+      </template>
       <BcTooltip
         tooltip-class="tooltip"
       >
@@ -151,6 +156,7 @@ const aprInfos = [
           <BcTranslation
             keypath="dashboard.beaconscore.template"
             linkpath="dashboard.beaconscore.link"
+            suppath="base.common.registered_trademark_symbol"
             :to="externalLink.knowledgeBase.beaconScore"
           />
         </template>
diff --git a/frontend/components/dashboard/DashboardValidatorOverviewItem.vue b/frontend/components/dashboard/DashboardValidatorOverviewItem.vue
@@ -6,15 +6,21 @@ const props = defineProps<{
     label: string,
     value: NumberOrString,
   }[],
-  title: string,
+  title?: string,
 }>()
 </script>
 
 <template>
   <div class="box">
     <div class="main">
       <div class="big_text_label">
-        {{ props.title }}
+        <slot
+          v-if="$slots.title"
+          name="title"
+        />
+        <template v-else>
+          {{ props.title }}
+        </template>
       </div>
       <div class="big_text dashbaord-validator-overview-item__value">
         <slot />
diff --git a/frontend/components/dashboard/chart/DashboardChartSummary.vue b/frontend/components/dashboard/chart/DashboardChartSummary.vue
@@ -287,6 +287,20 @@ const formatTimestamp = (value: string) => {
   }
 }
 const isTriggeringOnMouseMove = ref(true)
+const efficiencyLabel = computed(() => {
+  switch (props.filter?.efficiency) {
+    case 'all':
+      return `${$t('base.common.beaconscore')}®`
+    case 'attestation':
+      return $t('dashboard.validator.summary.chart.efficiency.attestation')
+    case 'proposal':
+      return $t('dashboard.validator.summary.chart.efficiency.proposal')
+    case 'sync':
+      return $t('dashboard.validator.summary.chart.efficiency.sync')
+    default:
+      return ''
+  }
+})
 const option = computed<EChartsOption>(() => {
   return {
     color: colors.value.groups,
@@ -409,9 +423,7 @@ const option = computed<EChartsOption>(() => {
           ? Math.max(0, 10 * Math.ceil(range.min / 10 - 1))
           : 10 * Math.ceil(range.min / 10 - 1),
       minInterval: 10,
-      name: $t(
-        `dashboard.validator.summary.chart.efficiency.${props.filter?.efficiency}`,
-      ),
+      name: efficiencyLabel.value,
       nameLocation: 'middle',
       nameTextStyle: {
         padding: [
diff --git a/frontend/components/dashboard/chart/DashboardChartSummaryFilter.vue b/frontend/components/dashboard/chart/DashboardChartSummaryFilter.vue
@@ -37,14 +37,33 @@ const aggregationDisabled = ({ disabled }: { disabled: boolean }) => disabled
 
 /** efficiency */
 const efficiency = ref<EfficiencyType>(chartFilter.value.efficiency)
-
-const efficiencyList = EfficiencyTypes.map(e => ({
-  id: e,
-  label: $t(`dashboard.validator.summary.chart.efficiency.${e}`),
-}))
+const efficiencyList = EfficiencyTypes.map((efficiencyType) => {
+  let efficiencyTranslationKey: TranslationKey
+  switch (efficiencyType) {
+    case 'all':
+      efficiencyTranslationKey = 'base.common.beaconscore'
+      break
+    case 'attestation':
+      efficiencyTranslationKey = 'dashboard.validator.summary.chart.efficiency.attestation'
+      break
+    case 'proposal':
+      efficiencyTranslationKey = 'dashboard.validator.summary.chart.efficiency.proposal'
+      break
+    case 'sync':
+      efficiencyTranslationKey = 'dashboard.validator.summary.chart.efficiency.sync'
+      break
+  }
+  return {
+    efficiencyTranslationKey,
+    id: efficiencyType,
+  }
+})
 watch(efficiency, (e) => {
   chartFilter.value.efficiency = e
 })
+const getEfficiencyTranslationKey = (id: EfficiencyType) => {
+  return efficiencyList.find(efficiencyType => efficiencyType.id === id)!.efficiencyTranslationKey
+}
 
 /** groups */
 const total = ref(
@@ -156,9 +175,23 @@ const selectedLabel = computed(() => {
       v-model="efficiency"
       :options="efficiencyList"
       option-value="id"
-      option-label="label"
+      option-label="labelTranslationKey"
       class="small"
-    />
+    >
+      <template #option="{ efficiencyTranslationKey }">
+        <BcTranslation
+          :keypath="efficiencyTranslationKey"
+          suppath="base.common.registered_trademark_symbol"
+        />
+      </template>
+
+      <template #value="{ value }">
+        <BcTranslation
+          :keypath="getEfficiencyTranslationKey(value)"
+          suppath="base.common.registered_trademark_symbol"
+        />
+      </template>
+    </BcDropdown>
 
     <BcMultiSelect
       v-model="selectedGroups"
diff --git a/frontend/components/dashboard/chart/DashboardChartTooltipHeader.vue b/frontend/components/dashboard/chart/DashboardChartTooltipHeader.vue
@@ -73,12 +73,18 @@ const epochText = computed(() => {
 })
 
 const title = computed(() => {
-  if (props.efficiencyType) {
-    return props.t(
-      `dashboard.validator.summary.chart.efficiency.${props.efficiencyType}`,
-    )
+  switch (props.efficiencyType) {
+    case 'all':
+      return `${props.t('base.common.beaconscore')}®`
+    case 'attestation':
+      return props.t('dashboard.validator.summary.chart.efficiency.attestation')
+    case 'proposal':
+      return props.t('dashboard.validator.summary.chart.efficiency.proposal')
+    case 'sync':
+      return props.t('dashboard.validator.summary.chart.efficiency.sync')
+    default:
+      return ''
   }
-  return undefined
 })
 </script>
 
diff --git a/frontend/components/dashboard/table/DashboardTableSummary.vue b/frontend/components/dashboard/table/DashboardTableSummary.vue
@@ -260,7 +260,10 @@ watch(
             >
               <template #header>
                 <div class="validators-header">
-                  <div>{{ $t("dashboard.validator.col.beaconscore") }}</div>
+                  <BcTranslation
+                    keypath="base.common.beaconscore"
+                    suppath="base.common.registered_trademark_symbol"
+                  />
                   <BcTooltip
                     class="info"
                     tooltip-class="summary-info-tooltip"
@@ -270,6 +273,7 @@ watch(
                       <BcTranslation
                         keypath="dashboard.beaconscore.template"
                         linkpath="dashboard.beaconscore.link"
+                        suppath="base.common.registered_trademark_symbol"
                         :to="externalLink.knowledgeBase.beaconScore"
                       />
                     </template>
diff --git a/frontend/components/dashboard/table/DashboardTableSummaryValue.vue b/frontend/components/dashboard/table/DashboardTableSummaryValue.vue
@@ -426,14 +426,21 @@ const openValidatorModal = () => {
         />
         <template #tooltip>
           <span class="efficiency-total-tooltip">
-            {{
-              $t('dashboard.validator.summary.tooltip.higher', {
-                name: groupName,
-                average: formatPercent(data.efficiencyTotal.networkEfficiency, {
+            <I18nT
+              keypath="dashboard.validator.summary.tooltip.higher"
+            >
+              <template #sup>
+                <sup>{{ $t("base.common.registered_trademark_symbol") }}</sup>
+              </template>
+              <template #name>
+                {{ groupName }}
+              </template>
+              <template #average>
+                {{ formatPercent(data.efficiencyTotal.networkEfficiency, {
                   maximumFractionDigits: 2,
-                }),
-              })
-            }}
+                }) }}
+              </template>
+            </I18nT>
           </span>
         </template>
       </BcTooltip>
@@ -453,14 +460,21 @@ const openValidatorModal = () => {
         />
         <template #tooltip>
           <span class="efficiency-total-tooltip">
-            {{
-              $t('dashboard.validator.summary.tooltip.equal', {
-                name: groupName,
-                average: formatPercent(data.efficiencyTotal.networkEfficiency, {
+            <I18nT
+              keypath="dashboard.validator.summary.tooltip.equal"
+            >
+              <template #sup>
+                <sup>{{ $t("base.common.registered_trademark_symbol") }}</sup>
+              </template>
+              <template #name>
+                {{ groupName }}
+              </template>
+              <template #average>
+                {{ formatPercent(data.efficiencyTotal.networkEfficiency, {
                   maximumFractionDigits: 2,
-                }),
-              })
-            }}
+                }) }}
+              </template>
+            </I18nT>
           </span>
         </template>
       </BcTooltip>
@@ -480,14 +494,21 @@ const openValidatorModal = () => {
         />
         <template #tooltip>
           <span class="efficiency-total-tooltip">
-            {{
-              $t('dashboard.validator.summary.tooltip.lower', {
-                name: groupName,
-                average: formatPercent(data.efficiencyTotal.networkEfficiency, {
+            <I18nT
+              keypath="dashboard.validator.summary.tooltip.lower"
+            >
+              <template #sup>
+                <sup>{{ $t("base.common.registered_trademark_symbol") }}</sup>
+              </template>
+              <template #name>
+                {{ groupName }}
+              </template>
+              <template #average>
+                {{ formatPercent(data.efficiencyTotal.networkEfficiency, {
                   maximumFractionDigits: 2,
-                }),
-              })
-            }}
+                }) }}
+              </template>
+            </I18nT>
           </span>
         </template>
       </BcTooltip>
diff --git a/frontend/i18n/locales/en.json b/frontend/i18n/locales/en.json
@@ -9,11 +9,13 @@
                 "try_again": "Try again"
             },
             "all": "All",
+            "beaconscore": "BeaconScore{sup}",
             "close": "Close",
             "ethereum": "Ethereum",
             "log_in": "Log in",
             "no_results": "No results found.",
             "open_navigation": "Open Navigation",
+            "registered_trademark_symbol": "®",
             "side_navigation": "Side Navigation",
             "something_went_wrong": "Something went wrong."
         },
@@ -172,7 +174,7 @@
         "account_dashboard": "Account Dashboard",
         "beaconscore": {
             "link": "knowledge base article",
-            "template": "Read more about how we calculate the BeaconScore in our {link}"
+            "template": "Read more about how we calculate the BeaconScore{sup} in our {link}"
         },
         "creation": {
             "network": {
@@ -351,7 +353,6 @@
             "col": {
                 "amount": "Amount",
                 "balance": "Balance",
-                "beaconscore": "BeaconScore",
                 "block_processed": "Block Processed",
                 "block_queued": "Block Queued",
                 "cl_rewards": "Cl Rewards",
@@ -443,7 +444,7 @@
                 "validators_limit_exceeded": "Cannot add validators. The maximum effective balance of the validators exceeds your plan's limit."
             },
             "overview": {
-                "24h_beaconscore": "BeaconScore (24h)",
+                "24h_beaconscore": "BeaconScore{sup} (24h)",
                 "30d_apr": "APR (30d)",
                 "30d_rewards": "Rewards (30d)",
                 "online_validators": "Online Validators",
@@ -528,7 +529,6 @@
                     "all_groups": "All Groups",
                     "average": "Network Average",
                     "efficiency": {
-                        "all": "BeaconScore",
                         "attestation": "Attestation Eff.",
                         "proposal": "Proposal Eff.",
                         "sync": "Sync Eff."
@@ -571,11 +571,11 @@
                 "tooltip": {
                     "amount_of_rounds": "(amount of rounds)",
                     "amount_of_validators": "(amount of validators)",
-                    "equal": "{name}'s BeaconScore is at the network average of {average}",
+                    "equal": "{name}'s BeaconScore{sup} is at the network average of {average}",
                     "estimated_loss": "Estimated loss based on avg. network performance.",
-                    "higher": "{name}'s BeaconScore is above the network average of {average}",
+                    "higher": "{name}'s BeaconScore{sup} is above the network average of {average}",
                     "live": "Validators missing two consecutive attestations are considered offline.",
-                    "lower": "{name}'s BeaconScore is below the network average of {average}"
+                    "lower": "{name}'s BeaconScore{sup} is below the network average of {average}"
                 },
                 "total_group_name": "Total Efficiency",
                 "validator_status_popout": "Open validator status details"
diff --git a/frontend/types/dashboard/summary.ts b/frontend/types/dashboard/summary.ts
@@ -97,7 +97,7 @@ export const EfficiencyTypes = [
   'attestation',
   'sync',
   'proposal',
-]
+] as const
 export type EfficiencyType = (typeof EfficiencyTypes)[number]
 
 export type SummaryChartFilter = {
