Skip to content

F
frontend
Commit 14983e6f authored by tom's avatar tom
Browse files
Options

state tab

parent 1814a000
Hide whitespace changes
Inline Side-by-side
Showing with 164 additions and 39 deletions
ui/tx/TxState.tsx
View file @ 14983e6f
import { import { Accordion, Text } from '@chakra-ui/react';
Accordion,
Text,
Table,
Thead,
Tbody,
Tr,
Th,
TableContainer,
} from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { data } from 'data/txState'; import useIsMobile from 'lib/hooks/useIsMobile';
import TxStateList from 'ui/tx/state/TxStateList';
import TxStateTableItem from './state/TxStateTableItem'; import TxStateTable from 'ui/tx/state/TxStateTable';
const CURRENCY = 'ETH';
const TxState = () => { const TxState = () => {
const isMobile = useIsMobile();
const list = isMobile ? <TxStateList/> : <TxStateTable/>;
return ( return (
<> <>
<Text> <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 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> </Text>
<Accordion allowToggle allowMultiple> <Accordion allowMultiple defaultIndex={ [] }>
<TableContainer width="100%" mt={ 6 }> { list }
<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> </Accordion>
</> </>
); );
......
ui/tx/state/TxStateList.tsx 0 → 100644
View file @ 14983e6f
import { Box } from '@chakra-ui/react';
import React from 'react';
import { data } from 'data/txState';
import TxStateListItem from 'ui/tx/state/TxStateListItem';
const TxStateList = () => {
return (
<Box mt={ 6 }>
{ data.map((item, index) => <TxStateListItem key={ index } { ...item }/>) }
</Box>
);
};
export default TxStateList;
ui/tx/state/TxStateListItem.tsx 0 → 100644
View file @ 14983e6f
import { AccordionItem, AccordionButton, AccordionIcon, Button, Flex, Text, Link, StatArrow, Stat, AccordionPanel } from '@chakra-ui/react';
import React from 'react';
import type ArrayElement from 'types/utils/ArrayElement';
import type { data } from 'data/txState';
import { nbsp } from 'lib/html-entities';
import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import TextSeparator from 'ui/shared/TextSeparator';
import TxStateStorageItem from './TxStateStorageItem';
type Props = ArrayElement<typeof data>;
const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props) => {
const hasStorageData = Boolean(storage?.length);
return (
<AccountListItemMobile>
<AccordionItem isDisabled={ !hasStorageData } border={ 0 } w="100%" display="flex" flexDirection="column" rowGap={ 3 }>
{ ({ isExpanded }) => (
<>
<Flex>
<Address flexGrow={ 1 }>
<AddressIcon hash={ address }/>
<AddressLink hash={ address } fontWeight="500" ml={ 2 }/>
</Address>
<AccordionButton
_hover={{ background: 'unset' }}
padding="0"
ml={ 4 }
w="auto"
>
<Button
variant="outline"
borderWidth="1px"
// button can't be inside button (AccordionButton)
as="div"
isActive={ isExpanded }
size="sm"
fontWeight={ 400 }
isDisabled={ !hasStorageData }
colorScheme="gray"
// AccordionButton has its own opacity rule when disabled
_disabled={{ opacity: 1 }}
>
{ storage?.length || '0' }
</Button>
<AccordionIcon color="blue.600" width="30px"/>
</AccordionButton>
</Flex>
<Flex rowGap={ 2 } flexDir="column" fontSize="sm">
<Text fontWeight={ 600 }>Miner</Text>
<Link>{ miner }</Link>
</Flex>
<Flex rowGap={ 2 } flexDir="column" fontSize="sm">
<Text fontWeight={ 600 }>Before</Text>
<Flex>
<Text>{ before.balance } ETH</Text>
<TextSeparator/>
{ typeof before.nonce !== 'undefined' && <Text>Nonce:{ nbsp }{ before.nonce }</Text> }
</Flex>
</Flex>
<Flex rowGap={ 2 } flexDir="column" fontSize="sm">
<Text fontWeight={ 600 }>After</Text>
<Text>{ after.balance } ETH</Text>
{ typeof after.nonce !== 'undefined' && <Text>Nonce:{ nbsp }{ after.nonce }</Text> }
</Flex>
<Flex rowGap={ 2 } flexDir="column" fontSize="sm">
<Text fontWeight={ 600 }>State difference</Text>
<Stat>
{ diff } ETH
<StatArrow ml={ 2 } type={ Number(diff) > 0 ? 'increase' : 'decrease' }/>
</Stat>
</Flex>
{ hasStorageData && (
<AccordionPanel fontWeight={ 500 } p={ 0 }>
{ storage?.map((storageItem, index) => <TxStateStorageItem key={ index } storageItem={ storageItem }/>) }
</AccordionPanel>
) }
</>
) }
</AccordionItem>
</AccountListItemMobile>
);
};
export default TxStateListItem;
ui/tx/state/TxStateStorageItem.tsx
View file @ 14983e6f
...@@ -2,11 +2,13 @@ import { ...@@ -2,11 +2,13 @@ import {
Grid, Grid,
GridItem, GridItem,
Select, Select,
Box,
useColorModeValue, useColorModeValue,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { TTxStateItemStorage } from 'data/txState'; import type { TTxStateItemStorage } from 'data/txState';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage}) => { const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage}) => {
const gridData = [ const gridData = [
...@@ -20,7 +22,7 @@ const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage}) ...@@ -20,7 +22,7 @@ const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage})
const OPTIONS = [ 'Hex', 'Number', 'Text', 'Address' ]; const OPTIONS = [ 'Hex', 'Number', 'Text', 'Address' ];
return ( return (
<Grid <Grid
gridTemplateColumns="auto 1fr" gridTemplateColumns={{ base: '70px minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}
columnGap={ 3 } columnGap={ 3 }
rowGap={ 4 } rowGap={ 4 }
px={ 6 } px={ 6 }
...@@ -28,11 +30,12 @@ const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage}) ...@@ -28,11 +30,12 @@ const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage})
background="blackAlpha.50" background="blackAlpha.50"
borderRadius="12px" borderRadius="12px"
mb={ 4 } mb={ 4 }
fontSize={{ base: 'sm', lg: 'md' }}
> >
{ gridData.map((item) => ( { gridData.map((item) => (
<> <React.Fragment key={ item.name }>
<GridItem alignSelf="center" fontWeight={ 600 } textAlign="end">{ item.name }</GridItem> <GridItem alignSelf={{ base: 'start', lg: 'center' }} fontWeight={{ base: 500, lg: 600 }} textAlign="end">{ item.name }</GridItem>
<GridItem> <GridItem display="flex" flexDir="column" rowGap={ 2 } alignItems="flex-start" >
{ item.select && ( { item.select && (
<Select <Select
size="sm" size="sm"
...@@ -46,9 +49,11 @@ const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage}) ...@@ -46,9 +49,11 @@ const TxStateStorageItem = ({ storageItem }: {storageItem: TTxStateItemStorage})
{ OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) } { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
</Select> </Select>
) } ) }
{ item.value } <Box fontWeight={{ base: 400, lg: 500 }} overflow="hidden" whiteSpace="nowrap" maxW="100%">
<HashStringShortenDynamic hash={ item.value }/>
</Box>
</GridItem> </GridItem>
</> </React.Fragment>
)) } )) }
</Grid> </Grid>
); );
......
ui/tx/state/TxStateTable.tsx 0 → 100644
View file @ 14983e6f
import {
Table,
Thead,
Tbody,
Tr,
Th,
TableContainer,
} from '@chakra-ui/react';
import React from 'react';
import { data } from 'data/txState';
import TxStateTableItem from 'ui/tx/state/TxStateTableItem';
const CURRENCY = 'ETH';
const TxStateTable = () => {
return (
<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>
);
};
export default TxStateTable;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment