From 55853b1a7a67601d98526657fa257e4bf03f6243 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <>
Date: Thu, 25 Apr 2024 12:36:24 +0200
Subject: [PATCH 1/4] feat(histogram): connect the API

---
 src/components/earnings/EarningsData.vue | 42 +++++++++++-------------
 src/interfaces/HposInterface.ts          | 15 ++++++++-
 src/locales/en.ts                        |  1 +
 src/pages/EarningsPage.vue               | 15 ++++-----
 src/store/dashboard.ts                   | 14 ++++++--
 src/types/types.ts                       |  5 ++-
 6 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/src/components/earnings/EarningsData.vue b/src/components/earnings/EarningsData.vue
index 48a16f1e..41b4daff 100644
--- a/src/components/earnings/EarningsData.vue
+++ b/src/components/earnings/EarningsData.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import BaseButton from '@uicommon/components/BaseButton.vue'
 import { formatCurrency } from '@uicommon/utils/numbers'
-import { computed } from 'vue'
+// import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import EarningsChart from '@/components/earnings/EarningsChart.vue'
-import TrendChip from '@/components/TrendChip.vue'
+// import TrendChip from '@/components/TrendChip.vue'
 import { useGoToHoloFuel } from '@/composables/useGoToHoloFuel'
 import type { EarningsData } from '@/types/types'
 
@@ -15,19 +15,19 @@ const props = defineProps<{
 const { goToHoloFuel } = useGoToHoloFuel()
 const { t } = useI18n()
 
-const trendValue = computed(() => {
-  const currentEarnings = Number(props.earnings.current)
-  const previousEarnings = Number(props.earnings.previous)
-
-  return ((currentEarnings - previousEarnings) / previousEarnings) * 100
-})
-
-const trendDirection = computed(() => {
-  const currentEarnings = Number(props.earnings.current)
-  const previousEarnings = Number(props.earnings.previous)
-
-  return currentEarnings >= previousEarnings ? 'up' : 'down'
-})
+// const trendValue = computed(() => {
+//   const currentEarnings = Number(props.earnings.current)
+//   const previousEarnings = Number(props.earnings.previous)
+//
+//   return ((currentEarnings - previousEarnings) / previousEarnings) * 100
+// })
+//
+// const trendDirection = computed(() => {
+//   const currentEarnings = Number(props.earnings.current)
+//   const previousEarnings = Number(props.earnings.previous)
+//
+//   return currentEarnings >= previousEarnings ? 'up' : 'down'
+// })
 </script>
 
 <template>
@@ -35,11 +35,12 @@ const trendDirection = computed(() => {
     <div class="weekly-earnings-data__header">
       <div class="weekly-earnings-data__header-label">
         <span class="weekly-earnings-data__header-label-top">
-          {{ t('earnings.earnings_in_the_past', { numberOfDays: 7, trendDirection }) }}
+          <!--          {{ t('earnings.earnings_in_the_past', { numberOfDays: 7, trendDirection }) }}-->
+          {{ t('earnings.earnings_in_the_past_days', { numberOfDays: 7 }) }}
         </span>
         <span class="weekly-earnings-data__header-label-bottom">
-          {{ t('earnings.totalling', { amount: formatCurrency(props.earnings.current, 0) }) }}
-          <TrendChip :value="trendValue || 0" />
+          {{ t('earnings.totalling', { amount: formatCurrency(props.earnings.redeemed, 0) }) }}
+          <!--          <TrendChip :value="trendValue || 0" />-->
         </span>
       </div>
 
@@ -52,7 +53,7 @@ const trendDirection = computed(() => {
     </div>
 
     <EarningsChart
-      :data="props.earnings.daily"
+      :data="props.earnings.dailies"
       class="weekly-earnings-data__graph"
     />
   </div>
@@ -73,7 +74,6 @@ const trendDirection = computed(() => {
     &-label {
       display: flex;
       flex-direction: column;
-      opacity: 0.25;
       pointer-events: none;
 
       &-top {
@@ -94,8 +94,6 @@ const trendDirection = computed(() => {
 
   &__graph {
     margin-top: 10px;
-    opacity: 0.25;
-    pointer-events: none;
   }
 
   &__holofuel-button {
diff --git a/src/interfaces/HposInterface.ts b/src/interfaces/HposInterface.ts
index 3528a8a4..2a3f0ff1 100644
--- a/src/interfaces/HposInterface.ts
+++ b/src/interfaces/HposInterface.ts
@@ -5,7 +5,7 @@ import { kAuthTokenLSKey, kCoreAppVersionLSKey } from '@/constants'
 import kHttpStatus from '@/constants/httpStatues'
 import router from '@/router'
 import { isKycLevel } from '@/types/predicates'
-import type { CheckAuthResponse, EUserKycLevel, PricesData } from '@/types/types'
+import type { CheckAuthResponse, EarningsData, EUserKycLevel, PricesData } from '@/types/types'
 import { ECriteriaType, EHostingPlan } from '@/types/types'
 import { retry } from '@/utils/functionUtils'
 import { eraseHpAdminKeypair, getHpAdminKeypair } from '@/utils/keyManagement'
@@ -33,6 +33,7 @@ interface HposInterface {
   getRedemptionHistory: () => Promise<HposHolochainCallResponse>
   getCoreAppVersion: () => Promise<CoreAppVersion>
   redeemHoloFuel: (payload: RedeemHoloFuelPayload) => Promise<RedemptionTransaction | boolean>
+  getHoloFuelDailyStats: () => Promise<unknown | boolean>
   HPOS_API_URL: string
 }
 
@@ -155,6 +156,7 @@ type HposHolochainCallResponse =
   | EUserKycLevel
   | ServiceLogsResponse
   | ZomeCallResponse
+  | EarningsData
 
 type HposAdminCallResponse = HposConfigResponse
 
@@ -1000,6 +1002,16 @@ export function useHposInterface(): HposInterface {
     }
   }
 
+  async function getHoloFuelDailyStats(): Promise<HposHolochainCallResponse> {
+    const result = await hposHolochainCall({
+      method: 'get',
+      pathPrefix: '/api/v2',
+      path: '/holofuel_redeemable_for_last_week'
+    })
+
+    return result
+  }
+
   return {
     getUsage,
     getHostedHApps,
@@ -1023,6 +1035,7 @@ export function useHposInterface(): HposInterface {
     stopHostingHApp,
     updateHAppHostingPlan,
     getServiceLogs,
+    getHoloFuelDailyStats,
     HPOS_API_URL
   }
 }
diff --git a/src/locales/en.ts b/src/locales/en.ts
index fca73ef4..b52ee060 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -35,6 +35,7 @@ export default {
   },
   earnings: {
     earnings_in_the_past: 'Earnings in the past {numberOfDays} days are {trendDirection}',
+    earnings_in_the_past_days: 'Earnings in the past {numberOfDays} days',
     exceptions: 'Exceptions',
     last_30_days: 'Last 30 days',
     last_7_days: 'Last 7 days',
diff --git a/src/pages/EarningsPage.vue b/src/pages/EarningsPage.vue
index c0062513..250a2310 100644
--- a/src/pages/EarningsPage.vue
+++ b/src/pages/EarningsPage.vue
@@ -6,7 +6,6 @@ import PrimaryLayout from '@/components/PrimaryLayout.vue'
 import { useDashboardStore } from '@/store/dashboard'
 import { useUserStore } from '@/store/user'
 import { isError as isErrorPredicate } from '@/types/predicates'
-import type { EarningsData } from '@/types/types'
 
 const dashboardStore = useDashboardStore()
 const userStore = useUserStore()
@@ -19,13 +18,6 @@ const rawWeeklyEarnings = computed((): string | number =>
     ? dashboardStore.hostEarnings.earnings?.last7days
     : 0
 )
-
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-const earnings: EarningsData = {
-  current: 0,
-  previous: 0,
-  daily: []
-}
 /* eslint-enable @typescript-eslint/no-magic-numbers */
 
 const redeemableHoloFuel = computed((): number =>
@@ -36,6 +28,10 @@ const redeemableHoloFuel = computed((): number =>
 
 const kycLevel = computed(() => userStore.kycLevel)
 
+async function getHoloFuelDailyStats(): Promise<void> {
+  await dashboardStore.getHoloFuelDailyStats()
+}
+
 async function getEarnings(): Promise<void> {
   isLoading.value = true
   await dashboardStore.getEarnings()
@@ -45,6 +41,7 @@ async function getEarnings(): Promise<void> {
 onMounted(async (): Promise<void> => {
   if (!rawWeeklyEarnings.value || !Number(rawWeeklyEarnings.value)) {
     await getEarnings()
+    await getHoloFuelDailyStats()
   }
 })
 </script>
@@ -56,7 +53,7 @@ onMounted(async (): Promise<void> => {
   >
     <div>
       <EarningsCard
-        :data="earnings"
+        :data="dashboardStore.earningsStats"
         :is-loading="isLoading"
         :is-error="isError"
         data-test-earnings-weekly-earnings-card
diff --git a/src/store/dashboard.ts b/src/store/dashboard.ts
index 99473874..966764cf 100644
--- a/src/store/dashboard.ts
+++ b/src/store/dashboard.ts
@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia'
 import { HApp, HostEarnings, UsageResponse, useHposInterface } from '@/interfaces/HposInterface'
+import type { EarningsData } from '@/types/types'
 
-const { getUsage, getHostedHApps, getHostEarnings } = useHposInterface()
+const { getUsage, getHostedHApps, getHostEarnings, getHoloFuelDailyStats } = useHposInterface()
 
 interface State {
   usage: UsageResponse | { error: unknown }
   hostEarnings: HostEarnings | { error: unknown }
   hostedHApps: HApp[] | { error: unknown }
+  earningsStats: EarningsData | { error: unknown }
 }
 
 export const useDashboardStore = defineStore('dashboard', {
@@ -25,7 +27,11 @@ export const useDashboardStore = defineStore('dashboard', {
       holofuel: { balance: '0', available: '0', redeemable: '0' },
       recentPayments: []
     },
-    hostedHApps: []
+    hostedHApps: [],
+    earningsStats: {
+      dailies: [],
+      redeemed: 0
+    }
   }),
 
   actions: {
@@ -39,6 +45,10 @@ export const useDashboardStore = defineStore('dashboard', {
 
     async getEarnings(): Promise<void> {
       this.hostEarnings = await getHostEarnings()
+    },
+
+    async getHoloFuelDailyStats(): Promise<void> {
+      this.earningsStats = await getHoloFuelDailyStats()
     }
   }
 })
diff --git a/src/types/types.ts b/src/types/types.ts
index 65532d41..822c1384 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -113,9 +113,8 @@ export interface DailyEarningsData {
 }
 
 export interface EarningsData {
-  current: number
-  previous: number
-  daily: DailyEarningsData[]
+  redeemed: number
+  dailies: DailyEarningsData[]
 }
 
 export enum ECriteriaType {

From 048f11fcef377d147d5c384a7806eb9246abde47 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <>
Date: Fri, 26 Apr 2024 11:23:53 +0200
Subject: [PATCH 2/4] fix: sepolia tx link

---
 src/components/earnings/RedemptionHistoryTableRow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/earnings/RedemptionHistoryTableRow.vue b/src/components/earnings/RedemptionHistoryTableRow.vue
index ae8dab2d..f12bdb01 100644
--- a/src/components/earnings/RedemptionHistoryTableRow.vue
+++ b/src/components/earnings/RedemptionHistoryTableRow.vue
@@ -118,7 +118,7 @@ function showTransactionPrice(state: boolean): void {
     >
       <a
         v-if="props.redemption.transactionEthHash"
-        :href="`https://goerli.etherscan.io/tx/${props.redemption.transactionEthHash}`"
+        :href="`https://sepolia.etherscan.io/tx/${props.redemption.transactionEthHash}`"
         target="_blank"
         class="redemption-history-table-row__transaction-link"
       >

From 9e7c2539cbad2a3a14d86801f23d00e24f949a73 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Mon, 20 May 2024 12:52:00 +0200
Subject: [PATCH 3/4] fix: histogram chart

---
 src/components/earnings/EarningsCard.vue  |  6 ++-
 src/components/earnings/EarningsChart.vue | 32 ++++++++++++--
 src/components/earnings/EarningsData.vue  | 54 ++++++++++++++---------
 src/interfaces/HposInterface.ts           |  3 +-
 src/pages/EarningsPage.vue                | 17 +++----
 src/store/dashboard.ts                    | 14 +++++-
 src/types/types.ts                        |  4 +-
 7 files changed, 92 insertions(+), 38 deletions(-)

diff --git a/src/components/earnings/EarningsCard.vue b/src/components/earnings/EarningsCard.vue
index 0d55f31c..40ef407d 100644
--- a/src/components/earnings/EarningsCard.vue
+++ b/src/components/earnings/EarningsCard.vue
@@ -13,6 +13,7 @@ const emit = defineEmits(['try-again-clicked'])
 const props = defineProps<{
   data: EarningsData
   isLoading: boolean
+  isLoadingStats: boolean
   isError: boolean
 }>()
 </script>
@@ -24,7 +25,10 @@ const props = defineProps<{
     @try-again-clicked="emit('try-again-clicked')"
   >
     <template #left>
-      <EarningsDataComponent :earnings="props.data" />
+      <EarningsDataComponent
+        :earnings="props.data"
+        :is-loading="props.isLoadingStats"
+      />
     </template>
 
     <template #right>
diff --git a/src/components/earnings/EarningsChart.vue b/src/components/earnings/EarningsChart.vue
index 33050fac..d9383acb 100644
--- a/src/components/earnings/EarningsChart.vue
+++ b/src/components/earnings/EarningsChart.vue
@@ -2,15 +2,37 @@
 import { formatCurrency } from '@uicommon/utils/numbers'
 import ApexCharts from 'apexcharts'
 import dayjs from 'dayjs'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useDashboardStore } from '@/store/dashboard'
 import type { DailyEarningsData } from '@/types/types'
 
+const dashboardStore = useDashboardStore()
+
 const chart = ref<ApexCharts | null>(null)
 
 const props = defineProps<{
   data: DailyEarningsData[]
 }>()
 
+function presentCurrency(value: number): string {
+  if (isNaN(value)) {
+    return '--'
+  }
+
+  if (value === 0) {
+    return '0 HF'
+  }
+
+  const k = 1000
+  const sizes = ['', 'K', 'M']
+
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  const i = Math.min(Math.floor(Math.log(value) / Math.log(k)), 4)
+
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  return `${parseFloat((value / Math.pow(k, i)).toFixed(2))}${sizes[i]}`
+}
+
 const options = computed(() => ({
   series: [
     {
@@ -81,7 +103,7 @@ const options = computed(() => ({
       offsetX: -1,
       offsetY: 0,
       rotate: 0,
-      formatter: (value) => value
+      formatter: (value) => `${presentCurrency(value)}`
     },
     axisBorder: {
       show: true,
@@ -152,7 +174,7 @@ watch(
   () => props.data,
   async (value) => {
     if (value && chart.value) {
-      chart.value.updateSeries(value)
+      await chart.value.updateSeries(value)
     }
   },
   {
@@ -166,6 +188,10 @@ onMounted(async () => {
     await chart.value.render()
   }
 })
+
+onUnmounted(() => {
+  dashboardStore.resetHoloFuelDailyStats()
+})
 </script>
 
 <template>
diff --git a/src/components/earnings/EarningsData.vue b/src/components/earnings/EarningsData.vue
index 41b4daff..33efe7bc 100644
--- a/src/components/earnings/EarningsData.vue
+++ b/src/components/earnings/EarningsData.vue
@@ -1,46 +1,39 @@
 <script setup lang="ts">
 import BaseButton from '@uicommon/components/BaseButton.vue'
 import { formatCurrency } from '@uicommon/utils/numbers'
-// import { computed } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import CircleSpinner from '../../../ui-common-library/src/components/CircleSpinner.vue'
+import { ESpinnerSize } from '../../../ui-common-library/src/types/ui'
 import EarningsChart from '@/components/earnings/EarningsChart.vue'
-// import TrendChip from '@/components/TrendChip.vue'
 import { useGoToHoloFuel } from '@/composables/useGoToHoloFuel'
 import type { EarningsData } from '@/types/types'
 
 const props = defineProps<{
   earnings: EarningsData
+  isLoading: boolean
 }>()
 
 const { goToHoloFuel } = useGoToHoloFuel()
 const { t } = useI18n()
 
-// const trendValue = computed(() => {
-//   const currentEarnings = Number(props.earnings.current)
-//   const previousEarnings = Number(props.earnings.previous)
-//
-//   return ((currentEarnings - previousEarnings) / previousEarnings) * 100
-// })
-//
-// const trendDirection = computed(() => {
-//   const currentEarnings = Number(props.earnings.current)
-//   const previousEarnings = Number(props.earnings.previous)
-//
-//   return currentEarnings >= previousEarnings ? 'up' : 'down'
-// })
+const totalEarnings = computed(() =>
+  props.earnings.dailies.reduce((acc, curr) => acc + Number(curr.paid) + Number(curr.unpaid), 0)
+)
 </script>
 
 <template>
   <div class="weekly-earnings-data">
     <div class="weekly-earnings-data__header">
-      <div class="weekly-earnings-data__header-label">
+      <div
+        class="weekly-earnings-data__header-label"
+        :class="{ 'weekly-earnings-data--loading': props.isLoading }"
+      >
         <span class="weekly-earnings-data__header-label-top">
-          <!--          {{ t('earnings.earnings_in_the_past', { numberOfDays: 7, trendDirection }) }}-->
           {{ t('earnings.earnings_in_the_past_days', { numberOfDays: 7 }) }}
         </span>
         <span class="weekly-earnings-data__header-label-bottom">
-          {{ t('earnings.totalling', { amount: formatCurrency(props.earnings.redeemed, 0) }) }}
-          <!--          <TrendChip :value="trendValue || 0" />-->
+          {{ t('earnings.totalling', { amount: formatCurrency(totalEarnings, 2) }) }}
         </span>
       </div>
 
@@ -53,9 +46,19 @@ const { t } = useI18n()
     </div>
 
     <EarningsChart
-      :data="props.earnings.dailies"
+      v-if="!props.isLoading && props.earnings.dailies.length > 0"
+      :data="[...props.earnings.dailies].reverse()"
       class="weekly-earnings-data__graph"
     />
+
+    <div
+      v-else
+      class="weekly-earnings-data__graph--loading"
+    >
+      <CircleSpinner
+        :scale="ESpinnerSize.small"
+      />
+    </div>
   </div>
 </template>
 
@@ -67,6 +70,10 @@ const { t } = useI18n()
   margin-top: 10px;
   padding: 0 60px;
 
+  &--loading {
+    opacity: 0.5;
+  }
+
   &__header {
     display: flex;
     justify-content: space-between;
@@ -94,6 +101,13 @@ const { t } = useI18n()
 
   &__graph {
     margin-top: 10px;
+
+    &--loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 255px;
+    }
   }
 
   &__holofuel-button {
diff --git a/src/interfaces/HposInterface.ts b/src/interfaces/HposInterface.ts
index 2a3f0ff1..ac6c785b 100644
--- a/src/interfaces/HposInterface.ts
+++ b/src/interfaces/HposInterface.ts
@@ -33,7 +33,8 @@ interface HposInterface {
   getRedemptionHistory: () => Promise<HposHolochainCallResponse>
   getCoreAppVersion: () => Promise<CoreAppVersion>
   redeemHoloFuel: (payload: RedeemHoloFuelPayload) => Promise<RedemptionTransaction | boolean>
-  getHoloFuelDailyStats: () => Promise<unknown | boolean>
+  getHoloFuelDailyStats: () => Promise<EarningsData | boolean>
+  resetHoloFuelDailyStats: () => void
   HPOS_API_URL: string
 }
 
diff --git a/src/pages/EarningsPage.vue b/src/pages/EarningsPage.vue
index 250a2310..753c9137 100644
--- a/src/pages/EarningsPage.vue
+++ b/src/pages/EarningsPage.vue
@@ -11,15 +11,11 @@ const dashboardStore = useDashboardStore()
 const userStore = useUserStore()
 
 const isLoading = ref(false)
+const isLoadingStats = ref(false)
+
 const isError = computed(() => !!dashboardStore.hostEarnings.error)
 
-const rawWeeklyEarnings = computed((): string | number =>
-  !isErrorPredicate(dashboardStore.hostEarnings)
-    ? dashboardStore.hostEarnings.earnings?.last7days
-    : 0
-)
 /* eslint-enable @typescript-eslint/no-magic-numbers */
-
 const redeemableHoloFuel = computed((): number =>
   !isErrorPredicate(dashboardStore.hostEarnings)
     ? Number(dashboardStore.hostEarnings.holofuel.redeemable || 0)
@@ -29,7 +25,9 @@ const redeemableHoloFuel = computed((): number =>
 const kycLevel = computed(() => userStore.kycLevel)
 
 async function getHoloFuelDailyStats(): Promise<void> {
+  isLoadingStats.value = true
   await dashboardStore.getHoloFuelDailyStats()
+  isLoadingStats.value = false
 }
 
 async function getEarnings(): Promise<void> {
@@ -39,10 +37,8 @@ async function getEarnings(): Promise<void> {
 }
 
 onMounted(async (): Promise<void> => {
-  if (!rawWeeklyEarnings.value || !Number(rawWeeklyEarnings.value)) {
-    await getEarnings()
-    await getHoloFuelDailyStats()
-  }
+  await getEarnings()
+  await getHoloFuelDailyStats()
 })
 </script>
 
@@ -55,6 +51,7 @@ onMounted(async (): Promise<void> => {
       <EarningsCard
         :data="dashboardStore.earningsStats"
         :is-loading="isLoading"
+        :is-loading-stats="isLoadingStats"
         :is-error="isError"
         data-test-earnings-weekly-earnings-card
         @try-again-clicked="getEarnings"
diff --git a/src/store/dashboard.ts b/src/store/dashboard.ts
index 966764cf..982603d4 100644
--- a/src/store/dashboard.ts
+++ b/src/store/dashboard.ts
@@ -2,7 +2,12 @@ import { defineStore } from 'pinia'
 import { HApp, HostEarnings, UsageResponse, useHposInterface } from '@/interfaces/HposInterface'
 import type { EarningsData } from '@/types/types'
 
-const { getUsage, getHostedHApps, getHostEarnings, getHoloFuelDailyStats } = useHposInterface()
+const {
+  getUsage,
+  getHostedHApps,
+  getHostEarnings,
+  getHoloFuelDailyStats
+} = useHposInterface()
 
 interface State {
   usage: UsageResponse | { error: unknown }
@@ -49,6 +54,13 @@ export const useDashboardStore = defineStore('dashboard', {
 
     async getHoloFuelDailyStats(): Promise<void> {
       this.earningsStats = await getHoloFuelDailyStats()
+    },
+
+    resetHoloFuelDailyStats(): void {
+      this.earningsStats = {
+        dailies: [],
+        redeemed: 0
+      }
     }
   }
 })
diff --git a/src/types/types.ts b/src/types/types.ts
index 822c1384..c58e6d6e 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -108,8 +108,8 @@ export interface InvoiceDue {
 
 export interface DailyEarningsData {
   date: string
-  paid: number
-  unpaid: number
+  paid: string
+  unpaid: string
 }
 
 export interface EarningsData {

From ec997db710cbd3999a0ec125dfb23532c3a08926 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Tue, 21 May 2024 10:48:02 +0200
Subject: [PATCH 4/4] feat: histogram chart design update

---
 src/components/earnings/EarningsChart.vue | 2 +-
 src/components/earnings/EarningsData.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/earnings/EarningsChart.vue b/src/components/earnings/EarningsChart.vue
index d9383acb..32915254 100644
--- a/src/components/earnings/EarningsChart.vue
+++ b/src/components/earnings/EarningsChart.vue
@@ -20,7 +20,7 @@ function presentCurrency(value: number): string {
   }
 
   if (value === 0) {
-    return '0 HF'
+    return '0'
   }
 
   const k = 1000
diff --git a/src/components/earnings/EarningsData.vue b/src/components/earnings/EarningsData.vue
index 33efe7bc..62fbdcaa 100644
--- a/src/components/earnings/EarningsData.vue
+++ b/src/components/earnings/EarningsData.vue
@@ -33,7 +33,7 @@ const totalEarnings = computed(() =>
           {{ t('earnings.earnings_in_the_past_days', { numberOfDays: 7 }) }}
         </span>
         <span class="weekly-earnings-data__header-label-bottom">
-          {{ t('earnings.totalling', { amount: formatCurrency(totalEarnings, 2) }) }}
+          {{ formatCurrency(totalEarnings, 2) }} HF
         </span>
       </div>