fix: Staked tooltip updated text add missing plugin extends (#9885)

It needs to be checked throughly, if extension is not used in the same
file but in their dependencies that removing the extension might cause
failure on deployments, but overall it looks ok.

Also helps to reduce bundle sizes


<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the usage of `dayjs` in multiple files by removing and
adding different plugins for date manipulation.

### Detailed summary
- Removed `utc` and `weekOfYear` plugins from `dayjs` in various files
- Added `timezone` plugin in `packages/utils/formatTimestamp.ts`
- Added `weekOfYear` plugin in
`apps/web/src/views/V3Info/hooks/chart.ts` and
`apps/web/src/views/V3Info/data/protocol/chart.ts`
- Added `relativeTime` plugin in various files for relative time
calculations

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

apps/web/src/views/CakeStaking/components/CakePoolLockStatus.tsx

@@ -21,11 +21,14 @@ import dayjs from 'dayjs'
 import { useCakePrice } from 'hooks/useCakePrice'
 import { useMemo } from 'react'
 import { formatTime } from 'utils/formatTime'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import { useCakePoolLockInfo } from '../hooks/useCakePoolLockInfo'
 import { useWriteMigrateCallback } from '../hooks/useContractWrite/useWriteMigrateCallback'
 import { useCurrentBlockTimestamp } from '../hooks/useCurrentBlockTimestamp'
 import { StyledLockedCard } from './styled'
 
+dayjs.extend(relativeTime)
+
 export const CakePoolLockInfo = () => {
   const { t } = useTranslation()
   const { lockedAmount = 0n, lockEndTime = 0n } = useCakePoolLockInfo()

apps/web/src/views/GaugesVoting/components/Table/VoteTable/List.tsx

@@ -8,11 +8,14 @@ import { useUserVote } from 'views/GaugesVoting/hooks/useUserVote'
 
 import { useCurrentBlockTimestamp } from 'views/CakeStaking/hooks/useCurrentBlockTimestamp'
 import { useCakeLockStatus } from 'views/CakeStaking/hooks/useVeCakeUserInfo'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import { GaugeIdentifierDetails } from '../GaugesTable/List'
 import { PercentInput } from './PercentInput'
 import { useRowVoteState } from './hooks/useRowVoteState'
 import { DEFAULT_VOTE, RowProps } from './types'
 
+dayjs.extend(relativeTime)
+
 const ListItemContainer = styled(FlexGap)<{ borderBottom?: boolean }>`
   border-bottom: ${({ borderBottom = true, theme }) =>
     borderBottom ? `1px solid ${theme.colors.cardBorder}` : 'none'};

apps/web/src/views/GaugesVoting/components/Table/VoteTable/TableRow.tsx

@@ -10,6 +10,7 @@ import { useCakeLockStatus } from 'views/CakeStaking/hooks/useVeCakeUserInfo'
 import { useUserVote } from 'views/GaugesVoting/hooks/useUserVote'
 import { getPositionManagerName } from 'views/GaugesVoting/utils'
 import { feeTierPercent } from 'views/V3Info/utils'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import { GaugeTokenImage } from '../../GaugeTokenImage'
 import { NetworkBadge } from '../../NetworkBadge'
 import { PositionManagerLogo } from '../../PositionManagerLogo'
@@ -18,6 +19,8 @@ import { PercentInput } from './PercentInput'
 import { useRowVoteState } from './hooks/useRowVoteState'
 import { DEFAULT_VOTE, RowProps } from './types'
 
+dayjs.extend(relativeTime)
+
 const debugFormat = (unix?: bigint | number) => {
   if (!unix) return ''
   return dayjs.unix(Number(unix)).format('YYYY-MM-DD HH:mm:ss')

apps/web/src/views/V3Info/components/BarChart/alt.tsx

@@ -1,6 +1,5 @@
 import Card from 'components/Card'
 import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
 import { RowBetween } from '@pancakeswap/uikit'
 import useTheme from 'hooks/useTheme'
 import React, { Dispatch, ReactNode, SetStateAction } from 'react'
@@ -9,8 +8,6 @@ import { styled } from 'styled-components'
 import { VolumeWindow } from '../../types'
 import { LoadingRows } from '../Loader'
 
-dayjs.extend(utc)
-
 const DEFAULT_HEIGHT = 300
 
 const Wrapper = styled(Card)`

apps/web/src/views/V3Info/components/BarChart/index.tsx

@@ -1,6 +1,5 @@
 import { RowBetween } from '@pancakeswap/uikit'
 import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
 import useTheme from 'hooks/useTheme'
 import { ColorType, createChart, IChartApi } from 'lightweight-charts'
 import React, { Dispatch, ReactNode, SetStateAction, useCallback, useEffect, useRef, useState } from 'react'
@@ -9,8 +8,6 @@ import usePrevious from '../../hooks/usePrevious'
 import { formatDollarAmount } from '../../utils/numbers'
 import Card from '../Card'
 
-dayjs.extend(utc)
-
 const Wrapper = styled(Card)`
   width: 100%;
   padding: 1rem;

apps/web/src/views/V3Info/components/LineChart/alt.tsx

@@ -1,6 +1,5 @@
 import Card from 'components/Card'
 import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
 import useTheme from 'hooks/useTheme'
 import { darken } from 'polished'
 import React, { Dispatch, ReactNode, SetStateAction } from 'react'
@@ -9,8 +8,6 @@ import { styled } from 'styled-components'
 import { LoadingRows } from '../Loader'
 import { RowBetween } from '../Row'
 
-dayjs.extend(utc)
-
 const DEFAULT_HEIGHT = 300
 
 const Wrapper = styled(Card)`

apps/web/src/views/V3Info/components/LineChart/index.tsx

@@ -1,5 +1,4 @@
 import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
 import useTheme from 'hooks/useTheme'
 import { ColorType, createChart, IChartApi } from 'lightweight-charts'
 import { darken } from 'polished'
@@ -10,8 +9,6 @@ import { formatDollarAmount } from '../../utils/numbers'
 import Card from '../Card'
 import { RowBetween } from '../Row'
 
-dayjs.extend(utc)
-
 const Wrapper = styled(Card)`
   width: 100%;
   display: flex;

apps/web/src/views/V3Info/data/pool/chartData.ts

@@ -1,14 +1,12 @@
 import dayjs from 'dayjs'
 import BigNumber from 'bignumber.js'
 import utc from 'dayjs/plugin/utc'
-import weekOfYear from 'dayjs/plugin/weekOfYear'
 
 import { gql, GraphQLClient } from 'graphql-request'
 import { PoolChartEntry } from '../../types'
 
 // format dayjs with the libraries that we need
 dayjs.extend(utc)
-dayjs.extend(weekOfYear)
 const ONE_DAY_UNIX = 24 * 60 * 60
 
 const POOL_CHART = gql`

apps/web/src/views/V3Info/data/protocol/chart.ts

@@ -1,14 +1,12 @@
 import { ChainId } from '@pancakeswap/chains'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import weekOfYear from 'dayjs/plugin/weekOfYear'
 import { gql, GraphQLClient } from 'graphql-request'
 import { ChartDayData } from '../../types'
 import { fetchDerivedProtocolTVLHistory } from './derived'
 
 // format dayjs with the libraries that we need
 dayjs.extend(utc)
-dayjs.extend(weekOfYear)
 const ONE_DAY_UNIX = 24 * 60 * 60
 
 const GLOBAL_CHART = gql`

apps/web/src/views/V3Info/data/token/chartData.ts

@@ -1,13 +1,11 @@
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import weekOfYear from 'dayjs/plugin/weekOfYear'
 import { gql, GraphQLClient } from 'graphql-request'
 
 import { TokenChartEntry } from '../../types'
 
 // format dayjs with the libraries that we need
 dayjs.extend(utc)
-dayjs.extend(weekOfYear)
 const ONE_DAY_UNIX = 24 * 60 * 60
 
 const TOKEN_CHART = gql`

apps/web/src/views/V3Info/data/token/priceData.ts

@@ -1,6 +1,5 @@
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import weekOfYear from 'dayjs/plugin/weekOfYear'
 import { gql, GraphQLClient } from 'graphql-request'
 import { MultiChainNameExtend } from 'state/info/constant'
 import { getBlocksFromTimestamps } from 'utils/getBlocksFromTimestamps'
@@ -9,7 +8,6 @@ import { PriceChartEntry } from '../../types'
 
 // format dayjs with the libraries that we need
 dayjs.extend(utc)
-dayjs.extend(weekOfYear)
 
 export const PRICES_BY_BLOCK = (tokenAddress: string, blocks: any) => {
   let queryString = 'query blocks {'

apps/web/src/views/V3Info/hooks/chart.ts

@@ -1,9 +1,12 @@
 import { useMemo } from 'react'
 
 import dayjs from 'dayjs'
+import weekOfYear from 'dayjs/plugin/weekOfYear'
 import { ChartDayData, GenericChartEntry, PoolChartEntry, TokenChartEntry } from '../types'
 import { unixToDate } from '../utils/date'
 
+dayjs.extend(weekOfYear)
+
 function unixToType(unix: number, type: 'month' | 'week') {
   const date = dayjs.unix(unix).utc()
 

packages/localization/src/config/translations.json

@@ -450,6 +450,7 @@
   "Your name must be at least 3 and at most 15 standard letters and numbers long. You can’t change this once you click Confirm.": "Your name must be at least 3 and at most 15 standard letters and numbers long. You can’t change this once you click Confirm.",
   "Unable to verify username": "Unable to verify username",
   "Created %dateCreated% ago": "Created %dateCreated% ago",
+  "Updated %dateUpdated% ago": "Updated %dateUpdated% ago",
   "Add %assetA%-%assetB% Liquidity": "Add %assetA%-%assetB% Liquidity",
   "$120,000 in Prizes!": "$120,000 in Prizes!",
   "Now Live!": "Now Live!",

packages/utils/formatTimestamp.ts

@@ -1,8 +1,6 @@
 import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
 
-dayjs.extend(utc)
 dayjs.extend(timezone)
 
 export enum Precision {

packages/widgets-internal/farm/components/FarmTable/Liquidity.tsx

@@ -2,25 +2,27 @@ import { TranslateFunction, useTranslation } from "@pancakeswap/localization";
 import { HelpIcon, Skeleton, Text, TooltipRefs, useTooltip } from "@pancakeswap/uikit";
 import getTimePeriods from "@pancakeswap/utils/getTimePeriods";
 import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
 import { styled } from "styled-components";
 import { FarmTableLiquidityProps } from "../../types";
 
-dayjs.extend(relativeTime);
-
 const distanceToNow = (t: TranslateFunction, timeInMilliSeconds: number) => {
-  const time = new Date(timeInMilliSeconds);
+  if (!Number.isFinite(timeInMilliSeconds)) return t("Now");
+
+  const time = dayjs(timeInMilliSeconds);
+  const now = dayjs();
+
+  if (time.isAfter(now)) return t("Now");
 
-  const secondsRemaining = dayjs(time).diff(dayjs(), "seconds");
+  const secondsRemaining = time.diff(now, "seconds");
   const { days, hours, minutes, seconds } = getTimePeriods(secondsRemaining);
 
   let toNowString = "";
-  if (days !== 0) toNowString += `${days} ${t("d")}`;
-  if (hours !== 0) toNowString += `${hours} ${t("h")}`;
-  if (minutes !== 0) toNowString += `${minutes} ${t("m")}`;
-  if (seconds !== 0) toNowString += `${seconds} ${t("s")}`;
+  if (days !== 0) toNowString += `${days}${t("d")} `;
+  if (hours !== 0) toNowString += `${hours}${t("h")} `;
+  if (minutes !== 0) toNowString += `${minutes}${t("m")} `;
+  if (seconds !== 0) toNowString += `${seconds}${t("s")} `;
 
-  return time > new Date() || !Number.isFinite(timeInMilliSeconds) ? t("Now") : toNowString;
+  return toNowString.trim();
 };
 
 const ReferenceElement = styled.div`
@@ -53,11 +55,7 @@ export const StakedLiquidity: React.FunctionComponent<React.PropsWithChildren<Fa
   const tooltip = useTooltip(
     <>
       <Text>{t("Total active (in-range) liquidity staked in the farm.")}</Text>
-      {updatedAt && (
-        <Text>
-          {t("Updated")} {distanceToNow(t, updatedAt)}
-        </Text>
-      )}
+      {updatedAt && <Text>{t("Updated %dateUpdated% ago", { dateUpdated: distanceToNow(t, updatedAt) })}</Text>}
     </>,
     {
       placement: "top-end",