v3.0.5 (#1696)

Co-authored-by: Patricie <99055449+Patricie29@users.noreply.github.com>
Co-authored-by: Monkmansteve <47855432+StefChatz@users.noreply.github.com>
Co-authored-by: Patricie29 <patricie@marsprotocol.foundation>

Author: 3 people

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mars-v2-frontend",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "homepage": "./",
   "private": false,
   "license": "SEE LICENSE IN LICENSE FILE",
@@ -37,6 +37,7 @@
     "bignumber.js": "^9.3.1",
     "bitcoinjs-lib": "^7.0.0",
     "classnames": "^2.5.1",
+    "dayjs": "^1.11.19",
     "debounce-promise": "^3.1.2",
     "graphql-request": "^7.3.1",
     "ibc-domains-sdk": "^1.1.0",
@@ -45,7 +46,6 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "mobx": "^6.15.0",
-    "moment": "^2.30.1",
     "next": "16.0.1",
     "next-devtools-mcp": "^0.2.5",
     "react": "19.2.0",

src/api/vaults/getDepositedVaults.ts

@@ -1,4 +1,4 @@
-import moment from 'moment'
+import dayjs from 'utils/dayjs'
 
 import { getClient, getCreditManagerQueryClient, getVaultQueryClient } from 'api/cosmwasm-client'
 import getVaults from 'api/vaults/getVaults'
@@ -47,7 +47,7 @@ async function getVaultPositionStatusAndUnlockIdAndUnlockTime(
       vaultPosition.vault.address,
     )
 
-    if (moment(unlocksAtTimestamp).isBefore(new Date())) {
+    if (dayjs(unlocksAtTimestamp).isBefore(new Date())) {
       return [VaultStatus.UNLOCKED, unlockId, unlocksAtTimestamp]
     }
 

src/components/Modals/Vault/index.tsx

@@ -1,4 +1,4 @@
-import moment from 'moment'
+import dayjs from 'utils/dayjs'
 import { useCallback, useMemo } from 'react'
 
 import DoubleLogo from 'components/common/DoubleLogo'
@@ -38,9 +38,10 @@ function VaultModal(props: Props) {
   }, [])
 
   const unlockTime = useMemo(() => {
-    if ('unlocksAt' in vault && vault.unlocksAt) {
-      return moment(vault.unlocksAt)
+    if ('unlocksAt' in vault && typeof vault.unlocksAt === 'number') {
+      return dayjs(vault.unlocksAt)
     }
+    return undefined
   }, [vault])
 
   const { addedDebts, removedDeposits, removedLends, simulateVaultDeposit } =
@@ -55,7 +56,7 @@ function VaultModal(props: Props) {
           <Text className='pl-3 pr-2'>{vault.name}</Text>
           {unlockTime && (
             <Tooltip
-              content={`Account position for this vault unlocks at ${unlockTime}`}
+              content={`Account position for this vault unlocks at ${unlockTime.format('MMM D, YYYY h:mm A')}`}
               type={'info'}
             >
               <div className='w-4 h-4'>

src/components/Wallet/RecentTransactions.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import moment from 'moment'
+import dayjs from 'utils/dayjs'
 
 import Card from 'components/common/Card'
 import Divider from 'components/common/Divider'
@@ -52,7 +52,7 @@ export default function RecentTransactions() {
                     <div className='flex flex-wrap items-start justify-between w-full gap-2 pb-2 md:flex-nowrap'>
                       <Text className='flex font-bold'>{target}</Text>
                       <Text size='sm' className='text-white/70'>
-                        {moment.unix(timestamp).format('lll')}
+                        {dayjs.unix(timestamp).format('lll')}
                       </Text>
                     </div>
                     {message && (

src/components/Wallet/WalletSelect.tsx

@@ -1,5 +1,5 @@
 import { useShuttle } from '@delphi-labs/shuttle-react'
-import moment from 'moment'
+import dayjs from 'utils/dayjs'
 import Image from 'next/image'
 import React, { useEffect, useMemo, useState } from 'react'
 import { isMobile } from 'react-device-detect'
@@ -145,7 +145,7 @@ export default function WalletSelect(props: Props) {
     if (error?.message && error?.title) {
       useStore.setState({
         toast: {
-          id: moment.now(),
+          id: dayjs().valueOf(),
           isError: true,
           title: error.title,
           message: error.message,

src/components/account/RiskChart.tsx

@@ -1,4 +1,4 @@
-import moment from 'moment'
+import dayjs from 'utils/dayjs'
 import {
   Area,
   AreaChart,
@@ -65,7 +65,7 @@ export const RiskChart = ({ data }: RiskChartProps) => {
               stroke='rgba(255, 255, 255, 0.6)'
               tickLine={false}
               tickFormatter={(value) => {
-                return moment(value).format('DD')
+                return dayjs(value).format('DD')
               }}
               fontSize={10.53}
               dataKey='date'
@@ -83,7 +83,7 @@ export const RiskChart = ({ data }: RiskChartProps) => {
                   const risk = Number(payload[0].value) ?? 0
                   return (
                     <div className='max-w-[320px] rounded-lg px-4 py-2 shadow-tooltip bg-surface'>
-                      <Text size='sm'>{moment(label).format('MM-DD-YYYY')}</Text>
+                      <Text size='sm'>{dayjs(label).format('MM-DD-YYYY')}</Text>
                       <Text size='sm'>
                         Risk: {formatValue(risk, { minDecimals: 0, maxDecimals: 0, suffix: '%' })}
                       </Text>

src/components/common/DynamicLineChart/AreaChartLoading.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import moment from 'moment'
+import dayjs from 'utils/dayjs'
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from 'recharts'
 
 import { getDefaultChainSettings } from 'constants/defaultSettings'
@@ -13,11 +13,11 @@ interface Props {
 function createLoadingData() {
   const data = []
   const dataValues = [10, 20, 80, 30, 60, 50, 60]
-  const startDate = moment().subtract(7, 'days')
-  const endDate = moment()
+  const startDate = dayjs().subtract(7, 'days')
+  const endDate = dayjs()
   const days = endDate.diff(startDate, 'days')
   for (let i = 0; i < days; i++) {
-    const date = moment(startDate).add(i, 'days')
+    const date = startDate.add(i, 'days')
     data.push({
       date: date.format('YYYY-MM-DD'),
       value: dataValues[i],

src/components/common/DynamicLineChart/ChartTooltip.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classNames from 'classnames'
-import moment from 'moment'
+import dayjs from 'utils/dayjs'
 import Text from 'components/common/Text'
 
 interface Props {
@@ -14,7 +14,7 @@ export default function CustomTooltip(props: Props) {
   const { active, payload, label, renderContent } = props
 
   const formatDateLabel = (label: string) => {
-    const date = moment(label)
+    const date = dayjs(label)
     return date.isValid() ? date.format('DD MMM YYYY') : label
   }
 

src/components/common/DynamicLineChart/DynamicLineChartBody.tsx

@@ -10,7 +10,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts'
-import moment from 'moment'
+import dayjs from 'utils/dayjs'
 import { formatValue } from 'utils/formatters'
 import ChartLegend from 'components/common/Legend/ChartLegend'
 import DisplayCurrency from 'components/common/DisplayCurrency'
@@ -215,9 +215,9 @@ export default function DynamicLineChartBody(props: Props) {
             stroke={axisColor}
             tickFormatter={(value) => {
               if (timeframe === '24') {
-                return moment(value).format('HH:mm')
+                return dayjs(value).format('HH:mm')
               }
-              return moment(value).format('DD MMM')
+              return dayjs(value).format('DD MMM')
             }}
             interval={data.length > 10 ? Math.floor(data.length / 7) : 0}
           />

src/components/common/Timestamp.tsx

@@ -1,7 +1,7 @@
 import Loading from 'components/common/Loading'
 import Text from 'components/common/Text'
 import TitleAndSubCell from 'components/common/TitleAndSubCell'
-import moment from 'moment'
+import dayjs from 'utils/dayjs'
 
 export const TIMESTAMP_META = {
   id: 'name',
@@ -40,7 +40,7 @@ export default function Timestamp(props: Props) {
       break
   }
 
-  const date = showUtc ? moment.unix(timestampInSeconds).utc() : moment.unix(timestampInSeconds)
+  const date = showUtc ? dayjs.unix(timestampInSeconds).utc() : dayjs.unix(timestampInSeconds)
   const dateFormatted = date.format('MMM D, YYYY')
   const timeFormat = use24Hour ? 'HH:mm' : 'hh:mm A'
   const timeFormatted = date.format(timeFormat)