Skip to content

Commit 0297201

Browse files
dutterbutterdutterbutter
authored
Merge pull request #530 from matter-labs/db/feat-timestamp-with-secs
feat: adds exact block timestamp (with secs) on transaction view
2 parents 08c344e + 0e0e0f5 commit 0297201

File tree

8 files changed

+26
-20
lines changed

8 files changed

+26
-20
lines changed

‎packages/app/src/components/transactions/infoTable/GeneralInfo.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -195,9 +195,9 @@
195195
</tr>
196196
<tr class="transaction-table-row">
197197
<table-body-column class="transaction-table-label">
198-
<span class="transaction-info-field-label">{{ t("transactions.table.receivedAt") }}</span>
198+
<span class="transaction-info-field-label">{{ t("transactions.table.timestamp") }}</span>
199199
<InfoTooltip class="transaction-info-field-tooltip">
200-
{{ t("transactions.table.receivedAtTooltip") }}
200+
{{ t("transactions.table.timestampTooltip") }}
201201
</InfoTooltip>
202202
</table-body-column>
203203
<table-body-column class="transaction-table-value">

‎packages/app/src/composables/useTransaction.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import type { TransactionLogEntry } from "./useEventLog";
1010
import type { Hash, NetworkOrigin } from "@/types";
1111

1212
import { numberToHexString } from "@/utils/formatters";
13+
import { ISOStringFromUnixTimestamp } from "@/utils/helpers";
1314

1415
export type TransactionStatus = "included" | "committed" | "proved" | "verified" | "failed" | "indexing";
1516
type TokenInfo = {
@@ -99,9 +100,11 @@ export default (context = useContext()) => {
99100
provider.getTransaction(hash),
100101
provider.getTransactionReceipt(hash),
101102
]);
103+
const block = transactionData?.blockNumber != null ? await provider.getBlock(transactionData.blockNumber) : null;
102104
if (!transactionData || !transactionReceipt) {
103105
return null;
104106
}
107+
const blockTimestamp = block ? ISOStringFromUnixTimestamp(block.timestamp) : "";
105108
// eslint-disable-next-line @typescript-eslint/no-explicit-any
106109
const gasPerPubdata = (transactionData as any).gasPerPubdata;
107110
const tx = {
@@ -127,8 +130,7 @@ export default (context = useContext()) => {
127130
indexInBlock: transactionReceipt.index,
128131
isL1Originated: [126, 127].includes(transactionData.type),
129132
nonce: transactionData.nonce,
130-
receivedAt: "", // TODO: replace with block timestamp
131-
133+
receivedAt: blockTimestamp,
132134
status: "indexing" as TransactionStatus,
133135

134136
logs: transactionReceipt.logs.map((item) => ({

‎packages/app/src/locales/en.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,8 @@
113113
"transactionHashTooltip": "Transaction hash is a unique 66-character identifier that is generated whenever a transaction is executed",
114114
"nonce": "Nonce",
115115
"nonceTooltip": "Number of transactions sent from a sender address",
116-
"receivedAt": "Received",
117-
"receivedAtTooltip": "The date and time when the transaction was received",
116+
"timestamp": "Timestamp",
117+
"timestampTooltip": "The date and time at which a transaction is produced",
118118
"sendersNonce": "Sender`s Nonce",
119119
"from": "From",
120120
"fromTooltip": "The sending party of the transaction",
@@ -149,7 +149,6 @@
149149
"amount": "Amount",
150150
"method": "Method",
151151
"transferMethodName": "Transfer",
152-
"timestamp": "Timestamp",
153152
"age": "Age",
154153
"dateTimeUTC": "Date Time (UTC)",
155154
"tokenAddress": "Token address",

‎packages/app/src/utils/helpers.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,19 @@ export const DefaultAbiCoder: AbiCoder = AbiCoder.defaultAbiCoder();
1414

1515
export function utcStringFromUnixTimestamp(timestamp: number) {
1616
const isoDate = new Date(+`${timestamp}000`).toISOString();
17-
return format(new Date(isoDate.slice(0, -1)), "yyyy-MM-dd HH:mm 'UTC'");
17+
return format(new Date(isoDate.slice(0, -1)), "yyyy-MM-dd HH:mm:ss a 'UTC'");
1818
}
1919

2020
export function utcStringFromISOString(ISOString: string) {
21-
return format(new Date(ISOString.slice(0, -1)), "yyyy-MM-dd HH:mm:ss 'UTC'");
21+
return format(new Date(ISOString.slice(0, -1)), "yyyy-MM-dd HH:mm:ss a 'UTC'");
2222
}
2323

2424
export function localDateFromISOString(ISOString: string) {
25-
return format(new Date(ISOString), "yyyy-MM-dd HH:mm");
25+
return format(new Date(ISOString), "yyyy-MM-dd HH:mm:ss a 'UTC'");
2626
}
2727

2828
export function localDateFromUnixTimestamp(timestamp: number) {
29-
return format(new Date(timestamp * 1000), "yyyy-MM-dd HH:mm");
29+
return format(new Date(timestamp * 1000), "yyyy-MM-dd HH:mm:ss a 'UTC'");
3030
}
3131

3232
export function ISOStringFromUnixTimestamp(timestamp: number) {

‎packages/app/tests/components/common/table/fields/TimeField.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ describe("TimeField", () => {
3030
},
3131
});
3232

33-
expect(container.querySelector(".info-field-time")?.getAttribute("title")).toBe("2022-12-02 09:26:06 UTC");
33+
expect(container.querySelector(".info-field-time")?.getAttribute("title")).toBe("2022-12-02 09:26:06 AM UTC");
3434
unmount();
3535
});
3636
it("renders full date when time format is not specified", () => {
@@ -41,7 +41,7 @@ describe("TimeField", () => {
4141
},
4242
});
4343

44-
expect(container.querySelector(".full-date")?.textContent).toBe("2022-12-02 12:26");
44+
expect(container.querySelector(".full-date")?.textContent).toBe("2022-12-02 12:26:06 PM UTC");
4545
unmount();
4646
});
4747
it("doesn't render full date when time format is TIME_AGO", () => {

‎packages/app/tests/components/transactions/GeneralInfo.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ describe("Transaction info table", () => {
266266
expect(gasLimitAndUsed.text()).toBe("5000 | 3000 (60%)");
267267
expect(gasPerPubdata.text()).toBe("800");
268268
expect(nonce.text()).toBe("24");
269-
expect(createdAt.find(".full-date").text()).toBe("2023-02-28 11:42");
269+
expect(createdAt.find(".full-date").text()).toBe("2023-02-28 11:42:08 AM UTC");
270270

271271
const [
272272
txHashTooltip,
@@ -295,7 +295,7 @@ describe("Transaction info table", () => {
295295
expect(gasLimitAndUsedTooltip).toBe(i18n.global.t("transactions.table.gasLimitAndUsedTooltip"));
296296
expect(gasPerPubdataTooltip).toBe(i18n.global.t("transactions.table.gasPerPubdataTooltip"));
297297
expect(nonceTooltip).toBe(i18n.global.t("transactions.table.nonceTooltip"));
298-
expect(createdAtTooltip).toBe(i18n.global.t("transactions.table.receivedAtTooltip"));
298+
expect(createdAtTooltip).toBe(i18n.global.t("transactions.table.timestampTooltip"));
299299
});
300300
it("renders indexing transaction status", async () => {
301301
const wrapper = mount(Table, {

‎packages/app/tests/composables/useTransaction.spec.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import useTransaction, { getTransferNetworkOrigin } from "@/composables/useTrans
88

99
import type { Context } from "@/composables/useContext";
1010

11+
import { ISOStringFromUnixTimestamp } from "@/utils/helpers";
12+
1113
const hash = "0x011b4d03dd8c01f1049143cf9c4c817e4b167f1d1b83e5c6f0f10d89ba1e7bce";
1214
const hashPaidByPaymaster = "0x111b4d03dd8c01f1049143cf9c4c817e4b167f1d1b83e5c6f0f10d89ba1e7bce";
1315

@@ -589,6 +591,8 @@ describe("useTransaction:", () => {
589591
});
590592
describe("when transaction request fails with not found error", () => {
591593
it("fetches transaction data directly from blockchain", async () => {
594+
const blockTimestampSeconds = 1677574808;
595+
const blockTimestampISO = ISOStringFromUnixTimestamp(blockTimestampSeconds);
592596
const provider = {
593597
getTransaction: vi.fn().mockResolvedValue({
594598
hash: "0x00000d03dd8c01f1049143cf9c4c817e4b167f1d1b83e5c6f0f10d89ba1e7bcf",
@@ -611,6 +615,7 @@ describe("useTransaction:", () => {
611615
gasPrice: "4000",
612616
contractAddress: null,
613617
}),
618+
getBlock: vi.fn().mockResolvedValue({ timestamp: blockTimestampSeconds }),
614619
};
615620
const { transaction, isRequestFailed, getByHash } = useTransaction({
616621
currentNetwork: {
@@ -657,7 +662,7 @@ describe("useTransaction:", () => {
657662
isEvmLike: false,
658663
isL1Originated: false,
659664
nonce: 24,
660-
receivedAt: "",
665+
receivedAt: blockTimestampISO,
661666
status: "indexing",
662667
logs: [
663668
{

‎packages/app/tests/utils/helpers.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ const event = {
5252

5353
describe("helpers:", () => {
5454
it("returns utc string from unix timestamp", () => {
55-
expect(utcStringFromUnixTimestamp(1645606700)).toBe("2022-02-23 08:58 UTC");
55+
expect(utcStringFromUnixTimestamp(1645606700)).toBe("2022-02-23 08:58:20 AM UTC");
5656
});
5757

5858
it("returns utc string from ISO string", () => {
59-
expect(utcStringFromISOString("2022-04-08T18:21:14.362648Z")).toBe("2022-04-08 18:21:14 UTC");
59+
expect(utcStringFromISOString("2022-04-08T18:21:14.362648Z")).toBe("2022-04-08 18:21:14 PM UTC");
6060
});
6161

6262
it("returns ISO string from unix timestamp", () => {
@@ -68,12 +68,12 @@ describe("helpers:", () => {
6868
});
6969

7070
it("returns local date from ISO string", () => {
71-
const result = format(new Date("2022-04-08T18:21:14.362648Z"), "yyyy-MM-dd HH:mm");
71+
const result = format(new Date("2022-04-08T18:21:14.362648Z"), "yyyy-MM-dd HH:mm:ss a 'UTC'");
7272
expect(localDateFromISOString("2022-04-08T18:21:14.362648Z")).toBe(result);
7373
});
7474

7575
it("returns local date from unix timestamp", () => {
76-
const result = format(new Date(1645606700 * 1000), "yyyy-MM-dd HH:mm");
76+
const result = format(new Date(1645606700 * 1000), "yyyy-MM-dd HH:mm:ss a 'UTC'");
7777
expect(localDateFromUnixTimestamp(1645606700)).toBe(result);
7878
});
7979

0 commit comments

Comments
 (0)