Skip to content

Commit

Permalink
Mutated & Created added. Trim search input (MystenLabs#1787)
Browse files Browse the repository at this point in the history 
* Mutated & Created added. Trim search input

* remove comment

* added sui.io to the footer menu
  • Loading branch information
@Jibz1
Jibz1 authored May 4, 2022
1 parent 75a59cd commit 70701b9
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 10 deletions.
1 change: 1 addition & 0 deletions explorer/client/src/components/footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ function Footer() {
<Link to="/" id="homeBtn">
Home
</Link>
<ExternalLink href="https://sui.io/" label="Sui" />
<ExternalLink
href="https://mystenlabs.com/"
label="Mysten Labs"
Expand Down
3 changes: 2 additions & 1 deletion explorer/client/src/components/search/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ function Search() {
// Prevent empty search
if (!input.length) return;
setPleaseWaitMode(true);
navigateWithUnknown(input, navigate).then(() => {
// remove empty char from input
navigateWithUnknown(input.trim(), navigate).then(() => {
setInput('');
setPleaseWaitMode(false);
});
Expand Down
7 changes: 6 additions & 1 deletion explorer/client/src/components/transaction-card/RecentTxCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,14 +141,15 @@ function LatestTxCard() {
.catch((err) => {
setResults({
...initState,
loadState: 'fail',
});
});

return () => {
isMounted = false;
};
}, []);
if (!isLoaded) {
if (results.loadState === 'pending') {
return (
<div className={theme.textresults}>
<div className={styles.content}>Loading...</div>
Expand All @@ -165,6 +166,10 @@ function LatestTxCard() {
);
}

if (results.loadState === 'loaded' && !results.latestTx.length) {
return <ErrorResult id="latestTx" errorMsg="No Transactions Found" />;
}

return (
<div className={styles.txlatestesults}>
<div className={styles.txcardgrid}>
Expand Down
62 changes: 58 additions & 4 deletions explorer/client/src/components/transaction-card/TransactionCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import type {
TransactionData,
TransactionKindName,
ExecutionStatusType,
RawObjectRef,
} from 'sui.js';

import styles from './TransactionCard.module.css';
Expand All @@ -25,6 +26,8 @@ type TxDataProps = CertifiedTransaction & {
status: ExecutionStatusType;
gasFee: number;
txError: string;
mutated: RawObjectRef[];
created: RawObjectRef[];
};

// Generate an Arr of Obj with Label and Value
Expand Down Expand Up @@ -57,7 +60,26 @@ function formatTxResponse(tx: TxDataProps, txId: string) {
label: 'Transactions Signature',
value: tx.tx_signature,
},

...(tx.mutated.length
? [
{
label: 'Mutated',
value: tx.mutated.map((obj) => obj[0]),
list: true,
link: true,
},
]
: []),
...(tx.created.length
? [
{
label: 'Created',
value: tx.created.map((obj) => obj[0]),
list: true,
link: true,
},
]
: []),
{
label: 'Gas Payment',
value: tx.data.gas_payment[0],
Expand Down Expand Up @@ -163,6 +185,8 @@ type Props = {
status: ExecutionStatusType;
gasFee: number;
txError: string;
mutated: RawObjectRef[];
created: RawObjectRef[];
};
};

Expand Down Expand Up @@ -245,9 +269,23 @@ function TransactionCard({ txdata }: Props) {
styles.sublistvalue
}
>
{
{itm.link ? (
<Longtext
text={
sublist
}
category={
itm.category
? itm.category
: 'unknown'
}
isLink={
true
}
/>
) : (
sublist
}
)}
</div>
</div>
</div>
Expand All @@ -262,7 +300,23 @@ function TransactionCard({ txdata }: Props) {
}
key={n}
>
{list}
{itm.link ? (
<Longtext
text={
list
}
category={
itm.category
? itm.category
: 'unknown'
}
isLink={
true
}
/>
) : (
list
)}
</li>
)
)}
Expand Down
22 changes: 18 additions & 4 deletions explorer/client/src/pages/transaction-result/TransactionResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import type {
CertifiedTransaction,
TransactionEffectsResponse,
ExecutionStatusType,
TransactionEffects,
RawObjectRef,
} from 'sui.js';

import styles from './TransactionResult.module.css';
Expand All @@ -30,6 +32,8 @@ type TxnState = CertifiedTransaction & {
status: ExecutionStatusType;
gasFee: number;
txError: string;
mutated: RawObjectRef[];
created: RawObjectRef[];
};
// Todo update state to include Call types
const initState: TxnState = {
Expand All @@ -56,6 +60,8 @@ const initState: TxnState = {
status: 'Success',
gasFee: 0,
txError: '',
mutated: [],
created: [],
};

const useRealData = process.env.REACT_APP_DATA !== 'static';
Expand All @@ -67,9 +73,6 @@ function fetchTransactionData(
if (!txId) {
throw new Error('No Txid found');
}
// add delay to simulate barckend service
// Remove this section in production
// Use Mockdata in dev
if (!useRealData) {
throw new Error('Method not implemented for mock data.');
}
Expand All @@ -82,6 +85,16 @@ function fetchTransactionData(
}
}

const getCreatedOrMutatedData = (
txEffects: TransactionEffects,
contentType: 'created' | 'mutated'
) => {
// Get the first item in the 'created' | 'mutated' array
return contentType in txEffects
? txEffects[contentType].map((itm) => itm[0])
: [];
};

function TransactionResult() {
const { id } = useParams();
const [showTxState, setTxState] = useState(initState);
Expand All @@ -95,7 +108,6 @@ function TransactionResult() {
const executionStatus = txObj.effects.status;
const status = getExecutionStatusType(executionStatus);
const details = getExecutionDetails(executionStatus);

setTxState({
...txObj.certificate,
status,
Expand All @@ -106,6 +118,8 @@ function TransactionResult() {
: '',
txId: id,
loadState: 'loaded',
mutated: getCreatedOrMutatedData(txObj.effects, 'mutated'),
created: getCreatedOrMutatedData(txObj.effects, 'created'),
});
})
.catch((err) => {
Expand Down

0 comments on commit 70701b9

Please sign in to comment.