Skip to content

Commit 9206270

Browse files
Quint-SQuint-S
committed
meta
1 parent 0ece808 commit 9206270

File tree

5 files changed

+127
-60
lines changed

5 files changed

+127
-60
lines changed

‎src/components/PaginationControls.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const handlePageChange = (e: React.KeyboardEvent<HTMLInputElement>) => {
5454
value={inputValue}
5555
onChange={handleInputChange}
5656
onKeyDown={handlePageChange}
57-
className="w-12 mx-1 text-center bg-transparent border border-gray-400 focus:outline-none appearance-none"
57+
className="w-12 mx-1 text-center bg-transparent border border-gray-400 rounded-none focus:outline-none appearance-none"
5858
style={{ WebkitAppearance: 'none', MozAppearance: 'textfield' }}
5959
/>
6060
<span>of {totalPages}</span>

‎src/components/Sidebar.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,12 @@ export const Sidebar = () => {
172172
{navItems.map((item, index) => (
173173
<NavItem
174174
key={item.to}
175-
onClick={(e) => {if(!isExpanded && isMobile){e.preventDefault()}}}
175+
onClick={(e) => {
176+
if(!isExpanded && isMobile){
177+
e.preventDefault()
178+
}
179+
setFocusedIndex(index);
180+
}}
176181
to={item.to}
177182
id={`nav-item-${index}`}
178183
className={focusedIndex === index && ((isMobile && isExpanded) || !isMobile) ? `hovered` : ''}

‎src/pages/Accounts.tsx‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { TerminalLoading } from '../components/TerminalLoading.tsx';
88
import {Link, useNavigate} from "react-router-dom";
99
import {ResponsiveAddress} from "../components/ResponsiveAddress.tsx";
1010
import {SearchBar} from "../components/SearchBar.tsx";
11+
import { Helmet } from 'react-helmet-async';
1112

1213
const GET_ACCOUNTS = gql`
1314
query GetAccounts($first: Int!, $offset: Int!) {
@@ -31,6 +32,12 @@ export const Accounts = () => {
3132
const { loading, error, data } = useQuery(GET_ACCOUNTS, {
3233
variables: { first: itemsPerPage, offset: currentPage * itemsPerPage }
3334
});
35+
36+
const title = 'Accounts | TorEx - Torus Blockchain Explorer';
37+
const description = data
38+
? `Browse ${data.accounts.totalCount.toLocaleString()} accounts on the Torus blockchain - View balances, transfers, and account details`
39+
: 'Browse accounts on the Torus blockchain - View balances, transfers, and account details';
40+
3441
const onsearch = (search: string) => {
3542
navigate(`/account/${search}`)
3643
}
@@ -49,27 +56,40 @@ export const Accounts = () => {
4956
const navigate = useNavigate();
5057

5158
return (
52-
<TerminalWindow title="Accounts" footer={pageControls}>
53-
{loading && <TerminalLoading/>}
54-
{error && <div>Error: {error.message}</div>}
59+
<>
60+
<Helmet>
61+
<title>{title}</title>
62+
<meta name="description" content={description} />
63+
<meta property="og:title" content={title} />
64+
<meta property="og:description" content={description} />
65+
<meta property="og:type" content="website" />
66+
<meta property="og:url" content={window.location.href} />
67+
<meta name="twitter:card" content="summary" />
68+
<meta name="twitter:title" content={title} />
69+
<meta name="twitter:description" content={description} />
70+
</Helmet>
71+
<TerminalWindow title="Accounts" footer={pageControls}>
72+
{loading && <TerminalLoading/>}
73+
{error && <div>Error: {error.message}</div>}
5574

56-
{data && (
57-
<div >
58-
<DataTable
59-
names={['Address', 'Total Balance', 'Free', 'Staked']}
60-
records={data.accounts.nodes.map((acc: { id: string; address: string; balanceTotal: number; balanceFree: number; balanceStaked: number; }) => ({
61-
id: acc.id,
62-
data: [
63-
<Link to={`/account/${acc.address}`}><ResponsiveAddress address={acc.address}/></Link>,
64-
formatTORUS(acc.balanceTotal),
65-
formatTORUS(acc.balanceFree),
66-
formatTORUS(acc.balanceStaked)
67-
]
68-
}))}
69-
/>
70-
</div>
71-
72-
)}
73-
</TerminalWindow>
75+
{data && (
76+
<div >
77+
<DataTable
78+
names={['Address', 'Total Balance', 'Free', 'Staked']}
79+
records={data.accounts.nodes.map((acc: { id: string; address: string; balanceTotal: number; balanceFree: number; balanceStaked: number; }) => ({
80+
id: acc.id,
81+
data: [
82+
<Link to={`/account/${acc.address}`}><ResponsiveAddress address={acc.address}/></Link>,
83+
formatTORUS(acc.balanceTotal),
84+
formatTORUS(acc.balanceFree),
85+
formatTORUS(acc.balanceStaked)
86+
]
87+
}))}
88+
/>
89+
</div>
90+
91+
)}
92+
</TerminalWindow>
93+
</>
7494
);
7595
};

‎src/pages/ExtrinsicDetails.tsx‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { DetailValue } from './AccountDetails.tsx'
88
import { DetailLabel } from './AccountDetails.tsx'
99
import { DetailRow } from './AccountDetails.tsx'
1010
import { ExtrinsicEvents } from './ExtrinsicEvents.tsx';
11+
import { Helmet } from 'react-helmet-async';
1112

1213
export const GET_EXTRINSIC = gql`
1314
query GetExtrinsic($id: String!) {
@@ -62,8 +63,29 @@ export const ExtrinsicDetails = () => {
6263
return <div>Error: No extrinsic ID provided</div>
6364
}
6465

66+
const title = extrinsic ? `Extrinsic ${extrinsic.module}::${extrinsic.method} | Torus Explorer` : 'Extrinsic Details | Torus Explorer';
67+
const description = extrinsic
68+
? `Extrinsic ${extrinsic.id} - ${extrinsic.module}::${extrinsic.method} called by ${extrinsic.signer} - Status: ${extrinsic.success ? 'Success' : 'Failed'}`
69+
: 'View extrinsic details on Torus Explorer';
70+
6571
return (
66-
<TerminalWindow title={`view_extrinsic`}>
72+
<>
73+
<Helmet>
74+
<title>{title}</title>
75+
<meta name="description" content={description} />
76+
<meta property="og:title" content={title} />
77+
<meta property="og:description" content={description} />
78+
<meta property="og:type" content="website" />
79+
{extrinsic && (
80+
<>
81+
<meta property="og:url" content={window.location.href} />
82+
<meta name="twitter:card" content="summary" />
83+
<meta name="twitter:title" content={title} />
84+
<meta name="twitter:description" content={description} />
85+
</>
86+
)}
87+
</Helmet>
88+
<TerminalWindow title={`view_extrinsic`}>
6789
{loading && <TerminalLoading />}
6890
{error && <div>Error: {error.message}</div>}
6991
{!loading && !data && <div>Error: Extrinsic {id} not found.</div>}
@@ -115,5 +137,6 @@ export const ExtrinsicDetails = () => {
115137

116138

117139
</TerminalWindow>
140+
</>
118141
)
119142
}

‎src/pages/Home.tsx‎

Lines changed: 55 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { TerminalWindow } from '../components/TerminalWindow'
33
import {formatTORUS} from "../utils/utils.ts";
44
import {ASCIILogo} from "../components/ASCIILogo.tsx";
55
import {DetailLabel, DetailRow, DetailValue} from "./AccountDetails.tsx";
6+
import { Helmet } from 'react-helmet-async';
67

78
const GET_NETWORK_INFO = gql`
89
query {
@@ -22,43 +23,61 @@ const GET_NETWORK_INFO = gql`
2223
export const Home = () => {
2324
const { loading, error, data } = useQuery(GET_NETWORK_INFO)
2425

26+
const title = 'TorEx - Torus Blockchain Explorer';
27+
const description = data
28+
? `Explore the Torus blockchain - Current block height: ${data._metadata.lastProcessedHeight}, Circulating supply: ${formatTORUS(data.chainInfo.value)} TORUS`
29+
: 'Explore the Torus blockchain - View blocks, transactions, accounts, and network statistics';
30+
2531
return (
26-
<TerminalWindow title="Network Overview">
27-
{loading && <div>Loading...</div>}
28-
{error && <div>Error: {error.message}</div>}
29-
{data && (
32+
<>
33+
<Helmet>
34+
<title>{title}</title>
35+
<meta name="description" content={description} />
36+
<meta property="og:title" content={title} />
37+
<meta property="og:description" content={description} />
38+
<meta property="og:type" content="website" />
39+
<meta property="og:url" content={window.location.href} />
40+
<meta name="twitter:card" content="summary" />
41+
<meta name="twitter:title" content={title} />
42+
<meta name="twitter:description" content={description} />
43+
</Helmet>
44+
<TerminalWindow title="Network Overview">
45+
{loading && <div>Loading...</div>}
46+
{error && <div>Error: {error.message}</div>}
47+
{data && (
3048
<div className="flex flex-col h-full">
31-
<div className={'p-2'}>
32-
<DetailRow>
33-
<DetailLabel>Chain:</DetailLabel>
34-
<DetailValue>{data._metadata.chain}</DetailValue>
35-
</DetailRow>
36-
<DetailRow>
37-
<DetailLabel>Spec:</DetailLabel>
38-
<DetailValue>{data._metadata.specName}</DetailValue>
39-
</DetailRow>
40-
<DetailRow>
41-
<DetailLabel>Last Processed Block:</DetailLabel>
42-
<DetailValue>{data._metadata.lastProcessedHeight}</DetailValue>
43-
</DetailRow>
44-
<DetailRow>
45-
<DetailLabel>Last Timestamp:</DetailLabel>
46-
<DetailValue>{new Date(parseInt(data._metadata.lastProcessedTimestamp)).toLocaleString()}</DetailValue>
47-
</DetailRow>
48-
<DetailRow>
49-
<DetailLabel>Target Height:</DetailLabel>
50-
<DetailValue>{data._metadata.targetHeight}</DetailValue>
51-
</DetailRow>
52-
<DetailRow>
53-
<DetailLabel>Circulating supply:</DetailLabel>
54-
<DetailValue>{formatTORUS(data.chainInfo.value)} ♓︎TORUS</DetailValue>
55-
</DetailRow>
56-
</div>
57-
<div className="flex-grow flex items-center justify-center">
58-
<ASCIILogo/>
59-
</div>
49+
<div className={'p-2'}>
50+
<DetailRow>
51+
<DetailLabel>Chain:</DetailLabel>
52+
<DetailValue>{data._metadata.chain}</DetailValue>
53+
</DetailRow>
54+
<DetailRow>
55+
<DetailLabel>Spec:</DetailLabel>
56+
<DetailValue>{data._metadata.specName}</DetailValue>
57+
</DetailRow>
58+
<DetailRow>
59+
<DetailLabel>Last Processed Block:</DetailLabel>
60+
<DetailValue>{data._metadata.lastProcessedHeight}</DetailValue>
61+
</DetailRow>
62+
<DetailRow>
63+
<DetailLabel>Last Timestamp:</DetailLabel>
64+
<DetailValue>{new Date(parseInt(data._metadata.lastProcessedTimestamp)).toLocaleString()}</DetailValue>
65+
</DetailRow>
66+
<DetailRow>
67+
<DetailLabel>Target Height:</DetailLabel>
68+
<DetailValue>{data._metadata.targetHeight}</DetailValue>
69+
</DetailRow>
70+
<DetailRow>
71+
<DetailLabel>Circulating supply:</DetailLabel>
72+
<DetailValue>{formatTORUS(data.chainInfo.value)} ♓︎TORUS</DetailValue>
73+
</DetailRow>
74+
</div>
75+
<div className="flex-grow flex items-center justify-center">
76+
<ASCIILogo/>
77+
</div>
6078
</div>
61-
)}
62-
</TerminalWindow>
63-
)
79+
)}
80+
</TerminalWindow>
81+
</>
82+
)
6483
}

0 commit comments

Comments
 (0)