Skip to content

Commit 2acc907

Browse files
Quint-SQuint-S
committed
metadata
1 parent 92f47ba commit 2acc907

File tree

4 files changed

+126
-80
lines changed

4 files changed

+126
-80
lines changed

‎package-lock.json‎

Lines changed: 27 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"homepage": "https://torex.rs",
66
"type": "module",
77
"scripts": {
8-
"predeploy" : "npm run build",
9-
"deploy" : "gh-pages -d dist",
8+
"predeploy": "npm run build",
9+
"deploy": "gh-pages -d dist",
1010
"dev": "vite --host",
1111
"build": "tsc -b && vite build",
1212
"lint": "eslint .",
@@ -19,6 +19,7 @@
1919
"graphql": "^16.10.0",
2020
"react": "^18.3.1",
2121
"react-dom": "^18.3.1",
22+
"react-helmet-async": "^2.0.5",
2223
"react-router-dom": "^7.1.1",
2324
"styled-components": "^6.1.14",
2425
"three": "^0.172.0"

‎src/App.tsx‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,40 @@ import ThreeJsTorus from './components/ThreeJsTorus'
1111
import { AccountDetails } from './pages/AccountDetails'
1212
import { I3StatusBar } from './components/I3StatusBar'
1313
import {ExtrinsicDetails} from "./pages/ExtrinsicDetails.tsx";
14+
import { HelmetProvider } from 'react-helmet-async';
1415

1516
const App = () => {
1617
return (
17-
<Router>
18-
<ThreeJsTorus />
19-
<div style={{
20-
display: 'flex',
21-
width: '100vw',
22-
height: '100vh',
23-
padding: '10px',
24-
paddingBottom: '40px',
25-
backgroundColor: 'rgba(0,0,0,30%)',
26-
backgroundClip: 'content-box',
27-
position: 'relative',
28-
overflow: 'auto'
29-
}}>
30-
<I3StatusBar />
31-
<Sidebar />
32-
<Routes>
33-
<Route path="/" element={<Home />} />
34-
<Route path="/blocks" element={<Blocks />} />
35-
<Route path="/transfers" element={<Transfers />} />
36-
<Route path="/accounts" element={<Accounts />} />
37-
<Route path="/agents" element={<Agents />} />
38-
<Route path="/extrinsics" element={<Extrinsics />} />
39-
<Route path="/events" element={<Events />} />
40-
<Route path="/account/:address" element={ <AccountDetails />} />
41-
<Route path="/extrinsic/:id" element={ <ExtrinsicDetails />} />
42-
</Routes>
43-
</div>
44-
</Router>
18+
<HelmetProvider>
19+
<Router>
20+
<ThreeJsTorus />
21+
<div style={{
22+
display: 'flex',
23+
width: '100vw',
24+
height: '100vh',
25+
padding: '10px',
26+
paddingBottom: '40px',
27+
backgroundColor: 'rgba(0,0,0,30%)',
28+
backgroundClip: 'content-box',
29+
position: 'relative',
30+
overflow: 'auto'
31+
}}>
32+
<I3StatusBar />
33+
<Sidebar />
34+
<Routes>
35+
<Route path="/" element={<Home />} />
36+
<Route path="/blocks" element={<Blocks />} />
37+
<Route path="/transfers" element={<Transfers />} />
38+
<Route path="/accounts" element={<Accounts />} />
39+
<Route path="/agents" element={<Agents />} />
40+
<Route path="/extrinsics" element={<Extrinsics />} />
41+
<Route path="/events" element={<Events />} />
42+
<Route path="/account/:address" element={ <AccountDetails />} />
43+
<Route path="/extrinsic/:id" element={ <ExtrinsicDetails />} />
44+
</Routes>
45+
</div>
46+
</Router>
47+
</HelmetProvider>
4548
)
4649
}
4750

‎src/pages/AccountDetails.tsx‎

Lines changed: 65 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import styled from 'styled-components'
77
import {AccountTransfers} from "./AccountTransfers.tsx";
88
import {AccountExtrinsics} from "./AccountExtrinsics.tsx";
99
import {CopyButton} from "../components/CopyButton.tsx";
10+
import { Helmet } from 'react-helmet-async';
1011

1112
const GET_ACCOUNT = gql`
1213
query GetAccount($address: String!) {
@@ -55,58 +56,72 @@ export const AccountDetails = () => {
5556
return <div>Error: No address provided</div>
5657
}
5758

59+
const accountData = data?.account;
60+
const title = accountData ? `Account ${address.slice(0, 8)}... | Torus Explorer` : 'Account Details | Torus Explorer';
61+
const description = accountData
62+
? `Account ${address} with total balance of ${formatTORUS(accountData.balanceTotal)} TORUS`
63+
: 'View account details on Torus Explorer';
64+
5865
return (
59-
<TerminalWindow title={`view_account`}>
60-
{loading && <TerminalLoading />}
61-
{error && <div>Error: {error.message}</div>}
62-
{!loading && !data?.account && <div>Error: {address} not found.</div>}
63-
{data?.account && (
64-
<div>
65-
<DetailRow>
66-
<DetailLabel>Address:</DetailLabel>
67-
<DetailValue>{data.account.id} <CopyButton textToCopy={data.account.id}/></DetailValue>
68-
</DetailRow>
69-
<DetailRow>
70-
<DetailLabel>Total Balance:</DetailLabel>
71-
<DetailValue>{formatTORUS(data.account.balanceTotal)}</DetailValue>
72-
</DetailRow>
73-
<DetailRow>
74-
<DetailLabel>Free Balance:</DetailLabel>
75-
<DetailValue>{formatTORUS(data.account.balanceFree)}</DetailValue>
76-
</DetailRow>
77-
<DetailRow>
78-
<DetailLabel>Staked Balance:</DetailLabel>
79-
<DetailValue>{formatTORUS(data.account.balanceStaked)}</DetailValue>
80-
</DetailRow>
81-
</div>
82-
)}
66+
<>
67+
<Helmet>
68+
<title>{title}</title>
69+
<meta name="description" content={description} />
70+
<meta property="og:title" content={title} />
71+
<meta property="og:description" content={description} />
72+
<meta property="og:type" content="website" />
73+
{accountData && (
74+
<>
75+
<meta property="og:url" content={window.location.href} />
76+
<meta name="twitter:card" content="summary" />
77+
<meta name="twitter:title" content={title} />
78+
<meta name="twitter:description" content={description} />
79+
</>
80+
)}
81+
</Helmet>
82+
<TerminalWindow title={`view_account`}>
83+
{loading && <TerminalLoading />}
84+
{error && <div>Error: {error.message}</div>}
85+
{!loading && !data?.account && <div>Error: {address} not found.</div>}
86+
{data?.account && (
87+
<div>
88+
<DetailRow>
89+
<DetailLabel>Address:</DetailLabel>
90+
<DetailValue>{data.account.id} <CopyButton textToCopy={data.account.id}/></DetailValue>
91+
</DetailRow>
92+
<DetailRow>
93+
<DetailLabel>Total Balance:</DetailLabel>
94+
<DetailValue>{formatTORUS(data.account.balanceTotal)}</DetailValue>
95+
</DetailRow>
96+
<DetailRow>
97+
<DetailLabel>Free Balance:</DetailLabel>
98+
<DetailValue>{formatTORUS(data.account.balanceFree)}</DetailValue>
99+
</DetailRow>
100+
<DetailRow>
101+
<DetailLabel>Staked Balance:</DetailLabel>
102+
<DetailValue>{formatTORUS(data.account.balanceStaked)}</DetailValue>
103+
</DetailRow>
104+
</div>
105+
)}
83106

84-
<TerminalTabs
85-
tabs={[
86-
{
87-
label: 'Transfers',
88-
content: <AccountTransfers />
89-
},
90-
{
91-
label: 'Extrinsics',
92-
content: <AccountExtrinsics/>
93-
},
94-
{
95-
label: 'Delegations',
96-
content: <div>Coming soon..</div>
97-
}
98-
]}
99-
/>
107+
<TerminalTabs
108+
tabs={[
109+
{
110+
label: 'Transfers',
111+
content: <AccountTransfers />
112+
},
113+
{
114+
label: 'Extrinsics',
115+
content: <AccountExtrinsics/>
116+
},
117+
{
118+
label: 'Delegations',
119+
content: <div>Coming soon..</div>
120+
}
121+
]}
122+
/>
100123

101-
{/*<AccountTransfers />*/}
102-
{/*{(data?.transfers?.totalCount ?? 0) > 0 && (*/}
103-
{/* <div style={{padding: '8px 0',*/}
104-
{/* borderTop: '1px solid #0050a1'}}>*/}
105-
{/* <DataTable names={['Amount', 'From', 'To', 'Height', 'Timestamp']} records={data.transfers.nodes.map((transfer: { id: string; amount: number; from: string; to: string; blockNumber: string; timestamp: string | number | Date }) => {*/}
106-
{/* return {id: transfer.id, data: [formatTORUS(transfer.amount), <Link to={`/account/${transfer.from}`}><ResponsiveAddress address={transfer.from}/></Link>, <Link to={`/account/${transfer.to}`}><ResponsiveAddress address={transfer.to}/></Link>, transfer.blockNumber, new Date(transfer.timestamp).toLocaleString()*/}
107-
{/* ]}*/}
108-
{/* })} /></div>*/}
109-
{/*)}*/}
110-
</TerminalWindow>
124+
</TerminalWindow>
125+
</>
111126
)
112127
}

0 commit comments

Comments
 (0)