Skip to content

F
frontend
Commit 81bf03c8 authored by tom's avatar tom
Browse files
Options

tx token transfers tab

parent 3148fc64
Hide whitespace changes
Inline Side-by-side
Showing with 550 additions and 138 deletions
eslint.config.mjs
View file @ 81bf03c8
......@@ -36,7 +36,7 @@ const RESTRICTED_MODULES = {
'Image', 'Popover', 'PopoverTrigger', 'PopoverContent', 'PopoverBody', 'PopoverFooter',
'DrawerRoot', 'DrawerBody', 'DrawerContent', 'DrawerOverlay', 'DrawerBackdrop', 'DrawerTrigger', 'Drawer',
'Alert', 'AlertIcon', 'AlertTitle', 'AlertDescription',
'Heading', 'Badge', 'Tabs', 'Show', 'Hide',
'Heading', 'Badge', 'Tabs', 'Show', 'Hide', 'Checkbox',
'Table', 'TableRoot', 'TableBody', 'TableHeader', 'TableRow', 'TableCell',
'Menu', 'MenuRoot', 'MenuTrigger', 'MenuContent', 'MenuItem', 'MenuTriggerItem', 'MenuRadioItemGroup', 'MenuContextTrigger',
],
......
toolkit/chakra/radio.tsx
View file @ 81bf03c8
......@@ -21,4 +21,20 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
},
);
export const RadioGroup = ChakraRadioGroup.Root;
export interface RadioGroupProps extends ChakraRadioGroup.RootProps {}
export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
function RadioGroup(props, ref) {
const { orientation = 'horizontal', ...rest } = props;
return (
<ChakraRadioGroup.Root
ref={ ref }
orientation={ orientation }
display="flex"
flexDirection={ orientation === 'horizontal' ? 'row' : 'column' }
gap={ orientation === 'horizontal' ? 4 : 2 }
{ ...rest }
/>
);
},
);
toolkit/theme/foundations/colors.ts
View file @ 81bf03c8
......@@ -126,16 +126,16 @@ const colors: ExcludeUndefined<ThemingConfig['tokens']>['colors'] = {
black: { value: '#101112' },
white: { value: '#ffffff' },
whiteAlpha: {
'50': { value: 'RGBA(16, 17, 18, 0.04)' },
'100': { value: 'RGBA(16, 17, 18, 0.06)' },
'200': { value: 'RGBA(16, 17, 18, 0.08)' },
'300': { value: 'RGBA(16, 17, 18, 0.16)' },
'400': { value: 'RGBA(16, 17, 18, 0.24)' },
'500': { value: 'RGBA(16, 17, 18, 0.36)' },
'600': { value: 'RGBA(16, 17, 18, 0.48)' },
'700': { value: 'RGBA(16, 17, 18, 0.64)' },
'800': { value: 'RGBA(16, 17, 18, 0.80)' },
'900': { value: 'RGBA(16, 17, 18, 0.92)' },
'50': { value: 'RGBA(255, 255, 255, 0.04)' },
'100': { value: 'RGBA(255, 255, 255, 0.06)' },
'200': { value: 'RGBA(255, 255, 255, 0.08)' },
'300': { value: 'RGBA(255, 255, 255, 0.16)' },
'400': { value: 'RGBA(255, 255, 255, 0.24)' },
'500': { value: 'RGBA(255, 255, 255, 0.36)' },
'600': { value: 'RGBA(255, 255, 255, 0.48)' },
'700': { value: 'RGBA(255, 255, 255, 0.64)' },
'800': { value: 'RGBA(255, 255, 255, 0.80)' },
'900': { value: 'RGBA(255, 255, 255, 0.92)' },
},
blackAlpha: {
'50': { value: 'RGBA(16, 17, 18, 0.04)' },
......
toolkit/theme/foundations/semanticTokens.ts
View file @ 81bf03c8
......@@ -112,7 +112,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
active: { value: { _light: '{colors.link.primary.hover}' } },
},
bg: {
DEFAULT: { value: 'transparent' },
DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
},
border: {
......@@ -339,6 +339,22 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
fg: { value: { _light: '{colors.blackAlpha.700}', _dark: '{colors.whiteAlpha.700}' } },
},
},
checkbox: {
icon: {
bg: {
checked: { value: { _light: '{colors.blue.500}', _dark: '{colors.gray.300}' } },
hover: { value: { _light: '{colors.blue.600}', _dark: '{colors.gray.400}' } },
},
},
},
radio: {
icon: {
bg: {
checked: { value: { _light: '{colors.blue.500}', _dark: '{colors.gray.300}' } },
hover: { value: { _light: '{colors.blue.600}', _dark: '{colors.gray.400}' } },
},
},
},
heading: {
DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
},
......
toolkit/theme/recipes/checkbox.recipe.ts 0 → 100644
View file @ 81bf03c8
import { defineSlotRecipe } from '@chakra-ui/react';
import { recipe as checkmarkRecipe } from './checkmark.recipe';
export const recipe = defineSlotRecipe({
slots: [ 'root', 'control', 'label' ],
className: 'chakra-checkbox',
base: {
root: {
display: 'inline-flex',
gap: '2',
alignItems: 'center',
verticalAlign: 'top',
position: 'relative',
},
control: checkmarkRecipe.base,
label: {
fontWeight: 'normal',
userSelect: 'none',
_disabled: {
opacity: '0.5',
},
},
},
variants: {
size: {
xs: {
root: { gap: '1' },
label: { textStyle: 'xs' },
control: checkmarkRecipe.variants?.size?.xs,
},
sm: {
root: { gap: '1' },
label: { textStyle: 'sm' },
control: checkmarkRecipe.variants?.size?.sm,
},
md: {
root: { gap: '2' },
label: { textStyle: 'md' },
control: checkmarkRecipe.variants?.size?.md,
},
},
variant: {
solid: {
control: checkmarkRecipe.variants?.variant?.solid,
},
},
},
defaultVariants: {
variant: 'solid',
size: 'md',
},
});
toolkit/theme/recipes/checkmark.recipe.ts 0 → 100644
View file @ 81bf03c8
import { defineRecipe } from '@chakra-ui/react';
// TODO @tom2drum dark mode + border color
export const recipe = defineRecipe({
className: 'chakra-checkmark',
base: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: '0',
color: 'white',
borderWidth: '2px',
borderColor: 'transparent',
focusVisibleRing: 'outside',
_icon: {
boxSize: 'full',
},
_disabled: {
opacity: '0.5',
},
},
variants: {
size: {
xs: {
boxSize: '3',
borderRadius: '2px',
},
sm: {
boxSize: '4',
borderRadius: '2px',
},
md: {
boxSize: '5',
borderRadius: 'sm',
},
},
variant: {
solid: {
borderColor: 'border',
'&:is([data-state=checked], [data-state=indeterminate])': {
bg: 'checkbox.icon.bg.checked',
color: 'white',
borderColor: 'checkbox.icon.bg.checked',
_hover: {
bg: 'checkbox.icon.bg.hover',
borderColor: 'checkbox.icon.bg.hover',
},
},
},
},
},
defaultVariants: {
variant: 'solid',
size: 'md',
},
});
toolkit/theme/recipes/index.ts
View file @ 81bf03c8
......@@ -2,6 +2,8 @@ import { recipe as accordion } from './accordion.recipe';
import { recipe as alert } from './alert.recipe';
import { recipe as badge } from './badge.recipe';
import { recipe as button } from './button.recipe';
import { recipe as checkbox } from './checkbox.recipe';
import { recipe as checkmark } from './checkmark.recipe';
import { recipe as closeButton } from './close-button.recipe';
import { recipe as dialog } from './dialog.recipe';
import { recipe as drawer } from './drawer.recipe';
......@@ -13,6 +15,8 @@ import { recipe as nativeSelect } from './native-select.recipe';
import { recipe as pinInput } from './pin-input.recipe';
import { recipe as popover } from './popover.recipe';
import { recipe as progressCircle } from './progress-circle.recipe';
import { recipe as radioGroup } from './radio-group.recipe';
import { recipe as radiomark } from './radiomark.recipe';
import { recipe as select } from './select.recipe';
import { recipe as skeleton } from './skeleton.recipe';
import { recipe as spinner } from './spinner.recipe';
......@@ -27,9 +31,11 @@ import { recipe as tooltip } from './tooltip.recipe';
export const recipes = {
badge,
button,
checkmark,
closeButton,
input,
link,
radiomark,
skeleton,
spinner,
textarea,
......@@ -38,6 +44,7 @@ export const recipes = {
export const slotRecipes = {
accordion,
alert,
checkbox,
dialog,
drawer,
field,
......@@ -46,6 +53,7 @@ export const slotRecipes = {
pinInput,
popover,
progressCircle,
radioGroup,
select,
'switch': switchRecipe,
table,
......
toolkit/theme/recipes/radio-group.recipe.ts 0 → 100644
View file @ 81bf03c8
import { defineSlotRecipe } from '@chakra-ui/react';
import { recipe as radiomarkRecipe } from './radiomark.recipe';
export const recipe = defineSlotRecipe({
slots: [ 'item', 'itemControl', 'label' ],
base: {
item: {
display: 'inline-flex',
alignItems: 'center',
position: 'relative',
fontWeight: 'normal',
_disabled: {
cursor: 'disabled',
},
},
itemControl: radiomarkRecipe.base,
label: {
userSelect: 'none',
textStyle: 'md',
_disabled: {
opacity: '0.5',
},
},
},
variants: {
variant: {
solid: {
itemControl: radiomarkRecipe.variants?.variant?.solid,
},
},
size: {
xs: {
item: { textStyle: 'xs', gap: '1' },
itemControl: radiomarkRecipe.variants?.size?.xs,
},
sm: {
item: { textStyle: 'sm', gap: '1' },
itemControl: radiomarkRecipe.variants?.size?.sm,
},
md: {
item: { textStyle: 'md', gap: '2' },
itemControl: radiomarkRecipe.variants?.size?.md,
},
},
},
defaultVariants: {
size: 'md',
variant: 'solid',
},
});
toolkit/theme/recipes/radiomark.recipe.ts 0 → 100644
View file @ 81bf03c8
import { defineRecipe } from '@chakra-ui/react';
// TODO @tom2drum dark mode + border color
export const recipe = defineRecipe({
base: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
verticalAlign: 'top',
color: 'white',
borderWidth: '2px',
borderColor: 'transparent',
borderRadius: 'full',
cursor: 'radio',
_focusVisible: {
outline: '2px solid',
outlineColor: 'colorPalette.focusRing',
outlineOffset: '2px',
},
_disabled: {
opacity: '0.5',
cursor: 'disabled',
},
'& .dot': {
height: '100%',
width: '100%',
borderRadius: 'full',
bg: 'currentColor',
scale: '0.4',
},
},
variants: {
variant: {
solid: {
borderWidth: '2px',
borderColor: 'border',
_checked: {
bg: 'radio.icon.bg.checked',
color: 'white',
borderColor: 'radio.icon.bg.checked',
_hover: {
bg: 'radio.icon.bg.hover',
borderColor: 'radio.icon.bg.hover',
},
},
},
},
size: {
xs: {
boxSize: '3',
},
sm: {
boxSize: '4',
},
md: {
boxSize: '5',
},
},
},
defaultVariants: {
variant: 'solid',
size: 'md',
},
});
ui/pages/Chakra.tsx
View file @ 81bf03c8
......@@ -24,9 +24,11 @@ import AccordionsShowcase from 'ui/showcases/Accordion';
import AlertsShowcase from 'ui/showcases/Alerts';
import BadgesShowcase from 'ui/showcases/Badges';
import ButtonShowcase from 'ui/showcases/Button';
import CheckboxesShowcase from 'ui/showcases/Checkbox';
import LinksShowcase from 'ui/showcases/Links';
import MenusShowcase from 'ui/showcases/Menu';
import PaginationShowcase from 'ui/showcases/Pagination';
import RadiosShowcase from 'ui/showcases/Radio';
import SelectsShowcase from 'ui/showcases/Select';
import TabsShowcase from 'ui/showcases/Tabs';
import TagsShowcase from 'ui/showcases/Tags';
......@@ -50,9 +52,11 @@ const ChakraShowcases = () => {
<TabsTrigger value="alerts">Alerts</TabsTrigger>
<TabsTrigger value="badges">Badges</TabsTrigger>
<TabsTrigger value="buttons">Buttons</TabsTrigger>
<TabsTrigger value="checkboxes">Checkboxes</TabsTrigger>
<TabsTrigger value="links">Links</TabsTrigger>
<TabsTrigger value="menus">Menus</TabsTrigger>
<TabsTrigger value="pagination">Pagination</TabsTrigger>
<TabsTrigger value="radios">Radios</TabsTrigger>
<TabsTrigger value="selects">Selects</TabsTrigger>
<TabsTrigger value="tabs">Tabs</TabsTrigger>
<TabsTrigger value="tags">Tags</TabsTrigger>
......@@ -63,10 +67,12 @@ const ChakraShowcases = () => {
<AlertsShowcase/>
<BadgesShowcase/>
<ButtonShowcase/>
<CheckboxesShowcase/>
<LinksShowcase/>
<MenusShowcase/>
<TabsShowcase/>
<PaginationShowcase/>
<RadiosShowcase/>
<SelectsShowcase/>
<TooltipsShowcase/>
<TagsShowcase/>
......
ui/pages/Transaction.tsx
View file @ 81bf03c8
......@@ -58,7 +58,7 @@ const TransactionPageContent = () => {
// config.features.suave.isEnabled && data?.wrapped ?
// { id: 'wrapped', title: 'Regular tx details', component: <TxDetailsWrapped data={ data.wrapped }/> } :
// undefined,
// { id: 'token_transfers', title: 'Token transfers', component: <TxTokenTransfer txQuery={ txQuery }/> },
{ id: 'token_transfers', title: 'Token transfers', component: <TxTokenTransfer txQuery={ txQuery }/> },
// config.features.userOps.isEnabled ?
// { id: 'user_ops', title: 'User operations', component: <TxUserOps txQuery={ txQuery }/> } :
// undefined,
......@@ -74,12 +74,12 @@ const TransactionPageContent = () => {
const tabIndex = useTabIndexFromQuery(tabs);
// const tags = (
// <EntityTags
// isLoading={ isPlaceholderData }
// tags={ data?.transaction_tag ? [ { slug: data.transaction_tag, name: data.transaction_tag, tagType: 'private_tag' as const, ordinal: 10 } ] : [] }
// />
// );
const tags = (
<EntityTags
isLoading={ isPlaceholderData }
tags={ data?.transaction_tag ? [ { slug: data.transaction_tag, name: data.transaction_tag, tagType: 'private_tag' as const, ordinal: 10 } ] : [] }
/>
);
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/txs');
......@@ -121,7 +121,7 @@ const TransactionPageContent = () => {
<PageTitle
title="Transaction details"
backLink={ backLink }
// contentAfter={ tags }
contentAfter={ tags }
secondRow={ titleSecondRow }
/>
{ content }
......
ui/shared/TokenTransfer/TokenTransferFilter.tsx
View file @ 81bf03c8
import {
Text,
Radio,
RadioGroup,
Stack,
} from '@chakra-ui/react';
import { Text, Stack } from '@chakra-ui/react';
import React from 'react';
import type { AddressFromToFilter } from 'types/api/address';
import type { TokenType } from 'types/api/token';
import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
import { Radio, RadioGroup } from 'toolkit/chakra/radio';
import PopoverFilter from 'ui/shared/filters/PopoverFilter';
import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
......@@ -34,20 +30,24 @@ const TokenTransferFilter = ({
}: Props) => {
const isInitialLoading = useIsInitialLoading(isLoading);
const handleAddressFilterChange = React.useCallback(({ value }: { value: string }) => {
onAddressFilterChange?.(value);
}, [ onAddressFilterChange ]);
return (
<PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ w: '220px' }} isLoading={ isInitialLoading }>
{ withAddressFilter && (
<>
<Text variant="secondary" fontWeight={ 600 }>Address</Text>
<Text color="text.secondary" fontWeight={ 600 }>Address</Text>
<RadioGroup
size="lg"
onChange={ onAddressFilterChange }
onValueChange={ handleAddressFilterChange }
defaultValue={ defaultAddressFilter || 'all' }
paddingBottom={ 4 }
borderBottom="1px solid"
borderColor="border.divider"
>
<Stack spacing={ 4 }>
<Stack gap={ 4 }>
<Radio value="all"><Text fontSize="md">All</Text></Radio>
<Radio value="from"><Text fontSize="md">Outgoing transfers</Text></Radio>
<Radio value="to"><Text fontSize="md">Incoming transfers</Text></Radio>
......
ui/shared/TokenTransfer/TokenTransferListItem.tsx
View file @ 81bf03c8
......@@ -5,9 +5,9 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
import getCurrencyValue from 'lib/getCurrencyValue';
import { getTokenTypeName } from 'lib/token/tokenTypes';
import { Badge } from 'toolkit/chakra/badge';
import { Skeleton } from 'toolkit/chakra/skeleton';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Skeleton from 'ui/shared/chakra/Skeleton';
import Tag from 'ui/shared/chakra/Tag';
import NftEntity from 'ui/shared/entities/nft/NftEntity';
import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
......@@ -46,7 +46,7 @@ const TokenTransferListItem = ({
}) : { usd: null, valueStr: null };
return (
<ListItemMobile rowGap={ 3 } isAnimated>
<ListItemMobile rowGap={ 3 }>
<Flex w="100%" justifyContent="space-between">
<Flex flexWrap="wrap" rowGap={ 1 } mr={ showTxInfo && txHash ? 2 : 0 } columnGap={ 2 } overflow="hidden">
{ token && (
......@@ -58,10 +58,10 @@ const TokenTransferListItem = ({
noCopy
w="auto"
/>
<Tag flexShrink={ 0 } isLoading={ isLoading }>{ getTokenTypeName(token.type) }</Tag>
<Badge flexShrink={ 0 } loading={ isLoading }>{ getTokenTypeName(token.type) }</Badge>
</>
) }
<Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
<Badge colorScheme="orange" loading={ isLoading }>{ getTokenTransferTypeText(type) }</Badge>
</Flex>
{ showTxInfo && txHash && (
<TxAdditionalInfo hash={ txHash } isMobile isLoading={ isLoading }/>
......@@ -97,8 +97,8 @@ const TokenTransferListItem = ({
/>
{ valueStr && (
<Flex columnGap={ 2 } w="100%">
<Skeleton isLoaded={ !isLoading } fontWeight={ 500 } flexShrink={ 0 }>Value</Skeleton>
<Skeleton isLoaded={ !isLoading } color="text_secondary">
<Skeleton loading={ isLoading } fontWeight={ 500 } flexShrink={ 0 }>Value</Skeleton>
<Skeleton loading={ isLoading } color="text.secondary">
<span>{ valueStr }</span>
{ usd && <span> (${ usd })</span> }
</Skeleton>
......
ui/shared/TokenTransfer/TokenTransferTable.tsx
View file @ 81bf03c8
import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
import React from 'react';
import type { TokenTransfer } from 'types/api/tokenTransfer';
import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
import { default as Thead } from 'ui/shared/TheadSticky';
import TokenTransferTableItem from 'ui/shared/TokenTransfer/TokenTransferTableItem';
interface Props {
......@@ -34,18 +33,18 @@ const TokenTransferTable = ({
return (
<AddressHighlightProvider>
<Table minW="950px">
<Thead top={ top }>
<Tr>
{ showTxInfo && <Th width="44px"></Th> }
<Th width="230px">Token</Th>
<Th width="160px">Token ID</Th>
{ showTxInfo && <Th width="200px">Txn hash</Th> }
<Th width="60%">From/To</Th>
<Th width="40%" isNumeric>Value</Th>
</Tr>
</Thead>
<Tbody>
<TableRoot minW="950px">
<TableHeaderSticky top={ top }>
<TableRow>
{ showTxInfo && <TableColumnHeader width="44px"></TableColumnHeader> }
<TableColumnHeader width="230px">Token</TableColumnHeader>
<TableColumnHeader width="160px">Token ID</TableColumnHeader>
{ showTxInfo && <TableColumnHeader width="200px">Txn hash</TableColumnHeader> }
<TableColumnHeader width="60%">From/To</TableColumnHeader>
<TableColumnHeader width="40%" isNumeric>Value</TableColumnHeader>
</TableRow>
</TableHeaderSticky>
<TableBody>
{ showSocketInfo && (
<SocketNewItemsNotice.Desktop
url={ window.location.href }
......@@ -65,8 +64,8 @@ const TokenTransferTable = ({
isLoading={ isLoading }
/>
)) }
</Tbody>
</Table>
</TableBody>
</TableRoot>
</AddressHighlightProvider>
);
};
......
ui/shared/TokenTransfer/TokenTransferTableItem.tsx
View file @ 81bf03c8
import { Tr, Td, Flex, Box } from '@chakra-ui/react';
import { Flex, Box } from '@chakra-ui/react';
import React from 'react';
import type { TokenTransfer } from 'types/api/tokenTransfer';
import getCurrencyValue from 'lib/getCurrencyValue';
import { getTokenTypeName } from 'lib/token/tokenTypes';
import { Badge } from 'toolkit/chakra/badge';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Skeleton from 'ui/shared/chakra/Skeleton';
import Tag from 'ui/shared/chakra/Tag';
import NftEntity from 'ui/shared/entities/nft/NftEntity';
import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
......@@ -45,15 +46,15 @@ const TokenTransferTableItem = ({
}) : { usd: null, valueStr: null };
return (
<Tr alignItems="top">
<TableRow alignItems="top">
{ showTxInfo && txHash && (
<Td>
<TableCell>
<Box my="3px">
<TxAdditionalInfo hash={ txHash } isLoading={ isLoading }/>
</Box>
</Td>
</TableCell>
) }
<Td>
<TableCell>
{ token ? (
<>
<TokenEntity
......@@ -64,13 +65,13 @@ const TokenTransferTableItem = ({
mt={ 1 }
/>
<Flex columnGap={ 2 } rowGap={ 2 } mt={ 2 } flexWrap="wrap">
<Tag isLoading={ isLoading }>{ getTokenTypeName(token.type) }</Tag>
<Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
<Badge loading={ isLoading }>{ getTokenTypeName(token.type) }</Badge>
<Badge colorScheme="orange" loading={ isLoading }>{ getTokenTransferTypeText(type) }</Badge>
</Flex>
</>
) : 'N/A' }
</Td>
<Td>
</TableCell>
<TableCell>
{ total && 'token_id' in total && total.token_id !== null && token && (
<NftEntity
hash={ token.address }
......@@ -78,9 +79,9 @@ const TokenTransferTableItem = ({
isLoading={ isLoading }
/>
) }
</Td>
</TableCell>
{ showTxInfo && txHash && (
<Td>
<TableCell>
<TxEntity
hash={ txHash }
isLoading={ isLoading }
......@@ -98,9 +99,9 @@ const TokenTransferTableItem = ({
mt="10px"
display="inline-block"
/>
</Td>
</TableCell>
) }
<Td>
<TableCell>
<AddressFromTo
from={ from }
to={ to }
......@@ -109,20 +110,20 @@ const TokenTransferTableItem = ({
mt={ 1 }
mode={{ lg: 'compact', xl: 'long' }}
/>
</Td>
<Td isNumeric verticalAlign="top">
</TableCell>
<TableCell isNumeric verticalAlign="top">
{ valueStr && (
<Skeleton isLoaded={ !isLoading } display="inline-block" mt="7px" wordBreak="break-all">
<Skeleton loading={ isLoading } display="inline-block" mt="7px" wordBreak="break-all">
{ valueStr }
</Skeleton>
) }
{ usd && (
<Skeleton isLoaded={ !isLoading } color="text_secondary" mt="10px" ml="auto" w="min-content">
<Skeleton loading={ isLoading } color="text.secondary" mt="10px" ml="auto" w="min-content">
<span>${ usd }</span>
</Skeleton>
) }
</Td>
</Tr>
</TableCell>
</TableRow>
);
};
......
ui/shared/filters/FilterButton.tsx
View file @ 81bf03c8
import type { As } from '@chakra-ui/react';
import { Box, Button, Circle, useColorModeValue } from '@chakra-ui/react';
import { Box, Circle } from '@chakra-ui/react';
import React from 'react';
import Skeleton from 'ui/shared/chakra/Skeleton';
import type { ButtonProps } from 'toolkit/chakra/button';
import { Button } from 'toolkit/chakra/button';
import { Skeleton } from 'toolkit/chakra/skeleton';
import IconSvg from 'ui/shared/IconSvg';
const FilterIcon = <IconSvg name="filter" boxSize={ 5 } mr={{ base: 0, lg: 2 }}/>;
interface Props {
isActive?: boolean;
interface Props extends ButtonProps {
isLoading?: boolean;
appliedFiltersNum?: number;
onClick: () => void;
as?: As;
}
const FilterButton = ({ isActive, isLoading, appliedFiltersNum, onClick, as }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
const badgeColor = useColorModeValue('white', 'black');
const badgeBgColor = useColorModeValue('blue.700', 'gray.50');
const FilterButton = ({ isLoading, appliedFiltersNum, ...rest }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
if (isLoading) {
return <Skeleton w={{ base: 9, lg: '78px' }} h={ 8 } borderRadius="base" flexShrink={ 0 }/>;
return <Skeleton loading w={{ base: 9, lg: '78px' }} h={ 8 } borderRadius="base" flexShrink={ 0 }/>;
}
const num = (
const numElement = appliedFiltersNum ? (
<Circle
className="AppliedFiltersNum"
bg={ isActive ? 'link_hovered' : badgeBgColor }
size={ 5 }
color={ badgeColor }
bg={{ _light: 'blue.700', _dark: 'gray.50' }}
color={{ _light: 'white', _dark: 'black' }}
>
{ appliedFiltersNum }
</Circle>
);
) : null;
return (
<Button
ref={ ref }
rightIcon={ appliedFiltersNum ? num : undefined }
size="sm"
fontWeight="500"
variant="outline"
colorScheme="gray"
onClick={ onClick }
isActive={ isActive }
fontWeight="medium"
gap={ 1 }
variant="dropdown"
selected={ Boolean(appliedFiltersNum) }
px={ 1.5 }
flexShrink={ 0 }
as={ as }
pointerEvents="all"
_hover={ isActive ? {
color: 'link_hovered',
'.AppliedFiltersNum': {
bg: 'link_hovered',
},
} : undefined }
{ ...rest }
>
{ FilterIcon }
<IconSvg name="filter" boxSize={ 5 }/>
<Box display={{ base: 'none', lg: 'block' }}>Filter</Box>
{ numElement }
</Button>
);
};
......
ui/shared/filters/PopoverFilter.tsx
View file @ 81bf03c8
import type { PopoverContentProps } from '@chakra-ui/react';
import {
PopoverTrigger,
PopoverContent,
PopoverBody,
useDisclosure,
} from '@chakra-ui/react';
import React from 'react';
import Popover from 'ui/shared/chakra/Popover';
import { PopoverBody, PopoverContent, PopoverTrigger, PopoverRoot } from 'toolkit/chakra/popover';
import FilterButton from 'ui/shared/filters/FilterButton';
interface Props {
......@@ -18,24 +12,20 @@ interface Props {
}
const PopoverFilter = ({ appliedFiltersNum, children, contentProps, isLoading }: Props) => {
const { isOpen, onToggle, onClose } = useDisclosure();
return (
<Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
<PopoverRoot>
<PopoverTrigger>
<FilterButton
isActive={ isOpen }
onClick={ onToggle }
appliedFiltersNum={ appliedFiltersNum }
isLoading={ isLoading }
/>
</PopoverTrigger>
<PopoverContent { ...contentProps }>
<PopoverBody px={ 4 } py={ 6 } display="flex" flexDir="column" rowGap={ 5 }>
<PopoverBody display="flex" flexDir="column" rowGap={ 5 }>
{ children }
</PopoverBody>
</PopoverContent>
</Popover>
</PopoverRoot>
);
};
......
ui/shared/filters/TokenTypeFilter.tsx
View file @ 81bf03c8
import { CheckboxGroup, Checkbox, Text, Flex, Link, useCheckboxGroup } from '@chakra-ui/react';
import { CheckboxGroup, Text, Flex, useCheckboxGroup, Fieldset } from '@chakra-ui/react';
import React from 'react';
import type { NFTTokenType, TokenType } from 'types/api/token';
import {
TOKEN_TYPES, TOKEN_TYPE_IDS, NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
import { TOKEN_TYPES, TOKEN_TYPE_IDS, NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
import { Checkbox } from 'toolkit/chakra/checkbox';
import { Link } from 'toolkit/chakra/link';
type Props<T extends TokenType | NFTTokenType> = {
onChange: (nextValue: Array<T>) => void;
......@@ -22,15 +23,15 @@ const TokenTypeFilter = <T extends TokenType | NFTTokenType>({ nftOnly, onChange
onChange([]);
}, [ onChange, setValue, value.length ]);
const handleChange = React.useCallback((nextValue: Array<T>) => {
setValue(nextValue);
onChange(nextValue);
const handleChange = React.useCallback((nextValue: Array<string>) => {
setValue(nextValue as Array<T>);
onChange(nextValue as Array<T>);
}, [ onChange, setValue ]);
return (
<>
<Flex justifyContent="space-between" fontSize="sm">
<Text fontWeight={ 600 } variant="secondary">Type</Text>
<Text fontWeight={ 600 } color="text.secondary">Type</Text>
<Link
onClick={ handleReset }
cursor={ value.length > 0 ? 'pointer' : 'unset' }
......@@ -42,13 +43,24 @@ const TokenTypeFilter = <T extends TokenType | NFTTokenType>({ nftOnly, onChange
Reset
</Link>
</Flex>
<CheckboxGroup size="lg" onChange={ handleChange } value={ value }>
<Fieldset.Root>
<CheckboxGroup defaultValue={ defaultValue } onValueChange={ handleChange } value={ value } name="token_type">
<Fieldset.Content>
{ (nftOnly ? NFT_TOKEN_TYPE_IDS : TOKEN_TYPE_IDS).map((id) => (
<Checkbox key={ id } value={ id }>
{ TOKEN_TYPES[id] }
</Checkbox>
)) }
</Fieldset.Content>
</CheckboxGroup>
</Fieldset.Root>
{ /* <CheckboxGroup size="lg" onChange={ handleChange } value={ value }>
{ (nftOnly ? NFT_TOKEN_TYPE_IDS : TOKEN_TYPE_IDS).map((id) => (
<Checkbox key={ id } value={ id }>
<Text fontSize="md">{ TOKEN_TYPES[id] }</Text>
</Checkbox>
)) }
</CheckboxGroup>
</CheckboxGroup> */ }
</>
);
};
......
ui/showcases/Checkbox.tsx 0 → 100644
View file @ 81bf03c8
import React from 'react';
import { Checkbox } from 'toolkit/chakra/checkbox';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const CheckboxesShowcase = () => {
return (
<Container value="checkboxes">
<Section>
<SectionHeader>Variant</SectionHeader>
<SamplesStack>
<Sample label="variant: subtle">
<Checkbox>Option 1</Checkbox>
<Checkbox checked>Option 2</Checkbox>
<Checkbox disabled>Option 3</Checkbox>
<Checkbox checked disabled>Option 4</Checkbox>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Size</SectionHeader>
<SamplesStack>
<Sample label="size: xs">
<Checkbox size="xs">Option 1</Checkbox>
<Checkbox size="xs">Option 2</Checkbox>
</Sample>
<Sample label="size: sm">
<Checkbox size="sm">Option 1</Checkbox>
<Checkbox size="sm">Option 2</Checkbox>
</Sample>
<Sample label="size: md">
<Checkbox size="md">Option 1</Checkbox>
<Checkbox size="md">Option 2</Checkbox>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(CheckboxesShowcase);
ui/showcases/Radio.tsx 0 → 100644
View file @ 81bf03c8
import React from 'react';
import { Radio, RadioGroup } from 'toolkit/chakra/radio';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const RadiosShowcase = () => {
return (
<Container value="radios">
<Section>
<SectionHeader>Variant</SectionHeader>
<SamplesStack>
<Sample label="variant: subtle">
<RadioGroup defaultValue="1">
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</RadioGroup>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Size</SectionHeader>
<SamplesStack>
<Sample label="size: xs">
<RadioGroup defaultValue="1" size="xs">
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</RadioGroup>
</Sample>
<Sample label="size: sm">
<RadioGroup defaultValue="1" size="sm">
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</RadioGroup>
</Sample>
<Sample label="size: md">
<RadioGroup defaultValue="1" size="md">
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</RadioGroup>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Orientation</SectionHeader>
<SamplesStack>
<Sample label="orientation: horizontal">
<RadioGroup defaultValue="1" orientation="horizontal">
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</RadioGroup>
</Sample>
<Sample label="orientation: vertical">
<RadioGroup defaultValue="1" orientation="vertical">
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</RadioGroup>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Disabled</SectionHeader>
<SamplesStack>
<Sample label="disabled: true">
<RadioGroup defaultValue="1" disabled>
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</RadioGroup>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(RadiosShowcase);
ui/showcases/Select.tsx
View file @ 81bf03c8
import { createListCollection } from '@chakra-ui/react';
import { noop } from 'es-toolkit';
import React from 'react';
import { SelectContent, SelectItem, SelectRoot, SelectControl, SelectValueText } from 'toolkit/chakra/select';
import Sort from 'ui/shared/sort/Sort';
import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
import { SORT_OPTIONS } from 'ui/txs/useTxsSort';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
......@@ -75,6 +77,15 @@ const SelectsShowcase = () => {
/>
</Sample>
</SamplesStack>
<SectionSubHeader>Token transfers filter</SectionSubHeader>
<SamplesStack>
<Sample>
<TokenTransferFilter defaultTypeFilters={ [ ] } onTypeFilterChange={ noop } withAddressFilter/>
<TokenTransferFilter defaultTypeFilters={ [ ] } onTypeFilterChange={ noop } appliedFiltersNum={ 2 }/>
<TokenTransferFilter defaultTypeFilters={ [ ] } onTypeFilterChange={ noop } appliedFiltersNum={ 2 } isLoading/>
</Sample>
</SamplesStack>
</Section>
</Container>
);
......
ui/tx/TxTokenTransfer.tsx
View file @ 81bf03c8
import { Hide, Show } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
......@@ -72,12 +72,12 @@ const TxTokenTransfer = ({ txQuery, tokenTransferFilter }: Props) => {
const content = tokenTransferQuery.data?.items ? (
<>
<Hide below="lg" ssr={ false }>
<Box hideBelow="lg">
<TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : ACTION_BAR_HEIGHT_DESKTOP } isLoading={ tokenTransferQuery.isPlaceholderData }/>
</Hide>
<Show below="lg" ssr={ false }>
</Box>
<Box hideFrom="lg">
<TokenTransferList data={ items } isLoading={ tokenTransferQuery.isPlaceholderData }/>
</Show>
</Box>
</>
) : null;
......@@ -96,15 +96,16 @@ const TxTokenTransfer = ({ txQuery, tokenTransferFilter }: Props) => {
return (
<DataListDisplay
isError={ txQuery.isError || tokenTransferQuery.isError }
items={ items }
itemsNum={ items.length }
emptyText="There are no token transfers."
filterProps={{
emptyFilteredText: `Couldn${ apos }t find any token transfer that matches your query.`,
hasActiveFilters: Boolean(numActiveFilters),
}}
content={ content }
actionBar={ actionBar }
/>
>
{ content }
</DataListDisplay>
);
};
......
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