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.
Co-authored-by: Chris Li <[email protected]>
- Loading branch information
Showing
20 changed files
with
2,510 additions
and
1,839 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
61 changes: 61 additions & 0 deletions
61
explorer/client/src/components/transaction-card/RecentTxCard.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,61 @@ | ||
| div.txcardgrid a { | ||
| @apply no-underline text-sky-600 hover:text-sky-900 cursor-pointer break-all; | ||
| } | ||
|
|
||
| div.txcardgrid h3 { | ||
| @apply font-normal leading-3 font-mono text-center; | ||
| } | ||
|
|
||
| div.txcard { | ||
| @apply font-mono md:flex grid items-center bg-center shadow-sm pt-5 pb-5 h-auto border-solid border border-gray-100 pl-5 pr-5 bg-white mt-5 mb-5 text-left; | ||
| } | ||
|
|
||
| div.txcardgridlarge { | ||
| @apply font-mono text-left; | ||
| } | ||
|
|
||
| div.txcardgrid > div { | ||
| @apply block pr-5; | ||
| } | ||
|
|
||
| div.txcardgrid > div:first-child { | ||
| @apply w-full md:w-1/3; | ||
| } | ||
|
|
||
| .txlatestesults { | ||
| @apply w-11/12 md:w-10/12 mx-auto mb-28 mt-10 m-auto; | ||
|
|
||
| max-width: 1200px; | ||
| } | ||
|
|
||
| div.txadd { | ||
| @apply flex md:flex-col flex-row; | ||
| } | ||
|
|
||
| .txheader { | ||
| @apply bg-offblack text-offwhite rounded-none md:h-10 shadow-none !important; | ||
| } | ||
|
|
||
| .txtype { | ||
| @apply md:w-2/12 max-w-sm; | ||
| } | ||
|
|
||
| .txgas { | ||
| @apply md:w-1/12 max-w-sm; | ||
| } | ||
|
|
||
| .txsearch { | ||
| @apply w-full; | ||
| } | ||
|
|
||
| .txsearch form { | ||
| @apply w-full; | ||
| } | ||
|
|
||
| .txsearch input { | ||
| @apply h-16 shadow-sm mr-0 ml-0 rounded-none pl-2 pr-2 border-solid border border-gray-100 text-base; | ||
| } | ||
|
|
||
| .txsearch [type='submit'] { | ||
| @apply md:w-1/12 w-20 bg-offblack text-offwhite hover:text-offblack hover:bg-sui; | ||
| } |
196 changes: 196 additions & 0 deletions
196
explorer/client/src/components/transaction-card/RecentTxCard.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,196 @@ | ||
| // Copyright (c) 2022, Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import cl from 'classnames'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| import Longtext from '../../components/longtext/Longtext'; | ||
| import Search from '../../components/search/Search'; | ||
| import theme from '../../styles/theme.module.css'; | ||
| import { DefaultRpcClient as rpc } from '../../utils/api/DefaultRpcClient'; | ||
| import ErrorResult from '../error-result/ErrorResult'; | ||
|
|
||
| import styles from './RecentTxCard.module.css'; | ||
|
|
||
| const initState = { | ||
| loadState: 'pending', | ||
| lastestTx: [], | ||
| }; | ||
|
|
||
| const getRecentTransactions = async (txNum: number) => { | ||
| try { | ||
| // Get the lastest transactions | ||
| // TODO add batch transaction kind | ||
| // TODO sui.js to get the lastest transactions meta data | ||
| const transactions = await rpc | ||
| .getRecentTransactions(txNum) | ||
| .then((res: any) => res); | ||
| const txLatest = await Promise.all( | ||
| transactions.map(async (tx: any) => { | ||
| // | ||
| const txData = await rpc | ||
| .getTransaction(tx[1]) | ||
| .then((res: any) => res) | ||
| .catch((err: any) => false); | ||
|
|
||
| // For tx with errors or not found | ||
| // return false and skip the transaction | ||
| if (!txData) { | ||
| return false; | ||
| } | ||
| const txKind = Object.keys( | ||
| txData.transaction.data.kind.Single | ||
| )[0]; | ||
|
|
||
| return { | ||
| block: tx[0], | ||
| txId: tx[1], | ||
| // success: txData ? true : false, | ||
| kind: txKind, | ||
| From: txData.transaction.data.sender, | ||
| ...(txKind === 'Transfer' | ||
| ? { | ||
| To: txData.transaction.data.kind.Single.Transfer | ||
| .recipient, | ||
| } | ||
| : {}), | ||
| }; | ||
| }) | ||
| ); | ||
| // Remove failed transactions and sort by block number | ||
| return txLatest | ||
| .filter((itm) => itm) | ||
| .sort((a: any, b: any) => b.block - a.block); | ||
| } catch (error) { | ||
| throw error; | ||
| } | ||
| }; | ||
|
|
||
| function truncate(fullStr: string, strLen: number, separator: string) { | ||
| if (fullStr.length <= strLen) return fullStr; | ||
|
|
||
| separator = separator || '...'; | ||
|
|
||
| const sepLen = separator.length, | ||
| charsToShow = strLen - sepLen, | ||
| frontChars = Math.ceil(charsToShow / 2), | ||
| backChars = Math.floor(charsToShow / 2); | ||
|
|
||
| return ( | ||
| fullStr.substr(0, frontChars) + | ||
| separator + | ||
| fullStr.substr(fullStr.length - backChars) | ||
| ); | ||
| } | ||
|
|
||
| function LastestTxCard() { | ||
| const [isLoaded, setIsLoaded] = useState(false); | ||
| const [results, setResults] = useState(initState); | ||
| useEffect(() => { | ||
| let isMounted = true; | ||
| getRecentTransactions(15) | ||
| .then((resp: any) => { | ||
| if (isMounted) { | ||
| setIsLoaded(true); | ||
| } | ||
| setResults({ | ||
| loadState: 'loaded', | ||
| lastestTx: resp, | ||
| }); | ||
| }) | ||
| .catch((err) => { | ||
| setResults({ | ||
| ...initState, | ||
| }); | ||
| }); | ||
|
|
||
| return () => { | ||
| isMounted = false; | ||
| }; | ||
| }, []); | ||
| if (!isLoaded) { | ||
| return ( | ||
| <div className={theme.textresults}> | ||
| <div className={styles.content}>Loading...</div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if (!isLoaded && results.loadState === 'fail') { | ||
| return ( | ||
| <ErrorResult | ||
| id="lastestTx" | ||
| errorMsg="There was an issue getting the lastest transaction" | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className={styles.txlatestesults}> | ||
| <div className={styles.txcardgrid}> | ||
| <h3>Latest Transaction</h3> | ||
| </div> | ||
| <div className={styles.txsearch}>{isLoaded && <Search />}</div> | ||
| <div className={styles.transactioncard}> | ||
| <div> | ||
| <div | ||
| className={cl( | ||
| styles.txcardgrid, | ||
| styles.txcard, | ||
| styles.txheader | ||
| )} | ||
| > | ||
| <div className={styles.txcardgridlarge}>TxId</div> | ||
| <div className={styles.txtype}>Tx Type</div> | ||
| <div className={styles.txgas}>Gas</div> | ||
| <div className={styles.txadd}>Sender & Reciever</div> | ||
| </div> | ||
| {results.lastestTx.map((tx: any, index: number) => ( | ||
| <div | ||
| key={index} | ||
| className={cl(styles.txcardgrid, styles.txcard)} | ||
| > | ||
| <div className={styles.txcardgridlarge}> | ||
| <div className={styles.txlink}> | ||
| <Longtext | ||
| text={tx.txId} | ||
| category="transactions" | ||
| isLink={true} | ||
| alttext={truncate(tx.txId, 26, '...')} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className={styles.txtype}> {tx.kind}</div> | ||
| <div className={styles.txgas}> 10</div> | ||
| <div className={styles.txadd}> | ||
| <div> | ||
| From: | ||
| <Link | ||
| className={styles.txlink} | ||
| to={'addresses/' + tx.From} | ||
| > | ||
| {truncate(tx.From, 25, '...')} | ||
| </Link> | ||
| </div> | ||
| {tx.To && ( | ||
| <div> | ||
| To : | ||
| <Link | ||
| className={styles.txlink} | ||
| to={'addresses/' + tx.To} | ||
| > | ||
| {truncate(tx.To, 25, '...')} | ||
| </Link> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default LastestTxCard; |
Oops, something went wrong.