Merge branch 'develop' into feature/hosting-categories

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>

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'
+  }
+
+  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>

src/components/earnings/EarningsData.vue

@@ -3,43 +3,37 @@ import BaseButton from '@uicommon/components/BaseButton.vue'
 import { formatCurrency } from '@uicommon/utils/numbers'
 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.current, 0) }) }}
-          <TrendChip :value="trendValue || 0" />
+          {{ formatCurrency(totalEarnings, 2) }} HF
         </span>
       </div>
 
@@ -52,9 +46,19 @@ const trendDirection = computed(() => {
     </div>
 
     <EarningsChart
-      :data="props.earnings.daily"
+      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>
 
@@ -66,14 +70,17 @@ const trendDirection = computed(() => {
   margin-top: 10px;
   padding: 0 60px;
 
+  &--loading {
+    opacity: 0.5;
+  }
+
   &__header {
     display: flex;
     justify-content: space-between;
 
     &-label {
       display: flex;
       flex-direction: column;
-      opacity: 0.25;
       pointer-events: none;
 
       &-top {
@@ -94,8 +101,13 @@ const trendDirection = computed(() => {
 
   &__graph {
     margin-top: 10px;
-    opacity: 0.25;
-    pointer-events: none;
+
+    &--loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 255px;
+    }
   }
 
   &__holofuel-button {

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"
       >

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,8 @@ interface HposInterface {
   getRedemptionHistory: () => Promise<HposHolochainCallResponse>
   getCoreAppVersion: () => Promise<CoreAppVersion>
   redeemHoloFuel: (payload: RedeemHoloFuelPayload) => Promise<RedemptionTransaction | boolean>
+  getHoloFuelDailyStats: () => Promise<EarningsData | boolean>
+  resetHoloFuelDailyStats: () => void
   HPOS_API_URL: string
 }
 
@@ -163,6 +165,7 @@ type HposHolochainCallResponse =
   | EUserKycLevel
   | ServiceLogsResponse
   | ZomeCallResponse
+  | EarningsData
 
 type HposAdminCallResponse = HposConfigResponse
 
@@ -964,6 +967,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,
@@ -987,6 +1000,7 @@ export function useHposInterface(): HposInterface {
     stopHostingHApp,
     updateHAppHostingPlan,
     getServiceLogs,
+    getHoloFuelDailyStats,
     HPOS_API_URL
   }
 }

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',

src/pages/EarningsPage.vue

@@ -6,28 +6,16 @@ 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()
 
 const isLoading = ref(false)
-const isError = computed(() => !!dashboardStore.hostEarnings.error)
+const isLoadingStats = ref(false)
 
-const rawWeeklyEarnings = computed((): string | number =>
-  !isErrorPredicate(dashboardStore.hostEarnings)
-    ? dashboardStore.hostEarnings.earnings?.last7days
-    : 0
-)
+const isError = computed(() => !!dashboardStore.hostEarnings.error)
 
-/* 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 =>
   !isErrorPredicate(dashboardStore.hostEarnings)
     ? Number(dashboardStore.hostEarnings.holofuel.redeemable || 0)
@@ -36,16 +24,21 @@ 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> {
   isLoading.value = true
   await dashboardStore.getEarnings()
   isLoading.value = false
 }
 
 onMounted(async (): Promise<void> => {
-  if (!rawWeeklyEarnings.value || !Number(rawWeeklyEarnings.value)) {
-    await getEarnings()
-  }
+  await getEarnings()
+  await getHoloFuelDailyStats()
 })
 </script>
 
@@ -56,8 +49,9 @@ onMounted(async (): Promise<void> => {
   >
     <div>
       <EarningsCard
-        :data="earnings"
+        :data="dashboardStore.earningsStats"
         :is-loading="isLoading"
+        :is-loading-stats="isLoadingStats"
         :is-error="isError"
         data-test-earnings-weekly-earnings-card
         @try-again-clicked="getEarnings"

src/store/dashboard.ts

@@ -1,12 +1,19 @@
 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 +32,11 @@ export const useDashboardStore = defineStore('dashboard', {
       holofuel: { balance: '0', available: '0', redeemable: '0' },
       recentPayments: []
     },
-    hostedHApps: []
+    hostedHApps: [],
+    earningsStats: {
+      dailies: [],
+      redeemed: 0
+    }
   }),
 
   actions: {
@@ -39,6 +50,17 @@ export const useDashboardStore = defineStore('dashboard', {
 
     async getEarnings(): Promise<void> {
       this.hostEarnings = await getHostEarnings()
+    },
+
+    async getHoloFuelDailyStats(): Promise<void> {
+      this.earningsStats = await getHoloFuelDailyStats()
+    },
+
+    resetHoloFuelDailyStats(): void {
+      this.earningsStats = {
+        dailies: [],
+        redeemed: 0
+      }
     }
   }
 })