diff --git a/src/components/Faucet/TransactionTable.tsx b/src/components/Faucet/TransactionTable.tsx
new file mode 100644
index 0000000000..862a17c4e1
--- /dev/null
+++ b/src/components/Faucet/TransactionTable.tsx
@@ -0,0 +1,82 @@
+import React, { useMemo } from "react";
+import Link from "@docusaurus/Link";
+import Badge from "@site/src/components/Badge";
+import Table from "@site/src/components/Table";
+
+const TABLE_DATA = [
+ {
+ id: "01",
+ createdAt: "2024-06-05T13:24:49.207Z",
+ txnHash: "0x38412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+ value: "0.0001",
+ status: "success",
+ },
+ {
+ id: "02",
+ createdAt: "2024-05-05T13:24:49.207Z",
+ txnHash: "0x48412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+ value: "0.0002",
+ status: "failed",
+ },
+ {
+ id: "03",
+ createdAt: "2024-07-05T13:24:49.207Z",
+ txnHash: "0x58412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+ value: "0.0003",
+ status: "pending",
+ },
+];
+
+const hideCenterLetters = (word) => {
+ if (word.length < 10) return word;
+ return `${word.substring(0, 5)}...${word.substring(word.length - 4)}`;
+};
+
+const transformWordEnding = (value, end) => {
+ const upValue = Math.floor(value);
+ return `${upValue} ${end}${upValue === 1 ? "" : "s"} ago`;
+};
+
+const getDiffTime = (time) => {
+ if (!time) return "unknown";
+ const currentTime = Date.now();
+ const startTime = new Date(time).getTime();
+ const deltaTimeInSec = (currentTime - startTime) / 1000;
+ const deltaTimeInMin = deltaTimeInSec / 60;
+ const deltaTimeInHours = deltaTimeInMin / 60;
+ const deltaTimeInDays = deltaTimeInHours / 24;
+
+ if (deltaTimeInMin < 1) return transformWordEnding(deltaTimeInSec, "second");
+ if (deltaTimeInHours < 1) return transformWordEnding(deltaTimeInMin, "minute");
+ if (deltaTimeInDays < 1) return transformWordEnding(deltaTimeInHours, "hour");
+ return transformWordEnding(deltaTimeInDays, "day");
+};
+
+const renderStatus = (status) => {
+ switch (status) {
+ case "success":
+ return "success";
+ case "failed":
+ return "error";
+ default:
+ return "pending";
+ }
+};
+
+export default function TransactionTable() {
+ const dataRows = useMemo(() => {
+ return TABLE_DATA.map((item) => ({
+ cells: [
+ hideCenterLetters(item.txnHash),
+ getDiffTime(item.createdAt),
+ `${item.value} ETH`,
+ ,
+
+ View on Etherscan
+ ,
+ ],
+ }));
+ }, []);
+
+ return
;
+}
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
new file mode 100644
index 0000000000..c37d4ce817
--- /dev/null
+++ b/src/components/Table/index.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import styles from "./table.module.scss";
+import clsx from "clsx";
+
+type TableCell = string | React.ReactElement;
+
+interface TableRow {
+ cells: TableCell[];
+}
+
+interface ITable {
+ classes?: string;
+ thCells: TableCell[];
+ trRows?: TableRow[];
+}
+
+export default function Table({ classes, thCells = [], trRows = [] }: ITable) {
+ return (
+
+
+
+
+
+ {thCells.map((cell, i) => (
+ {cell} |
+ ))}
+
+
+
+ {trRows.map((row, i) => (
+
+ {row.cells.map((cell, y) => {cell} | )}
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss
new file mode 100644
index 0000000000..76e494d4b9
--- /dev/null
+++ b/src/components/Table/table.module.scss
@@ -0,0 +1,70 @@
+:root {
+ --table-border-color: rgba(132, 140, 150, 0.16);
+ --table-bg-color: #FFF;
+ --table-bg-thead-color: #F2F4F6;
+}
+
+:root[data-theme='dark'] {
+ --table-border-color: rgba(132, 140, 150, 0.16);
+ --table-bg-color: #24272A;
+ --table-bg-thead-color: #24272A;
+}
+
+.tableWrapper {
+ max-width: 1014px;
+ width: 100%;
+ margin: 0 auto;
+ overflow-x: auto;
+ margin-bottom: 24px;
+}
+
+.tableInner {
+ border: 1px solid var(--table-border-color);
+ border-radius: 8px;
+ overflow: hidden;
+ min-width: 768px;
+}
+
+.table {
+ display: table;
+ border-collapse: collapse;
+ width: 100%;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+ margin: 0;
+ background-color: var(--table-bg-color);
+
+ .thead {
+ background-color: var(--table-bg-thead-color);
+ }
+
+ .trow {
+ background-color: transparent;
+ border-top: 1px solid var(--table-border-color);
+ }
+}
+
+.throw {
+ background-color: transparent;
+ border: 0;
+
+ .thcell {
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 500;
+ padding: 16px;
+ text-align: left;
+ background-color: transparent !important;
+ border: 0;
+ }
+}
+
+.tdcell {
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+ padding: 16px;
+ background-color: transparent;
+ border: 0;
+}
diff --git a/src/pages/developer-tools/faucet.tsx b/src/pages/developer-tools/faucet.tsx
index afee7abde9..efdc1efe7b 100644
--- a/src/pages/developer-tools/faucet.tsx
+++ b/src/pages/developer-tools/faucet.tsx
@@ -8,6 +8,7 @@ import Badge from "@site/src/components/Badge";
import { Faq } from "@site/src/components/Faucet";
import { useAlert } from "react-alert";
import { AlertCommonIssue, AlertCooldown, AlertSuccess } from "@site/src/components/Faucet";
+import TransactionTable from "@site/src/components/Faucet/TransactionTable";
export default function Faucet() {
const alert = useAlert();
@@ -35,11 +36,7 @@ export default function Faucet() {
default
>
Ethereum Sepolia
-
+