+ setSearchKey(e)}
+ type="text"
+ placeholder="Type to search"
+ />
+
+
+ )}
+
+ {props?.columns && props.data?.length > 0 && (
+
+
+ {" "}
+ {props.trimmed && viewport === "wide" && (
+
+ )}
+
+
+ {!props.trimmed && (
+
+
+ );
+}
+
+export default ApexChart;
diff --git a/packages/cacti-ledger-browser-react/src/components/Chart/LineChart.tsx b/packages/cacti-ledger-browser-react/src/components/Chart/LineChart.tsx
new file mode 100644
index 0000000000..701c1cae76
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/Chart/LineChart.tsx
@@ -0,0 +1,79 @@
+import Chart from "react-apexcharts";
+import moment from "moment";
+import { balanceDate } from "../../schema/supabase-types";
+import styles from "./Chart.module.css";
+import { useEffect, useState } from "react";
+
+function LineChart(props) {
+ const [chartProps, setChartProps] = useState({
+ series: {
+ list: [
+ {
+ name: "balance",
+ data: [],
+ },
+ ],
+ },
+ options: {
+ chart: {
+ id: "chart-example",
+ },
+ xaxis: {
+ categories: [],
+ },
+ },
+ });
+
+ useEffect(() => {
+ const { chartData } = props;
+
+ setChartProps({
+ options: {
+ chart: {
+ id: "chart-example",
+ },
+ stroke: {
+ curve: "stepline",
+ },
+ tooltip: {
+ x: {
+ show: true,
+ format: "dd MM yyyy h:mm",
+ formatter: undefined,
+ },
+ },
+ xaxis: {
+ type: "datetime",
+ categories: chartData?.map((txn: balanceDate) =>
+ moment(txn.created_at).format("YYYY-MM-DD h:mm:ss a"),
+ ),
+ labels: {
+ format: "dd MM yyyy h:mm",
+ },
+ },
+ },
+ series: {
+ list: [
+ {
+ name: "balance",
+ data: chartData?.map((txn: balanceDate) => txn.balance),
+ },
+ ],
+ },
+ });
+ });
+
+ return (
+
+
+ );
+}
+
+export default LineChart;
diff --git a/packages/cacti-ledger-browser-react/src/components/Pagination/Pagination.module.css b/packages/cacti-ledger-browser-react/src/components/Pagination/Pagination.module.css
new file mode 100644
index 0000000000..0632e5e845
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/Pagination/Pagination.module.css
@@ -0,0 +1,51 @@
+.pagination {
+ width: 100%;
+ padding: 1rem;
+ justify-content: flex-end;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.pagination-counter {
+ height: 2.5rem;
+ display: flex;
+ align-items: center;
+ padding: 0 1rem;
+ border-radius: 10px;
+ border: 1px solid rgb(204, 206, 205);
+}
+
+.pagination-jump {
+ display: flex;
+ gap: 10px;
+ padding: 9px 1rem;
+ background-color: rgb(233, 229, 229);
+ border-radius: 10px;
+}
+
+input {
+ border-radius: 10px;
+ border: 1px solid rgb(54, 51, 224);
+ padding: 0 0.5rem;
+ width: 7rem;
+ text-align: center;
+ font-size: 1rem;
+}
+
+@media (max-width: 1699px) {
+ .pagination {
+ padding: 0;
+ justify-content: center;
+ position: relative;
+ }
+
+ .pagination button {
+ min-width: 85px;
+ }
+
+ .pagination-jump {
+ position: absolute;
+ top: 2.75rem;
+ }
+}
diff --git a/packages/cacti-ledger-browser-react/src/components/Pagination/Pagination.tsx b/packages/cacti-ledger-browser-react/src/components/Pagination/Pagination.tsx
new file mode 100644
index 0000000000..1b79a3d2ec
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/Pagination/Pagination.tsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import Button from "../UI/Button/Button";
+import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
+import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
+// @ts-expect-error
+import styles from "./Pagination.module.css";
+
+type pagination = {
+ current: number;
+ total: number;
+ goToPage: (pageNumber: number) => void;
+ goNextPage: () => void;
+ goPrevPage: () => void;
+};
+
+function Pagination(props) {
+ let inputRef: any;
+ const getInputValue = () =>
+ inputRef?.value ? inputRef.value : props.current;
+ const [goToPageVisible, setGoToPageVisible] = useState
+
+
+
+ {goToPageVisible === true && (
+
+ );
+}
+
+export default Pagination;
diff --git a/packages/cacti-ledger-browser-react/src/components/TokenHeader/TokenAccount.tsx b/packages/cacti-ledger-browser-react/src/components/TokenHeader/TokenAccount.tsx
new file mode 100644
index 0000000000..0400b16cfc
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/TokenHeader/TokenAccount.tsx
@@ -0,0 +1,18 @@
+import styles from "./TokenHeader.module.css";
+import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
+
+function TokenAccount(props) {
+ return (
+
+
+
+
+ )}
+
+
+
+
+ {" "}
+
+
+ );
+}
+
+export default TokenAccount;
diff --git a/packages/cacti-ledger-browser-react/src/components/TokenHeader/TokenHeader.module.css b/packages/cacti-ledger-browser-react/src/components/TokenHeader/TokenHeader.module.css
new file mode 100644
index 0000000000..2d9ef9600c
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/TokenHeader/TokenHeader.module.css
@@ -0,0 +1,57 @@
+.token-header {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 1rem;
+}
+
+.token-details {
+ width: 100%;
+ height: min-content;
+ border: 1px solid rgb(240, 236, 236);
+ border-radius: 10px;
+ gap: 3rem;
+ padding: 1rem 2rem;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ background-color: rgb(247, 245, 245);
+}
+
+.token-details div {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.token-icon {
+ height: 100%;
+ transform: translateY(10%);
+ color: rgb(34, 70, 70);
+}
+
+.token-account {
+ font-size: 16px;
+ width: 100%;
+ height: min-content;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgb(247, 245, 245);
+ border-radius: 10px;
+ padding: 1rem;
+ padding-left: 2rem;
+}
+
+.token-account span {
+ display: flex;
+ align-items: center;
+ gap: .5rem;
+}
+
+.token-account-icon {
+ color: rgb(22, 92, 65);
+ font-size: 28px;
+ height: 30px;
+ width: 30px;
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/components/TokenHeader/TokenHeader.tsx b/packages/cacti-ledger-browser-react/src/components/TokenHeader/TokenHeader.tsx
new file mode 100644
index 0000000000..d47c124ff8
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/TokenHeader/TokenHeader.tsx
@@ -0,0 +1,51 @@
+import TokenAccount from "./TokenAccount";
+import { TokenMetadata20 } from "../../schema/supabase-types";
+import { supabase } from "../../supabase-client";
+
+import styles from "./TokenHeader.module.css";
+import { useEffect, useState } from "react";
+
+function TokenHeader(props) {
+ const [tokenData, setTokenData] = useState
+
+ );
+}
+
+export default TokenHeader;
diff --git a/packages/cacti-ledger-browser-react/src/components/UI/Button/Button.module.css b/packages/cacti-ledger-browser-react/src/components/UI/Button/Button.module.css
new file mode 100644
index 0000000000..eab9eabd84
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/UI/Button/Button.module.css
@@ -0,0 +1,77 @@
+.button {
+ color: rgb(14, 48, 23);
+ background-color: rgb(248, 248, 250);
+ height: 2.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: max-content;
+ min-width: 100px;
+ padding: 10px;
+ border: 1px solid rgb(32, 133, 77);
+ font-family: 'Roboto';
+ border-radius: 10px;
+}
+
+.button:hover {
+ background-color: rgb(219, 219, 224);
+ transform: scale(1.01);
+ cursor: pointer;
+}
+
+.button-primary {
+ background-color: rgb(244, 247, 245);
+ color:rgb(14, 44, 14);
+ border-radius: 5px;
+ width:150px;
+}
+
+.button-primary:hover { background-color: rgb(226, 253, 219);}
+
+.button-warn { background-color: rgb(155, 22, 13);}
+
+.button-warn:hover { background-color: rgb(114, 22, 16);}
+
+.button-menu{
+ border:none;
+ background: transparent;
+ height: 100%;
+ transition: background-color 0.5s ease-out;
+ position:relative;
+ border-radius: 0;
+
+}
+.button-menu:hover{
+color:rgb(0, 0, 0);
+background-color: rgb(243, 242, 242);
+}
+.button-menu:hover:after {
+ content: '';
+ display: block;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 1px;
+ width: 100%;
+ height: 1px;
+ border-bottom: 2px solid green;
+
+}
+
+.button-link {
+ background: transparent;
+ border:none;
+ height: min-content;
+ color:rgb(64, 64, 228);
+}
+
+.button-link:hover{
+ background: transparent;
+ color:rgb(78, 78, 236);
+}
+
+@media (max-width: 1699px) {
+ .button-primary {
+ font-size: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/components/UI/Button/Button.tsx b/packages/cacti-ledger-browser-react/src/components/UI/Button/Button.tsx
new file mode 100644
index 0000000000..ec1c40d5f0
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/UI/Button/Button.tsx
@@ -0,0 +1,22 @@
+import styles from "./Button.module.css";
+
+function Button(props) {
+ type ObjectKey = keyof typeof styles;
+ const buttonTypeStyle = `button-${props.type}` as ObjectKey;
+
+ const handleClick = (e: MouseEvent) => {
+ e.stopPropagation();
+ props.onClick();
+ };
+
+ return (
+
+ );
+}
+
+export default Button;
diff --git a/packages/cacti-ledger-browser-react/src/components/UI/CustomTable/CustomTable.css b/packages/cacti-ledger-browser-react/src/components/UI/CustomTable/CustomTable.css
new file mode 100644
index 0000000000..d94c8789f0
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/UI/CustomTable/CustomTable.css
@@ -0,0 +1,53 @@
+table {
+ border-collapse: separate;
+ border-spacing: 0;
+ width: 100%;
+ }
+
+ tbody tr {
+ background-color: rgb(248, 248, 248);
+ border: 1px solid rgb(219, 241, 232);
+ border-radius: 10px;
+ }
+
+ tbody tr:hover {
+ cursor: pointer;
+ background-color: rgb(235, 240, 237);
+ }
+
+ th {
+ background-color: rgb(240, 235, 235);
+ border-style: none;
+ border-bottom: solid 1px rgb(223, 218, 218);
+ padding: 10px;
+ }
+
+ td {
+ min-height: 2rem;
+ border-style: none;
+ border-bottom: solid 4px rgb(255, 255, 255);
+ padding: 1.5rem .5rem;
+ text-align: center;
+ }
+
+ tr {
+ min-height: 20rem;
+ background-color: rgb(90, 103, 116);
+ padding: 1rem;
+ }
+
+ tr:first-child th:first-child {
+ border-top-left-radius: 10px;
+ }
+
+ tr:first-child th:last-child {
+ border-top-right-radius: 10px;
+ }
+
+ tr:last-child td:first-child {
+ border-bottom-left-radius: 10px;
+ }
+
+ tr:last-child td:last-child {
+ border-bottom-right-radius: 10px;
+ }
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/components/UI/CustomTable/CustomTable.module.css b/packages/cacti-ledger-browser-react/src/components/UI/CustomTable/CustomTable.module.css
new file mode 100644
index 0000000000..306f13ac57
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/UI/CustomTable/CustomTable.module.css
@@ -0,0 +1,137 @@
+table {
+ border-collapse: separate;
+ border-spacing: 0;
+ width: 100%;
+}
+
+tbody tr {
+ background-color: rgb(248, 248, 248);
+ border: 1px solid rgb(219, 241, 232);
+ border-radius: 10px;
+}
+
+tbody tr:hover {
+ cursor: pointer;
+ background-color: rgb(235, 240, 237);
+}
+
+th {
+ background-color: rgb(240, 235, 235);
+ border-style: none;
+ border-bottom: solid 1px rgb(155, 153, 153);
+ padding: 10px;
+}
+
+td {
+ min-height: 2rem;
+ border-style: none;
+ border-bottom: solid 2px rgb(255, 255, 255);
+ padding: 1.5rem 0.5rem;
+ text-align: center;
+}
+
+tr {
+ min-height: 20rem;
+ background-color: rgb(90, 103, 116);
+ padding: 1rem;
+}
+
+tr:first-child th:first-child {
+ border-top-left-radius: 10px;
+}
+
+tr:first-child th:last-child {
+ border-top-right-radius: 10px;
+}
+
+tr:last-child td:first-child {
+ border-bottom-left-radius: 10px;
+}
+
+tr:last-child td:last-child {
+ border-bottom-right-radius: 10px;
+}
+
+@media (max-width: 1699px) {
+ table {
+ width: 100%;
+ margin-bottom: 0.75rem;
+ table-layout: fixed;
+ }
+
+ table:hover td:nth-child(even) {
+ cursor: pointer;
+ background-color: rgb(235, 240, 237);
+ }
+
+ td {
+ position: relative;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding: 0.75rem;
+ }
+
+ .table-rwd {
+ border: solid 1px rgb(223, 218, 218);
+ overflow: hidden;
+ }
+
+ .table-rwd td {
+ border-bottom: solid 2px rgb(253, 253, 253);
+ }
+
+ .table-rwd-heading {
+ background-color: rgb(240, 235, 235);
+ border-style: none;
+ padding: 0.5rem;
+ width: 140px;
+ font-weight: 700;
+ font-size: 0.9rem;
+ border-right: solid 1px rgb(223, 218, 218);
+ }
+
+ .table-rwd:first-child {
+ border-top-left-radius: 10px;
+ }
+
+ .table-rwd:first-child {
+ border-top-right-radius: 10px;
+ }
+
+ .table-rwd:last-child {
+ border-bottom-left-radius: 10px;
+ }
+
+ .table-rwd:last-child {
+ border-bottom-right-radius: 10px;
+ }
+
+ .table-rwd tr:last-child > td:nth-last-of-type(2) {
+ border-bottom: 0;
+ }
+
+ .table-rwd tr:last-child > td:last-of-type {
+ border-bottom: 0;
+ }
+
+ .table-rwd td:last-child {
+ text-align: left;
+ }
+
+ tr:first-child th:first-child {
+ border-top-left-radius: 0;
+ }
+
+ tr:first-child th:last-child {
+ border-top-right-radius: 0;
+ }
+
+ tr:last-child td:first-child {
+ border-bottom-left-radius: 0;
+ }
+
+ tr:last-child td:last-child {
+ border-bottom-right-radius: 0;
+ }
+}
diff --git a/packages/cacti-ledger-browser-react/src/components/UI/CustomTable/CustomTable.tsx b/packages/cacti-ledger-browser-react/src/components/UI/CustomTable/CustomTable.tsx
new file mode 100644
index 0000000000..eeb212ddb1
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/UI/CustomTable/CustomTable.tsx
@@ -0,0 +1,107 @@
+import { TableProps, TableProperty } from "../../../schema/supabase-types";
+
+import EmptyTablePlaceholder from "./EmptyTablePlaceholder/EmptyTablePlaceholder";
+// @ts-expect-error
+import styles from "./CustomTable.module.css";
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+
+function CustomTable(props) {
+
+
+ const [viewport, setViewport] = useState("");
+
+ useEffect(() => {
+ const screenResized = () =>
+ setViewport(window.innerWidth <= 1699 ? "small" : "wide");
+ screenResized();
+ window.addEventListener("resize", screenResized, true);
+ return () => {
+ window.removeEventListener("resize", screenResized, true);
+ };
+ }, [viewport]);
+
+ const getObjPropVal = (objProp: string[], row: any) => {
+ if (objProp.length === 1) return row[objProp[0]];
+ else {
+ return objProp.map((prop) => (
+ <>
+ {row[prop]}
+
+
+ + Address: {props.token_address} +
++ Created at: {tokenData?.created_at} +
++ Total supply: + {tokenData?.total_supply} +
++ + )); + } + }; + + const handleRowClick = (row: any) => { + props.cols.onClick.action(row[props.cols.onClick.prop]); + }; + + return ( + <> + {props.data.length === 0 ? ( +
| {col.display} | + ))} +
|---|
| handleRowClick(row)}> + {getObjPropVal(col.objProp, row)} + | + ))} +
| + {heading.display} + | ++ {getObjPropVal( + props.cols.schema[idx].objProp, + row, + )} + | +
No data available
+ );
+}
+
+export default EmptyTablePlaceholder;
diff --git a/packages/cacti-ledger-browser-react/src/components/UI/Menu/Menu.module.css b/packages/cacti-ledger-browser-react/src/components/UI/Menu/Menu.module.css
new file mode 100644
index 0000000000..ab9a7591e0
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/UI/Menu/Menu.module.css
@@ -0,0 +1,22 @@
+.nav-bar{
+ width: 100%;
+ display: flex;
+ justify-content: flex-start;
+ padding-left: 8rem;
+ height: 4rem;
+ background-color: rgb(180, 218, 167);
+ align-items: center;
+ gap: 2rem;
+}
+
+.navigation {
+ height: 100%;
+ display: flex;
+ gap: 1rem;
+}
+
+@media (max-width: 1699px) {
+ .nav-bar{
+ padding-left: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/components/UI/Menu/Menu.tsx b/packages/cacti-ledger-browser-react/src/components/UI/Menu/Menu.tsx
new file mode 100644
index 0000000000..a9af5fd10d
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/UI/Menu/Menu.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import Select from "../Select/Select";
+import styles from "./Menu.module.css";
+import Button from "../Button/Button";
+
+const ledgersPaths = {
+ eth: [
+ { title: "DASHBOARD", path: "/eth/dashboard" },
+ { title: "ERC20", path: "/eth/accounts/erc20" },
+ { title: "NFT ERC721", path: "/eth/accounts/erc721" },
+ ],
+ fabric: [{ title: "DASHBOARD", path: "/fabric/dashboard", basePath: "/eth" }],
+};
+
+function Menu() {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const [activeLedger, setActiveLedger] = useState("");
+ const handleSelect = (selectedValue: string) => {
+ setActiveLedger(selectedValue);
+
+ navigate(`/${selectedValue}/dashboard`);
+ };
+
+ const updateLedgers = () => {
+ if (activeLedger.length > 0) return;
+ const currentPath = location.pathname;
+ const ledgers = ["eth", "fabric"];
+
+ ledgers.forEach((ledger) => {
+ if (currentPath.includes(ledger)) {
+ setActiveLedger(ledger);
+ }
+ });
+ };
+
+ useEffect(() => {
+ updateLedgers();
+ });
+
+ function activeLedgerItems(ledger: any) {
+ const items = ledger.map(function (path: any) {
+ return (
+
+ );
+ });
+ return items;
+ }
+
+ return (
+
+
+ );
+}
+
+export default Menu;
diff --git a/packages/cacti-ledger-browser-react/src/components/UI/Search/Search.module.css b/packages/cacti-ledger-browser-react/src/components/UI/Search/Search.module.css
new file mode 100644
index 0000000000..13b6c8e9ac
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/UI/Search/Search.module.css
@@ -0,0 +1,43 @@
+.input {
+ border: none;
+ border-radius: 10px;
+ width: 30rem;
+ height: 2.5rem;
+ background-color: rgb(240, 236, 236);
+ padding: 1rem;
+ font-size: 16px;
+}
+
+.input-wrapper {
+ position: relative;
+}
+
+.input-reset {
+ background: transparent;
+ position: absolute;
+ right: 0.5rem;
+ border: none;
+ height: 2.5rem;
+ width: 2.5rem;
+ font-size: 1.5rem;
+ cursor: pointer;
+}
+
+.input-reset:hover {
+ color: green;
+}
+.input-reset-icon {
+ pointer-events: none;
+}
+
+@media (max-width: 1699px) {
+ .input {
+ width: 12rem;
+ text-align: left;
+ }
+
+ .input-reset {
+ right: 0;
+ top: 0.1rem;
+ }
+}
diff --git a/packages/cacti-ledger-browser-react/src/components/UI/Search/Search.tsx b/packages/cacti-ledger-browser-react/src/components/UI/Search/Search.tsx
new file mode 100644
index 0000000000..16b3a129f7
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/UI/Search/Search.tsx
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import styles from "./Search.module.css";
+
+function Search(props) {
+ const [val, setValue] = useState
+ handleInput(e)}
+ onPaste={(e) => handleInput(e)}
+ />
+
+
+ );
+}
+
+export default Search;
diff --git a/packages/cacti-ledger-browser-react/src/components/UI/Select/Select.module.css b/packages/cacti-ledger-browser-react/src/components/UI/Select/Select.module.css
new file mode 100644
index 0000000000..19e2f837af
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/UI/Select/Select.module.css
@@ -0,0 +1,73 @@
+.select-wrapper {
+ height: 2.2rem;
+ width: 13rem;
+}
+
+.select {
+ width: 100%;
+ height: 100%;
+ display: flex;
+}
+
+.select-icon {
+ position: relative;
+ right: 30px;
+ height: 10px;
+ width: 10px;
+ transform: translateY(-50%) rotate(45deg);
+ pointer-events: none;
+}
+
+.select-icon-up {
+ top: 60%;
+ border-top: 2px solid rgb(32, 133, 77);
+ border-left: 2px solid rgb(32, 133, 77);
+}
+
+.select-icon-down {
+ top: 40%;
+ border-bottom: 2px solid rgb(32, 133, 77);
+ border-right: 2px solid rgb(32, 133, 77);
+}
+
+.select-input {
+ width: 100%;
+ height: 100%;
+ font-family: "Roboto";
+ font-size: 1rem;
+ color: rgb(102, 117, 106);
+ background-color: rgb(248, 248, 250);
+ border: 1px solid rgb(32, 133, 77);
+ border-radius: 10px;
+ cursor: pointer;
+ text-align: start;
+}
+
+.select-input:hover {
+ background-color: rgb(235, 240, 237);
+}
+
+.options-container {
+ z-index: 1000;
+ width: 100%;
+ position: relative;
+ overflow-y: auto;
+ border: 1px solid rgb(32, 133, 77);
+ border-radius: 10px;
+ color: rgb(102, 117, 106);
+ background: white;
+ cursor: pointer;
+}
+
+.option {
+ padding: 5px;
+}
+
+.selected-option {
+ padding: 5px;
+ background-color: rgb(235, 240, 237);
+}
+
+.option:hover {
+ background-color: rgb(235, 240, 237);
+}
diff --git a/packages/cacti-ledger-browser-react/src/components/UI/Select/Select.tsx b/packages/cacti-ledger-browser-react/src/components/UI/Select/Select.tsx
new file mode 100644
index 0000000000..122bc55f81
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/components/UI/Select/Select.tsx
@@ -0,0 +1,73 @@
+import { useLocation } from "react-router-dom";
+import styles from "./Select.module.css";
+import { useState } from "react";
+
+const options = [
+ { value: "", display: "Select the ledger" },
+ { value: "eth", display: "Ethereum" },
+ { value: "fabric", display: "Fabric" },
+];
+
+function Select(props) {
+ const selectStartLedgerByUrl = (path: string) =>
+ options.find((option) => option.value === path);
+
+ const [dropdownVisible, setDropdownVisible] = useState(false);
+ const startLocation = useLocation().pathname.split("/")[1];
+ const [selectedOption, setSelectedOption] = useState(
+ selectStartLedgerByUrl(startLocation) || options[0],
+ );
+
+ const selectOption = (item: any) => {
+ setSelectedOption(item);
+ props.onSelect(item.value);
+ setDropdownVisible(false);
+ };
+
+ return (
+
+
+ );
+}
+
+export default Select;
diff --git a/packages/cacti-ledger-browser-react/src/index.css b/packages/cacti-ledger-browser-react/src/index.css
new file mode 100644
index 0000000000..c798e280b2
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/index.css
@@ -0,0 +1,68 @@
+/* :root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+} */
diff --git a/packages/cacti-ledger-browser-react/src/main.tsx b/packages/cacti-ledger-browser-react/src/main.tsx
new file mode 100644
index 0000000000..99c5d3bd62
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/main.tsx
@@ -0,0 +1,267 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+import Root from "./routes/Root.tsx";
+import Dashboard from "./pages/eth/Dashboard/Dashboard.tsx";
+
+import "./index.css";
+import Blocks from "./pages/eth/Blocks/Blocks.tsx";
+import Transactions from "./pages/eth/Transactions/Transactions.tsx";
+import Accounts from "./pages/eth/Accounts/Accounts.tsx";
+import BlockDetails from "./pages/eth/Details/BlockDetails.tsx";
+import TokenTransactionDetails from "./pages/eth/Details/TokenTransactionDetails.tsx";
+import TokenDetails from "./pages/eth/Details/TokenDetails.tsx";
+import TransactionDetails from "./pages/eth/Details/TransactionDetails.tsx";
+import ERC20 from "./pages/eth/ERC20/ERC20.tsx";
+import SingleTokenHistory from "./pages/eth/SingleTokenHistory/SingleTokenHistory.tsx";
+import ERC721 from "./pages/eth/ERC721/ERC721.tsx";
+import TransactionsFabric from "./pages/fabric/TransactionsFabric/TransactionsFabric.tsx";
+import DashFabric from "./pages/fabric/DashFabric/DashFabric.tsx";
+import BlocksFabric from "./pages/fabric/BlocksFabric/BlocksFabric.tsx";
+import FabricTransaction from "./pages/fabric/FabricTransaction/FabricTransaction.tsx";
+import FabricBlock from "./pages/fabric/FabricBlock/FabricBlock.tsx";
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: setDropdownVisible(!dropdownVisible)}
+ >
+ setDropdownVisible(true)}
+ onBlur={() => setDropdownVisible(false)}
+ className={styles["select-input"]}
+ />
+
+
+ {dropdownVisible ? (
+
+ {options.map(function (item) {
+ return (
+
+ ) : null}
+ selectOption(item)}
+ >
+ {item.display}
+
+ );
+ })}
+
+
+ ),
+ children: [
+ // MAIN
+ { path: "dashboard", element:
+ blocks
+
+ ),
+ },
+ {
+ path: "transactions",
+ element: (
+
+ transactions
+
+ ),
+ },
+ // ACCOUNTS
+ {
+ path: "accounts",
+ element:
+
+ ),
+ },
+ ],
+ },
+ //BLOCK
+ {
+ path: "block-details",
+ element:
+
+ ),
+ },
+ ],
+ },
+ // TOKEN TRANSACTION DETAILS
+ {
+ path: "token-txn-details",
+ element: (
+
+
+ ),
+ children: [
+ {
+ path: ":standard/:address",
+ element: (
+
+
+ ),
+ },
+ ],
+ },
+ // TOKEN DETAILS
+ {
+ path: "token-detail",
+ element: (
+
+
+ ),
+ children: [
+ {
+ path: ":standard/:address",
+ element: (
+
+
+ ),
+ },
+ ],
+ },
+ // TRANSACTION DETAILS
+ {
+ path: "txn-details",
+ element: (
+
+
+ ),
+ children: [
+ {
+ path: ":id",
+ element: (
+
+
+ ),
+ },
+ ],
+ },
+ // ERC tokens
+ {
+ path: "erc20",
+ element: (
+
+
+ ),
+ children: [
+ {
+ path: ":account",
+ element: (
+
+
+ ),
+ },
+ {
+ path: "trend/:account/:address",
+ element: (
+
+
+ ),
+ },
+ ],
+ },
+ {
+ path: "erc721",
+ element: (
+
+
+ ),
+ children: [
+ {
+ path: ":account",
+ element: (
+
+
+ ),
+ },
+ ],
+ },
+ ],
+ },
+ // FABRIC ROUTES
+ {
+ path: "fabric",
+ element:
+
+ ),
+ },
+ {
+ path: "transactions",
+ element: (
+
+
+ ),
+ },
+ {
+ path: "blocks",
+ element: (
+
+
+ ),
+ },
+ {
+ path: "txn-details",
+ element: (
+
+
+ ),
+ children: [
+ {
+ path: ":id",
+ element: (
+
+
+ ),
+ },
+ ],
+ },
+ {
+ path: "block-details",
+ element: (
+
+
+ ),
+ children: [
+ {
+ path: ":id",
+ element: (
+
+ block-details/:id
+
+ ),
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+]);
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+
+ setSearchKey(e)}
+ >
+
+ );
+}
+
+export default Accounts;
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/Blocks/Blocks.module.css b/packages/cacti-ledger-browser-react/src/pages/eth/Blocks/Blocks.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/Blocks/Blocks.tsx b/packages/cacti-ledger-browser-react/src/pages/eth/Blocks/Blocks.tsx
new file mode 100644
index 0000000000..6ee261ee45
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/Blocks/Blocks.tsx
@@ -0,0 +1,59 @@
+import { supabase } from "../../../supabase-client";
+import { useNavigate } from "react-router-dom";
+import CardWrapper from "../../../components/CardWrapper/CardWrapper";
+import { Block } from "../../../schema/supabase-types";
+import styles from "./Blocks.module.css";
+import { useEffect, useState } from "react";
+
+type ObjectKey = keyof typeof styles;
+
+function Blocks() {
+ const navigate = useNavigate();
+ const [block, setBlock] = useState
+
+ );
+}
+
+export default Blocks;
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/Dashboard/Dashboard.module.css b/packages/cacti-ledger-browser-react/src/pages/eth/Dashboard/Dashboard.module.css
new file mode 100644
index 0000000000..f2443fc562
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/Dashboard/Dashboard.module.css
@@ -0,0 +1,10 @@
+.dashboard-wrapper {
+ display: flex;
+ gap: 1rem;
+}
+
+@media (max-width: 1699px) {
+ .dashboard-wrapper {
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/Dashboard/Dashboard.tsx b/packages/cacti-ledger-browser-react/src/pages/eth/Dashboard/Dashboard.tsx
new file mode 100644
index 0000000000..8db237e71e
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/Dashboard/Dashboard.tsx
@@ -0,0 +1,99 @@
+// import { supabase } from "../../../supabase-client";
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import CardWrapper from "../../../components/CardWrapper/CardWrapper";
+// import { Transaction } from "../../../schema/supabase-types";
+// import { Block } from "../../../schema/supabase-types";
+
+import styles from "./Dashboard.module.css";
+import { supabase } from "../../../supabase-client";
+
+function Dashboard() {
+ const navigate = useNavigate();
+ const [transaction, setTransaction] = useState
+
+ );
+}
+
+export default Dashboard;
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/Details/BlockDetails.tsx b/packages/cacti-ledger-browser-react/src/pages/eth/Details/BlockDetails.tsx
new file mode 100644
index 0000000000..c101421d1d
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/Details/BlockDetails.tsx
@@ -0,0 +1,67 @@
+import { supabase } from "../../../supabase-client";
+import { Block } from "../../../schema/supabase-types";
+
+import styles from "./Details.module.css";
+import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+function BlockDetails() {
+ const [details, setDetails] = useStateDashboard
+
+
+
+
+ );
+}
+
+export default BlockDetails;
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/Details/Details.module.css b/packages/cacti-ledger-browser-react/src/pages/eth/Details/Details.module.css
new file mode 100644
index 0000000000..899ff99432
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/Details/Details.module.css
@@ -0,0 +1,32 @@
+h1{
+ padding: 0;
+ margin: 0;
+ margin-bottom: .5rem;
+}
+.details {
+ display: flex;
+ gap: .75rem;
+}
+.details-card{
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ border: 1px solid rgb(230, 224, 224);
+ border-radius: 10px;
+ padding: 1.5rem 2rem;
+ width:45%;
+}
+span {
+ display: inline-block;
+ font-size: 1.1rem;
+}
+
+@media (max-width: 1699px) {
+ .details{
+ flex-direction: column;
+ }
+
+ .details-card {
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/Details/TokenDetails.tsx b/packages/cacti-ledger-browser-react/src/pages/eth/Details/TokenDetails.tsx
new file mode 100644
index 0000000000..e979c0eb91
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/Details/TokenDetails.tsx
@@ -0,0 +1,65 @@
+import { supabase } from "../../../supabase-client";
+import { STANDARDS } from "../../../schema/token-standards";
+import {
+ TokenMetadata20,
+ TokenMetadata721,
+} from "../../../schema/supabase-types";
+import styles from "./Details.module.css";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+const TokenDetails = () => {
+ const [tokenData, setTokenData] = useState<
+ TokenMetadata20 | TokenMetadata721 | any
+ >();
+
+ const params = useParams();
+
+ const fethcData = async () => {
+ try {
+ const { data } = await supabase
+ .from(`token_metadata_${params.standard?.toLowerCase()}`)
+ .select("*")
+ .match({ address: params.address });
+ if (data?.[0]) {
+ setTokenData(data[0]);
+ } else {
+ throw new Error("Failed to load token details");
+ }
+ } catch (error: any) {
+ console.error(error.message);
+ }
+ };
+
+ useEffect(() => {
+ fethcData();
+ }, []);
+
+ return (
+
+ {details ? (
+ <>
+
+ Block Details
++ Address: {details.number}{" "} +
++ {" "} + Created at: + {details.created_at} +
++ Hash: + {details.hash} +
++ Number of transaction: + {details.number_of_tx} +
++ Sync at: + {details.sync_at} +
+ + ) : ( +Failed to load details
+ )}
+
+
+ );
+};
+
+export default TokenDetails;
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/Details/TokenTransactionDetails.tsx b/packages/cacti-ledger-browser-react/src/pages/eth/Details/TokenTransactionDetails.tsx
new file mode 100644
index 0000000000..a6fa6b20cd
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/Details/TokenTransactionDetails.tsx
@@ -0,0 +1,66 @@
+import { supabase } from "../../../supabase-client";
+import { STANDARDS } from "../../../schema/token-standards";
+import { ERC20Txn, ERC721Txn } from "../../../schema/supabase-types";
+
+import styles from "./Details.module.css";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+const TokenTransactionDetails = () => {
+ const [txnData, setTxnData] = useState
+
+ Token Details
++ Adress: {tokenData?.address}{" "} +
++ Created at: + {tokenData?.created_at} +
++ Name: + {tokenData?.name} +
++ Symbol: + {tokenData?.symbol} +
+ {params.standard === STANDARDS.erc20 && ( +total_supply : {tokenData?.total_supply}
+ )} +
+
+ );
+};
+
+export default TokenTransactionDetails;
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/Details/TransactionDetails.tsx b/packages/cacti-ledger-browser-react/src/pages/eth/Details/TransactionDetails.tsx
new file mode 100644
index 0000000000..04101f56f4
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/Details/TransactionDetails.tsx
@@ -0,0 +1,100 @@
+import { supabase } from "../../../supabase-client";
+import CardWrapper from "../../../components/CardWrapper/CardWrapper";
+import { Transaction, TokenTransfer } from "../../../schema/supabase-types";
+
+import styles from "./Details.module.css";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+const TransactionsDetails = () => {
+ const [details, setDetails] = useState
+
+ Details of Transaction
++ {" "} + Address: + {txnData?.account_address}{" "} +
++ {" "} + Created_at: + {txnData?.token_address} +
+ {params.standard === STANDARDS.erc20 && ( ++ {" "} + Balance: + {txnData()?.balance} +
+ )} + {params.standard === STANDARDS.erc721 && ( ++ {" "} + Uri: + {txnData()?.uri} +
+ )} +
+
+ );
+};
+
+export default TransactionsDetails;
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/ERC20/ERC20.module.css b/packages/cacti-ledger-browser-react/src/pages/eth/ERC20/ERC20.module.css
new file mode 100644
index 0000000000..92eaa56f56
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/ERC20/ERC20.module.css
@@ -0,0 +1,19 @@
+.erc-content {
+ display: flex;
+ gap:2rem;
+}
+
+.erc-wrap{
+ width:100%;
+ display: flex;
+ gap:1rem;
+ flex-direction: column;
+
+}
+
+
+@media (max-width: 1699px) {
+ .erc-content{
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/ERC20/ERC20.tsx b/packages/cacti-ledger-browser-react/src/pages/eth/ERC20/ERC20.tsx
new file mode 100644
index 0000000000..5c0267054c
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/ERC20/ERC20.tsx
@@ -0,0 +1,74 @@
+import TokenAccount from "../../../components/TokenHeader/TokenAccount";
+import { supabase } from "../../../supabase-client";
+import CardWrapper from "../../../components/CardWrapper/CardWrapper";
+import Chart from "../../../components/Chart/Chart";
+import { ERC20Txn } from "../../../schema/supabase-types";
+// @ts-expect-error
+import styles from "./ERC20.module.css";
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+const ERC20 = () => {
+ const params = useParams();
+ const navigate = useNavigate();
+ const [token_erc20, setToken_erc20] = useState
+
+ Details of Transaction
++ {" "} + Hash: {details.hash}{" "} +
++ Block: + {details.block_number} +
++ From: + {details.from} +
++ To: + {details.to}{" "} +
++ {" "} + Value: {details.eth_value} +
+
+
+ );
+};
+
+export default ERC20;
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/ERC721/ERC721.module.css b/packages/cacti-ledger-browser-react/src/pages/eth/ERC721/ERC721.module.css
new file mode 100644
index 0000000000..fb8d75ce96
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/ERC721/ERC721.module.css
@@ -0,0 +1,18 @@
+.erc-content {
+ display: flex;
+ gap:2rem;
+}
+
+.erc-wrap{
+ display: flex;
+ gap:1rem;
+ flex-direction: column;
+ align-items: center;
+}
+
+@media (max-width: 1699px) {
+
+ .erc-content{
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/ERC721/ERC721.tsx b/packages/cacti-ledger-browser-react/src/pages/eth/ERC721/ERC721.tsx
new file mode 100644
index 0000000000..6585226ef5
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/ERC721/ERC721.tsx
@@ -0,0 +1,114 @@
+import TokenAccount from "../../../components/TokenHeader/TokenAccount";
+import { supabase } from "../../../supabase-client";
+import CardWrapper from "../../../components/CardWrapper/CardWrapper";
+import { ERC721Txn } from "../../../schema/supabase-types";
+import { TokenMetadata721 } from "../../../schema/supabase-types";
+import styles from "./ERC721.module.css";
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+function ERC721() {
+ const params = useParams();
+ const navigate = useNavigate();
+ const [token_erc721, setToken_erc721] = useState
+
+
+
+
+
+ );
+}
+
+export default ERC721;
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/SingleTokenHistory/SingleTokenHistory.module.css b/packages/cacti-ledger-browser-react/src/pages/eth/SingleTokenHistory/SingleTokenHistory.module.css
new file mode 100644
index 0000000000..aa59d7de7e
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/SingleTokenHistory/SingleTokenHistory.module.css
@@ -0,0 +1,12 @@
+.token-history {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.transactions {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ margin-top: 2rem;
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/SingleTokenHistory/SingleTokenHistory.tsx b/packages/cacti-ledger-browser-react/src/pages/eth/SingleTokenHistory/SingleTokenHistory.tsx
new file mode 100644
index 0000000000..59298a47a4
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/SingleTokenHistory/SingleTokenHistory.tsx
@@ -0,0 +1,137 @@
+import { supabase } from "../../../supabase-client";
+import CardWrapper from "../../../components/CardWrapper/CardWrapper";
+import LineChart from "../../../components/Chart/LineChart";
+import TokenHeader from "../../../components/TokenHeader/TokenHeader";
+import { TokenHistoryItem20 } from "../../../schema/supabase-types";
+import { balanceDate } from "../../../schema/supabase-types";
+import styles from "./SingleTokenHistory.module.css";
+import EmptyTablePlaceholder from "../../../components/UI/CustomTable/EmptyTablePlaceholder/EmptyTablePlaceholder";
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+const SingleTokenHistory = () => {
+ type ObjectKey = keyof typeof styles;
+ const [transactions, setTransactions] = useState
+
+
+
+ );
+};
+
+export default SingleTokenHistory;
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/Transactions/Transactions.module.css b/packages/cacti-ledger-browser-react/src/pages/eth/Transactions/Transactions.module.css
new file mode 100644
index 0000000000..7ff183b0da
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/Transactions/Transactions.module.css
@@ -0,0 +1,12 @@
+.transactions{
+ display: flex;
+ flex-direction: column;
+
+}.transactions-search {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 2rem;
+
+
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/pages/eth/Transactions/Transactions.tsx b/packages/cacti-ledger-browser-react/src/pages/eth/Transactions/Transactions.tsx
new file mode 100644
index 0000000000..7f36f27298
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/eth/Transactions/Transactions.tsx
@@ -0,0 +1,66 @@
+import { supabase } from "../../../supabase-client";
+import CardWrapper from "../../../components/CardWrapper/CardWrapper";
+import { Transaction } from "../../../schema/supabase-types";
+
+import styles from "./Transactions.module.css";
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+function Transactions() {
+ const navigate = useNavigate();
+ const [transactions, setTransactions] = useState
+ {transactions.length > 0 ? (
+ <>
+ 0}
+ fallback={ */}
+
+
+
+ );
+}
+
+export default Transactions;
diff --git a/packages/cacti-ledger-browser-react/src/pages/fabric/BlocksFabric/BlocksFabric.module.css b/packages/cacti-ledger-browser-react/src/pages/fabric/BlocksFabric/BlocksFabric.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/cacti-ledger-browser-react/src/pages/fabric/BlocksFabric/BlocksFabric.tsx b/packages/cacti-ledger-browser-react/src/pages/fabric/BlocksFabric/BlocksFabric.tsx
new file mode 100644
index 0000000000..b072b1ce53
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/fabric/BlocksFabric/BlocksFabric.tsx
@@ -0,0 +1,63 @@
+import { supabase } from "../../../supabase-client";
+import CardWrapper from "../../../components/CardWrapper/CardWrapper";
+import { Block } from "../../../schema/supabase-types";
+// @ts-expect-error
+import styles from "./BlocksFabric.module.css";
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+type ObjectKey = keyof typeof styles;
+
+const BlocksFabric = () => {
+ const navigate = useNavigate();
+ const [block, setBlock] = useState
+
+ );
+};
+
+export default BlocksFabric;
diff --git a/packages/cacti-ledger-browser-react/src/pages/fabric/DashFabric/DashFabric.module.css b/packages/cacti-ledger-browser-react/src/pages/fabric/DashFabric/DashFabric.module.css
new file mode 100644
index 0000000000..f75a30b767
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/fabric/DashFabric/DashFabric.module.css
@@ -0,0 +1,11 @@
+.dashboard-wrapper {
+ display: flex;
+ gap: 1rem;
+ flex-direction: column;
+}
+
+@media (max-width: 1699px) {
+ .dashboard-wrapper {
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/pages/fabric/DashFabric/DashFabric.tsx b/packages/cacti-ledger-browser-react/src/pages/fabric/DashFabric/DashFabric.tsx
new file mode 100644
index 0000000000..d467c09a79
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/fabric/DashFabric/DashFabric.tsx
@@ -0,0 +1,104 @@
+import { supabase } from "../../../supabase-client";
+import CardWrapper from "../../../components/CardWrapper/CardWrapper";
+import { Transaction } from "../../../schema/supabase-types";
+import { Block } from "../../../schema/supabase-types";
+// @ts-expect-error
+import styles from "./DashFabric.module.css";
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+function DashFabric() {
+ const navigate = useNavigate();
+ const [transaction, setTransaction] = useState
+
+ );
+}
+
+export default DashFabric;
diff --git a/packages/cacti-ledger-browser-react/src/pages/fabric/FabricBlock/FabricBlock.module.css b/packages/cacti-ledger-browser-react/src/pages/fabric/FabricBlock/FabricBlock.module.css
new file mode 100644
index 0000000000..5bfa3e269e
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/fabric/FabricBlock/FabricBlock.module.css
@@ -0,0 +1,8 @@
+.details-card {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ border: 1px solid rgb(230, 224, 224);
+ border-radius: 10px;
+ padding: 1.5rem 2rem;
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/pages/fabric/FabricBlock/FabricBlock.tsx b/packages/cacti-ledger-browser-react/src/pages/fabric/FabricBlock/FabricBlock.tsx
new file mode 100644
index 0000000000..082de09701
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/fabric/FabricBlock/FabricBlock.tsx
@@ -0,0 +1,92 @@
+// @ts-expect-error
+import styles from "./FabricBlock.module.css";
+
+import { supabase } from "../../../supabase-client";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+const FabricBlock = () => {
+ const [details, setDetails] = useState
+
+
+
+
+ );
+};
+export default FabricBlock;
+
+{
+ /*
+
+ {details ? (
+ <>
+ Failed to load details
}>
+
+ */}
+ Block Details
++ ID: {details.id}{" "} +
++ {" "} + Block Number: + {details.block_number} +
++ Hash: + {details.data_hash} +
++ Tx Count: + {details.tx_count} +
++ Created at: + {details.created_at} +
++ {" "} + Previous Blockhash: + {details.prev_blockhash} +
++ {" "} + Channel name: + {details.channel_id} +
+ + ) : ( +Failed to load details
+ )}
+ {/* + {" "} + Blk Size: + {details.blksize} +
++ {" "} + Network name: + {details.network_name} +
*/ +} diff --git a/packages/cacti-ledger-browser-react/src/pages/fabric/FabricTransaction/FabricTransaction.module.css b/packages/cacti-ledger-browser-react/src/pages/fabric/FabricTransaction/FabricTransaction.module.css new file mode 100644 index 0000000000..15fab73ab7 --- /dev/null +++ b/packages/cacti-ledger-browser-react/src/pages/fabric/FabricTransaction/FabricTransaction.module.css @@ -0,0 +1,22 @@ +.details-card { + display: flex; + flex-direction: column; + gap: 15px; + border: 1px solid rgb(230, 224, 224); + border-radius: 10px; + padding: 1.5rem 2rem; +} + +.details-bytes-wrap { + display: flex; + align-items: center; + gap: 1rem; +} +.details-bytes { + width: 30vw; + font-size: 14px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + resize: horizontal; +} \ No newline at end of file diff --git a/packages/cacti-ledger-browser-react/src/pages/fabric/FabricTransaction/FabricTransaction.tsx b/packages/cacti-ledger-browser-react/src/pages/fabric/FabricTransaction/FabricTransaction.tsx new file mode 100644 index 0000000000..5bd071bb04 --- /dev/null +++ b/packages/cacti-ledger-browser-react/src/pages/fabric/FabricTransaction/FabricTransaction.tsx @@ -0,0 +1,138 @@ +import styles from "./FabricTransaction.module.css"; +import { supabase } from "../../../supabase-client"; +import Button from "../../../components/UI/Button/Button"; +import { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import ContentCopyIcon from "@mui/icons-material/ContentCopy"; + +const notify = () => + alert("Success! Creator ID Bytes was successfully copied to the clipboard."); +// toast("Success! Creator ID Bytes was successfully copied to the clipboard."); + +function FabricTransaction() { + const [details, setDetails] = useState
+
+ );
+}
+export default FabricTransaction;
+
+{
+ /*
+
+ {details ? (
+ <>
+ <>
+
+ {/* Transaction Details
++ Created at: + {details.created_at} +
++ Block ID: {details.block_id}{" "} +
++ {" "} + Transaction ID: + {details.transaction_id} +
++ {" "} + Channel name: + {details.channel_id} +
++ {" "} + Status + {details.status} +
++ {" "} + Type + {details.type} +
+ ++ {" "} + Chaincode Name: + {details.chaincode_name} +
++ {" "} + Creator ID Bytes: + + {" "} + {details.creator_id_bytes} + + +
++ {" "} + Creator nonce: + {details.creator_nonce} +
++ {" "} + Creator MSP ID: + {details.creator_msp_id} +
++ {" "} + Endorser MSP ID: + {details.endorser_msp_id} +
++ {" "} + Payload Proposal Hash: + {details.payload_proposal_hash} +
+ + ) : ( +Failed to load details
+ )}
+ + {" "} + Validation Code + {details.validation_code} +
++ {" "} + Network name: + {details.network_name} +
+ */ +} diff --git a/packages/cacti-ledger-browser-react/src/pages/fabric/TransactionsFabric/TransactionsFabric.module.css b/packages/cacti-ledger-browser-react/src/pages/fabric/TransactionsFabric/TransactionsFabric.module.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/cacti-ledger-browser-react/src/pages/fabric/TransactionsFabric/TransactionsFabric.tsx b/packages/cacti-ledger-browser-react/src/pages/fabric/TransactionsFabric/TransactionsFabric.tsx new file mode 100644 index 0000000000..7ebbbc3ea0 --- /dev/null +++ b/packages/cacti-ledger-browser-react/src/pages/fabric/TransactionsFabric/TransactionsFabric.tsx @@ -0,0 +1,60 @@ +import { supabase } from "../../../supabase-client"; +import CardWrapper from "../../../components/CardWrapper/CardWrapper"; +import { Transaction } from "../../../schema/supabase-types"; +// @ts-expect-error +import styles from "./TransactionsFabric.module.css"; +import { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; + +function TransactionsFabric() { + const navigate = useNavigate(); + const [transactions, setTransactions] = useState
+
+ );
+}
+
+export default TransactionsFabric;
diff --git a/packages/cacti-ledger-browser-react/src/pages/shared/Home/Home.module.css b/packages/cacti-ledger-browser-react/src/pages/shared/Home/Home.module.css
new file mode 100644
index 0000000000..d6bd86d00d
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/shared/Home/Home.module.css
@@ -0,0 +1,22 @@
+.home {
+ font-weight: 700;
+ margin: 5rem;
+ font-size: 3rem;
+ color: rgb(14, 87, 32);
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ gap: 2rem;
+}
+
+.home-icon {
+ object-fit: cover;
+ width: auto;
+ overflow: hidden;
+}
+
+.home-scale {
+ font-size: 2rem;
+ width: 80%;
+}
diff --git a/packages/cacti-ledger-browser-react/src/pages/shared/Home/Home.tsx b/packages/cacti-ledger-browser-react/src/pages/shared/Home/Home.tsx
new file mode 100644
index 0000000000..8f5cfe51fa
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/pages/shared/Home/Home.tsx
@@ -0,0 +1,15 @@
+// @ts-expect-error
+import styles from "./Home.module.css";
+import logo from "../../../../../../images/HL_Cacti_Logo_Color.png";
+const Home = () => {
+ return (
+
+ 
+
+
+ );
+};
+
+export default Home;
diff --git a/packages/cacti-ledger-browser-react/src/routes/Root.module.css b/packages/cacti-ledger-browser-react/src/routes/Root.module.css
new file mode 100644
index 0000000000..cba488b71c
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/routes/Root.module.css
@@ -0,0 +1,12 @@
+.main {
+ width: 100%;
+}
+.content {
+ margin: 1rem 2rem;
+}
+
+@media (max-width: 1699px) {
+ .content {
+ margin: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser-react/src/routes/Root.tsx b/packages/cacti-ledger-browser-react/src/routes/Root.tsx
new file mode 100644
index 0000000000..db5b6f5b8f
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/routes/Root.tsx
@@ -0,0 +1,21 @@
+// import styles from "./Menu.module.css";
+import { Outlet, useLocation } from "react-router-dom";
+import styles from "./Root.module.css";
+import Menu from "../components/UI/Menu/Menu";
+import Home from "../pages/shared/Home/Home";
+
+function Root() {
+ const location = useLocation();
+ console.log(location);
+ return (
+ Select ledger from the dropdown menu
+ +
+
+ {location.pathname === "/" ?
+ );
+}
+
+export default Root;
diff --git a/packages/cacti-ledger-browser-react/src/schema/supabase-types.ts b/packages/cacti-ledger-browser-react/src/schema/supabase-types.ts
new file mode 100644
index 0000000000..45b608e68e
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/schema/supabase-types.ts
@@ -0,0 +1,103 @@
+export interface ERC20Txn {
+ account_address: string;
+ token_address: string;
+ uri: string;
+ token_id: number;
+ id: string;
+ balance: number;
+ last_owner_change: string;
+}
+
+export interface ERC721Txn {
+ account_address: string;
+ token_address: string;
+ uri: string;
+ token_id: number;
+ id: string;
+ last_owner_change: string;
+}
+
+export interface TokenMetadata20 {
+ address: string;
+ name: string;
+ symbol: string;
+ total_supply: number;
+ created_at: string;
+}
+
+export interface TokenMetadata721 {
+ address: string;
+ name: string;
+ symbol: string;
+ created_at: string;
+}
+
+export interface Block {
+ number: number;
+ created_at: string;
+ hash: string;
+ number_of_tx: number;
+ sync_at: string;
+}
+
+export interface TokenTransfer {
+ transaction_id: string;
+ sender: string;
+ recipient: string;
+ value: number;
+ id: string;
+}
+
+export interface Transaction {
+ index: number;
+ hash: string;
+ block_number: number;
+ from: string;
+ to: string;
+ eth_value: number;
+ method_signature: string;
+ method_name: string;
+ id: string;
+}
+
+export interface TokenHistoryItem {
+ transaction_hash: string | null;
+ token_address: string | null;
+ created_at: string | null;
+ sender: string | null;
+ recipient: string | null;
+}
+
+export interface TokenHistoryItem721 extends TokenHistoryItem {
+ token_id: number | null;
+}
+
+export interface TokenHistoryItem20 extends TokenHistoryItem {
+ value: number | null;
+}
+
+export interface TokenTransactionMetadata721 {
+ account_address: string;
+ token_address: string;
+ uri: string;
+ symbol: string;
+}
+
+export interface TableProperty {
+ display: string;
+ objProp: string[];
+}
+
+export interface TableRowClick {
+ action: (param: string) => void;
+ prop: string;
+}
+export interface TableProps {
+ onClick: TableRowClick;
+ schema: TableProperty[];
+}
+
+export interface balanceDate {
+ created_at: string;
+ balance: number;
+}
diff --git a/packages/cacti-ledger-browser-react/src/schema/token-standards.ts b/packages/cacti-ledger-browser-react/src/schema/token-standards.ts
new file mode 100644
index 0000000000..65ad5a514c
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/schema/token-standards.ts
@@ -0,0 +1,4 @@
+export const STANDARDS = {
+ erc20: "ERC20",
+ erc721: "ERC721",
+};
diff --git a/packages/cacti-ledger-browser-react/src/supabase-client.tsx b/packages/cacti-ledger-browser-react/src/supabase-client.tsx
new file mode 100644
index 0000000000..f0efcb4688
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/supabase-client.tsx
@@ -0,0 +1,7 @@
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = "http://localhost:8000";
+const supabaseKey =
+ "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE";
+
+export const supabase = createClient(supabaseUrl, supabaseKey);
diff --git a/packages/cacti-ledger-browser-react/src/vite-env.d.ts b/packages/cacti-ledger-browser-react/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/packages/cacti-ledger-browser-react/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
+