mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tx state tab
This commit is contained in:
isstuev
@@ -1,17 +0,0 @@
|
||||
export const privateTagsTransaction = [
|
||||
{
|
||||
transaction: '0x44b51ef7746ff48f74f45699d33557faa96059eb8655fdd7bf14a5f529ea3528',
|
||||
tag: 'some_tag',
|
||||
},
|
||||
{
|
||||
transaction: '0x44b51ef7746ff48f74f45699d33557faa96059eb8655fdd7bf14a5f529ea9999',
|
||||
tag: 'some_other_tag',
|
||||
},
|
||||
];
|
||||
|
||||
export type TPrivateTagsTransaction = Array<TPrivateTagsTransactionItem>
|
||||
|
||||
export type TPrivateTagsTransactionItem = {
|
||||
transaction: string;
|
||||
tag: string;
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
export const publicTags = [
|
||||
{
|
||||
addresses: [
|
||||
{
|
||||
address: '0x35317007D203b8a86CA727ad44E473E40450E377',
|
||||
addressName: 'DarkForest',
|
||||
},
|
||||
{
|
||||
address: '0x35317007D203b8a86CA727ad44E473E40450E378',
|
||||
addressName: 'DarkForest2',
|
||||
},
|
||||
],
|
||||
tags: [
|
||||
{
|
||||
name: 'darkforest',
|
||||
// colorHex: '#4A5568',
|
||||
// backgroundHex: '#E2E8F0',
|
||||
},
|
||||
],
|
||||
date: 'Jun 10, 2022',
|
||||
id: '123',
|
||||
userName: 'Tatyana',
|
||||
userEmail: '[email protected]',
|
||||
companyName: 'Contract name',
|
||||
companyUrl: 'contractname.com',
|
||||
comment: 'Please use #ED8936 color for tag...',
|
||||
},
|
||||
{
|
||||
addresses: [
|
||||
{
|
||||
address: '0x35317007D203b8a86CA727ad44E473E40450E377',
|
||||
},
|
||||
],
|
||||
tags: [
|
||||
{
|
||||
name: 'OMNI',
|
||||
colorHex: '#FFFFFF',
|
||||
backgroundHex: '#1A202C',
|
||||
},
|
||||
{
|
||||
name: '123456789012345678901237123123',
|
||||
colorHex: '#FFFFFF',
|
||||
backgroundHex: '#6B46C1',
|
||||
},
|
||||
],
|
||||
date: 'Jun 5, 2022',
|
||||
id: '456',
|
||||
},
|
||||
{
|
||||
addresses: [
|
||||
{
|
||||
address: '0x35317007D203b8a86CA727ad44E473E40450E377',
|
||||
addressName: 'Contract name',
|
||||
},
|
||||
],
|
||||
tags: [
|
||||
{
|
||||
name: 'SANA',
|
||||
colorHex: '#FFFFFF',
|
||||
backgroundHex: '#ED8936',
|
||||
},
|
||||
],
|
||||
date: 'Jun 1, 2022',
|
||||
id: '789',
|
||||
},
|
||||
];
|
||||
|
||||
export type TPublicTags = Array<TPublicTagItem>
|
||||
|
||||
export type TPublicTagItem = {
|
||||
addresses: Array<TPublicTagAddress>;
|
||||
tags: Array<TPublicTag>;
|
||||
// status: typeof STATUS;
|
||||
date: string;
|
||||
// id is for react element key, as tag or address may not be unique
|
||||
id: string;
|
||||
userName?: string;
|
||||
userEmail?: string;
|
||||
companyName?: string;
|
||||
companyUrl?: string;
|
||||
comment?: string;
|
||||
}
|
||||
|
||||
export type TPublicTagAddress = {
|
||||
address: string;
|
||||
addressName?: string;
|
||||
}
|
||||
|
||||
export type TPublicTag = {
|
||||
name: string;
|
||||
colorHex?: string;
|
||||
backgroundHex?: string;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
export const data = [
|
||||
{
|
||||
address: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
|
||||
miner: 'KuCoin Pool',
|
||||
after: {
|
||||
balance: '0.012192910371186045',
|
||||
nonce: '4',
|
||||
},
|
||||
before: {
|
||||
balance: '0.008350264867549483',
|
||||
nonce: '5',
|
||||
},
|
||||
diff: '0.003842645503636562',
|
||||
storage: [
|
||||
{
|
||||
address: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
|
||||
before: '0x000000000000000000000000730bc43aac5a6cf94a72f69a42adfa114fe119b5',
|
||||
after: '0x000000000000000000000000730bc43aac5a6cf94a72f69a42adfa114fe119b5',
|
||||
},
|
||||
{
|
||||
address: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
|
||||
before: '0x730bc43aac5a6cf94a72f69a42adfa114fe119b5',
|
||||
after: '0x000000000000000000000000730bc43aac5a6cf94a72f69a42adfa114fe119b5',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
address: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
|
||||
miner: 'KuCoin Pool',
|
||||
after: {
|
||||
balance: '0.012192910371186045',
|
||||
nonce: '4',
|
||||
},
|
||||
before: {
|
||||
balance: '0.008350264867549483',
|
||||
nonce: '5',
|
||||
},
|
||||
diff: '0.003842645503636562',
|
||||
storage: [
|
||||
{
|
||||
address: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
|
||||
before: '0x000000000000000000000000730bc43aac5a6cf94a72f69a42adfa114fe119b5',
|
||||
after: '0x000000000000000000000000730bc43aac5a6cf94a72f69a42adfa114fe119b5',
|
||||
},
|
||||
{
|
||||
address: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
|
||||
before: '0x730bc43aac5a6cf94a72f69a42adfa114fe119b5',
|
||||
after: '0x000000000000000000000000730bc43aac5a6cf94a72f69a42adfa114fe119b5',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
address: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
|
||||
miner: 'KuCoin Pool',
|
||||
after: {
|
||||
balance: '0.012192910371186045',
|
||||
},
|
||||
before: {
|
||||
balance: '0.008350264867549483',
|
||||
},
|
||||
diff: '-0.003842645503636562',
|
||||
},
|
||||
];
|
||||
|
||||
export type TTxState = Array<TTxStateItem>;
|
||||
|
||||
export type TTxStateItem = {
|
||||
address: string;
|
||||
miner: string;
|
||||
after: {
|
||||
balance: string;
|
||||
nonce?: string;
|
||||
};
|
||||
before: {
|
||||
balance: string;
|
||||
nonce?: string;
|
||||
};
|
||||
diff: string;
|
||||
storage?: Array<TTxStateItemStorage>;
|
||||
}
|
||||
|
||||
export type TTxStateItemStorage = {
|
||||
address: string;
|
||||
before: string;
|
||||
after: string;
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
export const watchlist = [
|
||||
{
|
||||
address: '0x4831c121879d3de0e2b181d9d55e9b0724f5d926',
|
||||
tokenBalance: 100.1,
|
||||
tokenBalanceUSD: 101.2,
|
||||
tokensAmount: 2,
|
||||
tokensUSD: 202.2,
|
||||
totalUSD: 123123,
|
||||
tag: 'some_tag',
|
||||
notification: true,
|
||||
},
|
||||
{
|
||||
address: '0x8c461F78760988c4135e363a87dd736f8b671ff0',
|
||||
tokensAmount: 2,
|
||||
tokensUSD: 2202.2,
|
||||
totalUSD: 3000.5,
|
||||
tag: 'some_other_tag',
|
||||
notification: false,
|
||||
},
|
||||
{
|
||||
address: '0x930F381E649c84579Ef58117E923714964C55D16',
|
||||
tokenBalance: 200.2,
|
||||
tokenBalanceUSD: 202.4,
|
||||
totalUSD: 3000.5,
|
||||
tag: '12345678901234567890123456789012345',
|
||||
notification: false,
|
||||
},
|
||||
];
|
||||
|
||||
export type TWatchlist = Array<TWatchlistItem>
|
||||
|
||||
export type TWatchlistItem = {
|
||||
address: string;
|
||||
tokenBalance?: number;
|
||||
tokenBalanceUSD?: number;
|
||||
tokensAmount?: number;
|
||||
tokensUSD?: number;
|
||||
totalUSD?: number;
|
||||
tag: string;
|
||||
notification?: boolean;
|
||||
}
|
||||
@@ -40,6 +40,19 @@ const sizes = {
|
||||
py: 6,
|
||||
},
|
||||
}),
|
||||
sm: definePartsStyle({
|
||||
th: {
|
||||
px: '10px',
|
||||
py: '10px',
|
||||
fontSize: 'sm',
|
||||
},
|
||||
td: {
|
||||
px: '10px',
|
||||
py: 6,
|
||||
fontSize: 'sm',
|
||||
fontWeight: 500,
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
const variants = {
|
||||
|
||||
@@ -16,6 +16,7 @@ import TxDetails from 'ui/tx/TxDetails';
|
||||
import TxInternals from 'ui/tx/TxInternals';
|
||||
import TxLogs from 'ui/tx/TxLogs';
|
||||
import TxRawTrace from 'ui/tx/TxRawTrace';
|
||||
import TxState from 'ui/tx/TxState';
|
||||
|
||||
interface Tab {
|
||||
type: 'details' | 'internal_txn' | 'logs' | 'raw_trace' | 'state';
|
||||
@@ -29,7 +30,7 @@ const TABS: Array<Tab> = [
|
||||
{ type: 'details', routeName: 'tx_index', name: 'Details', component: <TxDetails/> },
|
||||
{ type: 'internal_txn', routeName: 'tx_internal', name: 'Internal txn', component: <TxInternals/> },
|
||||
{ type: 'logs', routeName: 'tx_logs', name: 'Logs', component: <TxLogs/> },
|
||||
{ type: 'state', routeName: 'tx_state', name: 'State' },
|
||||
{ type: 'state', routeName: 'tx_state', name: 'State', component: <TxState/> },
|
||||
{ type: 'raw_trace', routeName: 'tx_raw_trace', name: 'Raw trace', component: <TxRawTrace/> },
|
||||
];
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ const TxInternals = () => {
|
||||
<Box>
|
||||
<Filters/>
|
||||
<TableContainer width="100%" mt={ 6 }>
|
||||
<Table variant="simple" minWidth="950px">
|
||||
<Table variant="simple" minWidth="950px" size="sm">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th width="20%">Type</Th>
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import {
|
||||
Accordion,
|
||||
Text,
|
||||
Table,
|
||||
Thead,
|
||||
Tbody,
|
||||
Tr,
|
||||
Th,
|
||||
TableContainer,
|
||||
} from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
|
||||
import { data } from 'data/txState';
|
||||
|
||||
import TxStateTableItem from './state/TxStateTableItem';
|
||||
|
||||
const CURRENCY = 'ETH';
|
||||
|
||||
const TxState = () => {
|
||||
return (
|
||||
<>
|
||||
<Text>
|
||||
A set of information that represents the current state is updated when a transaction takes place on the network. The below is a summary of those changes
|
||||
</Text>
|
||||
<Accordion allowToggle allowMultiple>
|
||||
<TableContainer width="100%" mt={ 6 }>
|
||||
<Table variant="simple" minWidth="950px" size="sm">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th width="92px">Storage</Th>
|
||||
<Th width="146px">Address</Th>
|
||||
<Th width="120px">Miner</Th>
|
||||
<Th width="33%" isNumeric>{ `After ${ CURRENCY }` }</Th>
|
||||
<Th width="33%" isNumeric>{ `Before ${ CURRENCY }` }</Th>
|
||||
<Th width="33%" isNumeric>{ `State difference ${ CURRENCY }` }</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{ data.map((item, index) => <TxStateTableItem txStateItem={ item } key={ index }/>) }
|
||||
</Tbody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Accordion>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TxState;
|
||||
@@ -0,0 +1,57 @@
|
||||
import {
|
||||
Grid,
|
||||
GridItem,
|
||||
Select,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
|
||||
import type { TTxStateItemStorage } from 'data/txState';
|
||||
|
||||
const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage}) => {
|
||||
const gridData = [
|
||||
{ name: 'Storage Address:', value: storageItem.address },
|
||||
{ name: 'Before:', value: storageItem.before, select: true },
|
||||
{ name: 'After:', value: storageItem.after, select: true },
|
||||
];
|
||||
|
||||
const backgroundColor = useColorModeValue('white', 'gray.900');
|
||||
|
||||
const OPTIONS = [ 'Hex', 'Number', 'Text', 'Address' ];
|
||||
return (
|
||||
<Grid
|
||||
gridTemplateColumns="auto 1fr"
|
||||
columnGap={ 3 }
|
||||
rowGap={ 4 }
|
||||
px={ 6 }
|
||||
py={ 4 }
|
||||
background="blackAlpha.50"
|
||||
borderRadius="12px"
|
||||
mb={ 4 }
|
||||
>
|
||||
{ gridData.map((item) => (
|
||||
<>
|
||||
<GridItem alignSelf="center" fontWeight={ 600 } textAlign="end">{ item.name }</GridItem>
|
||||
<GridItem>
|
||||
{ item.select && (
|
||||
<Select
|
||||
size="sm"
|
||||
borderRadius="base"
|
||||
focusBorderColor="none"
|
||||
display="inline-block"
|
||||
w="auto"
|
||||
mr={ 3 }
|
||||
background={ backgroundColor }
|
||||
>
|
||||
{ OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
|
||||
</Select>
|
||||
) }
|
||||
{ item.value }
|
||||
</GridItem>
|
||||
</>
|
||||
)) }
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default TxStateStorageItem;
|
||||
@@ -0,0 +1,101 @@
|
||||
import {
|
||||
AccordionItem,
|
||||
AccordionButton,
|
||||
AccordionPanel,
|
||||
AccordionIcon,
|
||||
Text,
|
||||
Box,
|
||||
Tr,
|
||||
Td,
|
||||
Flex,
|
||||
Stat,
|
||||
StatArrow,
|
||||
Portal,
|
||||
Link,
|
||||
Center,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import React, { useRef } from 'react';
|
||||
|
||||
import type { TTxStateItem } from 'data/txState';
|
||||
import { nbsp } from 'lib/html-entities';
|
||||
import AddressIcon from 'ui/shared/AddressIcon';
|
||||
import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
|
||||
|
||||
import TxStateStorageItem from './TxStateStorageItem';
|
||||
|
||||
const TxStateTableItem = ({ txStateItem }: { txStateItem: TTxStateItem }) => {
|
||||
const ref = useRef<HTMLTableDataCellElement>(null);
|
||||
|
||||
const hasStorageData = Boolean(txStateItem.storage?.length);
|
||||
|
||||
// FIXME: I'm not sure about dark theme colors
|
||||
const storageCounterBgColor = useColorModeValue('blue.50', 'gray.800');
|
||||
const storageCounterColor = useColorModeValue('blue.700', 'gray.50');
|
||||
const storageBorderColor = useColorModeValue('gray.200', 'gray.600');
|
||||
|
||||
return (
|
||||
<>
|
||||
<AccordionItem as="tr" isDisabled={ !hasStorageData } fontWeight={ 500 } border={ 0 }>
|
||||
{ ({ isExpanded }) => (
|
||||
<>
|
||||
<Td border={ 0 }>
|
||||
<Flex>
|
||||
<Center
|
||||
background={ isExpanded ? storageCounterBgColor : 'unset' }
|
||||
color={ storageCounterColor }
|
||||
width="30px"
|
||||
height="30px"
|
||||
borderRadius="6px"
|
||||
border={ isExpanded ? 'none' : '1px solid' }
|
||||
borderColor={ storageBorderColor }
|
||||
opacity={ hasStorageData ? 1 : 0.2 }
|
||||
>
|
||||
{ txStateItem.storage?.length || '0' }
|
||||
</Center>
|
||||
<AccordionButton
|
||||
_hover={{ background: 'unset', cursor: 'pointer' }}
|
||||
padding="0"
|
||||
width="30px"
|
||||
justifyContent="center"
|
||||
>
|
||||
<AccordionIcon color="blue.600"/>
|
||||
</AccordionButton>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td border={ 0 }>
|
||||
<Flex height="30px" alignItems="center">
|
||||
<AddressIcon address={ txStateItem.address }/>
|
||||
<AddressLinkWithTooltip address={ txStateItem.address } fontWeight="500" truncated withCopy={ false } ml={ 2 }/>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td border={ 0 } lineHeight="30px"><Link>{ txStateItem.miner }</Link></Td>
|
||||
<Td border={ 0 } isNumeric lineHeight="30px">
|
||||
<Box>{ txStateItem.after.balance }</Box>
|
||||
{ typeof txStateItem.after.nonce !== 'undefined' && (
|
||||
<Flex justifyContent="end">Nonce: <Text fontWeight={ 600 }>{ nbsp + txStateItem.after.nonce }</Text></Flex>
|
||||
) }
|
||||
</Td>
|
||||
<Td border={ 0 } isNumeric lineHeight="30px">{ txStateItem.before.balance }</Td>
|
||||
<Td border={ 0 } isNumeric lineHeight="30px">
|
||||
<Stat>
|
||||
{ txStateItem.diff }
|
||||
<StatArrow ml={ 2 } type={ Number(txStateItem.diff) > 0 ? 'increase' : 'decrease' }/>
|
||||
</Stat>
|
||||
</Td>
|
||||
{ hasStorageData && (
|
||||
<Portal containerRef={ ref }>
|
||||
<AccordionPanel fontWeight={ 500 }>
|
||||
{ txStateItem.storage?.map((storageItem, index) => <TxStateStorageItem key={ index } storageItem={ storageItem }/>) }
|
||||
</AccordionPanel>
|
||||
</Portal>
|
||||
) }
|
||||
</>
|
||||
) }
|
||||
</AccordionItem>
|
||||
<Tr><Td colSpan={ 6 } ref={ ref } padding={ 0 }></Td></Tr>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TxStateTableItem;
|
||||
Reference in New Issue
Block a user