Skip to content

Commit

Permalink
Explore tx 3 (MystenLabs#1722)
Browse files Browse the repository at this point in the history 
Co-authored-by: Chris Li <[email protected]>
  • Loading branch information
@Jibz1 @666lcz
Jibz1 and 666lcz authored May 3, 2022
1 parent b3ed156 commit aa913e7
Show file tree
Hide file tree
Showing 8 changed files with 260 additions and 88 deletions.
2 changes: 2 additions & 0 deletions explorer/client/src/components/search/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ function Search() {
const handleSubmit = useCallback(
(e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// Prevent empty search
if (!input.length) return;
setPleaseWaitMode(true);
navigateWithUnknown(input, navigate).then(() => {
setInput('');
Expand Down
16 changes: 12 additions & 4 deletions explorer/client/src/components/transaction-card/RecentTxCard.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ div.txcardgridlarge {
}

div.txcardgrid > div {
@apply block pr-5;
@apply block;
}

div.txcardgrid > div:first-child {
Expand All @@ -33,7 +33,7 @@ div.txadd {
}

.txheader {
@apply bg-offblack text-offwhite rounded-none md:h-10 shadow-none !important;
@apply bg-offblack text-offwhite rounded-none md:h-10 shadow-none md:flex hidden !important;
}

.txtype {
Expand All @@ -53,9 +53,17 @@ div.txadd {
}

.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;
@apply 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;
@apply md:w-1/12 w-20 bg-offblack text-offwhite hover:text-offblack hover:bg-sui h-16 shadow-sm border-solid border border-gray-100;
}

.failure {
@apply text-red-300;
}

.success {
@apply text-green-400;
}
67 changes: 50 additions & 17 deletions explorer/client/src/components/transaction-card/RecentTxCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
getSingleTransactionKind,
getTransactionKind,
getTransferTransaction,
getExecutionStatusType,
getTotalGasUsed,
} from 'sui.js';

import Longtext from '../../components/longtext/Longtext';
Expand All @@ -16,28 +18,47 @@ import theme from '../../styles/theme.module.css';
import { DefaultRpcClient as rpc } from '../../utils/api/DefaultRpcClient';
import ErrorResult from '../error-result/ErrorResult';

import type { CertifiedTransaction, GetTxnDigestsResponse } from 'sui.js';
import type {
CertifiedTransaction,
GetTxnDigestsResponse,
TransactionEffectsResponse,
ExecutionStatusType,
TransactionKindName,
} from 'sui.js';

import styles from './RecentTxCard.module.css';

const initState = {
const initState: { loadState: string; latestTx: TxnData[] } = {
loadState: 'pending',
latestTx: [],
};

const getRecentTransactions = async (txNum: number) => {
type TxnData = {
To?: string;
seq: number;
txId: string;
status: ExecutionStatusType;
txGas: number;
kind: TransactionKindName | undefined;
From: string;
};

async function getRecentTransactions(txNum: number): Promise<TxnData[]> {
try {
// Get the latest transactions
// TODO add batch transaction kind
// TODO add batch transaction kind TransactionDigest
// TODO sui.js to get the latest transactions meta data
const transactions = await rpc
.getRecentTransactions(txNum)
.then((res: GetTxnDigestsResponse) => res);

const txLatest = await Promise.all(
transactions.map(async (tx) => {
const [seq, digest] = tx;
return await rpc
.getTransaction(tx[1])
.then((res: CertifiedTransaction) => {
.getTransactionWithEffects(digest)
.then((txEff: TransactionEffectsResponse) => {
const res: CertifiedTransaction = txEff.certificate;
const singleTransaction = getSingleTransactionKind(
res.data
);
Expand All @@ -52,9 +73,12 @@ const getRecentTransactions = async (txNum: number) => {
)?.recipient;

return {
block: tx[0],
txId: tx[1],
// success: txData ? true : false,
seq,
txId: digest,
status: getExecutionStatusType(
txEff.effects.status
),
txGas: getTotalGasUsed(txEff.effects.status),
kind: txKind,
From: res.data.sender,
...(recipient
Expand All @@ -67,21 +91,21 @@ const getRecentTransactions = async (txNum: number) => {
.catch((err) => {
console.error(
'Failed to get transaction details for txn digest',
tx[1],
digest,
err
);
return false;
return null;
});
})
);
// Remove failed transactions and sort by block number
// Remove failed transactions and sort by sequence number
return txLatest
.filter((itm) => itm)
.sort((a: any, b: any) => b.block - a.block);
.sort((a, b) => b!.seq - a!.seq) as TxnData[];
} catch (error) {
throw error;
}
};
}

function truncate(fullStr: string, strLen: number, separator: string) {
if (fullStr.length <= strLen) return fullStr;
Expand Down Expand Up @@ -158,11 +182,12 @@ function LatestTxCard() {
)}
>
<div className={styles.txcardgridlarge}>TxId</div>
<div className={styles.txtype}>Tx Type</div>
<div className={styles.txtype}>TxType</div>
<div className={styles.txgas}>Status</div>
<div className={styles.txgas}>Gas</div>
<div className={styles.txadd}>Sender & Receiver</div>
</div>
{results.latestTx.map((tx: any, index: number) => (
{results.latestTx.map((tx, index) => (
<div
key={index}
className={cl(styles.txcardgrid, styles.txcard)}
Expand All @@ -178,7 +203,15 @@ function LatestTxCard() {
</div>
</div>
<div className={styles.txtype}> {tx.kind}</div>
<div className={styles.txgas}> 10</div>
<div
className={cl(
styles[tx.status.toLowerCase()],
styles.txgas
)}
>
{tx.status === 'Success' ? '✔' : '✖'}
</div>
<div className={styles.txgas}>{tx.txGas}</div>
<div className={styles.txadd}>
<div>
From:
Expand Down
16 changes: 10 additions & 6 deletions explorer/client/src/components/transaction-card/TransactionCard.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ div.columnheader > div {
}

div.txcardgrid {
@apply grid md:grid-cols-3 sm:grid-cols-1 gap-2 border-0 pt-3 pb-3 pl-8 pr-8 items-center;
@apply grid md:grid-cols-3 sm:grid-cols-1 gap-2 border-0 pt-3 pb-3 md:pl-8 md:pr-8 pl-4 pr-4 items-center;
}

div.txcardgrid:nth-child(2n + 1) {
@apply bg-[#f6f6f6];
}

div.txcardgrid:first-child {
@apply bg-offblack rounded-none items-center pt-5 pb-5 font-black shadow-md border-2 border-coolGray-400 h-10;
@apply bg-offblack rounded-none items-center pt-5 pb-5 font-black shadow-md border-2 border-coolGray-400;
}

div.txcardgrid > div:first-child {
Expand All @@ -33,11 +33,11 @@ div.txcardgridlarge {
}

div.status-success {
@apply text-sui;
@apply text-green-600;
}

div.status-fail {
@apply bg-red-300;
@apply text-red-300;
}

div.status-pending {
Expand All @@ -53,7 +53,7 @@ div.action-mutate {
}

div.grouped {
@apply border-transparent;
@apply border-transparent !important;
}

ul.listitems {
Expand All @@ -69,5 +69,9 @@ ul.listitems {
}

.listitems .sublist {
@apply mt-2 list-none p-0;
@apply mt-2 list-none p-0 md:flex grid gap-2 pr-0;
}

div.sublist .sublistlabel {
@apply w-28 flex-none;
}
Loading

0 comments on commit aa913e7

Please sign in to comment.