Skip to content

Commit 9be86a9

Browse files
Quint-SQuint-S
committed
extrinsic view and a lot more
1 parent aeffd25 commit 9be86a9

File tree

13 files changed

+460
-86
lines changed

13 files changed

+460
-86
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {Events} from './pages/Events'
1010
import ThreeJsTorus from './components/ThreeJsTorus'
1111
import { AccountDetails } from './pages/AccountDetails'
1212
import { I3StatusBar } from './components/I3StatusBar'
13+
import {ExtrinsicDetails} from "./pages/ExtrinsicDetails.tsx";
1314

1415
const App = () => {
1516
return (
@@ -23,7 +24,6 @@ const App = () => {
2324
paddingBottom: '40px',
2425
backgroundColor: 'rgba(0,0,0,30%)',
2526
backgroundClip: 'content-box',
26-
color:'rgb(0, 140, 255)',
2727
position: 'relative',
2828
overflow: 'auto'
2929
}}>
@@ -38,6 +38,7 @@ const App = () => {
3838
<Route path="/extrinsics" element={<Extrinsics />} />
3939
<Route path="/events" element={<Events />} />
4040
<Route path="/account/:address" element={ <AccountDetails />} />
41+
<Route path="/extrinsic/:id" element={ <ExtrinsicDetails />} />
4142
</Routes>
4243
</div>
4344
</Router>

‎src/components/ASCIILogo.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
export const ASCIILogo = () => {
2+
const text = ` +..=++++-.-
3+
%:+========+=++==++.% ##
4+
%-======#*%@@@@@@@@##+===.@ %*##@#%
5+
%:=====#%@#**#@@@@@%#*#@%#===:@% %%%@@#@@#
6+
@%=====+#@#*%@@@@@%%%@@@@@@*#%##@@@@%%:...@*@
7+
%%=====#%@#*@@@@ @###%%%=@@@@@...%@#%
8+
%%=====#@@@*@@@ ***%@@+@#......%%...@@#%
9+
%=====#@@%%%%@@ ***@@%+.....@@@#=.......@%#
10+
+====##@%%*==%%% ###@@@%:......-*@@@@@@@%+....-@@%##
11+
+===**@@%%===%@@%#**%@%%@@@@....%@@@@@@@@@@@@@==-:-==:@@#*
12+
====#*@@@@==+#@@@*#%@%=.......%@....@%@....@@@@@@+==@%:=+=+:@@###
13+
%+==#*@@@%#==#%@@@@@@*.......-*:...@@.....::...%@@@@%+=.@@@@#.#%@@@*#
14+
@=+##@@@@%==*#%@@@@@@@@@@-...%@@@@@....@@+-::#@@@@@@@@@:+++@%@%@@@%@@@@%
15+
#@+%@@@@*==##@@@@%#.......@@@....@@@%....*@@#++=%@@@:-++:@ :%@@#@@@%@@@@
16+
#%*++++*#%@@@@@@@:...........@@......::::@@@@@+++++++++=:#@@@%#%@ %%%
17+
#%@@%@@@@@@*..#@....#@@@@@....@@.:::#%==+=+.@@@++++--%@@@@%@@@@@%
18+
%%%%@@@@-......@@...@@@@@@@@#@%%@@+++%@@@%.===+-@=%@@@@@%%%##@@
19+
###%@@@:.......*@@@%...%@%...@@=+++-@+=++@@@@@@#:#@@@@@@@@%#++#%%* .RS
20+
##@@@-.......*...@@@@@@#@@@@@=.*@@@.+=.@@+++=@@@@%@@@@@%%--+#%@@@@+=%+
21+
@%%@@@@%*%@@@=..:@@@@@@:++.@@@@@@-++=@@@@ #%@@%%@@%%--*%@@@@+.==+++*%#
22+
%@%%@@@@@@@@@@....@@@@@%=++++.:++++:@@@@@@@%@@%%@--#@@@@:----==*#%@*%
23+
%%@%%@@=++:@@@:==.@@@@@%+=+++++=.#@@#@@@@@%*@%-=%@@@.-----##@@
24+
@@%%%%===@@@@==+.%@@@@@@%@@@@@@@%@@ %#@@-*@@@%.::::+%@
25+
*@*===@@@++++@@@@@@@%%%%%%@@@@ %%@*@@@#:::::#%
26+
-==-@@@-==.@@% @@@@@@@ %#@@@*:::::-#
27+
--==@@@@@@@%% ##@@%:::::.#
28+
=----@@@@@@@ %#*%@%.:::::#
29+
#--===@@### ###*@@+::::::*#
30+
*----.@@@%*********#@@@.::::::+#
31+
@*-----::#@@@@@@@*.:::::::.##
32+
%*-----::::::::::::::+##
33+
##-::::::::.=###`
34+
// const codepage = ` ▒ ▒▒▒▒▒░ ░
35+
// █░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ █ ▓▓
36+
// █░▒▒▒▒▒▒▓▓█████████▓▓▒▒▒▒ █ █▓▓▓█▓█
37+
// █░▒▒▒▒▒▓██▓▓▓▓██████▓▓▓██▓▒▒▒░██ █████▓██▓
38+
// ██▒▒▒▒▒▒▓█▓▓███████████████▓▓█▓▓██████░ █▓█
39+
// ██▒▒▒▒▒▓██▓▓████ █▓▓▓███▒█████ ██▓█
40+
// ██▒▒▒▒▒▓███▓███ ▓▓▓███▒█▓ ██ ██▓█
41+
// █▒▒▒▒▒▓████████ ▓▓▓███▒ ███▓▒ ██▓
42+
// ▒▒▒▒▒▓▓███▓▒▒███ ▓▓▓████░ ░▓████████▒ ░███▓▓
43+
// ▒▒▒▒▓▓████▒▒▒████▓▓▓████████ ██████████████▒▒░░░▒▒░██▓▓
44+
// ▒▒▒▒▓▓████▒▒▒▓███▓▓███▒ ██ ███ ██████▒▒▒██░▒▒▒▒░██▓▓▓
45+
// █▒▒▒▓▓████▓▒▒▓███████▓ ░▓░ ██ ░░ ██████▒▒ ████▓ ▓████▓▓
46+
// █▒▒▓▓█████▒▒▓▓███████████░ ██████ ██▒░░░▓█████████░▒▒▒█████████████
47+
// ▓█▒█████▓▒▒▓▓█████▓ ███ ████ ▓██▓▒▒▒████░░▒▒░█ ░███▓████████
48+
// ▓█▓▒▒▒▒▓▓████████░ ██ ░░░░█████▒▒▒▒▒▒▒▒▒▒░▓████▓██ ███
49+
// ▓██████████▓ ▓█ ▓█████ ██ ░░░▓█▒▒▒▒▒ ███▒▒▒▒░░████████████
50+
// ████████░ ██ ████████▓█████▒▒▒█████ ▒▒▒▒░█▒█████████▓▓██
51+
// ▓▓▓████░ ▓████ ███ ██▒▒▒▒░█▒▒▒▒██████▓░▓█████████▓▒▒▓██▓
52+
// ▓▓███░ ▓ ██████▓█████▒ ▓███ ▒▒ ██▒▒▒▒████████████░░▒▓█████▒▒█▒
53+
// ████████▓████▒ ░██████░▒▒ ██████░▒▒▒████ ▓█████████░░▓█████▒ ▒▒▒▒▒▓█▓
54+
// ██████████████ ██████▒▒▒▒▒ ░▒▒▒▒░█████████████░░▓████░░░░░▒▒▓▓██▓█
55+
// ███████▒▒▒░███░▒▒ ██████▒▒▒▒▒▒▒▒ ▓██▓██████▓██░▒████ ░░░░░▓▓██
56+
// ██████▒▒▒████▒▒▒ ██████████████████ █▓██░▓████ ░░░░▒██
57+
// ▓█▓▒▒▒███▒▒▒▒█████████████████ ███▓███▓░░░░░▓█
58+
// ░▒▒░███░▒▒ ███ ███████ █▓███▓░░░░░░▓
59+
// ░░▒▒█████████ ▓▓███░░░░░ ▓
60+
// ▒░░░░███████ █▓▓███ ░░░░░▓
61+
// ▓░░▒▒▒██▓▓▓ ▓▓▓▓██▒░░░░░░▓▓
62+
// ▓░░░░ ████▓▓▓▓▓▓▓▓▓▓███ ░░░░░░▒▓
63+
// █▓░░░░░░░▓███████▓ ░░░░░░░ ▓▓
64+
// █▓░░░░░░░░░░░░░░░░░░░▒▓▓
65+
// ▓▓░░░░░░░░░ ▒▓▓▓`
66+
return (
67+
<div id={'ascii-logo'}>
68+
<pre>
69+
{text.split('\n').map((line, index, arr) => {
70+
// Calculate gradient color
71+
// let col = 'rgb(0,234,255)';
72+
// const startColor = [154, 58, 255];
73+
// const endColor = [18, 191, 255];
74+
const startColor = [200, 0, 255];
75+
const endColor = [0, 234, 255];
76+
const ratio = index / (arr.length - 1);
77+
const color = startColor.map((start, i) =>
78+
Math.round(start + (endColor[i] - start) * ratio)
79+
);
80+
return (
81+
<span
82+
key={index}
83+
style={{color: `rgb(${color.join(',')})`}}
84+
>
85+
{line}
86+
<br/>
87+
</span>
88+
);
89+
})}
90+
</pre>
91+
</div>
92+
);
93+
};

‎src/components/DataTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const DataTable = ({ names, records }: TableProps) => {
2121
{names.map((name, index) => (
2222
<th
2323
key={index}
24-
className="py-3 text-center text-sm font-medium text-gray-500 uppercase tracking-wider px-10"
24+
className="py-3 text-center text-sm font-medium text-gray-400 uppercase tracking-wider px-10"
2525
>
2626
{name}
2727
</th>

‎src/components/Sidebar.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const NavItem = styled(NavLink)`
1717
display: block;
1818
padding: 8px;
1919
margin: 4px 0;
20-
color: #9a43f8;
20+
color: #e04bff;
2121
text-decoration: none;
2222
2323
&:hover {
@@ -28,6 +28,7 @@ const NavItem = styled(NavLink)`
2828
color: #535bf2;
2929
content: '<';
3030
}
31+
3132
&.hovered:after {
3233
color: #535bf2;
3334
content: '<';
@@ -58,7 +59,7 @@ export const Sidebar = () => {
5859
} else if (e.key === 'ArrowUp') {
5960
setFocusedIndex(prev => (prev - 1 + navItems.length) % navItems.length);
6061
} else if (e.key === 'Enter') {
61-
setFocusedIndex(-1);
62+
// setFocusedIndex(-1);
6263
const link = document.getElementById(`nav-item-${focusedIndex}`);
6364
link?.click();
6465
}

‎src/components/TerminalWindow.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const TerminalContainer = styled.div.attrs({className: 'w-full'})`
1010

1111
const TerminalHeader = styled.div`
1212
border-bottom: 1px solid #00c4ff;
13+
color: #009000;
1314
padding-left: 5px;
1415
position: sticky;
1516
top: 0;

‎src/index.css‎

Lines changed: 102 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,26 @@
2121
--theme-border: #0000ff;
2222
}
2323

24-
/* width */
25-
::-webkit-scrollbar {
26-
width: 0px;
27-
}
24+
/*!* width *!*/
25+
/*::-webkit-scrollbar {*/
26+
/* width: 0px;*/
27+
/*}*/
2828

29-
/* Track */
30-
::-webkit-scrollbar-track {
31-
border-radius: 0px;
32-
}
29+
/*!* Track *!*/
30+
/*::-webkit-scrollbar-track {*/
31+
/* border-radius: 0px;*/
32+
/*}*/
3333

34-
/* Handle */
35-
::-webkit-scrollbar-thumb {
36-
background: rgba(0,0,0,50%);
37-
border-radius: 0px;
38-
}
34+
/*!* Handle *!*/
35+
/*::-webkit-scrollbar-thumb {*/
36+
/* background: rgba(0,0,0,50%);*/
37+
/* border-radius: 0px;*/
38+
/*}*/
3939

40-
/* Handle on hover */
41-
::-webkit-scrollbar-thumb:hover {
42-
background: rgba(0,0,0,50%);
43-
}
40+
/*!* Handle on hover *!*/
41+
/*::-webkit-scrollbar-thumb:hover {*/
42+
/* background: rgba(0,0,0,50%);*/
43+
/*}*/
4444

4545
:root {
4646
/* font-family: Hack, monospace; */
@@ -51,49 +51,101 @@
5151
/* color: rgba(255, 255, 255, 0.87); */
5252
/* background-color: #242424; */
5353

54-
/* font-synthesis: none;
54+
font-synthesis: none;
5555
text-rendering: optimizeLegibility;
5656
-webkit-font-smoothing: antialiased;
57-
-moz-osx-font-smoothing: grayscale; */
57+
-moz-osx-font-smoothing: grayscale;
58+
}
59+
60+
body {
61+
62+
color: rgb(125, 225, 253);
63+
background-color: #111;
64+
/*background: linear-gradient(90deg, #0a0a0a 0%, #111 50%, #0a0a0a 100%);*/
65+
font-family: pixelfont, monospace;
66+
text-shadow: 2px 2px 0 #363636;
67+
font-size: 16px;
68+
margin: 0;
69+
padding: 0;
70+
font-smooth: never;
71+
-webkit-font-smoothing: none;
5872
}
5973

6074
a {
6175
font-weight: 500;
62-
color: #646cff;
63-
text-decoration: inherit;
76+
color: #f843e9;
77+
/*text-decoration: #00c4ff;*/
78+
/*text-underline: #00aa00;*/
79+
/*text-decoration-line: blink;*/
80+
/*text-decoration: inherit;*/
6481
}
6582
a:hover {
66-
color: #868dff;
83+
color: #fa9bf2;
84+
}
85+
pre {
86+
font-family: pixelfont, monospace;
87+
font-size: 16px;
88+
line-height: 16px;
89+
margin: 0;
90+
padding: 0;
91+
font-weight: 400;
92+
text-align: left;
93+
white-space: pre-wrap;
94+
white-space: -moz-pre-wrap;
95+
white-space: -pre-wrap;
96+
white-space: -o-pre-wrap;
97+
word-wrap: break-word;
98+
text-indent: initial
6799
}
68100

69-
/*body {*/
70-
/* margin: 0;*/
71-
/* display: flex;*/
72-
/* place-items: center;*/
73-
/* min-width: 320px;*/
74-
/* min-height: 100vh;*/
75-
/*}*/
101+
#ascii-logo pre {
102+
text-shadow: 6px 6px 0 #363636;
103+
min-width: 750px
104+
}
105+
106+
107+
::-moz-selection {
108+
background-color: #0a0;
109+
text-shadow: none;
110+
color: #000
111+
}
112+
113+
::selection {
114+
background-color: rgba(0, 172, 0, .99);
115+
text-shadow: none;
116+
color: #000;
117+
}
118+
119+
::-webkit-scrollbar {
120+
width: 12px
121+
}
122+
123+
::-webkit-scrollbar:horizontal {
124+
height: 12px
125+
}
126+
127+
::-webkit-scrollbar-corner {
128+
background: #555
129+
}
130+
131+
::-webkit-scrollbar-track {
132+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHklEQVQImWP8//8/AwwwBi76zwJjMDAwMDIwMDACAJddBuvMdywUAAAAAElFTkSuQmCC)
133+
}
134+
135+
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button:vertical:start, ::-webkit-scrollbar-button:vertical:end,
136+
::-webkit-scrollbar-button:horizontal:start, ::-webkit-scrollbar-button:horizontal:end{
137+
background: rgba(0, 117, 154, 0.48);
138+
//background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEWqqqpVVVWzGxUgAAAADElEQVQI12NwYHIAAAEIAIPJpZSRAAAAAElFTkSuQmCC)
139+
}
140+
141+
::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:horizontal:end:increment, ::-webkit-scrollbar-button:vertical:start:decrement, ::-webkit-scrollbar-button:vertical:end:increment {
142+
display: block
143+
}
144+
145+
@font-face {
146+
font-family: pixelfont;
147+
src: url('/fonts/IBM/WebPlus_IBM_VGA_8x16.woff');
148+
}
76149

77-
/*h1 {*/
78-
/* font-size: 3.2em;*/
79-
/* line-height: 1.1;*/
80-
/*}*/
81150

82-
/*button {*/
83-
/* border-radius: 8px;*/
84-
/* border: 1px solid transparent;*/
85-
/* padding: 0.6em 1.2em;*/
86-
/* font-size: 1em;*/
87-
/* font-weight: 500;*/
88-
/* font-family: inherit;*/
89-
/* cursor: pointer;*/
90-
/* transition: border-color 0.25s;*/
91-
/*}*/
92-
/*button:hover {*/
93-
/* border-color: #646cff;*/
94-
/*}*/
95-
/*button:focus,*/
96-
/*button:focus-visible {*/
97-
/* outline: 4px auto -webkit-focus-ring-color;*/
98-
/*}*/
99151

‎src/pages/AccountDetails.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ account(id: $address) {
2121
}
2222
`
2323

24-
const DetailRow = styled.div`
24+
export const DetailRow = styled.div`
2525
display: flex;
2626
padding: 8px 0;
2727
border-bottom: 1px solid #0050a1;
@@ -33,14 +33,14 @@ const DetailRow = styled.div`
3333
}
3434
`
3535

36-
const DetailLabel = styled.div`
36+
export const DetailLabel = styled.div`
3737
width: 200px;
3838
padding-left: 5px;
3939
color: #00c4ff;
4040
font-weight: bold;
4141
`
4242

43-
const DetailValue = styled.div`
43+
export const DetailValue = styled.div`
4444
flex-grow: 1;
4545
color: #ffffff;
4646
`

‎src/pages/AccountExtrinsics.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const AccountExtrinsics = () => {
6868
{loading && <TerminalLoading/>}
6969
{error && <div>Error: {error.message}</div>}
7070
{data && <DataTable names={['Block #','Extrinsic Idx', 'Call', 'Account', 'Success']} records={data.extrinsics.nodes.map((extrinsic: { id: string; blockNumber: string; module: string; method: string; args: string; signer: string; success: boolean; }) => {
71-
return {id: extrinsic.id, data: [extrinsic.blockNumber, extrinsic.id, `${extrinsic.module}::${extrinsic.method}`, <Link to={`/account/${extrinsic.signer}`}><ResponsiveAddress address={extrinsic.signer}/></Link>, extrinsic.success.toString()
71+
return {id: extrinsic.id, data: [extrinsic.blockNumber, <Link to={`/extrinsic/${extrinsic.id}`}>{extrinsic.id}</Link>, `${extrinsic.module}::${extrinsic.method}`, <ResponsiveAddress address={extrinsic.signer}/>, extrinsic.success.toString()
7272
]}
7373
})} />}
7474
</TerminalWindow>

0 commit comments

Comments
 (0)