diff --git a/apps/dashboard/src/app/(dashboard)/tools/components/tabs.tsx b/apps/dashboard/src/app/(dashboard)/tools/components/tabs.tsx deleted file mode 100644 index db70f890fee..00000000000 --- a/apps/dashboard/src/app/(dashboard)/tools/components/tabs.tsx +++ /dev/null @@ -1,29 +0,0 @@ -"use client"; - -import { TabLinks } from "@/components/ui/tabs"; -import { useSelectedLayoutSegment } from "next/navigation"; - -const links: { - name: string; - segment: string; -}[] = [ - { name: "Transaction Simulator", segment: "transaction-simulator" }, - { name: "Wei Converter", segment: "wei-converter" }, - { name: "Hex Converter", segment: "hex-converter" }, - { name: "Unix Time Converter", segment: "unixtime-converter" }, - { name: "Keccak-256 Converter", segment: "keccak256-converter" }, -]; - -export function ToolsTabs() { - const layoutSegment = useSelectedLayoutSegment() || ""; - - return ( - ({ - name: tab.name, - href: `/tools/${tab.segment}`, - isActive: layoutSegment === tab.segment, - }))} - /> - ); -} diff --git a/apps/dashboard/src/app/(dashboard)/tools/layout.tsx b/apps/dashboard/src/app/(dashboard)/tools/layout.tsx index 33ad911729f..d07391bb8c8 100644 --- a/apps/dashboard/src/app/(dashboard)/tools/layout.tsx +++ b/apps/dashboard/src/app/(dashboard)/tools/layout.tsx @@ -1,5 +1,5 @@ +import { SidebarLayout } from "@/components/blocks/SidebarLayout"; import type { Metadata } from "next"; -import { ToolsTabs } from "./components/tabs"; export const metadata: Metadata = { title: "thirdweb Blockchain Tools", @@ -11,13 +11,31 @@ export default function ToolLayout({ children, }: { children: React.ReactNode }) { return ( -
-
-
- -
-
{children}
-
-
+ + {children} + ); } diff --git a/apps/dashboard/src/app/(dashboard)/tools/unixtime-converter/components/UnixTimeConverter.tsx b/apps/dashboard/src/app/(dashboard)/tools/unixtime-converter/components/UnixTimeConverter.tsx index beec0921dd6..f338234f18a 100644 --- a/apps/dashboard/src/app/(dashboard)/tools/unixtime-converter/components/UnixTimeConverter.tsx +++ b/apps/dashboard/src/app/(dashboard)/tools/unixtime-converter/components/UnixTimeConverter.tsx @@ -1,118 +1,151 @@ "use client"; -import { CopyTextButton } from "@/components/ui/CopyTextButton"; +import {} from "@/components/ui/alert"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; -import { formatDistanceToNow } from "date-fns"; -import { useState } from "react"; -import { ShareButton } from "../../components/share"; - -export const UnixTimeConverter = () => { - const getCurrentUnixMilliseconds = () => Math.floor(new Date().getTime()); - const [unix, setUnix] = useState(getCurrentUnixMilliseconds()); - - // `unix` may be in milliseconds or seconds. - // Treat any value < 100000000000 as seconds, otherwise milliseconds. - const isSeconds = unix < 100000000000; - const date = new Date(isSeconds ? unix * 1000 : unix); - const dateLocal = date.toLocaleString(undefined, { - timeZoneName: "short", - }); - const dateUTC = date.toLocaleString(undefined, { - timeZoneName: "short", - timeZone: "UTC", +import { + formatDistanceToNow, + formatISO9075, + formatRFC3339, + formatRFC7231, + fromUnixTime, +} from "date-fns"; +import { useMemo, useState } from "react"; + +export function UnixTimeConverter() { + const [unixTime, setUnixTime] = useState(() => { + return Math.floor(Date.now() / 1000); }); + const { date, error } = useMemo(() => { + if (Number.isNaN(unixTime) || !Number.isInteger(unixTime)) { + return { + error: "Invalid Unix Timestamp", + date: null, + }; + } + + const date = fromUnixTime(unixTime); + + if (!isValidDate(date)) { + return { + date: null, + error: "Invalid Unix Timestamp", + }; + } + + return { + date, + error: null, + }; + }, [unixTime]); + return ( -
-
-
- - { - if (!Number.isNaN(e.target.valueAsNumber)) { - setUnix(e.target.valueAsNumber); - } - }} - placeholder="Enter a Unix time in milliseconds or seconds" - className="p-6 text-xl" - /> -
-
- -
- + + + + Unix Time Converter + + + + +
+ + { + setUnixTime(Number(e.target.value)); + }} + placeholder="e.g., 1609459200" + className="mt-1" /> + {error && ( +

{error}

+ )}
-

- ← {formatDistanceToNow(date, { addSuffix: true })} -

-
-
- -
- + +
+
+ +

+ {date + ? formatDistanceToNow(date, { + addSuffix: true, + }) + : "---"} +

+
+
+ +

+ {date ? formatLocal(date) : "---"} +

+
+
+ +

+ {date ? formatUTC(date) : "---"} +

+
+ +
+ +

+ {date ? formatISO8601(date) : "---"} +

+
+ +
+ +

+ {date ? formatISO9075(date) : "---"} +

+
+
+ +

+ {date ? formatRFC7231(date) : "---"} +

+
+
+ +

+ {date ? formatRFC3339(date) : "---"} +

+
+
+ +

+ {date ? formatSQL(date) : "---"} +

+
-
-
- -
-
- -
-

- Convert Unix time in milliseconds or seconds -

- -

- Timestamps are often represented in Unix time for several key reasons: -

-

Simplicity

-

- Counts seconds since January 1, 1970, making it easy to understand and - manipulate. -

-

Consistency

-

- Provides a uniform time representation across systems, unaffected by - time zones or calendar changes. -

-

Standardization

-

- Widely supported in computing, ensuring compatibility across - platforms. -

-

Calculation

-

- Allows straightforward arithmetic operations for time differences. -

-

Efficiency

-

- Stores time as a single integer, conserving memory and computational - resources. -

-

Interoperability

-

Facilitates seamless data exchange between systems and languages.

-
+ +
); -}; +} + +function formatLocal(date: Date): string { + return date.toLocaleString(); +} + +function formatUTC(date: Date): string { + return date.toUTCString(); +} + +function isValidDate(date: Date): boolean { + return !Number.isNaN(date.getTime()); +} + +function formatISO8601(date: Date): string { + return date.toISOString(); +} + +function formatSQL(date: Date): string { + return date.toISOString().slice(0, 19).replace("T", " "); +} diff --git a/apps/dashboard/src/app/(dashboard)/tools/unixtime-converter/page.tsx b/apps/dashboard/src/app/(dashboard)/tools/unixtime-converter/page.tsx index c7e4ad2626a..3f433e2b14d 100644 --- a/apps/dashboard/src/app/(dashboard)/tools/unixtime-converter/page.tsx +++ b/apps/dashboard/src/app/(dashboard)/tools/unixtime-converter/page.tsx @@ -1,4 +1,5 @@ import type { Metadata } from "next"; +import { ClientOnly } from "../../../../components/ClientOnly/ClientOnly"; import { UnixTimeConverter } from "./components/UnixTimeConverter"; export const metadata: Metadata = { @@ -7,5 +8,9 @@ export const metadata: Metadata = { }; export default async function Page() { - return ; + return ( + + + + ); }