Skip to content

Commit a40adf6

Browse files
MautjeeMautjee
authored
ui: detail pages mobile friendly (#143)
1 parent 9223ef6 commit a40adf6

File tree

7 files changed

+91
-64
lines changed

7 files changed

+91
-64
lines changed

‎services/explorer-ui/src/components/blocks/block-table-columns.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { DataTableColumnHeader } from "~/components/data-table";
44
import { formatTimeSince } from "~/lib/utils";
55
import { routes } from "~/routes/__root";
66
import type { BlockTableSchema } from "./blocks-schema";
7+
import { truncateHashString } from "~/lib/create-hash-string";
78

89
const text = {
910
height: "BLOCK HEIGHT",
@@ -49,12 +50,9 @@ export const BlockTableColumns: ColumnDef<BlockTableSchema>[] = [
4950
const blockHash = row.getValue("blockHash");
5051
if (typeof blockHash !== "string") return null;
5152
const r = `${routes.blocks.route}/${blockHash}`;
52-
const truncatedBlockHash = `${blockHash.slice(0, 6)}...${blockHash.slice(
53-
-4
54-
)}`;
5553
return (
5654
<div className="text-purple-light font-mono font-bold">
57-
<Link to={r}>{truncatedBlockHash}</Link>
55+
<Link to={r}>{truncateHashString(blockHash)}</Link>
5856
</div>
5957
);
6058
},
@@ -103,7 +101,7 @@ export const BlockTableColumns: ColumnDef<BlockTableSchema>[] = [
103101
cell: ({ row }) => {
104102
const formattedTime = formatTimeSince(
105103
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
106-
(row.getValue("timestamp") as unknown as number)
104+
row.getValue("timestamp") as unknown as number,
107105
);
108106
return <div className="text-purple-dark">{formattedTime}</div>;
109107
},

‎services/explorer-ui/src/components/contracts/classes/columns.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Link } from "@tanstack/react-router";
33
import { routes } from "~/routes/__root";
44
import { DataTableColumnHeader } from "~/components/data-table";
55
import { type ContractClass } from "./schema";
6+
import { truncateHashString } from "~/lib/create-hash-string";
67

78
const text = {
89
blockHash: "BLOCK HASH",
@@ -26,13 +27,9 @@ export const contractsTableColumns: ColumnDef<ContractClass>[] = [
2627
const contractClassId = row.getValue("contractClassId");
2728
if (typeof contractClassId !== "string") return null;
2829
const r = `${routes.contracts.route}/${routes.contracts.children.classes.route}/${contractClassId}`;
29-
const truncatedContractClassId = `${contractClassId.slice(
30-
0,
31-
6
32-
)}...${contractClassId.slice(-4)}`;
3330
return (
3431
<div className="text-purple-light font-mono font-bold">
35-
<Link to={r}>{truncatedContractClassId}</Link>
32+
<Link to={r}>{truncateHashString(contractClassId)}</Link>
3633
</div>
3734
);
3835
},

‎services/explorer-ui/src/components/header.tsx

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link, useLocation, useNavigate } from "@tanstack/react-router";
1+
import { Link, useNavigate } from "@tanstack/react-router";
22
import { Input } from "~/components/ui/input";
33
import { routes } from "~/routes/__root.tsx";
44
import {
@@ -12,22 +12,13 @@ import { ChicmozHomeLink } from "./ui/chicmoz-home-link";
1212

1313
export const Header = () => {
1414
const navigate = useNavigate();
15-
const location = useLocation();
1615

1716
const getSelectedItem = (value: string) => {
1817
void navigate({
1918
to: value,
2019
});
2120
};
2221

23-
const getPlaceholder = () => {
24-
const array = Object.values(routes);
25-
const route = location.pathname;
26-
return array.find((item) => {
27-
if (item.route === route) return item.title;
28-
});
29-
};
30-
3122
return (
3223
<div className="mx-auto px-4 mt-10 max-w-[1440px] md:px-[70px]">
3324
<div className="flex flex-row w-full items-center bg-purple-light rounded-[40px] pl-7 py-4 pr-4 md:pl-10">
@@ -38,7 +29,7 @@ export const Header = () => {
3829
<div className="md:hidden">
3930
<Select onValueChange={getSelectedItem}>
4031
<SelectTrigger className="h-8 w-40 text-gray-50">
41-
<SelectValue placeholder={getPlaceholder()?.title} />
32+
<SelectValue placeholder="Menu" />
4233
</SelectTrigger>
4334
<SelectContent>
4435
<SelectItem value={routes.home.route}>

‎services/explorer-ui/src/components/info-display/key-value-row.tsx

+29-20
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Link } from "@tanstack/react-router";
22
import { FC } from "react";
3+
import { truncateHashString } from "~/lib/create-hash-string";
34

45
interface KeyValueRowProps {
56
label: string;
@@ -13,23 +14,31 @@ export const KeyValueRow: FC<KeyValueRowProps> = ({
1314
value,
1415
isLast,
1516
link,
16-
}) => (
17-
<div
18-
className={`flex items-center py-3 ${
19-
!isLast ? "border-b border-gray-200" : ""
20-
}`}
21-
>
22-
<span className="text-gray-600 w-1/5">{label}</span>
23-
{link ? (
24-
<Link
25-
to={link}
26-
className="text-sm flex-grow text-primary-600 text-primary cursor-pointer"
27-
>
28-
{value}
29-
<span className="ml-1">🔗</span>
30-
</Link>
31-
) : (
32-
<span className={`text-sm flex-grow `}>{value}</span>
33-
)}
34-
</div>
35-
);
17+
}) => {
18+
const isHashSring = value.includes("0x");
19+
value = isHashSring ? truncateHashString(value) : value;
20+
return (
21+
<div
22+
className={`flex flex-col justify-start gap-2 py-3 ${
23+
!isLast ? "border-b border-gray-200" : ""
24+
} md:flex-row md:items-center`}
25+
>
26+
<span className="text-gray-600 w-full">{label}</span>
27+
{link ? (
28+
<Link
29+
to={link}
30+
className="text-sm flex-grow text-primary-600 text-primary cursor-pointer"
31+
>
32+
{value}
33+
<span className="ml-1">🔗</span>
34+
</Link>
35+
) : (
36+
<span
37+
className={`text-sm flex-grow overflow-hidden md:w-1/3 md:text-end`}
38+
>
39+
{value}
40+
</span>
41+
)}
42+
</div>
43+
);
44+
};

‎services/explorer-ui/src/lib/create-hash-string.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const truncateHashString = (value: string) => {
2+
const startHash = value.substring(0, 6);
3+
const endHash = value.substring(value.length - 4, value.length);
4+
return `${startHash}...${endHash}`;
5+
};

‎services/explorer-ui/src/pages/block-details/index.tsx

+21-19
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Button } from "~/components/ui";
66
import { useGetBlockByHeight } from "~/hooks";
77
import { API_URL, aztecExplorer } from "~/service/constants";
88
import { getBlockDetails, getTxEffects } from "./util";
9+
import { truncateHashString } from "~/lib/create-hash-string";
910

1011
const API_ENDPOINT_URL = `${API_URL}/${aztecExplorer.getL2BlockByHash}`;
1112

@@ -19,26 +20,21 @@ export const BlockDetails: FC = () => {
1920
error,
2021
} = useGetBlockByHeight(blockNumber);
2122

22-
let bn;
23-
if (blockNumber === "latest") bn = "latest";
24-
else bn = blockNumber;
25-
2623
if (isLoading) return <p>Loading...</p>;
2724
if (error) return <p className="text-red-500">{error.message}</p>;
2825
if (!latestBlock) return <p>No data</p>;
2926

30-
const apiEndpointUrl = `${API_ENDPOINT_URL}${bn}`;
27+
const apiEndpointUrl = `${API_ENDPOINT_URL}${blockNumber}`;
3128

3229
return (
33-
<div className="mx-auto px-[70px] max-w-[1440px]">
34-
{bn ? (
30+
<div className="mx-auto px-7 max-w-[1440px] md:px-[70px]">
31+
<div>
3532
<div>
36-
<div>
37-
<h2>Block Details</h2>
38-
<p>{bn}</p>
39-
<a href={apiEndpointUrl} target="_blank" rel="noreferrer">
40-
(API Endpoint)
41-
</a>
33+
<h2>Block Details</h2>
34+
<p>{truncateHashString(latestBlock.hash)}</p>
35+
<a href={apiEndpointUrl} target="_blank" rel="noreferrer">
36+
(API Endpoint)
37+
</a>
4238
</div>
4339
<div className="flex flex-col gap-4 mt-8">
4440
<div className="bg-white rounded-lg shadow-md p-4">
@@ -54,13 +50,19 @@ export const BlockDetails: FC = () => {
5450
</div>
5551
<TxEffectsTable txEffects={getTxEffects(latestBlock)} />
5652
</div>
53+
<div className="flex flex-col gap-4 mt-8">
54+
<div className="bg-white rounded-lg shadow-md p-4">
55+
<KeyValueDisplay data={getBlockDetails(latestBlock)} />
56+
</div>
57+
<div className="flex flex-row gap-4 w-10 mb-4">
58+
<Button variant={"default"}>
59+
<p>View TxEffects</p>
60+
</Button>
61+
<Button variant={"default"}>View TxEffects</Button>
62+
</div>
63+
<TxEffectsTable txEffects={getTxEffects(latestBlock)} />
5764
</div>
58-
) : (
59-
<div>
60-
<h2>Invalid Block Number</h2>
61-
<p>Block {blockNumber} not found</p>
62-
</div>
63-
)}
65+
</div>
6466
</div>
6567
);
6668
};

‎services/explorer-ui/src/pages/tx-effect-details/index.tsx

+29-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
import { useParams } from "@tanstack/react-router";
22
import { useState, type FC } from "react";
33
import { KeyValueDisplay } from "~/components/info-display/key-value-display";
4-
import { Button } from "~/components/ui";
4+
import {
5+
Button,
6+
Select,
7+
SelectContent,
8+
SelectItem,
9+
SelectTrigger,
10+
SelectValue,
11+
} from "~/components/ui";
512
import { useGetTxEffectByHash } from "~/hooks/";
613
import { API_URL, aztecExplorer } from "~/service/constants";
714
import { txEffectTabs, type TabId } from "./constants";
815
import { getTxEffectData } from "./utils";
16+
import { truncateHashString } from "~/lib/create-hash-string";
917

1018
const API_ENDPOINT_URL = `${API_URL}/${aztecExplorer.getL2TxEffectByHash}`;
1119

@@ -16,6 +24,9 @@ export const TxEffectDetails: FC = () => {
1624
});
1725
const { data: txEffects, isLoading, error } = useGetTxEffectByHash(hash);
1826

27+
const getSelectedItem = (value: string) => {
28+
setSelectedTab(value as TabId);
29+
};
1930
if (!hash) <div> No txEffect hash</div>;
2031
if (isLoading) return <div>Loading...</div>;
2132
if (error) return <div>Error</div>;
@@ -24,11 +35,11 @@ export const TxEffectDetails: FC = () => {
2435
const apiEndpointUrl = `${API_ENDPOINT_URL}${hash}`;
2536

2637
return (
27-
<div className="mx-auto px-[70px] max-w-[1440px]">
38+
<div className="mx-auto px-7 max-w-[1440px] md:px-[70px]">
2839
<div>
2940
<div>
3041
<h2>TxEffect details</h2>
31-
<p>{txEffects.hash}</p>
42+
<p>{truncateHashString(txEffects.hash)}</p>
3243
<a href={apiEndpointUrl} target="_blank" rel="noreferrer">
3344
(API Endpoint)
3445
</a>
@@ -37,7 +48,7 @@ export const TxEffectDetails: FC = () => {
3748
<div className="bg-white rounded-lg shadow-md p-4">
3849
<KeyValueDisplay data={getTxEffectData(txEffects)} />
3950
</div>
40-
<div className="flex flex-row gap-4 w-10 mb-4">
51+
<div className="hidden lg:flex flex-row gap-4 w-10 mb-4">
4152
{txEffectTabs.map((tab) => (
4253
<Button
4354
key={tab.id}
@@ -49,6 +60,20 @@ export const TxEffectDetails: FC = () => {
4960
</Button>
5061
))}
5162
</div>
63+
<div className="mb-1 mt-4 lg:hidden">
64+
<Select onValueChange={getSelectedItem}>
65+
<SelectTrigger className="h-8 w-3/5 bg-primary text-white">
66+
<SelectValue placeholder="encryptedLogs" />
67+
</SelectTrigger>
68+
<SelectContent>
69+
{txEffectTabs.map((tab) => (
70+
<SelectItem key={tab.id} value={tab.id}>
71+
{tab.label}
72+
</SelectItem>
73+
))}
74+
</SelectContent>
75+
</Select>
76+
</div>
5277
<div className="bg-white rounded-lg shadow-md p-4">
5378
{selectedTab === "ecryptedLogs" && (
5479
<div className="">

0 commit comments

Comments
 (0)