Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explore tx 3 #1722

Merged
merged 6 commits into from
May 3, 2022
Merged

Explore tx 3 #1722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
554afdf
added tx status and txGas on recent transaction
Jibz1 May 2, 2022
bd44c37
txDatail use getTransactionWithEffects with txmeta success status
Jibz1 May 2, 2022
8dcbeee
prevent empty search add tx update
Jibz1 May 3, 2022
897b7fd
added getExecutionStatusType and ExecutionStatusType
Jibz1 May 3, 2022
dcdbdcd
lint fix
Jibz1 May 3, 2022
38c3141
Move functions to SDK and add type annotations
666lcz May 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions explorer/client/src/components/search/Search.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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