mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
zeekay
da79f9e711
- Rename all @blockscout/* npm packages to @luxfi/* aliases (150+ files) - Override blue accent colors to gray for monochrome theme - Fix dropdown/menu/popover fonts to use Geist Sans - Change Latest Blocks to horizontal scrolling layout - Show dashes instead of zeros for validator stats on error - Fix GHA deploy step to use correct deployment name
115 lines
4.1 KiB
TypeScript
115 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
|
|
import type { InterchainMessage } from '@luxfi/interchain-indexer-types';
|
|
|
|
import config from 'configs/app';
|
|
import { mdash } from 'toolkit/utils/htmlEntities';
|
|
import * as DetailedInfoItemBreakdown from 'ui/shared/DetailedInfo/DetailedInfoItemBreakdown';
|
|
import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
|
|
import AddressEntityInterchain from 'ui/shared/entities/address/AddressEntityInterchain';
|
|
import CrossChainMessageEntity from 'ui/shared/entities/crossChainMessage/CrossChainMessageEntity';
|
|
import TxEntityInterchain from 'ui/shared/entities/tx/TxEntityInterchain';
|
|
import ChainLabel from 'ui/shared/externalChains/ChainLabel';
|
|
import CrossChainTxsStatusTag from 'ui/shared/statusTag/CrossChainTxsStatusTag';
|
|
|
|
interface Props {
|
|
data: InterchainMessage;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
const TxDetailsCrossChainMessage = ({ data, isLoading }: Props) => {
|
|
|
|
return (
|
|
<div>
|
|
<CrossChainMessageEntity id={ data.message_id } isLoading={ isLoading }/>
|
|
<DetailedInfoItemBreakdown.Container loading={ isLoading }>
|
|
<DetailedInfoItemBreakdown.Row
|
|
label="Timestamp"
|
|
>
|
|
<DetailedInfoTimestamp
|
|
timestamp={ data.receive_timestamp || data.send_timestamp }
|
|
isLoading={ isLoading }
|
|
/>
|
|
</DetailedInfoItemBreakdown.Row>
|
|
<DetailedInfoItemBreakdown.Row
|
|
label="Status"
|
|
>
|
|
<CrossChainTxsStatusTag status={ data.status } loading={ isLoading } mode="full"/>
|
|
</DetailedInfoItemBreakdown.Row>
|
|
{ data.source_chain && data.source_chain?.id !== config.chain.id && (
|
|
<DetailedInfoItemBreakdown.Row
|
|
label="Source chain"
|
|
>
|
|
<ChainLabel
|
|
data={ data.source_chain }
|
|
isLoading={ isLoading }
|
|
fallback={ <span className="text-[var(--color-text-secondary)]">{ mdash }</span> }
|
|
/>
|
|
</DetailedInfoItemBreakdown.Row>
|
|
) }
|
|
{ data.source_transaction_hash && data.source_chain && data.source_chain?.id !== config.chain.id && (
|
|
<DetailedInfoItemBreakdown.Row
|
|
label="Source tx"
|
|
>
|
|
<TxEntityInterchain
|
|
chain={ data.source_chain }
|
|
hash={ data.source_transaction_hash }
|
|
isLoading={ isLoading }
|
|
noIcon
|
|
/>
|
|
</DetailedInfoItemBreakdown.Row>
|
|
) }
|
|
{ data.destination_chain && data.destination_chain?.id !== config.chain.id && (
|
|
<DetailedInfoItemBreakdown.Row
|
|
label="Destination chain"
|
|
>
|
|
<ChainLabel
|
|
data={ data.destination_chain }
|
|
isLoading={ isLoading }
|
|
fallback={ <span className="text-[var(--color-text-secondary)]">{ mdash }</span> }
|
|
/>
|
|
</DetailedInfoItemBreakdown.Row>
|
|
) }
|
|
{ data.destination_transaction_hash && data.destination_chain && data.destination_chain?.id !== config.chain.id && (
|
|
<DetailedInfoItemBreakdown.Row
|
|
label="Destination tx"
|
|
>
|
|
<TxEntityInterchain
|
|
chain={ data.destination_chain }
|
|
hash={ data.destination_transaction_hash }
|
|
isLoading={ isLoading }
|
|
noIcon
|
|
/>
|
|
</DetailedInfoItemBreakdown.Row>
|
|
) }
|
|
{ data.sender && (
|
|
<DetailedInfoItemBreakdown.Row
|
|
label="Sender"
|
|
>
|
|
<AddressEntityInterchain
|
|
chain={ data.source_chain }
|
|
address={ data.sender }
|
|
isLoading={ isLoading }
|
|
noIcon
|
|
/>
|
|
</DetailedInfoItemBreakdown.Row>
|
|
) }
|
|
{ data.recipient && (
|
|
<DetailedInfoItemBreakdown.Row
|
|
label="Target"
|
|
>
|
|
<AddressEntityInterchain
|
|
chain={ data.destination_chain }
|
|
address={ data.recipient }
|
|
isLoading={ isLoading }
|
|
noIcon
|
|
/>
|
|
</DetailedInfoItemBreakdown.Row>
|
|
) }
|
|
</DetailedInfoItemBreakdown.Container>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(TxDetailsCrossChainMessage);
|