diff --git a/public/locales/en.json b/public/locales/en.json
index d09c3b6..cabbc29 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -341,9 +341,11 @@
"blockHashCopyButtons": "Show copy buttons next to all block hashes",
"showRelativeDates": "Show relative dates instead of absolute ones if recent",
"showRelativeDatesDescription": "Everywhere on the site, if a date is less than 7 days ago, it will show as a relative date instead.",
+ "showNativeDates": "Show dates in a native date format from the language",
+ "showNativeDatesDescription": "If disabled, dates will always be shown as YYYY/MM/DD HH:mm:ss",
"transactionDefaultRaw": "Default to the 'Raw' tab instead of 'CommonMeta' on the transaction page",
"defaultPageSize": "Default page size for table listings",
- "tableHotkeys": "Enable table navigation hotkeys (left and right arrows).",
+ "tableHotkeys": "Enable table navigation hotkeys (left and right arrows)",
"subMenuDebug": "Debug settings",
"advancedWalletFormats": "Advanced wallet formats",
diff --git a/src/components/DateTime.tsx b/src/components/DateTime.tsx
index 85ca12d..2739fb2 100644
--- a/src/components/DateTime.tsx
+++ b/src/components/DateTime.tsx
@@ -41,6 +41,7 @@
const formatter = useContext(TimeagoFormatterContext);
const showRelativeDates = useBooleanSetting("showRelativeDates");
+ const showNativeDates = useBooleanSetting("showNativeDates");
if (!date) return null;
@@ -69,7 +70,9 @@
{isTimeAgo
?
- : dayjs(realDate).format("YYYY/MM/DD HH:mm:ss")}
+ : dayjs(realDate).format(showNativeDates
+ ? "ll LTS"
+ : "YYYY/MM/DD HH:mm:ss")}
);
diff --git a/src/pages/blocks/BlocksTable.tsx b/src/pages/blocks/BlocksTable.tsx
index 7eac690..97e63f1 100644
--- a/src/pages/blocks/BlocksTable.tsx
+++ b/src/pages/blocks/BlocksTable.tsx
@@ -9,7 +9,9 @@
import { KristBlock } from "@api/types";
import { lookupBlocks, LookupBlocksOptions, LookupBlocksResponse } from "@api/lookup";
-import { useMalleablePagination, useTableHistory } from "@utils/table";
+import {
+ useMalleablePagination, useTableHistory, useDateColumnWidth
+} from "@utils/table";
import { ContextualAddress } from "@comp/addresses/ContextualAddress";
import { BlockHash } from "./BlockHash";
@@ -44,6 +46,8 @@
options, setOptions, setPagination
);
+ const dateColumnWidth = useDateColumnWidth();
+
// Fetch the blocks from the API, mapping the table options
useEffect(() => {
debug("looking up blocks");
@@ -134,7 +138,7 @@
title: t("blocks.columnTime"),
dataIndex: "time", key: "time",
render: time => ,
- width: 200,
+ width: dateColumnWidth,
sorter: true,
defaultSortOrder: lowest ? undefined : "descend"
diff --git a/src/pages/names/NamesTable.tsx b/src/pages/names/NamesTable.tsx
index f653f8d..5fad00c 100644
--- a/src/pages/names/NamesTable.tsx
+++ b/src/pages/names/NamesTable.tsx
@@ -8,7 +8,9 @@
import { KristName } from "@api/types";
import { lookupNames, LookupNamesOptions, LookupNamesResponse } from "@api/lookup";
-import { useMalleablePagination, useTableHistory } from "@utils/table";
+import {
+ useMalleablePagination, useTableHistory, useDateColumnWidth
+} from "@utils/table";
import { KristNameLink } from "@comp/names/KristNameLink";
import { ContextualAddress } from "@comp/addresses/ContextualAddress";
@@ -46,6 +48,8 @@
options, setOptions, setPagination
);
+ const dateColumnWidth = useDateColumnWidth();
+
// Fetch the names from the API, mapping the table options
useEffect(() => {
debug("looking up names for %s", addresses ? addresses.join(",") : "network");
@@ -144,7 +148,7 @@
dataIndex: "registered", key: "registered",
render: time => ,
- width: 200,
+ width: dateColumnWidth,
sorter: true,
defaultSortOrder: sortNew ? "descend" : undefined
@@ -156,7 +160,7 @@
dataIndex: "updated", key: "updated",
render: time => ,
- width: 200,
+ width: dateColumnWidth,
sorter: true
}
diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
index ca211e4..660dd71 100644
--- a/src/pages/settings/SettingsPage.tsx
+++ b/src/pages/settings/SettingsPage.tsx
@@ -98,6 +98,15 @@
/>
+ {/* Show native dates */}
+
+
+
+
{/* Default to 'Raw' on transaction page */}
diff --git a/src/pages/transactions/TransactionsTable.tsx b/src/pages/transactions/TransactionsTable.tsx
index 931b58a..294e466 100644
--- a/src/pages/transactions/TransactionsTable.tsx
+++ b/src/pages/transactions/TransactionsTable.tsx
@@ -12,7 +12,9 @@
lookupTransactions, LookupTransactionsOptions, LookupTransactionsResponse,
LookupTransactionType
} from "@api/lookup";
-import { useMalleablePagination, useTableHistory } from "@utils/table";
+import {
+ useMalleablePagination, useTableHistory, useDateColumnWidth
+} from "@utils/table";
import { ListingType } from "./TransactionsPage";
@@ -90,6 +92,8 @@
options, setOptions, setPagination
);
+ const dateColumnWidth = useDateColumnWidth();
+
// Fetch the transactions from the API, mapping the table options
useEffect(() => {
debug(
@@ -222,7 +226,7 @@
title: t("transactions.columnTime"),
dataIndex: "time", key: "time",
render: time => ,
- width: 200,
+ width: dateColumnWidth,
sorter: true,
defaultSortOrder: "descend"
diff --git a/src/pages/wallets/WalletsTable.tsx b/src/pages/wallets/WalletsTable.tsx
index 019eae7..79a60d0 100644
--- a/src/pages/wallets/WalletsTable.tsx
+++ b/src/pages/wallets/WalletsTable.tsx
@@ -13,6 +13,7 @@
import { WalletActions } from "./WalletActions";
import { keyedNullSort, localeSort } from "@utils";
+import { useDateColumnWidth } from "@utils/table";
export function WalletsTable(): JSX.Element {
const { t } = useTranslation();
@@ -24,6 +25,8 @@
.map(w => w.category) as string[])];
localeSort(categories);
+ const dateColumnWidth = useDateColumnWidth();
+
return ,
+ width: dateColumnWidth,
+
sorter: keyedNullSort("firstSeen")
},
diff --git a/src/utils/settings.ts b/src/utils/settings.ts
index f9ac8fc..c2edd03 100644
--- a/src/utils/settings.ts
+++ b/src/utils/settings.ts
@@ -44,6 +44,8 @@
readonly blockHashCopyButtons: boolean;
/** Show relative dates instead of absolute ones when they are recent. */
readonly showRelativeDates: boolean;
+ /** Show dates in a native date format from the language. */
+ readonly showNativeDates: boolean;
/** Default to the 'Raw' tab instead of 'CommonMeta' on the transaction page. */
readonly transactionDefaultRaw: boolean;
/** Default page size for table listings. */
@@ -69,6 +71,7 @@
nameCopyButtons: false,
blockHashCopyButtons: false,
showRelativeDates: false,
+ showNativeDates: false,
transactionDefaultRaw: false,
defaultPageSize: 15,
tableHotkeys: true,
diff --git a/src/utils/table.tsx b/src/utils/table.tsx
index 7080f08..45c9121 100644
--- a/src/utils/table.tsx
+++ b/src/utils/table.tsx
@@ -303,3 +303,10 @@
hotkeys: enableHotkeys ? hotkeys : null
};
}
+
+/** Returns an appropriate date column width for the given language and
+ * settings. */
+export function useDateColumnWidth(): number {
+ const showNativeDates = useBooleanSetting("showNativeDates");
+ return showNativeDates ? 250 : 200;
+}