Merge pull request #158 from alleslabs/fix/date

fix: date

CHANGELOG.md

@@ -126,6 +126,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#158](https://github.com/alleslabs/celatone-frontend/pull/158) Change dayjs back to Date type as it is incompatible with mobx storage
 - [#153](https://github.com/alleslabs/celatone-frontend/pull/153) Fix network dropdown blocked by filter topic
 - [#137](https://github.com/alleslabs/celatone-frontend/pull/137) Throw error instead of returning undefined in query function
 - [#148](https://github.com/alleslabs/celatone-frontend/pull/148) Fix scrolling to table header on first land

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

@@ -5,15 +5,14 @@ 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";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { Activity } from "lib/stores/contract";
 import type { ContractAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
-import { encode, formatUFee } from "lib/utils";
+import { encode, formatUFee, getCurrentDate } from "lib/utils";
 
 import { catchTxError, postTx, sendingTx } from "./common";
 
@@ -53,7 +52,7 @@ export const executeContractTx = ({
         sender: address,
         contractAddress,
         msg: encode(JSON.stringify(msg)), // base64
-        timestamp: dayjs(),
+        timestamp: getCurrentDate(),
       });
       return {
         value: null,

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

@@ -12,13 +12,12 @@ import {
   Spacer,
   chakra,
 } from "@chakra-ui/react";
-import dayjs from "dayjs";
 import { MdMoreHoriz, MdMode, MdDelete } from "react-icons/md";
 
 import { EditList, RemoveList } from "../list";
 import { getListIcon, INSTANTIATED_LIST_NAME } from "lib/data";
 import type { ContractListInfo } from "lib/stores/contract";
-import { formatSlugName } from "lib/utils";
+import { dateFromNow, formatSlugName } from "lib/utils";
 
 const StyledIcon = chakra(Icon, {
   baseStyle: {
@@ -84,7 +83,7 @@ export const ContractListCard = ({
           </Flex>
           {showLastUpdated && (
             <Text variant="body3" color="text.dark">
-              Updated {dayjs(item.lastUpdated).toNow(true)} ago
+              Updated {dateFromNow(item.lastUpdated)}
             </Text>
           )}
         </Flex>

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

@@ -11,14 +11,14 @@ 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";
 import { useContractStore } from "lib/hooks";
 import { useContractListByAdmin } from "lib/services/contractService";
 import type { ContractListInfo, ContractLocalInfo } from "lib/stores/contract";
 import type { ContractAddr, HumanAddr } from "lib/types";
+import { getCurrentDate } from "lib/utils";
 
 import { ContractListDetail } from "./ContractListDetail";
 
@@ -43,7 +43,7 @@ export const SelectContractAdmin = ({
       ...contract,
       ...getContractLocalInfo(contract.contractAddress),
     })),
-    lastUpdated: dayjs(),
+    lastUpdated: getCurrentDate(),
     isInfoEditable: false,
     isContractRemovable: false,
   };

src/lib/model/contract.ts

@@ -1,6 +1,5 @@
 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";
@@ -34,7 +33,7 @@ import type {
   Option,
   PublicInfo,
 } from "lib/types";
-import { formatSlugName } from "lib/utils";
+import { formatSlugName, getCurrentDate, getDefaultDate } from "lib/utils";
 
 export interface ContractData {
   chainId: string;
@@ -68,7 +67,7 @@ export const useInstantiatedByMe = (enable: boolean): ContractListInfo => {
     })),
     name: INSTANTIATED_LIST_NAME,
     slug: formatSlugName(INSTANTIATED_LIST_NAME),
-    lastUpdated: dayjs(),
+    lastUpdated: getCurrentDate(),
     isInfoEditable: false,
     isContractRemovable: false,
   };
@@ -85,11 +84,11 @@ export const useInstantiatedMockInfoByMe = (): ContractListInfo => {
       contractAddress: "" as ContractAddr,
       instantiator: "",
       label: "",
-      created: dayjs(0),
+      created: getDefaultDate(),
     })),
     name: INSTANTIATED_LIST_NAME,
     slug: formatSlugName(INSTANTIATED_LIST_NAME),
-    lastUpdated: dayjs(),
+    lastUpdated: getCurrentDate(),
     isInfoEditable: false,
     isContractRemovable: false,
   };

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

@@ -1,12 +1,12 @@
 import { Flex, Heading, Box, Text, Icon } from "@chakra-ui/react";
-import dayjs from "dayjs";
 import { observer } from "mobx-react-lite";
 import { useMemo } from "react";
 import { MdSearch, MdInput } from "react-icons/md";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { useContractStore, useUserKey } from "lib/hooks";
+import { dateFromNow } from "lib/utils";
 
 export const RecentActivities = observer(() => {
   const userKey = useUserKey();
@@ -71,9 +71,7 @@ export const RecentActivities = observer(() => {
                 />
               </Flex>
               <Flex gap={1}>
-                <Text variant="body2">
-                  {dayjs(item.timestamp).toNow(true)} ago{" "}
-                </Text>
+                <Text variant="body2">{dateFromNow(item.timestamp)}</Text>
                 {/* TODO - check address as me */}
                 {item.sender && (
                   <>

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

@@ -1,8 +1,8 @@
 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";
+import { getCurrentDate } from "lib/utils";
 
 /* TODO: change data -> recently view contracts */
 const contracts = [
@@ -15,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: dayjs(),
+    created: getCurrentDate(),
   },
   {
     contractAddress:
@@ -25,7 +25,7 @@ const contracts = [
     instantiator: "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq",
     description: "Lorem ipsum dolor id egestas nulla.",
     label: "label2",
-    created: dayjs(),
+    created: getCurrentDate(),
   },
   {
     contractAddress:
@@ -35,7 +35,7 @@ const contracts = [
     instantiator: "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq",
     description: "",
     label: "label3",
-    created: dayjs(),
+    created: getCurrentDate(),
   },
   {
     contractAddress:
@@ -46,7 +46,7 @@ const contracts = [
     description:
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. id egestas nulla.",
     label: "label4",
-    created: dayjs(),
+    created: getCurrentDate(),
   },
 ];
 export const RecentlyViewContracts = () => {

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

@@ -3,7 +3,6 @@ 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";
 
@@ -15,7 +14,7 @@ import { DEFAULT_RPC_ERROR } from "lib/data";
 import { useContractStore, useLCDEndpoint, useUserKey } from "lib/hooks";
 import { queryData } from "lib/services/contract";
 import type { ContractAddr, RpcQueryError } from "lib/types";
-import { encode, jsonPrettify, jsonValidate } from "lib/utils";
+import { encode, getCurrentDate, jsonPrettify, jsonValidate } from "lib/utils";
 
 const CodeSnippet = dynamic(() => import("lib/components/modal/CodeSnippet"), {
   ssr: false,
@@ -59,7 +58,7 @@ export const QueryArea = ({
           sender: address,
           contractAddress,
           msg: encode(msg),
-          timestamp: dayjs(),
+          timestamp: getCurrentDate(),
         });
       },
       onError(err: AxiosError<RpcQueryError>) {

src/lib/services/contract.ts

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

src/lib/stores/contract.ts

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

src/lib/types/code.ts

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

src/lib/types/contract.ts

@@ -1,13 +1,11 @@
-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: Dayjs;
+  instantiated: Date;
   latestUpdator: Option<string>;
-  latestUpdated: Dayjs;
+  latestUpdated: Date;
 }
 
 export interface ContractInstances {
@@ -34,7 +32,7 @@ export interface ContractMigrationHistory {
   codeDescription?: string;
   sender: HumanAddr | ContractAddr;
   height: number;
-  timestamp: Dayjs;
+  timestamp: Date;
   remark: MigrationRemark;
 }
 
@@ -60,8 +58,8 @@ export interface ContractRelatedProposals {
   proposalId: number;
   title: string;
   status: ProposalStatus;
-  votingEndTime: Dayjs;
-  depositEndTime: Dayjs;
+  votingEndTime: Date;
+  depositEndTime: Date;
   resolvedHeight: number | null | undefined;
   type: ProposalType;
   proposer: HumanAddr | ContractAddr | undefined;