Merge pull request #127 from Holo-Host/b06097-pd-host-kyc2

Host Console UI: Hosts can only enable hosting with KYC Level 2
Holo-Host · Dec 7, 2023 · 44f5461 · 44f5461
2 parents d88fe09 + 19e3790
commit 44f5461
Show file tree

Hide file tree

Showing 11 changed files with 419 additions and 90 deletions.
diff --git a/mock-hpos-api/defaultResponse.js b/mock-hpos-api/defaultResponse.js
@@ -219,6 +219,99 @@ const redemptionTransaction = {
     redemption: '0x12345678...'
   },}
 
+const mockHapps = [
+  {
+    id: 'ef48c978-3a34-42fc-a0b7-8ffa89f2bebb',
+    name: 'CoreApp',
+    enabled: true,
+    isPaused: false,
+    special_installed_app_id: coreAppVersion.version,
+  }
+]
+
+const mockHosts = [
+  {
+    "host_pub_key": "uhCAkokIsoB0_NuY_GbL4_xmVlwoWvnJJcvRTOwFvAAU1iCrWE7ck",
+    "holoport_id": "QuantumCoreServer",
+    "preferences": {
+      "timestamp": 1698953469075923,
+      "max_fuel_before_invoice": "1",
+      "price_compute": "75",
+      "price_storage": "75",
+      "price_bandwidth": "75",
+      "max_time_before_invoice": {
+        "secs": 18446744073709552000,
+        "nanos": 999999999
+      }
+    },
+    "preferences_hash": "uhCkkcbUz9JvKRn56E_c3IEaimnEYifLo2CbjavFrYYjYyqx05AI5"
+  },
+  {
+    "host_pub_key": "uhCAkokIsoB0_NuY_GbK6_xmVlwoWvnJJcvRTOwFvAAU1iCrWE7ck",
+    "holoport_id": "NimbusEdgeServer",
+    "preferences": {
+      "timestamp": 1698953469075923,
+      "max_fuel_before_invoice": "1",
+      "price_compute": "50",
+      "price_storage": "50",
+      "price_bandwidth": "50",
+      "max_time_before_invoice": {
+        "secs": 18446744073709552000,
+        "nanos": 999999999
+      }
+    },
+    "preferences_hash": "uhCkkcbUz9JvKRn56E_c3IEaimnEYifLo2CbjavFrYYjYyqx05AI5"
+  },
+  {
+    "host_pub_key": "uhCAkokIsoB0_NuY_GbJ7_xmVlwoWvnJJcvRTOwFvAAU1iCrWE7ck",
+    "holoport_id": "Happy PhoenixBlazeServer",
+    "preferences": {
+      "timestamp": 1698953469075923,
+      "max_fuel_before_invoice": "1",
+      "price_compute": "100",
+      "price_storage": "100",
+      "price_bandwidth": "100",
+      "max_time_before_invoice": {
+        "secs": 18446744073709552000,
+        "nanos": 999999999
+      }
+    },
+    "preferences_hash": "uhCkkcbUz9JvKRn56E_c3IEaimnEYifLo2CbjavFrYYjYyqx05AI5"
+  },
+  {
+    "host_pub_key": "uhCAkokIsoB0_NuY_GbI8_xmVlwoWvnJJcvRTOwFvAAU1iCrWE7ck",
+    "holoport_id": "ZenithPulseServer",
+    "preferences": {
+      "timestamp": 1698953469075923,
+      "max_fuel_before_invoice": "1",
+      "price_compute": "25",
+      "price_storage": "25",
+      "price_bandwidth": "25",
+      "max_time_before_invoice": {
+        "secs": 18446744073709552000,
+        "nanos": 999999999
+      }
+    },
+    "preferences_hash": "uhCkkcbUz9JvKRn56E_c3IEaimnEYifLo2CbjavFrYYjYyqx05AI5"
+  },
+  {
+    "host_pub_key": "uhCAkokIsoB0_NuY_GbH9_xmVlwoWvnJJcvRTOwFvAAU1iCrWE7ck",
+    "holoport_id": "NebulaSparkServer",
+    "preferences": {
+      "timestamp": 1698953469075923,
+      "max_fuel_before_invoice": "1",
+      "price_compute": "0",
+      "price_storage": "0",
+      "price_bandwidth": "0",
+      "max_time_before_invoice": {
+        "secs": 18446744073709552000,
+        "nanos": 999999999
+      }
+    },
+    "preferences_hash": "uhCkkcbUz9JvKRn56E_c3IEaimnEYifLo2CbjavFrYYjYyqx05AI5"
+  }        
+]
+
 const mockPaidInvoicesData = [
   {
     id: 'uhCEkuoMG0RpLkYciC3ZO2ZiedEhDq9yZJLrbjjVmNmXvjpvaAE6H',
@@ -538,7 +631,12 @@ const mockKycData = {
   "kyc": 'holo_kyc_2'
 }
 
-const mockHostPreferences = {
+let mockDefaultHappPreferences = {
+  max_fuel_before_invoice: '1000',
+  max_time_before_invoice: [2000, 500],
+  price_bandwidth: (Math.random() * 10).toFixed(5).toString(),
+  price_compute: (Math.random() * 10).toFixed(5).toString(),
+  price_storage: (Math.random() * 10).toFixed(5).toString()
 }
 
 // NB: both /api and /holochain-api calls are mocked here
@@ -547,13 +645,14 @@ const data = {
     '/api/v1/config': userConfig,
     '/api/v1/status': holoNixpkgs,
     '/holochain-api/v1/hosted_happs': happs,
+    '/holochain-api/v1/get_happs': mockHapps,
+    '/holochain-api/v1/get_hosts': mockHosts,
     '/holochain-api/v1/usage': usage,
     '/holochain-api/v1/host_earnings': earnings,
     '/holochain-api/v1/core_app_version': coreAppVersion,
     '/holochain-api/v1/host_invoices': mockPaidInvoicesData,
-    '/holochain-api/v1/host_preferences': mockHostPreferences,
     '/holochain-api/v1/redemptions': mockRedemptionHistoryData,
-    '/holochain-api/v1/kyc': mockKycData
+    '/holochain-api/v1/kyc': mockKycData.kyc
   },
   put: {
     '/api/v1/config': (args) => args,
@@ -566,6 +665,10 @@ const data = {
           return getMyProfile
         case 'get_all_reserve_accounts_details':
           return getAllReserveAccountsDetails
+        case 'get_default_happ_preferences':
+          return mockDefaultHappPreferences
+        case 'set_default_happ_preferences':
+          return true
         case 'redeem':
           return redemptionTransaction
       }

diff --git a/src/components/settings/hostingPreferences/EditablePriceRow.vue b/src/components/settings/hostingPreferences/EditablePriceRow.vue
@@ -5,7 +5,6 @@ import { ref } from 'vue'
 import CircledExIcon from '../../icons/CircledExIcon.vue'
 import FilledCheckIcon from '../../icons/FilledCheckIcon.vue'
 import PencilIcon from '../../icons/PencilIcon.vue'
-import SettingsRow from '../SettingsRow.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -23,7 +22,7 @@ const props = withDefaults(
 const emit = defineEmits(['update:value'])
 
 const isEditing = ref(false)
-const editedValue = ref('')
+const editedValue = ref(props.value)
 
 function edit(): void {
   editedValue.value = `${props.value}`
@@ -36,49 +35,48 @@ function save(): void {
 }
 
 function cancel(): void {
+  editedValue.value = `${props.value}`
   isEditing.value = false
-  editedValue.value = ''
 }
 </script>
 
 <template>
-  <SettingsRow
-    :label="label"
-    :value="!isEditing ? props.value : ''"
-    grid-columns="110px auto"
-  >
-    <div
-      v-if="isEditing"
-      class="editable-price-row__editable-value"
-    >
+    <div class="editable-price-row__editable-value">
+      <span  class="editable-price-row__label">{{ label }}</span>
+      <span  v-if="!isEditing" class="editable-price-row__readonly_value">{{ editedValue }}</span>
       <BaseInput
+        v-if="isEditing"
         v-model="editedValue"
-        :input-type="EInputType.number"
+        :input-type="EInputType.text"
         placeholder=""
         name="edited-value"
         class="editable-price-row__editable-value-input"
       />
 
       <FilledCheckIcon
+        v-if="isEditing"
         class="editable-price-row__button"
         data-testid="save-button"
+        role="button"
         @click="save"
       />
 
       <CircledExIcon
+        v-if="isEditing"
         class="editable-price-row__button"
         data-testid="cancel-button"
+        role="button"
         @click="cancel"
       />
+      <span class="editable-price-row__unit">{{ props.unit }}</span>
+      <PencilIcon
+        v-if="!isEditing"
+        role="button"
+        class="editable-price-row__editable-value-icon"
+        :class="{ 'disabled': props.isDisabled }"
+        @click="edit"
+      />
     </div>
-    <span class="editable-price-row__unit">{{ props.unit }}</span>
-    <PencilIcon
-      v-if="!isEditing"
-      class="editable-price-row__editable-value-icon"
-      :class="{ 'disabled': props.isDisabled }"
-      @click="edit"
-    />
-  </SettingsRow>
 </template>
 
 <style lang="scss" scoped>
@@ -88,12 +86,12 @@ function cancel(): void {
   &__editable-value {
     display: flex;
     align-items: center;
+    margin-bottom: 16px;
+    height: 32px;
   }
 
   &__editable-value-input {
-    width: 60px;
-    margin-top: -8px;
-    margin-left: -15px;
+    width: 75px;
     margin-right: 30px;
   }
 
@@ -110,7 +108,6 @@ function cancel(): void {
   }
 
   &__button {
-    margin-top: -8px;
     margin-left: 5px;
     cursor: pointer;
   }
@@ -120,5 +117,16 @@ function cancel(): void {
     color: var(--grey-color);
     font-weight: 700;
   }
+
+  &__label {
+    width: 100px;
+    margin-right: 16px;
+    color: var(--grey-color);
+    font-weight: 700;
+  }
+
+  &__readonly_value {
+    width: 75px;
+  }
 }
 </style>
diff --git a/src/components/settings/hostingPreferences/PricesSection.vue b/src/components/settings/hostingPreferences/PricesSection.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import SettingsSection from '../SettingsSection.vue'
 import HostingPreferencesEditablePriceRow from './EditablePriceRow.vue'
-import type { PricesData } from '@/types/types'
+import type { PricesData, UpdatePricePayload } from '@/types/types'
 
 const { t } = useI18n()
 
@@ -13,11 +13,6 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:price'])
 
-interface UpdatePricePayload {
-  prop: string
-  value: number
-}
-
 function updatePrice({ prop, value }: UpdatePricePayload): void {
   emit('update:price', { prop, value })
 }
@@ -27,45 +22,6 @@ interface FormattedPrice {
   unit: string
 }
 
-function formatPrice(pricePerByte: number): FormattedPrice {
-  if (isNaN(pricePerByte)) {
-    return {
-      value: '--',
-      unit: 'HF per GB'
-    }
-  }
-
-  if (pricePerByte === 0) {
-    return {
-      value: 0,
-      unit: 'HF per GB'
-    }
-  }
-
-  const k = 1024
-  const sizes = ['byte', 'kB', 'MB', 'GB', 'TB']
-
-  // eslint-disable-next-line no-magic-numbers,@typescript-eslint/no-magic-numbers
-  const zerosAfterDecimal = -Math.floor(Math.log(pricePerByte) / Math.log(10))
-
-  if (zerosAfterDecimal <= 0) {
-    return {
-      // eslint-disable-next-line no-magic-numbers
-      value: parseFloat(pricePerByte).toFixed(0),
-      unit: `HF per ${sizes[0]}`
-    }
-  }
-
-  // eslint-disable-next-line no-magic-numbers,@typescript-eslint/no-magic-numbers
-  const unitIndex = Math.floor(zerosAfterDecimal / 3)
-
-  return {
-    // eslint-disable-next-line no-magic-numbers,@typescript-eslint/no-magic-numbers
-    value: parseFloat((pricePerByte * Math.pow(k, unitIndex)).toFixed(3)),
-    unit: `HF per ${sizes[unitIndex]}`
-  }
-}
-
 interface PriceItem {
   label: string
   value: string | number
@@ -78,16 +34,16 @@ const prices = computed((): PriceItem[] => [
   {
     label: t('$.cpu'),
     value: props.data.cpu || 0,
-    unit: 'HF per min',
+    unit: t('hosting_preferences.prices.hfpermin'),
     prop: 'cpu',
-    isDisabled: true
+    isDisabled: false
   },
   {
     label: t('$.data_transfer'),
-    value: props.data.bandwidth ? formatPrice(props.data.bandwidth).value : 0,
-    unit: props.data.bandwidth ? formatPrice(props.data.bandwidth).unit : '',
+    value: props.data.bandwidth || 0,
+    unit: t('hosting_preferences.prices.hfpergb'),
     prop: 'bandwidth',
-    isDisabled: true
+    isDisabled: false
   }
 ])
 </script>