-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(explorer): transaction details page on /transaction/[requestKey] (…
…#2237) * feat(explorer): transaction details page on /transaction/[requestKey] * chore(explorer): disable @rushstack/no-new-null rule * chore(explorer): allow JSX elements in DataRenderComponent * feat(explorer): render execution and continuation differently * feat(explorer): new features on transaction/[requestKey] page - convert transaction/[requestKey] page to components - add counterpart for crosschain transactions - refactor query to a page specific one * chore(explorer): move transaction-requestkey.graph.ts to src/graphql/pages
- Loading branch information
Showing
14 changed files
with
509 additions
and
206 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@kadena/explorer": patch | ||
| --- | ||
|
|
||
| added transaction/[requestKey] page |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
124 changes: 124 additions & 0 deletions
124
...ges/apps/explorer/src/components/transaction-components/transaction-request-component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import type { TransactionRequestKeyQuery } from '@/__generated__/sdk'; | ||
| import DataRenderComponent from '@/components/data-render-component/data-render-component'; | ||
| import { ifNill } from '@/utils/ifNill'; | ||
| import React from 'react'; | ||
|
|
||
| type Transaction = Omit< | ||
| Exclude<TransactionRequestKeyQuery['transaction'], undefined | null>, | ||
| 'result' | ||
| >; | ||
|
|
||
| export const TransactionRequestComponent: React.FC<{ | ||
| transaction: Transaction; | ||
| }> = ({ transaction }) => { | ||
| return ( | ||
| <> | ||
| {transaction.cmd.payload.__typename === 'ExecutionPayload' ? ( | ||
| // Execution transaction | ||
|
|
||
| <DataRenderComponent | ||
| fields={[ | ||
| { key: 'Request Key (hash)', value: transaction.hash }, | ||
| { | ||
| key: 'Env Data', | ||
| value: JSON.stringify( | ||
| JSON.parse(transaction.cmd.payload.data), | ||
| null, | ||
| 2, | ||
| ), | ||
| }, | ||
| { | ||
| key: 'Code', | ||
| value: JSON.parse(transaction.cmd.payload.code ?? ''), | ||
| }, | ||
| ]} | ||
| /> | ||
| ) : transaction.cmd.payload.__typename === 'ContinuationPayload' ? ( | ||
| // Continuation | ||
|
|
||
| <DataRenderComponent | ||
| fields={[ | ||
| { key: 'Request Key (hash)', value: transaction.hash }, | ||
| { | ||
| key: 'Data', | ||
| value: JSON.stringify( | ||
| JSON.parse(transaction.cmd.payload.data), | ||
| null, | ||
| 2, | ||
| ), | ||
| }, | ||
| { | ||
| key: 'Pact ID', | ||
| value: ifNill(transaction.cmd.payload.pactId, ''), | ||
| }, | ||
| { | ||
| key: 'Proof', | ||
| value: ifNill(transaction.cmd.payload.proof, ''), | ||
| }, | ||
| { | ||
| key: 'Rollback', | ||
| value: JSON.stringify(transaction.cmd.payload.rollback), | ||
| }, | ||
| { | ||
| key: 'Step', | ||
| value: JSON.stringify(transaction.cmd.payload.step), | ||
| }, | ||
| ]} | ||
| /> | ||
| ) : null} | ||
|
|
||
| <DataRenderComponent | ||
| title="General" | ||
| fields={[ | ||
| { key: 'Chain', value: transaction.cmd.meta.chainId }, | ||
| { key: 'Created', value: transaction.cmd.meta.creationTime }, | ||
| { key: 'TTL', value: transaction.cmd.meta.ttl }, | ||
| { | ||
| key: 'Sender', | ||
| value: transaction.cmd.meta.sender, | ||
| link: `/account/${transaction.cmd.meta.sender}`, | ||
| }, | ||
| { key: 'Gas Limit', value: transaction.cmd.meta.gasLimit }, | ||
| { key: 'Gas Price', value: transaction.cmd.meta.gasPrice }, | ||
| { key: 'Nonce', value: transaction.cmd.nonce }, | ||
| ]} | ||
| /> | ||
|
|
||
| <DataRenderComponent | ||
| title="Signers" | ||
| fields={transaction.cmd.signers | ||
| // .sort((a, b) => a.orderIndex - b.orderIndex) | ||
| .map((signer) => [ | ||
| { | ||
| key: 'Public key', | ||
| value: signer.pubkey, | ||
| }, | ||
| { key: 'Scheme', value: signer.scheme ?? '' }, | ||
| { | ||
| key: 'Capabilities', | ||
| value: ( | ||
| <DataRenderComponent | ||
| fields={signer.clist.map((capability) => ({ | ||
| key: capability.name, | ||
| value: ( | ||
| <> | ||
| {(JSON.parse(capability.args) as string[]) | ||
| .map((n, i) => <p key={i}>{JSON.stringify(n)}</p>) | ||
| .flat()} | ||
| </> | ||
| ), | ||
| }))} | ||
| /> | ||
| ), | ||
| }, | ||
| ]) | ||
| .flat()} | ||
| /> | ||
|
|
||
| <DataRenderComponent | ||
| title="Signatures" | ||
| fields={transaction.sigs.map((s) => ({ key: '', value: s.sig }))} | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
164 changes: 164 additions & 0 deletions
164
...ages/apps/explorer/src/components/transaction-components/transaction-result-component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| import type { | ||
| TransactionMempoolInfo, | ||
| TransactionRequestKeyQuery, | ||
| Transfer, | ||
| } from '@/__generated__/sdk'; | ||
| import DataRenderComponent from '@/components/data-render-component/data-render-component'; | ||
| import React, { useEffect } from 'react'; | ||
| import { ifNill } from '../../utils/ifNill'; | ||
|
|
||
| type TransactionResult = Exclude< | ||
| TransactionRequestKeyQuery['transaction'], | ||
| undefined | null | ||
| >['result']; | ||
|
|
||
| export const TransactionResultComponent: React.FC<{ | ||
| transactionResult: TransactionResult; | ||
| }> = ({ transactionResult }) => { | ||
| const [crosschainTransfer, setCrosschainTransfer] = | ||
| React.useState<Transfer>(); | ||
|
|
||
| useEffect(() => { | ||
| if ( | ||
| transactionResult && | ||
| transactionResult.__typename === 'TransactionResult' | ||
| ) { | ||
| const xchainTx = getCrosschainTransfer(transactionResult); | ||
| setCrosschainTransfer(xchainTx); | ||
| } | ||
| }, [transactionResult]); | ||
|
|
||
| if (transactionResult.__typename !== 'TransactionResult') { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <DataRenderComponent | ||
| title="Block" | ||
| fields={[ | ||
| { key: 'Height', value: transactionResult.block.height }, | ||
| { key: 'Hash', value: transactionResult.block.hash }, | ||
| { key: 'Created', value: transactionResult.block.creationTime }, | ||
| ]} | ||
| /> | ||
|
|
||
| {transactionResult.__typename === 'TransactionResult' && | ||
| crosschainTransfer && ( | ||
| <DataRenderComponent | ||
| title="Crosschain Transfer" | ||
| fields={[ | ||
| { | ||
| key: 'Type', | ||
| // note: this might be confusing | ||
| // where the COUNTERPART SENDER is empty, the COUNTERPART is | ||
| // the minting transaction (finisher transaction) | ||
| // That makes the CURRENT transaction the sender | ||
| value: | ||
| getCrosschainTransfer( | ||
| transactionResult, | ||
| ).senderAccount.trim() === '' | ||
| ? 'Initiation transaction' | ||
| : 'Finisher transaction', | ||
| }, | ||
| { | ||
| key: 'Counterpart', | ||
| value: getCrosschainTransfer(transactionResult).requestKey, | ||
| link: `/transaction/${getCrosschainTransfer(transactionResult).requestKey}`, | ||
| }, | ||
| ]} | ||
| /> | ||
| )} | ||
|
|
||
| <DataRenderComponent | ||
| title="Result" | ||
| fields={[ | ||
| { | ||
| key: 'Result', | ||
| value: | ||
| transactionResult.badResult !== null | ||
| ? `Failed: ${ifNill(transactionResult.badResult, '')}` | ||
| : `Success: ${ifNill(transactionResult.goodResult, '')}`, | ||
| }, | ||
| { key: 'Logs', value: transactionResult.logs }, | ||
| { key: 'Gas', value: transactionResult.gas }, | ||
| { key: 'Transaction ID', value: transactionResult.transactionId }, | ||
| { | ||
| key: 'Continuation', | ||
| value: ( | ||
| <DataRenderComponent | ||
| fields={objectToDataRenderComponentFields({ | ||
| ...JSON.parse(transactionResult.continuation ?? ''), | ||
| })} | ||
| /> | ||
| ), | ||
| }, | ||
| { key: 'Metadata', value: transactionResult.metadata }, | ||
| ]} | ||
| /> | ||
|
|
||
| <DataRenderComponent | ||
| title="Events" | ||
| fields={ | ||
| transactionResult.events.edges | ||
| .map( | ||
| (edge) => | ||
| edge && { | ||
| key: edge.node.qualifiedName, | ||
| value: mapParameters(edge.node.parameters), | ||
| }, | ||
| ) | ||
| .filter(Boolean) as { key: string; value: string }[] | ||
| } | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| function mapParameters( | ||
| parameters: string | null | undefined, | ||
| ): string | React.JSX.Element { | ||
| if (!parameters) return ''; | ||
| try { | ||
| return ( | ||
| <> | ||
| {(JSON.parse(parameters) as unknown[]).map((param) => { | ||
| if (typeof param === 'object') { | ||
| // eslint-disable-next-line react/jsx-key | ||
| return <p>{JSON.stringify(param)}</p>; | ||
| } | ||
| if (typeof param === 'string') { | ||
| // eslint-disable-next-line react/jsx-key | ||
| return <p>{param}</p>; | ||
| } | ||
| // eslint-disable-next-line react/jsx-key | ||
| return <p>{JSON.stringify(param)}</p>; | ||
| })} | ||
| </> | ||
| ); | ||
| } catch { | ||
| return parameters; | ||
| } | ||
| } | ||
|
|
||
| function objectToDataRenderComponentFields( | ||
| obj: Record<string, unknown>, | ||
| ): { key: string; value: string }[] { | ||
| return Object.entries(obj).map(([key, value]) => ({ | ||
| key, | ||
| value: JSON.stringify(value), | ||
| })); | ||
| } | ||
|
|
||
| type TransactionMempoolOrResult = Exclude< | ||
| TransactionRequestKeyQuery['transaction'], | ||
| undefined | null | ||
| >['result']; | ||
|
|
||
| type TxResult = Exclude<TransactionMempoolOrResult, TransactionMempoolInfo>; | ||
|
|
||
| function getCrosschainTransfer(transaction: TxResult): Transfer { | ||
| return transaction.transfers.edges.find( | ||
| (edge) => edge?.node.crossChainTransfer !== null, | ||
| )?.node.crossChainTransfer as Transfer; | ||
| } |
Oops, something went wrong.