fix: change Date to Dayjs

CHANGELOG.md

@@ -103,6 +103,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#139](https://github.com/alleslabs/celatone-frontend/pull/139) Fix Date to Dayjs
 - [#135](https://github.com/alleslabs/celatone-frontend/pull/135) Invalidate queries after update/clear admin tx
 - [#123](https://github.com/alleslabs/celatone-frontend/pull/123) Refactor tables to use custom components
 - [#128](https://github.com/alleslabs/celatone-frontend/pull/128) Rewrite add to other list state and add default list to save to

src/lib/app-fns/tx/execute.tsx

@@ -5,6 +5,7 @@ import type {
 } from "@cosmjs/cosmwasm-stargate";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
+import dayjs from "dayjs";
 import { MdCheckCircle } from "react-icons/md";
 import type { Observable } from "rxjs";
 
@@ -52,7 +53,7 @@ export const executeContractTx = ({
         sender: address,
         contractAddress,
         msg: encode(JSON.stringify(msg)), // base64
-        timestamp: new Date(),
+        timestamp: dayjs(),
       });
       return {
         value: null,

src/lib/components/modal/select-contract/SelectContractAdmin.tsx

@@ -11,6 +11,7 @@ import {
   Heading,
 } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
+import dayjs from "dayjs";
 import { MdList, MdSwapHoriz } from "react-icons/md";
 
 import { ADMIN_SPECIAL_SLUG } from "lib/data";
@@ -42,7 +43,7 @@ export const SelectContractAdmin = ({
       ...contract,
       ...getContractLocalInfo(contract.contractAddress),
     })),
-    lastUpdated: new Date(),
+    lastUpdated: dayjs(),
     isInfoEditable: false,
     isContractRemovable: false,
   };

src/lib/model/contract.ts

@@ -1,5 +1,6 @@
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
+import dayjs from "dayjs";
 
 import { useCelatoneApp } from "lib/app-provider";
 import { INSTANTIATED_LIST_NAME } from "lib/data";
@@ -68,7 +69,7 @@ export const useInstantiatedByMe = (enable: boolean): ContractListInfo => {
     })),
     name: INSTANTIATED_LIST_NAME,
     slug: formatSlugName(INSTANTIATED_LIST_NAME),
-    lastUpdated: new Date(),
+    lastUpdated: dayjs(),
     isInfoEditable: false,
     isContractRemovable: false,
   };
@@ -85,11 +86,11 @@ export const useInstantiatedMockInfoByMe = (): ContractListInfo => {
       contractAddress: "" as ContractAddr,
       instantiator: "",
       label: "",
-      created: new Date(0),
+      created: dayjs(0),
     })),
     name: INSTANTIATED_LIST_NAME,
     slug: formatSlugName(INSTANTIATED_LIST_NAME),
-    lastUpdated: new Date(),
+    lastUpdated: dayjs(),
     isInfoEditable: false,
     isContractRemovable: false,
   };

src/lib/pages/home/components/RecentlyViewContracts.tsx

@@ -1,4 +1,5 @@
 import { Heading, Box, Flex, Text } from "@chakra-ui/react";
+import dayjs from "dayjs";
 
 import { ContractListTable } from "lib/pages/contract-list/components/ContractListTable";
 import type { ContractAddr } from "lib/types";
@@ -14,7 +15,7 @@ const contracts = [
     description:
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed facilisis facilisis risus. Ut volutpat accumsan massa eget consequat, id egestas nulla.",
     label: "label1",
-    created: new Date(),
+    created: dayjs(),
   },
   {
     contractAddress:
@@ -24,7 +25,7 @@ const contracts = [
     instantiator: "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq",
     description: "Lorem ipsum dolor id egestas nulla.",
     label: "label2",
-    created: new Date(),
+    created: dayjs(),
   },
   {
     contractAddress:
@@ -34,7 +35,7 @@ const contracts = [
     instantiator: "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq",
     description: "",
     label: "label3",
-    created: new Date(),
+    created: dayjs(),
   },
   {
     contractAddress:
@@ -45,7 +46,7 @@ const contracts = [
     description:
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. id egestas nulla.",
     label: "label4",
-    created: new Date(),
+    created: dayjs(),
   },
 ];
 export const RecentlyViewContracts = () => {

src/lib/pages/query/components/QueryArea.tsx

@@ -3,6 +3,7 @@ import { Box, Flex, Spacer, Button, ButtonGroup, Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
+import dayjs from "dayjs";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
@@ -58,7 +59,7 @@ export const QueryArea = ({
           sender: address,
           contractAddress,
           msg: encode(msg),
-          timestamp: new Date(),
+          timestamp: dayjs(),
         });
       },
       onError(err: AxiosError<RpcQueryError>) {

src/lib/services/contract.ts

@@ -1,4 +1,5 @@
 import axios from "axios";
+import type { Dayjs } from "dayjs";
 import type { GraphQLClient } from "graphql-request";
 
 import { CELATONE_API_ENDPOINT, getChainApiPath } from "env";
@@ -51,7 +52,7 @@ export interface InstantiateInfo {
   admin?: HumanAddr | ContractAddr;
   label: string;
   createdHeight: number;
-  createdTime: Option<Date>;
+  createdTime: Option<Dayjs>;
   ibcPortId: string;
   raw: ContractResponse;
 }

src/lib/stores/contract.ts

@@ -1,3 +1,5 @@
+import type { Dayjs } from "dayjs";
+import dayjs from "dayjs";
 import { makeAutoObservable } from "mobx";
 import { isHydrated, makePersistable } from "mobx-persist-store";
 
@@ -19,7 +21,7 @@ interface ContractList {
   name: string;
   slug: string;
   contracts: ContractAddr[];
-  lastUpdated: Date;
+  lastUpdated: Dayjs;
   isInfoEditable: boolean;
   isContractRemovable: boolean;
 }
@@ -32,8 +34,7 @@ export const cmpContractListInfo = (
   a: ContractListInfo,
   b: ContractListInfo
 ) => {
-  if (a.lastUpdated !== b.lastUpdated)
-    return b.lastUpdated.getTime() - a.lastUpdated.getTime();
+  if (a.lastUpdated !== b.lastUpdated) return b.lastUpdated.diff(a.lastUpdated);
   return a.slug.localeCompare(b.slug);
 };
 
@@ -43,7 +44,7 @@ export interface Activity {
   sender: string | undefined;
   contractAddress: ContractAddr;
   msg: string; // base64
-  timestamp: Date;
+  timestamp: Dayjs;
 }
 
 export class ContractStore {
@@ -54,7 +55,7 @@ export class ContractStore {
       name: SAVED_LIST_NAME,
       slug: formatSlugName(SAVED_LIST_NAME),
       contracts: [],
-      lastUpdated: new Date(),
+      lastUpdated: dayjs(),
       isInfoEditable: false,
       isContractRemovable: true,
     },
@@ -160,7 +161,7 @@ export class ContractStore {
           name: name.trim(),
           slug: formatSlugName(name),
           contracts: [],
-          lastUpdated: new Date(),
+          lastUpdated: dayjs(),
           isInfoEditable: true,
           isContractRemovable: true,
         },
@@ -192,7 +193,7 @@ export class ContractStore {
 
       list.name = newName;
       list.slug = formatSlugName(newName);
-      list.lastUpdated = new Date();
+      list.lastUpdated = dayjs();
     }
   }
 
@@ -332,7 +333,7 @@ export class ContractStore {
     if (!list) return;
 
     list.contracts = Array.from(new Set(list.contracts).add(contractAddress));
-    list.lastUpdated = new Date();
+    list.lastUpdated = dayjs();
   }
 
   private removeContractFromList(
@@ -346,7 +347,7 @@ export class ContractStore {
     if (!list) return;
 
     list.contracts = list.contracts.filter((addr) => addr !== contractAddress);
-    list.lastUpdated = new Date();
+    list.lastUpdated = dayjs();
   }
 
   addActivity(userKey: string, activity: Activity) {

src/lib/types/code.ts

@@ -1,3 +1,5 @@
+import type { Dayjs } from "dayjs";
+
 import type { CodeLocalInfo } from "lib/stores/code";
 import type { HumanAddr, ContractAddr, Option } from "lib/types";
 
@@ -22,7 +24,7 @@ export interface CodeInfo extends CodeLocalInfo {
 interface CodeProposal {
   proposalId: number;
   height: Option<number>;
-  created: Date;
+  created: Dayjs;
 }
 
 export interface CodeData {
@@ -31,7 +33,7 @@ export interface CodeData {
   uploader: ContractAddr | HumanAddr;
   hash: Option<string>;
   height: Option<number>;
-  created: Date;
+  created: Dayjs;
   proposal: Option<CodeProposal>;
   instantiatePermission: InstantiatePermission;
   permissionAddresses: PermissionAddresses;

src/lib/types/contract.ts

@@ -1,11 +1,13 @@
+import type { Dayjs } from "dayjs";
+
 import type { ContractLocalInfo } from "lib/stores/contract";
 import type { ContractAddr, HumanAddr, Option } from "lib/types";
 
 export interface ContractInfo extends ContractLocalInfo {
   admin: Option<string>;
-  instantiated: Date;
+  instantiated: Dayjs;
   latestUpdator: Option<string>;
-  latestUpdated: Date;
+  latestUpdated: Dayjs;
 }
 
 export interface ContractInstances {
@@ -32,7 +34,7 @@ export interface ContractMigrationHistory {
   codeDescription?: string;
   sender: HumanAddr | ContractAddr;
   height: number;
-  timestamp: Date;
+  timestamp: Dayjs;
   remark: MigrationRemark;
 }
 
@@ -58,8 +60,8 @@ export interface ContractRelatedProposals {
   proposalId: number;
   title: string;
   status: ProposalStatus;
-  votingEndTime: Date;
-  depositEndTime: Date;
+  votingEndTime: Dayjs;
+  depositEndTime: Dayjs;
   resolvedHeight: number | null | undefined;
   type: ProposalType;
   proposer: HumanAddr | ContractAddr | undefined;

src/lib/types/tx/transaction.ts

@@ -1,3 +1,5 @@
+import type { Dayjs } from "dayjs";
+
 import type { ContractAddr, HumanAddr } from "lib/types";
 
 import type {
@@ -25,7 +27,7 @@ export enum MsgFurtherAction {
 export interface PastTransaction {
   hash: string;
   messages: Message[];
-  created: Date;
+  created: Dayjs;
   success: boolean;
   actionMsgType: ActionMsgType;
   furtherAction: MsgFurtherAction;
@@ -62,7 +64,7 @@ export interface ExecuteTransaction {
   messages: Message[];
   sender: ContractAddr | HumanAddr;
   height: number;
-  created: Date;
+  created: Dayjs;
   success: boolean;
 }
 

src/lib/utils/date.ts

@@ -1,23 +1,17 @@
+import type { Dayjs } from "dayjs";
 import dayjs from "dayjs";
 
 import type { Option } from "lib/types";
 
-export const formatUTC = (timestamp: string | Date) => {
-  const localDate =
-    typeof timestamp === "string" ? timestamp.concat("Z") : timestamp;
-  return dayjs(localDate).utc().format("MMM DD, YYYY, h:mm:ss A [(UTC)]");
-};
+export const parseDate = (date: string) => dayjs(date).utc(true);
 
-export const dateFromNow = (timestamp: string | Date) => {
-  const localDate =
-    typeof timestamp === "string" ? timestamp.concat("Z") : timestamp;
-  return dayjs(localDate).fromNow();
-};
+export const parseDateOpt = (dateOpt: Option<string>): Option<Dayjs> =>
+  dateOpt ? parseDate(dateOpt) : undefined;
 
-export const parseDate = (date: string) => new Date(`${date}Z`);
+export const parseDateDefault = (dateOpt: Option<string>): Dayjs =>
+  dateOpt ? parseDate(dateOpt) : dayjs(0);
 
-export const parseDateOpt = (dateOpt: Option<string>): Option<Date> =>
-  dateOpt ? parseDate(dateOpt) : undefined;
+export const formatUTC = (date: Dayjs) =>
+  date.format("MMM DD, YYYY, h:mm:ss A [(UTC)]");
 
-export const parseDateDefault = (dateOpt: Option<string>): Date =>
-  dateOpt ? parseDate(dateOpt) : new Date(0);
+export const dateFromNow = (date: Dayjs) => date.fromNow();