Skip to content

Commit 2157d93

Browse files
Quint-SQuint-S
committed
json format and base address id
1 parent fd0b436 commit 2157d93

File tree

6 files changed

+79
-14
lines changed

6 files changed

+79
-14
lines changed

‎package-lock.json‎

Lines changed: 13 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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"react": "^18.3.1",
2121
"react-dom": "^18.3.1",
2222
"react-helmet-async": "^2.0.5",
23+
"react-json-view-lite": "^2.3.0",
2324
"react-router-dom": "^7.1.1",
2425
"styled-components": "^6.1.14",
2526
"three": "^0.172.0"

‎src/components/extrinsics/EthereumTransfer.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import { gql, useQuery } from '@apollo/client'
22
import React from "react";
33
import {TerminalLoading} from "../TerminalLoading.tsx";
4-
import { DetailRow} from "../../pages/AccountDetails.tsx";
4+
import {DetailLabel, DetailRow, DetailValue} from "../../pages/AccountDetails.tsx";
55

66
interface ExtrinsicEventsProps {
77
extrinsicId: string;
88
}
99
export const GET_LAST_EVM_EVENT = gql`
1010
query GetLastEVMEvent($blockNumber: BigFloat!, $extrinsicId: Int!) {
11-
events(last: 1, filter: {and: {blockNumber: {equalTo: $blockNumber}, extrinsicId: {equalTo: $extrinsicId}}}) {
11+
events(filter: {and: {blockNumber: {equalTo: $blockNumber}, extrinsicId: {equalTo: $extrinsicId}}}) {
1212
nodes{
1313
data
14+
eventName
1415
}
1516
}
1617
}
@@ -22,18 +23,18 @@ export const EthereumTransfer: React.FC<ExtrinsicEventsProps> = ({ extrinsicId }
2223
blockNumber: extrinsicId.split('-')[0],
2324
extrinsicId: parseInt(extrinsicId.split('-')[1] || '0')
2425
}});
26+
const executed = data && JSON.parse(data.events.nodes.find((event: { eventName: string; }) => { return event.eventName === 'Executed'}).data)[0];
2527

2628
return (
2729
<>
2830
{loading && <DetailRow><TerminalLoading /></DetailRow>}
2931
{error && <div>Error: {error.message}</div>}
3032

31-
{data && JSON.stringify(JSON.parse(data.events.nodes[0].data)[0])
32-
// JSON.parse(data.events.nodes[0].data)[0] && (
33-
// <DetailRow>
34-
// <DetailLabel>Transfer to Base:</DetailLabel>
35-
// <DetailValue><a target={'_blank'} href={`https://basescan.org/address/${JSON.parse(data.events.nodes[0].data)[0]}`}>{JSON.parse(data.events.nodes[0].data)[0]}</a></DetailValue>
36-
// </DetailRow>
33+
{executed && (
34+
<DetailRow>
35+
<DetailLabel>Transfer to Base:</DetailLabel>
36+
<DetailValue><a target={'_blank'} href={`https://basescan.org/address/${executed}`}>{executed}↗</a></DetailValue>
37+
</DetailRow>)
3738
}
3839
</>
3940
)

‎src/index.css‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,13 @@ pre {
152152
font-family: pixelfont;
153153
src: url('/fonts/IBM/WebPlus_IBM_VGA_8x16.woff');
154154
}
155-
156-
157-
155+
.json-container {
156+
/*max-width: 50%;*/
157+
/*word-wrap: br;*/
158+
}
159+
.collapse-icon::before {
160+
content: '- ';
161+
}
162+
.expand-icon::before {
163+
content: '+ ';
164+
}

‎src/pages/ExtrinsicDetails.tsx‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { DetailLabel } from './AccountDetails.tsx'
99
import { DetailRow } from './AccountDetails.tsx'
1010
import { ExtrinsicEvents } from './ExtrinsicEvents.tsx';
1111
import { Helmet } from 'react-helmet-async';
12+
import {JsonView} from "react-json-view-lite";
13+
import {EthereumTransfer} from "../components/extrinsics/EthereumTransfer.tsx";
1214

1315
export const GET_EXTRINSIC = gql`
1416
query GetExtrinsic($id: String!) {
@@ -109,7 +111,7 @@ export const ExtrinsicDetails = () => {
109111
<DetailLabel>Method:</DetailLabel>
110112
<DetailValue>{extrinsic.method}</DetailValue>
111113
</DetailRow>
112-
{/*{extrinsic.module === 'ethereum' && <EthereumTransfer extrinsicId={extrinsic.id} />}*/}
114+
{extrinsic.module === 'ethereum' && <EthereumTransfer extrinsicId={extrinsic.id} />}
113115
<DetailRow>
114116
<DetailLabel>Signer:</DetailLabel>
115117
<DetailValue>{extrinsic.signer} <CopyButton textToCopy={extrinsic.signer}/></DetailValue>
@@ -124,7 +126,28 @@ export const ExtrinsicDetails = () => {
124126
</DetailRow>
125127
<DetailRow>
126128
<DetailLabel>Arguments:</DetailLabel>
127-
<DetailValue>{extrinsic.args}</DetailValue>
129+
<DetailValue><JsonView clickToExpandNode={true} shouldExpandNode={(level, number) => {
130+
return !(level > 1)
131+
}}
132+
data={JSON.parse(extrinsic.args)} style={{
133+
"container": "break-all",
134+
"basicChildStyle": "_basic-element-style_78paz_55",
135+
"childFieldsContainer": "pl-5",
136+
"label": "text-blue-400",
137+
"clickableLabel": "cursor-pointer text-blue-300",
138+
"nullValue": "_value-null-light_78paz_82",
139+
"undefinedValue": "_value-undefined-light_78paz_86",
140+
"stringValue": "_value-string-light_78paz_90",
141+
"booleanValue": "_value-boolean-light_78paz_98",
142+
"numberValue": "_value-number-light_78paz_94",
143+
"otherValue": "_value-other-light_78paz_102",
144+
"punctuation": "_punctuation-light_78paz_77 _punctuation-base_78paz_12",
145+
"collapseIcon": "collapse-icon",
146+
"expandIcon": "expand-icon",
147+
"collapsedContent": "_collapsed-content-light_78paz_118 _collapsed-content-base_78paz_40 _pointer_78paz_21",
148+
"noQuotesForStringValues": false,
149+
"quotesForFieldNames": false
150+
}}/></DetailValue>
128151
</DetailRow>
129152

130153
<TerminalTabs

‎src/pages/ExtrinsicEvents.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {useParams} from 'react-router-dom'
33
import { TerminalLoading } from '../components/TerminalLoading.tsx'
44
import {DataTable} from "../components/DataTable.tsx";
55
import React from "react";
6+
import {JsonView} from "react-json-view-lite";
67

78
const GET_EXTRINSIC_EVENTS = gql`
89
query GetExtrinsicEvents($blockNumber: BigFloat!, $extrinsicId: Int!) {
@@ -45,7 +46,26 @@ export const ExtrinsicEvents: React.FC<ExtrinsicEventsProps> = ({ extrinsicId })
4546
data: string;
4647
id: string; blockNumber: string; module: string; eventName: string; }) => {
4748
return {
48-
id: event.id, data: [event.id, `${event.module}::${event.eventName}`, event.data
49+
id: event.id, data: [event.id, `${event.module}::${event.eventName}`, <JsonView data={JSON.parse(event.data)} shouldExpandNode={()=> false}
50+
style={{
51+
"container": "break-all text-left",
52+
"basicChildStyle": "pl-5",
53+
"childFieldsContainer": "_child-fields-container_78paz_60",
54+
"label": "text-blue-400",
55+
"clickableLabel": "cursor-pointer text-blue-300",
56+
"nullValue": "_value-null-light_78paz_82",
57+
"undefinedValue": "_value-undefined-light_78paz_86",
58+
"stringValue": "_value-string-light_78paz_90",
59+
"booleanValue": "_value-boolean-light_78paz_98",
60+
"numberValue": "_value-number-light_78paz_94",
61+
"otherValue": "_value-other-light_78paz_102",
62+
"punctuation": "_punctuation-light_78paz_77 _punctuation-base_78paz_12",
63+
"collapseIcon": "collapse-icon",
64+
"expandIcon": "expand-icon",
65+
"collapsedContent": "_collapsed-content-light_78paz_118 _collapsed-content-base_78paz_40 _pointer_78paz_21",
66+
"noQuotesForStringValues": false,
67+
"quotesForFieldNames": false
68+
}}/>
4969
]
5070
}
5171
})}/>}

0 commit comments

Comments
 (0)