fix: start and end time

src/components/StakeMaskStatusCard/index.tsx

@@ -29,6 +29,7 @@ import { Tooltip } from '@/components/Tooltip.tsx'
 import { formatMarketCap } from '@/helpers/formatMarketCap.ts'
 import { formatNumber } from '@/helpers/formatNumber.ts'
 import { formatSeconds } from '@/helpers/formatSeconds.ts'
+import { toUTC } from '@/helpers/toUTC'
 import { usePoolInfo } from '@/hooks/usePoolInfo.ts'
 import { usePoolState } from '@/hooks/usePoolState.ts'
 import { stakeModal } from '@/modals/StakeModal.tsx'
@@ -108,18 +109,25 @@ export const StakeMaskStatusCard: ComponentType<StakeMaskStatusCardProps> = ({ .
             lineHeight={{ base: 6, lg: '140%' }}
             align="center"
           >
-            <Center mr="10px">
-              <Trans>
-                Time{' '}
-                {isLoading || !pool ? (
-                  <Skeleton width="100px" height="16px" ml={1} />
-                ) : (
-                  `${formatSeconds(pool?.start_time, 'M.DD YYYY')}~${formatSeconds(pool.end_time, 'M.DD YYYY')}`
-                )}
-              </Trans>
-            </Center>
+            {isLoading || !pool ? (
+              <Skeleton width="100px" height="16px" ml={1} mr="10px" />
+            ) : (
+              <Tooltip
+                label={t`Campaign Period: ${toUTC(pool.start_time)} - ${toUTC(pool.end_time)}`}
+                maxW="none"
+                placement="top"
+                hasArrow
+                shouldWrapChildren
+              >
+                <Center mr="10px">
+                  <Trans>
+                    Time {`${formatSeconds(pool.start_time, 'M.DD YYYY')}~${formatSeconds(pool.end_time, 'M.DD YYYY')}`}
+                  </Trans>
+                </Center>
+              </Tooltip>
+            )}
             <Tooltip
-              label={t`Staked MASK can be unstake after the campaign ends.`}
+              label={t`Note: Staked MASK can be unstaked after the campaign ends.`}
               placement="top"
               hasArrow
               shouldWrapChildren

src/helpers/formatSeconds.ts

@@ -1,5 +1,7 @@
 import dayjs from 'dayjs'
 
 export function formatSeconds(seconds: number, pattern?: string) {
-  return dayjs(seconds * 1000).format(pattern)
+  return dayjs(seconds * 1000)
+    .utc(false)
+    .format(pattern)
 }

src/helpers/toUTC.ts

@@ -0,0 +1,9 @@
+import dayjs from 'dayjs'
+
+export function toUTC(seconds: number) {
+  /* cspell:ignore UTCZ */
+  return dayjs(seconds * 1000)
+    .utc(false)
+    .format('MM.DD YYYY HH:mm(UTCZ)')
+    .replace(/0:00\)/, ')')
+}

src/locales/en.po

@@ -54,6 +54,10 @@ msgstr ""
 msgid "Blacklist is powered by <0>Go+</0>"
 msgstr ""
 
+#: src/components/StakeMaskStatusCard/index.tsx
+msgid "Campaign Period: {0} - {1}"
+msgstr ""
+
 #: src/hooks/useStake.tsx
 msgid "Can not get determination MASK token"
 msgstr ""
@@ -191,6 +195,10 @@ msgstr ""
 msgid "Not started yet."
 msgstr ""
 
+#: src/components/StakeMaskStatusCard/index.tsx
+msgid "Note: Staked MASK can be unstaked after the campaign ends."
+msgstr ""
+
 #: src/components/StakeMaskStatusCard/ActivityStatusTag.tsx
 msgid "Ongoing"
 msgstr ""
@@ -277,10 +285,6 @@ msgstr ""
 msgid "Staked MASK"
 msgstr ""
 
-#: src/components/StakeMaskStatusCard/index.tsx
-msgid "Staked MASK can be unstake after the campaign ends."
-msgstr ""
-
 #: src/components/StakeRequirementBoundary/RegionBoundary.tsx
 msgid "Staking is not available in restricted countries, including the US, Canada, China, Iran, North Korea, the Syrian Arab Republic, Netherlands, Crimea, Malaysia, Bangladesh, Bolivia and Cuba."
 msgstr ""
@@ -323,7 +327,7 @@ msgid "This website is specifically created for $MASK investors and believers, w
 msgstr ""
 
 #: src/components/StakeMaskStatusCard/index.tsx
-msgid "Time {0}"
+msgid "Time {0}~{1}"
 msgstr ""
 
 #: src/modals/VerifyModal.tsx

src/main.tsx

@@ -5,13 +5,16 @@ import '@fontsource/inter/600.css'
 import '@fontsource/inter/700.css'
 
 import * as Sentry from '@sentry/react'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
 import ReactDOM from 'react-dom/client'
 
 import { App } from '@/App'
 import { setLocale } from '@/i18n/index.ts'
 import { Locale } from '@/types/enum.ts'
 
 setLocale(Locale.en)
+dayjs.extend(utc)
 
 Sentry.init({
   dsn: 'https://[email protected]/7',

src/modals/StakeModal.tsx

@@ -256,7 +256,7 @@ export function StakeModal(props: ModalProps) {
             {pool?.end_time ? (
               <Text color="secondary.3">
                 {/* cspell:ignore UTCZ */}
-                {formatSeconds(pool.end_time, 'HH:mm D/MM/YYYY (UTCZ)').replace(/:00\)$/, ')')}
+                {formatSeconds(pool.end_time, 'HH:mm D/MM/YYYY (UTCZ)').replace(/00:00\)$/, '0)')}
               </Text>
             ) : (
               <Skeleton height="16px" width="100px" />