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.
search result page added (MystenLabs#2434)
* search result added * remove unnecessary search filter code
- Loading branch information
Showing
5 changed files
with
223 additions
and
95 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
24 changes: 24 additions & 0 deletions
24
explorer/client/src/pages/search-result/SearchResult.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,24 @@ | ||
| .searchresult { | ||
| @apply w-11/12 md:w-10/12 mx-auto mb-28 mt-10 m-auto; | ||
|
|
||
| max-width: 1200px; | ||
| margin-bottom: 2rem; | ||
| } | ||
|
|
||
| .searchresult h3 { | ||
| @apply font-normal leading-3 font-mono text-center break-words; | ||
|
|
||
| line-height: 150%; | ||
| } | ||
|
|
||
| .searchitem { | ||
| @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 md:justify-around; | ||
| } | ||
|
|
||
| strong { | ||
| @apply font-bold; | ||
| } | ||
|
|
||
| .textcenter { | ||
| @apply text-center; | ||
| } |
152 changes: 152 additions & 0 deletions
152
explorer/client/src/pages/search-result/SearchResult.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,152 @@ | ||
| // Copyright (c) 2022, Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { isValidTransactionDigest, isValidSuiAddress } from '@mysten/sui.js'; | ||
| import { useEffect, useState, useContext } from 'react'; | ||
| import { useParams } from 'react-router-dom'; | ||
|
|
||
| import ErrorResult from '../../components/error-result/ErrorResult'; | ||
| import Longtext from '../../components/longtext/Longtext'; | ||
| import { NetworkContext } from '../../context'; | ||
| import theme from '../../styles/theme.module.css'; | ||
| import { | ||
| DefaultRpcClient as rpc, | ||
| type Network, | ||
| } from '../../utils/api/DefaultRpcClient'; | ||
| import { isGenesisLibAddress } from '../../utils/api/searchUtil'; | ||
|
|
||
| import styles from './SearchResult.module.css'; | ||
|
|
||
| type SearchDataType = { | ||
| resultdata: any[]; | ||
| loadState?: 'loaded' | 'pending' | 'fail'; | ||
| }; | ||
|
|
||
| const initState: SearchDataType = { | ||
| loadState: 'pending', | ||
| resultdata: [], | ||
| }; | ||
|
|
||
| const querySearchParams = async (input: string, network: Network | string) => { | ||
| let searchPromises = []; | ||
| if (isValidTransactionDigest(input)) { | ||
| searchPromises.push( | ||
| rpc(network) | ||
| .getTransactionWithEffects(input) | ||
| .then((data) => [ | ||
| { | ||
| category: 'transactions', | ||
| data: data, | ||
| }, | ||
| ]) | ||
| ); | ||
| } else if (isValidSuiAddress(input) || isGenesisLibAddress(input)) { | ||
| const addrObjPromise = Promise.allSettled([ | ||
| rpc(network) | ||
| .getObjectsOwnedByAddress(input) | ||
| .then((data) => { | ||
| if (data.length <= 0) | ||
| throw new Error('No objects for Address'); | ||
|
|
||
| return { | ||
| category: 'addresses', | ||
| data: data, | ||
| }; | ||
| }), | ||
| rpc(network) | ||
| .getObject(input) | ||
| .then((data) => { | ||
| if (data.status !== 'Exists') { | ||
| throw new Error('no object found'); | ||
| } | ||
| return { | ||
| category: 'objects', | ||
| data: data, | ||
| }; | ||
| }), | ||
| ]).then((results) => { | ||
| // return only the successful results | ||
| const searchResult = results | ||
| .filter((result: any) => result.status === 'fulfilled') | ||
| .map((data: any) => data.value); | ||
| return searchResult; | ||
| }); | ||
| searchPromises.push(addrObjPromise); | ||
| } | ||
| return Promise.any(searchPromises); | ||
| }; | ||
|
|
||
| function SearchResult() { | ||
| const { id } = useParams(); | ||
| const [network] = useContext(NetworkContext); | ||
| const [resultData, setResultData] = useState(initState); | ||
| useEffect(() => { | ||
| if (id == null) { | ||
| return; | ||
| } | ||
| querySearchParams(id, network) | ||
| .then((data: any) => { | ||
| setResultData({ | ||
| resultdata: [...data], | ||
| loadState: 'loaded', | ||
| }); | ||
| }) | ||
| .catch((error) => { | ||
| setResultData({ | ||
| loadState: 'fail', | ||
| resultdata: [], | ||
| }); | ||
| }); | ||
| }, [id, network]); | ||
|
|
||
| if (resultData.loadState === 'pending') { | ||
| return ( | ||
| <div className={theme.textresults}> | ||
| <div className={styles.textcenter}>Loading...</div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if ( | ||
| resultData.loadState === 'fail' || | ||
| resultData.resultdata.length === 0 || | ||
| !id | ||
| ) { | ||
| return ( | ||
| <ErrorResult | ||
| id={id} | ||
| errorMsg={ | ||
| id | ||
| ? 'ID not a valid string' | ||
| : 'Data on the following query could not be found' | ||
| } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div id="resultview" className={styles.searchresult}> | ||
| <div className={styles.result_header}> | ||
| <h3> | ||
| Search Result for <strong>{id}</strong> | ||
| </h3> | ||
| </div> | ||
| {resultData.resultdata.map((itm: any, index: number) => ( | ||
| <div key={index} className={styles.searchitem}> | ||
| <div> | ||
| Query type: <strong>{itm.category}</strong> | ||
| </div> | ||
| <div> | ||
| <Longtext | ||
| text={id} | ||
| category={itm.category} | ||
| isLink={true} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default SearchResult; |
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