diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb68f2238..3d1dc73d6 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/lib/app-fns/tx/execute.tsx b/src/lib/app-fns/tx/execute.tsx
index 1f842cd70..0bca734d1 100644
--- a/src/lib/app-fns/tx/execute.tsx
+++ b/src/lib/app-fns/tx/execute.tsx
@@ -5,7 +5,6 @@ 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";
@@ -13,7 +12,7 @@ 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,
diff --git a/src/lib/components/modal/select-contract/ContractListCard.tsx b/src/lib/components/modal/select-contract/ContractListCard.tsx
index c7a770e23..a18ab4c2b 100644
--- a/src/lib/components/modal/select-contract/ContractListCard.tsx
+++ b/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 = ({
{showLastUpdated && (
- Updated {dayjs(item.lastUpdated).toNow(true)} ago
+ Updated {dateFromNow(item.lastUpdated)}
)}
diff --git a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx
index 5bed1dd88..41094cd0e 100644
--- a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx
+++ b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx
@@ -11,7 +11,6 @@ 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";
@@ -19,6 +18,7 @@ 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,
};
diff --git a/src/lib/model/contract.ts b/src/lib/model/contract.ts
index 72c87502b..867223945 100644
--- a/src/lib/model/contract.ts
+++ b/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,
};
diff --git a/src/lib/pages/home/components/RecentActivities.tsx b/src/lib/pages/home/components/RecentActivities.tsx
index 50ca7b202..674f5dc93 100644
--- a/src/lib/pages/home/components/RecentActivities.tsx
+++ b/src/lib/pages/home/components/RecentActivities.tsx
@@ -1,5 +1,4 @@
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";
@@ -7,6 +6,7 @@ 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(() => {
/>
-
- {dayjs(item.timestamp).toNow(true)} ago{" "}
-
+ {dateFromNow(item.timestamp)}
{/* TODO - check address as me */}
{item.sender && (
<>
diff --git a/src/lib/pages/home/components/RecentlyViewContracts.tsx b/src/lib/pages/home/components/RecentlyViewContracts.tsx
index 2d3dc5c82..2b0dd056f 100644
--- a/src/lib/pages/home/components/RecentlyViewContracts.tsx
+++ b/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 = () => {
diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx
index bc2067036..9f71a9152 100644
--- a/src/lib/pages/query/components/QueryArea.tsx
+++ b/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) {
diff --git a/src/lib/services/contract.ts b/src/lib/services/contract.ts
index 189466381..4e86f42c0 100644
--- a/src/lib/services/contract.ts
+++ b/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;
+ createdTime: Option;
ibcPortId: string;
raw: ContractResponse;
}
diff --git a/src/lib/stores/contract.ts b/src/lib/stores/contract.ts
index 353f4116c..1c3d2b3d4 100644
--- a/src/lib/stores/contract.ts
+++ b/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) {
diff --git a/src/lib/types/code.ts b/src/lib/types/code.ts
index 55a6f7b7d..a0c2b742e 100644
--- a/src/lib/types/code.ts
+++ b/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;
- created: Dayjs;
+ created: Date;
}
export interface CodeData {
@@ -33,7 +31,7 @@ export interface CodeData {
uploader: ContractAddr | HumanAddr;
hash: Option;
height: Option;
- created: Dayjs;
+ created: Date;
proposal: Option;
instantiatePermission: InstantiatePermission;
permissionAddresses: PermissionAddresses;
diff --git a/src/lib/types/contract.ts b/src/lib/types/contract.ts
index ea7d185d2..ed13500ca 100644
--- a/src/lib/types/contract.ts
+++ b/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;
- instantiated: Dayjs;
+ instantiated: Date;
latestUpdator: Option;
- 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;
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index 96df275da..ee856fcfa 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -1,5 +1,3 @@
-import type { Dayjs } from "dayjs";
-
import type { ContractAddr, HumanAddr } from "lib/types";
import type {
@@ -27,7 +25,7 @@ export enum MsgFurtherAction {
export interface PastTransaction {
hash: string;
messages: Message[];
- created: Dayjs;
+ created: Date;
success: boolean;
actionMsgType: ActionMsgType;
furtherAction: MsgFurtherAction;
@@ -64,7 +62,7 @@ export interface ExecuteTransaction {
messages: Message[];
sender: ContractAddr | HumanAddr;
height: number;
- created: Dayjs;
+ created: Date;
success: boolean;
}
diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts
index 3ef7eb69b..1642fa61a 100644
--- a/src/lib/utils/date.ts
+++ b/src/lib/utils/date.ts
@@ -1,17 +1,26 @@
-import type { Dayjs } from "dayjs";
import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import utc from "dayjs/plugin/utc";
import type { Option } from "lib/types";
-export const parseDate = (date: string) => dayjs(date).utc(true);
+dayjs.extend(relativeTime);
+dayjs.extend(utc);
-export const parseDateOpt = (dateOpt: Option): Option =>
+export const getDefaultDate = (): Date => dayjs.utc(0).toDate();
+
+export const getCurrentDate = (): Date => dayjs.utc().toDate();
+
+export const parseDate = (date: string): Date => dayjs.utc(date).toDate();
+
+export const parseDateOpt = (dateOpt: Option): Option =>
dateOpt ? parseDate(dateOpt) : undefined;
-export const parseDateDefault = (dateOpt: Option): Dayjs =>
- dateOpt ? parseDate(dateOpt) : dayjs(0);
+// TODO: remove default fn
+export const parseDateDefault = (dateOpt: Option): Date =>
+ dateOpt ? parseDate(dateOpt) : getDefaultDate();
-export const formatUTC = (date: Dayjs) =>
- date.format("MMM DD, YYYY, h:mm:ss A [(UTC)]");
+export const formatUTC = (date: Date) =>
+ dayjs.utc(date).format("MMM DD, YYYY, h:mm:ss A [(UTC)]");
-export const dateFromNow = (date: Dayjs) => date.fromNow();
+export const dateFromNow = (date: Date) => dayjs.utc(date).fromNow();
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4a39470ad..4931ea2da 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -3,9 +3,6 @@ import { wallets } from "@cosmos-kit/keplr";
import { WalletProvider } from "@cosmos-kit/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { assets, chains } from "chain-registry";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import utc from "dayjs/plugin/utc";
import localforage from "localforage";
import { configurePersistable } from "mobx-persist-store";
import { enableStaticRendering } from "mobx-react-lite";
@@ -28,8 +25,6 @@ import "lib/styles/globals.css";
import { StoreProvider } from "lib/providers/store";
import { TxBroadcastProvider } from "lib/providers/tx-broadcast";
-dayjs.extend(relativeTime);
-dayjs.extend(utc);
enableStaticRendering(typeof window === "undefined");
localforage.config({