refactor: simplify number formatting functions

frontend/components/notifications/NotificationsNetworkTable.vue

@@ -36,7 +36,9 @@ const textThreshold = (row: NotificationNetworksTableRow) => {
   if (
     event_type === 'gas_above' || event_type === 'gas_below'
   ) {
-    return `${formatWeiTo(threshold ?? '0', { unit: 'gwei' })} ${$t('common.units.gwei')}`
+    return `${formatValue(threshold ?? '0', {
+      to: 'gwei',
+    })} ${$t('common.units.gwei')}`
   }
   if (event_type === 'participation_rate') {
     return `${formatToFraction(threshold ?? 0)} %`

frontend/components/notifications/management/NotificationsManagementNetwork.vue

@@ -16,8 +16,12 @@ const currentNetwork = computed(
 )
 const currentNetworkSettings = computed(() => currentNetwork.value?.settings)
 
-const thresholdGasAbove = ref(formatWeiTo(currentNetworkSettings.value?.gas_above_threshold ?? '0', { unit: 'gwei' }))
-const thresholdGasBelow = ref(formatWeiTo(currentNetworkSettings.value?.gas_below_threshold ?? '0', { unit: 'gwei' }))
+const thresholdGasAbove = ref(formatValue(currentNetworkSettings.value?.gas_above_threshold ?? '0', {
+  to: 'gwei',
+}))
+const thresholdGasBelow = ref(formatValue(currentNetworkSettings.value?.gas_below_threshold ?? '0', {
+  to: 'gwei',
+}))
 const thresholdParticipationRate = ref(formatFraction(currentNetworkSettings.value?.participation_rate_threshold ?? 0))
 const hasGasAbove = ref(currentNetworkSettings.value?.is_gas_above_subscribed ?? false)
 const hasGasBelow = ref(currentNetworkSettings.value?.is_gas_below_subscribed ?? false)
@@ -39,8 +43,14 @@ watchDebounced([
   currentNetworkSettings.value.is_new_reward_round_subscribed = hasNewRewardRound.value
   currentNetworkSettings.value.is_participation_rate_subscribed = hasParticipationRate.value
 
-  currentNetworkSettings.value.gas_above_threshold = formatToWei(thresholdGasAbove.value, { from: 'gwei' })
-  currentNetworkSettings.value.gas_below_threshold = formatToWei(thresholdGasBelow.value, { from: 'gwei' })
+  currentNetworkSettings.value.gas_above_threshold = formatValue(thresholdGasAbove.value, {
+    from: 'gwei',
+    to: 'wei',
+  })
+  currentNetworkSettings.value.gas_below_threshold = formatValue(thresholdGasBelow.value, {
+    from: 'gwei',
+    to: 'wei',
+  })
   currentNetworkSettings.value.participation_rate_threshold = Number(formatToFraction(thresholdParticipationRate.value))
 
   await notificationsManagementStore.setNotificationForNetwork({

frontend/utils/format.ts

@@ -1,7 +1,4 @@
-import {
-  commify,
-  formatUnits,
-} from '@ethersproject/units'
+import { commify } from '@ethersproject/units'
 import {
   DateTime, type StringUnitLength,
 } from 'luxon'
@@ -332,31 +329,24 @@ export function formatToPercent(value: NumberOrString, option?: { locale?: strin
   }).format(Number(value))
 }
 
-export function formatToWei(value: string, {
-  from,
-}: {
-  from: 'gwei',
-},
-) {
-  const bigValue = BigInt(Math.round(Number(value)))
-  let result = ''
-  if (from === 'gwei') {
-    result = `${bigValue * 1_000_000_000n}`
-  }
-  return result
-}
-
-export function formatWeiTo(wei: string, {
+export const formatValue = (value: string, {
+  from = 'wei',
   maximumFractionDigits = 0,
   minimumFractionDigits = 0,
-  unit,
+  to,
+  useGrouping = false,
 }: {
+  from?: CryptoUnit,
   maximumFractionDigits?: number,
   minimumFractionDigits?: number,
-  unit: 'gwei',
-}) {
-  return new Intl.NumberFormat('en-US', {
+  to: CryptoUnit,
+  useGrouping?: boolean,
+}) => {
+  const scaleBy = unitFactorCrypto[from] - unitFactorCrypto[to]
+  return formatNumber(value, {
     maximumFractionDigits,
     minimumFractionDigits,
-  }).format(Number(formatUnits(wei, unit)))
+    scaleBy,
+    useGrouping,
+  })
 }