forked from MystenLabs/sui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
See list of transactions done by an address (MystenLabs#2276)
* lists transactions sent from/to address * improves wording * lists transactions as clickable links * deduplicate transactions list * creates TxForID component * creates test and static data * adds license * improve error text * improves handling when no to/from field * adds more info on types * refactoring * removes split into transaction groups * displays TxId, TxType and Status for each Tx - note static mode suspended * improves handling when method not defined * stylizes tx table * improves txtype format * enables static mode to show what fail looks like with success * adds from/to * truncates addresses * update tests
- Loading branch information
Showing
12 changed files
with
393 additions
and
83 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
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
37 changes: 37 additions & 0 deletions
37
explorer/client/src/components/transactions-for-id/TxForID.module.css
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,37 @@ | ||
| .txheader { | ||
| @apply hidden bg-offblack text-offwhite py-2; | ||
| } | ||
|
|
||
| .txheader, | ||
| .txrow { | ||
| @apply md:flex; | ||
| } | ||
|
|
||
| .txheader > div, | ||
| .txrow > div { | ||
| @apply md:ml-[2vw]; | ||
| } | ||
|
|
||
| .txid { | ||
| @apply md:w-[35vw]; | ||
| } | ||
|
|
||
| .txtype { | ||
| @apply md:w-[10vw]; | ||
| } | ||
|
|
||
| .txstatus { | ||
| @apply md:w-[5vw]; | ||
| } | ||
|
|
||
| .txadd a { | ||
| @apply no-underline text-sky-600 hover:text-sky-900 cursor-pointer break-all; | ||
| } | ||
|
|
||
| .failure { | ||
| @apply text-red-300; | ||
| } | ||
|
|
||
| .success { | ||
| @apply text-green-400; | ||
| } |
183 changes: 183 additions & 0 deletions
183
explorer/client/src/components/transactions-for-id/TxForID.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,183 @@ | ||
| // Copyright (c) 2022, Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { | ||
| type GetTxnDigestsResponse, | ||
| type ExecutionStatusType, | ||
| type TransactionKindName, | ||
| } from '@mysten/sui.js'; | ||
| import cl from 'classnames'; | ||
| import { useState, useEffect, useContext } from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| import { NetworkContext } from '../../context'; | ||
| import { | ||
| DefaultRpcClient as rpc, | ||
| getDataOnTxDigests, | ||
| } from '../../utils/api/DefaultRpcClient'; | ||
| import { IS_STATIC_ENV } from '../../utils/envUtil'; | ||
| import { deduplicate } from '../../utils/searchUtil'; | ||
| import { findTxfromID, findTxDatafromID } from '../../utils/static/searchUtil'; | ||
| import { truncate } from '../../utils/stringUtils'; | ||
| import ErrorResult from '../error-result/ErrorResult'; | ||
| import Longtext from '../longtext/Longtext'; | ||
|
|
||
| import styles from './TxForID.module.css'; | ||
|
|
||
| const DATATYPE_DEFAULT = { | ||
| loadState: 'pending', | ||
| }; | ||
|
|
||
| type TxnData = { | ||
| seq: number; | ||
| txId: string; | ||
| status: ExecutionStatusType; | ||
| kind: TransactionKindName | undefined; | ||
| From: string; | ||
| To?: string; | ||
| }; | ||
|
|
||
| const getTx = async ( | ||
| id: string, | ||
| network: string, | ||
| category: 'address' | ||
| ): Promise<GetTxnDigestsResponse> => rpc(network).getTransactionsForAddress(id); | ||
|
|
||
| function TxForIDView({ showData }: { showData: TxnData[] | undefined }) { | ||
| if (!showData || showData.length === 0) return <></>; | ||
|
|
||
| return ( | ||
| <> | ||
| <div> | ||
| <div>Transactions</div> | ||
| <div id="tx"> | ||
| <div className={styles.txheader}> | ||
| <div className={styles.txid}>TxId</div> | ||
| <div className={styles.txtype}>TxType</div> | ||
| <div className={styles.txstatus}>Status</div> | ||
| <div className={styles.txadd}>Addresses</div> | ||
| </div> | ||
|
|
||
| {showData.map((x, index) => ( | ||
| <div key={`txid-${index}`} className={styles.txrow}> | ||
| <div className={styles.txid}> | ||
| <Longtext | ||
| text={x.txId} | ||
| category="transactions" | ||
| isLink={true} | ||
| /> | ||
| </div> | ||
| <div className={styles.txtype}>{x.kind}</div> | ||
| <div | ||
| className={cl( | ||
| styles.txstatus, | ||
| styles[x.status.toLowerCase()] | ||
| )} | ||
| > | ||
| {x.status === 'success' ? '\u2714' : '\u2716'} | ||
| </div> | ||
| <div className={styles.txadd}> | ||
| <div> | ||
| From: | ||
| <Link | ||
| className={styles.txlink} | ||
| to={'addresses/' + x.From} | ||
| > | ||
| {truncate(x.From, 14, '...')} | ||
| </Link> | ||
| </div> | ||
| {x.To && ( | ||
| <div> | ||
| To : | ||
| <Link | ||
| className={styles.txlink} | ||
| to={'addresses/' + x.To} | ||
| > | ||
| {truncate(x.To, 14, '...')} | ||
| </Link> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function TxForIDStatic({ id, category }: { id: string; category: 'address' }) { | ||
| const data = deduplicate( | ||
| findTxfromID(id)?.data as [number, string][] | undefined | ||
| ) | ||
| .map((id) => findTxDatafromID(id)) | ||
| .filter((x) => x !== undefined) as TxnData[]; | ||
| if (!data) return <></>; | ||
| return <TxForIDView showData={data} />; | ||
| } | ||
|
|
||
| function TxForIDAPI({ id, category }: { id: string; category: 'address' }) { | ||
| const [showData, setData] = | ||
| useState<{ data?: TxnData[]; loadState: string }>(DATATYPE_DEFAULT); | ||
| const [network] = useContext(NetworkContext); | ||
| useEffect(() => { | ||
| getTx(id, network, category).then((transactions) => { | ||
| //If the API method does not exist, the transactions will be undefined | ||
| if (!transactions?.[0]) { | ||
| setData({ | ||
| loadState: 'loaded', | ||
| }); | ||
| } else { | ||
| getDataOnTxDigests(network, transactions) | ||
| .then((data) => { | ||
| const subData = data.map((el) => ({ | ||
| seq: el!.seq, | ||
| txId: el!.txId, | ||
| status: el!.status, | ||
| kind: el!.kind, | ||
| From: el!.From, | ||
| To: el!.To, | ||
| })); | ||
| setData({ | ||
| data: subData, | ||
| loadState: 'loaded', | ||
| }); | ||
| }) | ||
| .catch((error) => { | ||
| console.log(error); | ||
| setData({ ...DATATYPE_DEFAULT, loadState: 'fail' }); | ||
| }); | ||
| } | ||
| }); | ||
| }, [id, network, category]); | ||
|
|
||
| if (showData.loadState === 'pending') { | ||
| return <div>Loading ...</div>; | ||
| } | ||
|
|
||
| if (showData.loadState === 'loaded') { | ||
| const data = showData.data; | ||
| return <TxForIDView showData={data} />; | ||
| } | ||
|
|
||
| return ( | ||
| <ErrorResult | ||
| id={id} | ||
| errorMsg="Transactions could not be extracted on the following specified ID" | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default function TxForID({ | ||
| id, | ||
| category, | ||
| }: { | ||
| id: string; | ||
| category: 'address'; | ||
| }) { | ||
| return IS_STATIC_ENV ? ( | ||
| <TxForIDStatic id={id} category={category} /> | ||
| ) : ( | ||
| <TxForIDAPI id={id} category={category} /> | ||
| ); | ||
| } |
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
Oops, something went wrong.