diff --git a/src/app/_components/BlockList/BlockCount.tsx b/src/app/_components/BlockList/BlockCount.tsx index 6168e7d92..f1dc541d3 100644 --- a/src/app/_components/BlockList/BlockCount.tsx +++ b/src/app/_components/BlockList/BlockCount.tsx @@ -3,8 +3,7 @@ import pluralize from 'pluralize'; import { memo } from 'react'; import { Button } from '../../../ui/Button'; -import { Icon } from '../../../ui/Icon'; -import { Text } from '../../../ui/Text'; +import { Icon, Text} from '@chakra-ui/react'; export const BlockCount = memo(function ({ count, @@ -55,7 +54,7 @@ export const BlockCount = memo(function ({ > +{count} {pluralize('block', count)} {canLoadMore ? ( - + ) : null} diff --git a/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx b/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx index 6f6ada3b1..736d96cb9 100644 --- a/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx +++ b/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx @@ -1,3 +1,4 @@ +import { Box, Flex, Grid, HStack, Icon, Stack, Text } from '@chakra-ui/react'; import { ArrowElbowLeftDown } from '@phosphor-icons/react'; import React, { ReactNode, useCallback, useMemo, useState } from 'react'; @@ -8,13 +9,6 @@ import { Timestamp } from '../../../../common/components/Timestamp'; import { useInfiniteQueryResult } from '../../../../common/hooks/useInfiniteQueryResult'; import { useBlocksByBurnBlock } from '../../../../common/queries/useBlocksByBurnBlock'; import { truncateMiddle } from '../../../../common/utils/utils'; -import { Box } from '../../../../ui/Box'; -import { Flex } from '../../../../ui/Flex'; -import { Grid } from '../../../../ui/Grid'; -import { HStack } from '../../../../ui/HStack'; -import { Icon } from '../../../../ui/Icon'; -import { Stack } from '../../../../ui/Stack'; -import { Text } from '../../../../ui/Text'; import BitcoinIcon from '../../../../ui/icons/BitcoinIcon'; import StxIcon from '../../../../ui/icons/StxIcon'; import { Caption } from '../../../../ui/typography'; @@ -68,7 +62,7 @@ const StxBlockRow = ({ isLast?: boolean; }) => { const icon = isFirst ? ( - + ) : undefined; @@ -265,10 +259,10 @@ function BitcoinHeader({ flexWrap={'wrap'} > - + - + diff --git a/src/app/_components/BlockList/Ungrouped/BlockListUngrouped.tsx b/src/app/_components/BlockList/Ungrouped/BlockListUngrouped.tsx index 0773a19ac..501601b39 100644 --- a/src/app/_components/BlockList/Ungrouped/BlockListUngrouped.tsx +++ b/src/app/_components/BlockList/Ungrouped/BlockListUngrouped.tsx @@ -1,3 +1,4 @@ +import { Box, Flex, FlexProps, Grid, HStack, Icon, Stack, Text } from '@chakra-ui/react'; import { ArrowBendDownLeft, Clock } from '@phosphor-icons/react'; import React, { ReactNode, useCallback, useMemo, useState } from 'react'; @@ -8,13 +9,6 @@ import { Timestamp } from '../../../../common/components/Timestamp'; import { useInfiniteQueryResult } from '../../../../common/hooks/useInfiniteQueryResult'; import { useBlocksByBurnBlock } from '../../../../common/queries/useBlocksByBurnBlock'; import { truncateMiddle } from '../../../../common/utils/utils'; -import { Box } from '../../../../ui/Box'; -import { Flex, FlexProps } from '../../../../ui/Flex'; -import { Grid } from '../../../../ui/Grid'; -import { HStack } from '../../../../ui/HStack'; -import { Icon } from '../../../../ui/Icon'; -import { Stack } from '../../../../ui/Stack'; -import { Text } from '../../../../ui/Text'; import BitcoinIcon from '../../../../ui/icons/BitcoinIcon'; import StxIcon from '../../../../ui/icons/StxIcon'; import { Caption } from '../../../../ui/typography'; @@ -56,14 +50,15 @@ export function BtcBlockRowContent({ timestamp, height, hash, isFirst }: BtcBloc - + {isFirst ? ( @@ -79,7 +74,7 @@ export function BtcBlockRowContent({ timestamp, height, hash, isFirst }: BtcBloc {isFirst ? ( - + @@ -164,7 +159,7 @@ function StxBlockRow({ isLast?: boolean; }) { const icon = isFirst ? ( - + ) : null; diff --git a/src/app/_components/BlockList/Ungrouped/skeleton.tsx b/src/app/_components/BlockList/Ungrouped/skeleton.tsx index 95db78126..88d7f382b 100644 --- a/src/app/_components/BlockList/Ungrouped/skeleton.tsx +++ b/src/app/_components/BlockList/Ungrouped/skeleton.tsx @@ -2,11 +2,7 @@ import { Circle } from '@phosphor-icons/react'; import React from 'react'; import { SkeletonText } from '../../../../components/ui/skeleton'; -import { Box } from '../../../../ui/Box'; -import { Flex } from '../../../../ui/Flex'; -import { HStack } from '../../../../ui/HStack'; -import { Icon } from '../../../../ui/Icon'; -import { Stack } from '../../../../ui/Stack'; +import { Icon, HStack, Flex, Box, Stack } from '@chakra-ui/react'; import { Caption } from '../../../../ui/typography'; import { BlockListGridHeaderRowSkeleton } from '../Grouped/skeleton'; import { LineAndNode } from '../LineAndNode'; @@ -22,7 +18,7 @@ export function BlockListRowSkeleton({ isFirst?: boolean; }) { const icon = isFirst ? ( - + ) : null; diff --git a/src/app/_components/BlockList/UpdateBar.tsx b/src/app/_components/BlockList/UpdateBar.tsx index 6d41eb285..2ed678c05 100644 --- a/src/app/_components/BlockList/UpdateBar.tsx +++ b/src/app/_components/BlockList/UpdateBar.tsx @@ -1,11 +1,9 @@ +import { Flex, FlexProps, Icon, Text } from '@chakra-ui/react'; import { ArrowCounterClockwise } from '@phosphor-icons/react'; import { ReactNode, Suspense, useCallback, useRef } from 'react'; import RelativeTimeDisplay from '../../../common/components/RelativeTimeDisplay'; import { Button } from '../../../components/ui/button'; -import { Flex, FlexProps } from '../../../ui/Flex'; -import { Icon } from '../../../ui/Icon'; -import { Text } from '../../../ui/Text'; import { useBlockListContext } from './BlockListContext'; import { UpdateBarSkeleton } from './Grouped/skeleton'; import { getFadeAnimationStyle } from './consts'; @@ -80,7 +78,7 @@ export function UpdateBarBase({ diff --git a/src/common/components/Sip10Disclaimer.tsx b/src/common/components/Sip10Disclaimer.tsx index ea67b25c8..9b5f58139 100644 --- a/src/common/components/Sip10Disclaimer.tsx +++ b/src/common/components/Sip10Disclaimer.tsx @@ -1,15 +1,13 @@ +import { Flex, Icon, Text } from '@chakra-ui/react'; import { Warning } from '@phosphor-icons/react'; -import { Flex } from '../../ui/Flex'; -import { Icon } from '../../ui/Icon'; import { Link } from '../../ui/Link'; -import { Text } from '../../ui/Text'; export function Sip10Disclaimer() { return ( - + Please note that SIP-10 data is extracted from third party providers. We make no diff --git a/src/common/components/TxIcon.tsx b/src/common/components/TxIcon.tsx index a08b71509..7f6d4ae59 100644 --- a/src/common/components/TxIcon.tsx +++ b/src/common/components/TxIcon.tsx @@ -1,12 +1,10 @@ -import { useBreakpointValue } from '@chakra-ui/react'; +import { Flex, Icon, IconProps, useBreakpointValue } from '@chakra-ui/react'; import { ArrowBendDownRight, Clock, WarningCircle } from '@phosphor-icons/react'; import React, { FC, ReactNode } from 'react'; import { Transaction } from '@stacks/stacks-blockchain-api-types'; import { TransactionType } from '@stacks/stacks-blockchain-api-types/generated'; -import { Flex } from '../../ui/Flex'; -import { Icon, IconProps } from '../../ui/Icon'; import ClarityIcon from '../../ui/icons/ClarityIcon'; import CubeSparkleIcon from '../../ui/icons/CubeSparkleIcon'; import DiagonalArrowsIcon from '../../ui/icons/DiagonalArrowsIcon'; @@ -128,8 +126,8 @@ const StatusBubble: React.FC<{ txStatus?: TxStatus }> = ({ txStatus }) => { justifyContent={'center'} > @@ -175,8 +173,8 @@ export const TxIcon: FC< {showTxStatusBubble && } {TxIcon && ( {TxIcon} diff --git a/src/common/components/TxTypeTag.tsx b/src/common/components/TxTypeTag.tsx index 47f332a55..0b2043fcc 100644 --- a/src/common/components/TxTypeTag.tsx +++ b/src/common/components/TxTypeTag.tsx @@ -2,8 +2,7 @@ import { Transaction } from '@stacks/stacks-blockchain-api-types'; -import { FlexProps } from '../../ui/Flex'; -import { Icon } from '../../ui/Icon'; +import { Icon, FlexProps } from '@chakra-ui/react'; import { TransactionType } from '../constants/constants'; import { getTxTypeIcon } from './TxIcon'; import { StyledBadge } from './status'; @@ -25,7 +24,7 @@ export function TxTypeTag({ type, ...rest }: TagProps) { const TypeIcon = getTxTypeIcon(type); return ( - + {TypeIcon} {txTypeNamesMap[type]} diff --git a/src/common/components/contract-source.tsx b/src/common/components/contract-source.tsx index ac56275c5..b3caa6953 100644 --- a/src/common/components/contract-source.tsx +++ b/src/common/components/contract-source.tsx @@ -1,11 +1,10 @@ 'use client'; -import { Flex } from '@chakra-ui/react'; +import { Flex, Icon } from '@chakra-ui/react'; import { ArrowSquareOut } from '@phosphor-icons/react'; import { ExplorerErrorBoundary } from '../../app/_components/ErrorBoundary'; import { CodeEditor } from '../../ui/CodeEditor'; -import { Icon } from '../../ui/Icon'; import { Caption } from '../../ui/typography'; import { useContractById } from '../queries/useContractById'; import { TxLink } from './ExplorerLinks'; @@ -24,7 +23,7 @@ function ContractSourceBase({ txContractId }: { txContractId: string }) { View deployment - + diff --git a/src/common/components/icons/_base.tsx b/src/common/components/icons/_base.tsx index 42eaef831..ffe5c9fc3 100644 --- a/src/common/components/icons/_base.tsx +++ b/src/common/components/icons/_base.tsx @@ -11,8 +11,8 @@ export const BaseSvg = forwardRef( ) => ( = props => ( - - - - - - -); diff --git a/src/common/components/modals/AddNetwork/AddNetworkForm.tsx b/src/common/components/modals/AddNetwork/AddNetworkForm.tsx index 5aef8b6fd..52aa7bf06 100644 --- a/src/common/components/modals/AddNetwork/AddNetworkForm.tsx +++ b/src/common/components/modals/AddNetwork/AddNetworkForm.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Box, Field as CUIField, Fieldset, Input, Stack, Text } from '@chakra-ui/react'; +import { Box, Field as CUIField, Fieldset, Input, Stack, Text, Icon } from '@chakra-ui/react'; import { CaretDown, CaretRight } from '@phosphor-icons/react'; import { Field, FieldProps, Form, Formik, FormikErrors } from 'formik'; import { useRouter } from 'next/navigation'; @@ -16,7 +16,6 @@ import { import { Button } from '../../../../components/ui/button'; import { Checkbox } from '../../../../components/ui/checkbox'; import { Field as ChakraField } from '../../../../components/ui/field'; -import { Icon } from '../../../../ui/Icon'; import { NetworkIdModeMap } from '../../../constants/network'; import { useGlobalContext } from '../../../context/useGlobalContext'; import { useAppDispatch } from '../../../state/hooks'; @@ -201,7 +200,7 @@ export const AddNetworkForm: FC = () => { - + {isBtcExplorerUrlsAccordionExpanded ? : } BTC Explorer URLs diff --git a/src/common/components/modals/Nakamoto.tsx b/src/common/components/modals/Nakamoto.tsx index ca7ee4ec2..28bc7c3d2 100644 --- a/src/common/components/modals/Nakamoto.tsx +++ b/src/common/components/modals/Nakamoto.tsx @@ -1,9 +1,8 @@ -import { Flex, Text } from '@chakra-ui/react'; +import { Flex, Icon, Text } from '@chakra-ui/react'; import { ArrowUpRight } from '@phosphor-icons/react'; import { useQueryClient } from '@tanstack/react-query'; import { useEffect, useState } from 'react'; -import { Icon } from '../../..//ui/Icon'; import { DialogBackdrop, DialogBody, @@ -81,7 +80,7 @@ export function NakamotoModal() { > Learn more about Nakamoto on Mainnet - + diff --git a/src/common/components/modals/SBTCModal.tsx b/src/common/components/modals/SBTCModal.tsx index c7a41a266..95d46c1d8 100644 --- a/src/common/components/modals/SBTCModal.tsx +++ b/src/common/components/modals/SBTCModal.tsx @@ -1,9 +1,8 @@ -import { Flex, Stack, Text } from '@chakra-ui/react'; +import { Flex, Stack, Text, Icon } from '@chakra-ui/react'; import { ArrowUpRight } from '@phosphor-icons/react'; import { useQueryClient } from '@tanstack/react-query'; import { useEffect, useState } from 'react'; -import { Icon } from '../../..//ui/Icon'; import { DialogBackdrop, DialogBody, @@ -80,7 +79,7 @@ export function SBTCModal() { > See sBTC in the Explorer - + diff --git a/src/common/components/status.tsx b/src/common/components/status.tsx index e2b364746..9c9300be2 100644 --- a/src/common/components/status.tsx +++ b/src/common/components/status.tsx @@ -1,11 +1,10 @@ 'use client'; +import { FlexProps, Icon } from '@chakra-ui/react'; import { Check, WarningCircle } from '@phosphor-icons/react'; import * as React from 'react'; import { ReactNode } from 'react'; -import { FlexProps } from '../../ui/Flex'; -import { Icon } from '../../ui/Icon'; import { Spinner } from '../../ui/Spinner'; import { TxStatus } from '../types/tx'; import { Badge, BadgeProps } from './Badge'; @@ -59,7 +58,9 @@ export const TxStatusLabel: React.FC = ({ status, ...rest }) => { const label = labelMap[status]; return ( - {IconComponent} + + {IconComponent} + {label} ); diff --git a/src/common/components/transaction-item.tsx b/src/common/components/transaction-item.tsx index 59f88cc1f..f4d2c7ebc 100644 --- a/src/common/components/transaction-item.tsx +++ b/src/common/components/transaction-item.tsx @@ -1,13 +1,12 @@ 'use client'; -import { Box, Flex, FlexProps, HStack } from '@chakra-ui/react'; +import { Box, Flex, FlexProps, HStack, Icon } from '@chakra-ui/react'; import { ArrowRight } from '@phosphor-icons/react'; import * as React from 'react'; import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types'; import { Tooltip } from '../../components/ui/tooltip'; -import { Icon } from '../../ui/Icon'; import { Caption, TextProps } from '../../ui/typography'; import { toRelativeTime, truncateMiddle } from '../utils/utils'; import { ExplorerLink } from './ExplorerLinks'; @@ -95,7 +94,7 @@ export const AddressArea = React.memo( - + diff --git a/src/features/search/NoTxs.tsx b/src/features/search/NoTxs.tsx index 0dd197de6..e3f43dfd1 100644 --- a/src/features/search/NoTxs.tsx +++ b/src/features/search/NoTxs.tsx @@ -1,9 +1,6 @@ +import { Flex, Icon, Text } from '@chakra-ui/react'; import { MagnifyingGlass, X } from '@phosphor-icons/react'; -import { Flex } from '../../ui/Flex'; -import { Icon } from '../../ui/Icon'; -import { Text } from '../../ui/Text'; - export function NoTxs() { return ( - + - + diff --git a/src/features/search/dropdown/error-message.tsx b/src/features/search/dropdown/error-message.tsx index 5724c4b94..5c7b7bae1 100644 --- a/src/features/search/dropdown/error-message.tsx +++ b/src/features/search/dropdown/error-message.tsx @@ -2,14 +2,13 @@ import { Warning } from '@phosphor-icons/react'; import * as React from 'react'; import { Circle } from '../../../common/components/Circle'; -import { Flex } from '../../../ui/Flex'; -import { Icon } from '../../../ui/Icon'; +import { Flex, Icon } from '@chakra-ui/react'; import { Caption } from '../../../ui/typography'; export const SearchErrorMessage: React.FC<{ message: string }> = React.memo(({ message }) => ( - + diff --git a/src/features/search/search-field/search-box.tsx b/src/features/search/search-field/search-box.tsx index b39cc93b1..c7444b086 100644 --- a/src/features/search/search-field/search-box.tsx +++ b/src/features/search/search-field/search-box.tsx @@ -1,17 +1,14 @@ 'use client'; -import { Group } from '@chakra-ui/react'; +import { Flex, Group, Icon, Text } from '@chakra-ui/react'; import { MagnifyingGlass, X } from '@phosphor-icons/react'; import { useSearchParams } from 'next/navigation'; import { useEffect, useState } from 'react'; import { buildAdvancedSearchQuery } from '../../../common/queries/useSearchQuery'; import { useAppDispatch, useAppSelector } from '../../../common/state/hooks'; -import { Flex } from '../../../ui/Flex'; -import { Icon } from '../../../ui/Icon'; import { IconButton } from '../../../ui/IconButton'; import { Spinner } from '../../../ui/Spinner'; -import { Text } from '../../../ui/Text'; import { clearSearchTerm, selectIsSearchFieldFocused, selectSearchTerm } from '../search-slice'; import { SearchInput } from './search-input'; @@ -61,7 +58,7 @@ export function SearchBox({ isFetching }: { isFetching: boolean }) { bgColor: 'whiteAlpha.300', }} > - + @@ -80,7 +77,7 @@ export function SearchBox({ isFetching }: { isFetching: boolean }) { _hover={{ bg: 'transparent' }} mr={3} > - + diff --git a/src/features/txs-list/ListItem/TransferListItem.tsx b/src/features/txs-list/ListItem/TransferListItem.tsx index 19eb6b149..1ed55a0b4 100644 --- a/src/features/txs-list/ListItem/TransferListItem.tsx +++ b/src/features/txs-list/ListItem/TransferListItem.tsx @@ -1,4 +1,4 @@ -import { useBreakpointValue } from '@chakra-ui/react'; +import { HStack, Icon, useBreakpointValue } from '@chakra-ui/react'; import { ArrowDown, ArrowUp } from '@phosphor-icons/react'; import { FC, memo, useMemo } from 'react'; @@ -10,8 +10,6 @@ import { TwoColsListItem } from '../../../common/components/TwoColumnsListItem'; import { PrincipalLink } from '../../../common/components/transaction-item'; import { useFtMetadata } from '../../../common/queries/useFtMetadata'; import { ftDecimals, getAssetNameParts } from '../../../common/utils/utils'; -import { HStack } from '../../../ui/HStack'; -import { Icon } from '../../../ui/Icon'; import { Caption } from '../../../ui/typography'; interface TransferListItemProps { @@ -54,18 +52,17 @@ export const TransferListItem: FC = memo( } ); - const icon = useMemo( () => isOriginator ? ( - + ) : ( - + diff --git a/src/features/txs-list/ListItem/TxListItem.tsx b/src/features/txs-list/ListItem/TxListItem.tsx index 52d0c1bf3..cb13c2e55 100644 --- a/src/features/txs-list/ListItem/TxListItem.tsx +++ b/src/features/txs-list/ListItem/TxListItem.tsx @@ -1,3 +1,4 @@ +import { FlexProps, Stack, Text } from '@chakra-ui/react'; import { FC, ReactNode, memo } from 'react'; import { Transaction } from '@stacks/stacks-blockchain-api-types'; @@ -8,9 +9,6 @@ import { TxIcon } from '../../../common/components/TxIcon'; import { AddressArea, Nonce, TxTimestamp } from '../../../common/components/transaction-item'; import { getTransactionStatus } from '../../../common/utils/transactions'; import { MICROSTACKS_IN_STACKS, truncateMiddle } from '../../../common/utils/utils'; -import { FlexProps } from '../../../ui/Flex'; -import { Stack } from '../../../ui/Stack'; -import { Text } from '../../../ui/Text'; import { Caption } from '../../../ui/typography'; import { TxTitle } from '../TxTitle'; import { getTransactionTypeLabel } from '../utils'; diff --git a/src/features/txs-list/ListItem/TxListItemMini.tsx b/src/features/txs-list/ListItem/TxListItemMini.tsx index ea9605e76..ae0d30f46 100644 --- a/src/features/txs-list/ListItem/TxListItemMini.tsx +++ b/src/features/txs-list/ListItem/TxListItemMini.tsx @@ -1,3 +1,4 @@ +import { HStack } from '@chakra-ui/react'; import { FC, memo } from 'react'; import { Transaction } from '@stacks/stacks-blockchain-api-types'; @@ -6,7 +7,6 @@ import { TwoColsListItem } from '../../../common/components/TwoColumnsListItem'; import { TxIcon } from '../../../common/components/TxIcon'; import { AddressArea } from '../../../common/components/transaction-item'; import { getTransactionStatus } from '../../../common/utils/transactions'; -import { HStack } from '../../../ui/HStack'; import { Caption, Title } from '../../../ui/typography'; import { TxTitle } from '../TxTitle'; import { getTransactionTypeLabel } from '../utils'; diff --git a/src/features/txs-list/tabs/CSVDownloadButton.tsx b/src/features/txs-list/tabs/CSVDownloadButton.tsx index 215a11e3b..ff489dadd 100644 --- a/src/features/txs-list/tabs/CSVDownloadButton.tsx +++ b/src/features/txs-list/tabs/CSVDownloadButton.tsx @@ -1,11 +1,10 @@ 'use client'; +import { Box, Icon } from '@chakra-ui/react'; import { DownloadSimple } from '@phosphor-icons/react'; import { useEffect, useState } from 'react'; import { CSVDownload } from 'react-csv'; -import { Box } from '../../../ui/Box'; -import { Icon } from '../../../ui/Icon'; import { CSVDownloadObjectType, useTxsCSVData } from './useTxsCSVData'; export function CSVDownloadButton({ address }: { address: string }) { @@ -21,7 +20,6 @@ export function CSVDownloadButton({ address }: { address: string }) { setTransactionData(formattedTxnData); }; - return ( - + Export as CSV diff --git a/src/features/txsFilterAndSort/FilterButton.tsx b/src/features/txsFilterAndSort/FilterButton.tsx index 577a03255..3e960ff82 100644 --- a/src/features/txsFilterAndSort/FilterButton.tsx +++ b/src/features/txsFilterAndSort/FilterButton.tsx @@ -1,14 +1,12 @@ 'use client'; -import { Flex, Text } from '@chakra-ui/react'; +import { Flex, HStack, Icon, Text } from '@chakra-ui/react'; import { ArrowBendDownRight, FunnelSimple } from '@phosphor-icons/react'; import { ReactNode, memo, useCallback, useMemo, useState } from 'react'; import { useGlobalContext } from '../../common/context/useGlobalContext'; import { Checkbox } from '../../components/ui/checkbox'; import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../../components/ui/menu'; -import { HStack } from '../../ui/HStack'; -import { Icon } from '../../ui/Icon'; import ClarityIcon from '../../ui/icons/ClarityIcon'; import CubeSparkleIcon from '../../ui/icons/CubeSparkleIcon'; import DiagonalArrowsIcon from '../../ui/icons/DiagonalArrowsIcon'; @@ -70,7 +68,6 @@ export const FilterButton = memo(() => { }, [setIsFocused]); const isHoveredOrFocused = isHovered || isFocused; - const { setActiveFilters } = useFilterAndSortState(); // const { value: selectedFilters, getItemProps } = useCheckboxGroup({ @@ -130,7 +127,7 @@ export const FilterButton = memo(() => { flexShrink={0} > - + Filters {numSelectedFilters > 0 && `(${numSelectedFilters})`} diff --git a/src/features/txsFilterAndSort/TransactionMessages.tsx b/src/features/txsFilterAndSort/TransactionMessages.tsx index ed2087039..01716a18a 100644 --- a/src/features/txsFilterAndSort/TransactionMessages.tsx +++ b/src/features/txsFilterAndSort/TransactionMessages.tsx @@ -1,12 +1,9 @@ 'use client'; +import { Box, Flex, GridProps, Icon } from '@chakra-ui/react'; import { XCircle } from '@phosphor-icons/react'; import React, { ReactNode } from 'react'; -import { Box } from '../../ui/Box'; -import { Flex } from '../../ui/Flex'; -import { GridProps } from '../../ui/Grid'; -import { Icon } from '../../ui/Icon'; import { Text, Title } from '../../ui/typography'; const MessageBase = ({ @@ -21,7 +18,8 @@ const MessageBase = ({ return ( - {icon} + + {icon} + diff --git a/src/ui/CodeEditor/index.tsx b/src/ui/CodeEditor/index.tsx index c64c26ce8..eb852ebae 100644 --- a/src/ui/CodeEditor/index.tsx +++ b/src/ui/CodeEditor/index.tsx @@ -1,5 +1,6 @@ 'use client'; +import { Box } from '@chakra-ui/react'; import Editor, { EditorProps, Monaco } from '@monaco-editor/react'; import { FrameCorners } from '@phosphor-icons/react'; import Prism from 'prismjs'; @@ -10,7 +11,6 @@ import { defineTheme } from '../../app/sandbox/editor-config/define-theme'; import { liftOff } from '../../app/sandbox/editor-config/init'; import { configLanguage } from '../../app/sandbox/editor-config/language'; import { claritySyntax } from '../../common/constants/claritySyntax'; -import { Box } from '../Box'; import { IconButton } from '../IconButton'; import { clarity } from './clarity'; diff --git a/src/ui/ExpandingTextarea.tsx b/src/ui/ExpandingTextarea.tsx index 57aaf3560..0f56b6ffc 100644 --- a/src/ui/ExpandingTextarea.tsx +++ b/src/ui/ExpandingTextarea.tsx @@ -28,7 +28,6 @@ export const ExpandingTextarea = forwardRef(({ children, size, ...rest }, ref) => ( - - {children} - -)); diff --git a/src/ui/icons/WalletIcon.tsx b/src/ui/icons/WalletIcon.tsx index 1c3157b71..dd68419b0 100644 --- a/src/ui/icons/WalletIcon.tsx +++ b/src/ui/icons/WalletIcon.tsx @@ -1,10 +1,9 @@ 'use client'; +import { Icon } from '@chakra-ui/react'; import { IconProps } from '@phosphor-icons/react'; import { forwardRef } from 'react'; -import { Icon } from '../Icon'; - const WalletIcon = forwardRef(({ size = '44px' }, ref) => ( (({ size = '44px' }, ref) fill="none" strokeLinecap="round" strokeLinejoin="round" - size={size} + h={size} + w={size} ref={ref} >