Fix/time view (#74)

* fixes for build

* fix time view

src/common/modals/compositions/ChangeLockModal.vue

@@ -163,6 +163,26 @@ const submit = async () => {
   isSubmitting.value = false
 }
 
+const cancel = () => {
+  clearFields()
+  emit('update:is-shown', false)
+}
+
+const clearFields = () => {
+  form.lockPeriod = ''
+}
+
+const init = () => {
+  if (!props.isShown) {
+    return
+  }
+  form.lockPeriod = new Time().isAfter(
+    userPoolData.value?.claimLockEnd?.toString() ?? 0,
+  )
+    ? ''
+    : userPoolData.value?.claimLockEnd?.toString() ?? ''
+}
+
 watch(
   () => [
     props.poolId,
@@ -174,14 +194,7 @@ watch(
   { immediate: true },
 )
 
-const cancel = () => {
-  clearFields()
-  emit('update:is-shown', false)
-}
-
-const clearFields = () => {
-  form.lockPeriod = ''
-}
+watch(() => props.isShown, init)
 </script>
 
 <style lang="scss" scoped>

src/config.ts

@@ -67,7 +67,7 @@ export const config = {
   LANDING_URL: 'https://mor.org/',
   CODE_CONTRIBUTION_URL: 'https://mor.software/',
   COMPUTE_CONTRIBUTION_URL:
-    'https://github.com/MorpheusAIs/Morpheus-Lumerin-Node',
+    'https://github.com/MorpheusAIs/Docs/blob/main/Contributions/Compute%20-%20Proof%20of%20Contribution.md',
   COMMUNITY_CONTRIBUTION_URL: 'https://mor.org/MOR20',
   HOW_GET_STETH_URL: 'https://stake.lido.fi/',
   WALLET_INSTALL_URL: 'https://metamask.io/download/',

src/enums/index.ts

@@ -3,5 +3,6 @@ export * from './route-names.enum'
 export * from './icon-names.enum'
 export * from './layer-zero.enum'
 export * from './window-breakpoints.enum'
+export * from './time.enum'
 
 export { CONTRACT_IDS, NETWORK_IDS } from '@config'

src/enums/time.enum.ts

@@ -0,0 +1,8 @@
+export enum TIME_IN_SEC {
+  minute = 60,
+  hour = 60 * minute,
+  day = 24 * hour,
+  week = 7 * day,
+  month = 4 * week,
+  year = 12 * month,
+}

src/helpers/index.ts

@@ -4,3 +4,4 @@ export * from './event-bus'
 export * from './promise.helpers'
 export * from './text.helpers'
 export * from './validators.helpers'
+export * from './time.helpers'

src/helpers/time.helpers.ts

@@ -0,0 +1,42 @@
+import { TIME_IN_SEC } from '@/enums'
+import { i18n } from '@/localization'
+import { duration } from '@distributedlab/tools'
+
+export const humanizeTime = (seconds: number): string => {
+  const { t } = i18n.global
+  const durationInSeconds = duration(seconds, 'seconds')
+
+  if (seconds >= TIME_IN_SEC.year) {
+    const timeAsYears = durationInSeconds.asYears
+    return timeAsYears > 1
+      ? t('time.years', { duration: timeAsYears })
+      : t('time.year', { duration: timeAsYears })
+  }
+  if (seconds >= TIME_IN_SEC.month) {
+    const timeAsMonths = durationInSeconds.asMonths
+    return timeAsMonths > 1
+      ? t('time.months', { duration: timeAsMonths })
+      : t('time.month', { duration: timeAsMonths })
+  }
+  if (seconds >= TIME_IN_SEC.day) {
+    const timeAsDays = durationInSeconds.asDays
+    return timeAsDays > 1
+      ? t('time.days', { duration: timeAsDays })
+      : t('time.day', { duration: timeAsDays })
+  }
+  if (seconds >= TIME_IN_SEC.hour) {
+    const timeAsHours = durationInSeconds.asHours
+    return timeAsHours > 1
+      ? t('time.hours', { duration: timeAsHours })
+      : t('time.hour', { duration: timeAsHours })
+  }
+  if (seconds >= TIME_IN_SEC.minute) {
+    const timeAsMinutes = durationInSeconds.asMinutes
+    return timeAsMinutes > 1
+      ? t('time.minutes', { duration: timeAsMinutes })
+      : t('time.minute', { duration: timeAsMinutes })
+  }
+  return seconds > 1
+    ? t('time.seconds', { duration: seconds })
+    : t('time.second', { duration: seconds })
+}

src/localization/resources/en.json

@@ -115,7 +115,7 @@
   },
   "home-page": {
     "capital-tab": "Capital",
-    "community-tab": "Community",
+    "builders-tab": "Builders",
     "coders-tab": "Coders",
     "compute-tab": "Compute",
     "private-pool-view": {
@@ -152,7 +152,7 @@
       "available-to-claim-title": "Available to claim",
       "claim-btn": "Claim MOR",
       "dashboard-description--0": "Upon withdrawal, your deposited stETH will be sent to your address. In case of claim, tokens will be minted in the Arbitrum One network. This may take some time.",
-      "dashboard-note--0": "Note: You can withdraw your stETH {daysCount} days after deposit."
+      "dashboard-note--0": "Note: You can withdraw your stETH {time} after deposit."
     }
   },
   "mor20-ecosystem": {
@@ -301,5 +301,19 @@
     "success-message": "The transaction was confirmed, you can view it in the explorer <a class=\"link\" href={explorerTxUrl} target=\"blank\" rel=\"noopener noreferrer\">here</a>",
     "cancel-btn": "Cancel",
     "submit-btn": "Submit"
+  },
+  "time": {
+    "year": "{duration} year",
+    "month": "{duration} month",
+    "day": "{duration} day",
+    "hour": "{duration} hour",
+    "minute": "{duration} minute",
+    "second": "{duration} second",
+    "years": "{duration} years",
+    "months": "{duration} months",
+    "days": "{duration} days",
+    "hours": "{duration} hours",
+    "minutes": "{duration} minutes",
+    "seconds": "{duration} seconds"
   }
 }

src/pages/HomePage/index.vue

@@ -40,8 +40,8 @@ const tabs = computed<Tab[]>(() => [
     href: config.COMPUTE_CONTRIBUTION_URL,
   },
   {
-    title: t('home-page.community-tab'),
-    id: 'community',
+    title: t('home-page.builders-tab'),
+    id: 'builders',
     ...{
       [NETWORK_IDS.mainnet]: {
         href: config.COMMUNITY_CONTRIBUTION_URL,

src/pages/HomePage/views/PublicPoolView.vue

@@ -86,12 +86,14 @@
         {{ $t(`home-page.public-pool-view.dashboard-description--${poolId}`) }}
       </p>
       <p
-        v-if="poolData?.withdrawLockPeriod"
+        v-if="
+          poolData?.withdrawLockPeriod && !poolData?.withdrawLockPeriod.isZero()
+        "
         class="public-pool-view__dashboard-note"
       >
         {{
           $t(`home-page.public-pool-view.dashboard-note--${poolId}`, {
-            daysCount: poolData.withdrawLockPeriod.div(24 * 60 * 60),
+            time: lockPeriod,
           })
         }}
       </p>
@@ -133,6 +135,7 @@ import type { InfoBarType, InfoDashboardType } from '@/types'
 import { formatEther, Time } from '@/utils'
 import { computed, ref } from 'vue'
 import { ZeroPoolDescription } from '../components'
+import { humanizeTime } from '@/helpers'
 
 const props = defineProps<{ poolId: number }>()
 
@@ -204,6 +207,10 @@ const withdrawAtTime = computed(() => {
   return '-'
 })
 
+const lockPeriod = computed(() =>
+  humanizeTime(poolData.value?.withdrawLockPeriod?.toNumber() ?? 0),
+)
+
 const barIndicators = computed<InfoBarType.Indicator[]>(() => [
   {
     title: t('home-page.public-pool-view.total-deposits-title'),