From 560c3241cf7867006c61575a385ff20cd24ab3a6 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 31 Jan 2023 11:22:06 +0700 Subject: [PATCH 1/3] fix: change Date to Dayjs --- CHANGELOG.md | 1 + src/lib/app-fns/tx/execute.tsx | 3 ++- .../select-contract/SelectContractAdmin.tsx | 3 ++- src/lib/model/contract.ts | 7 +++--- .../home/components/RecentlyViewContracts.tsx | 9 ++++---- src/lib/pages/query/components/QueryArea.tsx | 3 ++- src/lib/services/contract.ts | 3 ++- src/lib/stores/contract.ts | 19 +++++++-------- src/lib/types/code.ts | 6 +++-- src/lib/types/contract.ts | 12 ++++++---- src/lib/types/tx/transaction.ts | 6 +++-- src/lib/utils/date.ts | 23 ++++++++----------- src/lib/utils/formatter/camelToSnake.ts | 5 ++-- src/lib/utils/formatter/snakeToCamel.ts | 5 ++-- 14 files changed, 58 insertions(+), 47 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 15dd4c31c..b10514d30 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -114,6 +114,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Bug fixes +- [#139](https://github.com/alleslabs/celatone-frontend/pull/139) Fix Date to Dayjs - [#132](https://github.com/alleslabs/celatone-frontend/pull/132) Fix permission field in upload simulation - [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios - [#129](https://github.com/alleslabs/celatone-frontend/pull/129) Fix wallet disconnection on network query change diff --git a/src/lib/app-fns/tx/execute.tsx b/src/lib/app-fns/tx/execute.tsx index 0b2182406..1f842cd70 100644 --- a/src/lib/app-fns/tx/execute.tsx +++ b/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, diff --git a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx index 0368bb8f7..248156645 100644 --- a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx +++ b/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, }; diff --git a/src/lib/model/contract.ts b/src/lib/model/contract.ts index 773eaf1a2..7de1814cb 100644 --- a/src/lib/model/contract.ts +++ b/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"; @@ -66,7 +67,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, }; @@ -83,11 +84,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, }; diff --git a/src/lib/pages/home/components/RecentlyViewContracts.tsx b/src/lib/pages/home/components/RecentlyViewContracts.tsx index 6eede513c..2d3dc5c82 100644 --- a/src/lib/pages/home/components/RecentlyViewContracts.tsx +++ b/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 = () => { diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx index 473939796..846c899e3 100644 --- a/src/lib/pages/query/components/QueryArea.tsx +++ b/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) { diff --git a/src/lib/services/contract.ts b/src/lib/services/contract.ts index bddb77143..1b0fd4d88 100644 --- a/src/lib/services/contract.ts +++ b/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"; @@ -42,7 +43,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 f200eaa98..353f4116c 100644 --- a/src/lib/stores/contract.ts +++ b/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) { diff --git a/src/lib/types/code.ts b/src/lib/types/code.ts index a0c2b742e..55a6f7b7d 100644 --- a/src/lib/types/code.ts +++ b/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; - created: Date; + created: Dayjs; } export interface CodeData { @@ -31,7 +33,7 @@ export interface CodeData { uploader: ContractAddr | HumanAddr; hash: Option; height: Option; - created: Date; + created: Dayjs; proposal: Option; instantiatePermission: InstantiatePermission; permissionAddresses: PermissionAddresses; diff --git a/src/lib/types/contract.ts b/src/lib/types/contract.ts index ed13500ca..ea7d185d2 100644 --- a/src/lib/types/contract.ts +++ b/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; - instantiated: Date; + instantiated: Dayjs; latestUpdator: Option; - 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; diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts index ee856fcfa..96df275da 100644 --- a/src/lib/types/tx/transaction.ts +++ b/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; } diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts index abf4303dc..85fe2305f 100644 --- a/src/lib/utils/date.ts +++ b/src/lib/utils/date.ts @@ -1,23 +1,18 @@ +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 formatUTC = (timestamp: string | Dayjs) => + dayjs(timestamp).utc(true).format("MMM DD, YYYY, h:mm:ss A [(UTC)]"); -export const dateFromNow = (timestamp: string | Date) => { - const localDate = - typeof timestamp === "string" ? timestamp.concat("Z") : timestamp; - return dayjs(localDate).fromNow(); -}; +export const dateFromNow = (timestamp: string | Dayjs) => + dayjs(timestamp).utc(true).fromNow(); -export const parseDate = (date: string) => new Date(`${date}Z`); +export const parseDate = (date: string) => dayjs(date).utc(true); -export const parseDateOpt = (dateOpt: Option): Option => +export const parseDateOpt = (dateOpt: Option): Option => dateOpt ? parseDate(dateOpt) : undefined; -export const parseDateDefault = (dateOpt: Option): Date => - dateOpt ? parseDate(dateOpt) : new Date(0); +export const parseDateDefault = (dateOpt: Option): Dayjs => + dateOpt ? parseDate(dateOpt) : dayjs(0); diff --git a/src/lib/utils/formatter/camelToSnake.ts b/src/lib/utils/formatter/camelToSnake.ts index 4c264834a..a1e59449a 100644 --- a/src/lib/utils/formatter/camelToSnake.ts +++ b/src/lib/utils/formatter/camelToSnake.ts @@ -1,3 +1,4 @@ +import { Dayjs } from "dayjs"; import mapObject from "map-obj"; import { snakeCase } from "snake-case"; @@ -9,8 +10,8 @@ export const camelToSnake = (obj: unknown): unknown => { return obj; } - // Ignore Date, whose typeof is `object` too. - if (obj instanceof Date) { + // Ignore Dayjs, whose typeof is `object` too. + if (obj instanceof Dayjs) { return obj; } diff --git a/src/lib/utils/formatter/snakeToCamel.ts b/src/lib/utils/formatter/snakeToCamel.ts index bc82b7fe1..949f1f866 100644 --- a/src/lib/utils/formatter/snakeToCamel.ts +++ b/src/lib/utils/formatter/snakeToCamel.ts @@ -1,4 +1,5 @@ import camelCase from "camelcase"; +import { Dayjs } from "dayjs"; import mapObject from "map-obj"; // Convert snake case to camel case of an object @@ -9,8 +10,8 @@ export const snakeToCamel = (obj: unknown): unknown => { return obj; } - // Ignore Date, whose typeof is `object` too. - if (obj instanceof Date) { + // Ignore Dayjs, whose typeof is `object` too. + if (obj instanceof Dayjs) { return obj; } // Array of object From 9b5059f106d44eaa50fb418f0d84d09edb44dd4c Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 31 Jan 2023 11:26:54 +0700 Subject: [PATCH 2/3] fix: change changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b10514d30..722d0e7bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -102,6 +102,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 - [#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 - [#114](https://github.com/alleslabs/celatone-frontend/pull/114) Handle wallet connection cases in instantiate button @@ -114,7 +115,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Bug fixes -- [#139](https://github.com/alleslabs/celatone-frontend/pull/139) Fix Date to Dayjs - [#132](https://github.com/alleslabs/celatone-frontend/pull/132) Fix permission field in upload simulation - [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios - [#129](https://github.com/alleslabs/celatone-frontend/pull/129) Fix wallet disconnection on network query change From 3b39c57db17813f0af52c25c8d573fd2476bb222 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 1 Feb 2023 11:08:30 +0700 Subject: [PATCH 3/3] fix: as comments --- src/lib/utils/date.ts | 11 +++++------ src/lib/utils/formatter/camelToSnake.ts | 5 ++--- src/lib/utils/formatter/snakeToCamel.ts | 5 ++--- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts index 85fe2305f..3ef7eb69b 100644 --- a/src/lib/utils/date.ts +++ b/src/lib/utils/date.ts @@ -3,12 +3,6 @@ import dayjs from "dayjs"; import type { Option } from "lib/types"; -export const formatUTC = (timestamp: string | Dayjs) => - dayjs(timestamp).utc(true).format("MMM DD, YYYY, h:mm:ss A [(UTC)]"); - -export const dateFromNow = (timestamp: string | Dayjs) => - dayjs(timestamp).utc(true).fromNow(); - export const parseDate = (date: string) => dayjs(date).utc(true); export const parseDateOpt = (dateOpt: Option): Option => @@ -16,3 +10,8 @@ export const parseDateOpt = (dateOpt: Option): Option => export const parseDateDefault = (dateOpt: Option): Dayjs => dateOpt ? parseDate(dateOpt) : dayjs(0); + +export const formatUTC = (date: Dayjs) => + date.format("MMM DD, YYYY, h:mm:ss A [(UTC)]"); + +export const dateFromNow = (date: Dayjs) => date.fromNow(); diff --git a/src/lib/utils/formatter/camelToSnake.ts b/src/lib/utils/formatter/camelToSnake.ts index a1e59449a..4c264834a 100644 --- a/src/lib/utils/formatter/camelToSnake.ts +++ b/src/lib/utils/formatter/camelToSnake.ts @@ -1,4 +1,3 @@ -import { Dayjs } from "dayjs"; import mapObject from "map-obj"; import { snakeCase } from "snake-case"; @@ -10,8 +9,8 @@ export const camelToSnake = (obj: unknown): unknown => { return obj; } - // Ignore Dayjs, whose typeof is `object` too. - if (obj instanceof Dayjs) { + // Ignore Date, whose typeof is `object` too. + if (obj instanceof Date) { return obj; } diff --git a/src/lib/utils/formatter/snakeToCamel.ts b/src/lib/utils/formatter/snakeToCamel.ts index 949f1f866..bc82b7fe1 100644 --- a/src/lib/utils/formatter/snakeToCamel.ts +++ b/src/lib/utils/formatter/snakeToCamel.ts @@ -1,5 +1,4 @@ import camelCase from "camelcase"; -import { Dayjs } from "dayjs"; import mapObject from "map-obj"; // Convert snake case to camel case of an object @@ -10,8 +9,8 @@ export const snakeToCamel = (obj: unknown): unknown => { return obj; } - // Ignore Dayjs, whose typeof is `object` too. - if (obj instanceof Dayjs) { + // Ignore Date, whose typeof is `object` too. + if (obj instanceof Date) { return obj; } // Array of object