Skip to content

Commit c5bbd68

Browse files
anastasiarodsanastasiarods
authored
Add error messages (#204)
1 parent 6f66198 commit c5bbd68

File tree

6 files changed

+73
-58
lines changed

6 files changed

+73
-58
lines changed

‎apps/web/src/app/contract/[contract]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ async function getListOfDecodedTransactions(
1818
const txs = await getTransactions(1, contract)
1919
const decodedTxs = await Promise.all(txs.map(({ hash }) => decodeTransaction({ hash, chainID: chainID })))
2020

21-
return decodedTxs
21+
return decodedTxs.map(({ decoded }) => decoded)
2222
} catch (e) {
2323
console.error(e)
2424
return []

‎apps/web/src/app/decode/[chainID]/[hash]/form.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,12 @@ interface FormProps {
1313
chainID: number
1414
decoded?: DecodedTransaction
1515
currentHash?: string
16+
error?: string
1617
}
1718

1819
const PATH = 'decode'
1920

20-
export default function DecodingForm({ decoded, currentHash, chainID }: FormProps) {
21+
export default function DecodingForm({ decoded, currentHash, chainID, error }: FormProps) {
2122
const router = useRouter()
2223

2324
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -56,9 +57,13 @@ export default function DecodingForm({ decoded, currentHash, chainID }: FormProp
5657
</form>
5758

5859
<div className="grid gap-6 h-full">
59-
<div className="flex flex-col gap-2 min-h-[40vh] lg:min-h-[initial]">
60+
<div className="flex flex-col gap-2 min-h-[40vh] lg:min-h-[initial]">
6061
<Label>Decoded transaction:</Label>
61-
<CodeBlock language="json" value={JSON.stringify(decoded, null, 2)} readonly={true} lineNumbers={false} />
62+
{error ? (
63+
<div className="text-red-500 p-4 bg-red-50 rounded-md whitespace-pre-line">{error}</div>
64+
) : (
65+
<CodeBlock language="json" value={JSON.stringify(decoded, null, 2)} readonly={true} lineNumbers={false} />
66+
)}
6267
</div>
6368
</div>
6469
</div>

‎apps/web/src/app/decode/[chainID]/[hash]/page.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@ import DecodingForm from './form'
33
import { decodeTransaction } from '@/lib/decode'
44

55
export default async function TransactionPage({ params }: { params: { hash: string; chainID: number } }) {
6-
const decoded = await decodeTransaction({
6+
const result = await decodeTransaction({
77
hash: params.hash,
88
chainID: params.chainID,
99
})
1010

11-
if (!decoded || !decoded.toAddress) {
12-
return <DecodingForm currentHash={params.hash} chainID={params.chainID} />
13-
}
14-
15-
return <DecodingForm decoded={decoded} currentHash={params.hash} chainID={params.chainID} />
11+
return (
12+
<DecodingForm decoded={result.decoded} error={result.error} currentHash={params.hash} chainID={params.chainID} />
13+
)
1614
}

‎apps/web/src/app/interpret/[chainID]/[hash]/form.tsx‎

Lines changed: 43 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,12 @@ interface FormProps {
1818
chainID: number
1919
decoded?: DecodedTransaction
2020
currentHash?: string
21+
error?: string
2122
}
2223

2324
const PATH = 'interpret'
2425

25-
export default function DecodingForm({ decoded, currentHash, chainID }: FormProps) {
26+
export default function DecodingForm({ decoded, currentHash, chainID, error }: FormProps) {
2627
const [result, setResult] = React.useState<Interpretation>()
2728
const [persistedSchema, setSchema] = useLocalStorage(decoded?.toAddress ?? 'unknown', '')
2829

@@ -109,47 +110,51 @@ export default function DecodingForm({ decoded, currentHash, chainID }: FormProp
109110
</div>
110111
</form>
111112

112-
<div className="grid gap-6 grid-cols-1 lg:grid-cols-2 h-full">
113-
<div className="flex flex-col gap-2 lg:col-span-2 min-h-[40vh] lg:min-h-[initial]">
114-
<Label>
115-
Interpretation:{' '}
116-
<a
117-
href={interpreterSourceLink}
118-
target="_blank"
119-
rel="noopener noreferrer"
120-
className="text-xs text-blue-500 hover:underline"
121-
>
122-
(Source Code)
123-
</a>
124-
</Label>
125-
126-
<CodeBlock
127-
language="javascript"
128-
value={schema ?? ''}
129-
onChange={(value) => setSchema(value)}
130-
lineNumbers={true}
131-
readonly={false}
132-
/>
133-
</div>
134-
135-
<div className="flex flex-col gap-2 min-h-[40vh] lg:min-h-[initial]">
136-
<Label>Decoded transaction:</Label>
137-
<CodeBlock language="json" value={JSON.stringify(decoded, null, 2)} readonly={true} lineNumbers={false} />
138-
</div>
113+
{error ? (
114+
<div className="text-red-500 p-4 bg-red-50 rounded-md whitespace-pre-line">{error}</div>
115+
) : (
116+
<div className="grid gap-6 grid-cols-1 lg:grid-cols-2 h-full">
117+
<div className="flex flex-col gap-2 lg:col-span-2 min-h-[40vh] lg:min-h-[initial]">
118+
<Label>
119+
Interpretation:{' '}
120+
<a
121+
href={interpreterSourceLink}
122+
target="_blank"
123+
rel="noopener noreferrer"
124+
className="text-xs text-blue-500 hover:underline"
125+
>
126+
(Source Code)
127+
</a>
128+
</Label>
129+
130+
<CodeBlock
131+
language="javascript"
132+
value={schema ?? ''}
133+
onChange={(value) => setSchema(value)}
134+
lineNumbers={true}
135+
readonly={false}
136+
/>
137+
</div>
139138

140-
<div className="flex flex-col gap-2 min-h-[40vh] lg:min-h-[initial]">
141-
<div className="flex flex-row justify-between items-center">
142-
<Label>Result:</Label>
139+
<div className="flex flex-col gap-2 min-h-[40vh] lg:min-h-[initial]">
140+
<Label>Decoded transaction:</Label>
141+
<CodeBlock language="json" value={JSON.stringify(decoded, null, 2)} readonly={true} lineNumbers={false} />
143142
</div>
144143

145-
<CodeBlock
146-
language="json"
147-
value={result?.error ? result?.error : JSON.stringify(result?.interpretation, null, 2)}
148-
readonly={true}
149-
lineNumbers={false}
150-
/>
144+
<div className="flex flex-col gap-2 min-h-[40vh] lg:min-h-[initial]">
145+
<div className="flex flex-row justify-between items-center">
146+
<Label>Result:</Label>
147+
</div>
148+
149+
<CodeBlock
150+
language="json"
151+
value={result?.error ? result?.error : JSON.stringify(result?.interpretation, null, 2)}
152+
readonly={true}
153+
lineNumbers={false}
154+
/>
155+
</div>
151156
</div>
152-
</div>
157+
)}
153158
</div>
154159

155160
<div className="md:order-2">

‎apps/web/src/app/interpret/[chainID]/[hash]/page.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@ import DecodingForm from './form'
33
import { decodeTransaction } from '@/lib/decode'
44

55
export default async function TransactionPage({ params }: { params: { hash: string; chainID: number } }) {
6-
const decoded = await decodeTransaction({
6+
const result = await decodeTransaction({
77
hash: params.hash,
88
chainID: params.chainID,
99
})
1010

11-
if (!decoded || !decoded.toAddress) {
12-
return <DecodingForm currentHash={params.hash} chainID={params.chainID} />
13-
}
14-
15-
return <DecodingForm decoded={decoded} currentHash={params.hash} chainID={params.chainID} />
11+
return (
12+
<DecodingForm decoded={result.decoded} error={result.error} currentHash={params.hash} chainID={params.chainID} />
13+
)
1614
}

‎apps/web/src/lib/decode.ts‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,18 @@ const MainLayer = Layer.provideMerge(LoadersLayer, DataLayer) as Layer.Layer<
7272

7373
const runtime = ManagedRuntime.make(Layer.provide(MainLayer, CacheLayer))
7474

75+
interface DecodeTransactionResult {
76+
decoded?: DecodedTransaction
77+
error?: string
78+
}
79+
7580
export async function decodeTransaction({
7681
chainID,
7782
hash,
7883
}: {
7984
chainID: number
8085
hash: string
81-
}): Promise<DecodedTransaction | undefined> {
86+
}): Promise<DecodeTransactionResult> {
8287
// NOTE: For unknonw reason the context of main layer is still missing the SqlClient in the type
8388
const runnable = decodeTransactionByHash(hash as Hex, chainID)
8489

@@ -88,12 +93,16 @@ export async function decodeTransaction({
8893
const result = await runtime.runPromise(runnable)
8994
const endTime = performance.now()
9095
console.log(`Decode transaction took ${endTime - startTime}ms`)
91-
return result
96+
return { decoded: result }
9297
} catch (error: unknown) {
9398
const endTime = performance.now()
94-
console.error('Decode error', JSON.stringify(error, null, 2))
99+
const message = error instanceof Error ? JSON.parse(error.message) : 'Failed to decode transaction'
100+
console.log(message)
95101
console.log(`Failed decode transaction took ${endTime - startTime}ms`)
96-
return undefined
102+
return {
103+
error:
104+
'Transaction decoding failed. Please check if you have selected the correct chain. \n\n Note that this is a demo playground and we may not be able to retrieve the data for this particular transaction or contract with our test Data Loaders.',
105+
}
97106
}
98107
}
99108

0 commit comments

Comments
 (0)