From e974c9130b0c39bc9952f0c8da541285d3b020e0 Mon Sep 17 00:00:00 2001 From: Nicholas Barnett Date: Wed, 1 Jan 2025 19:20:48 -0600 Subject: [PATCH] feat: wp --- src/app/_components/BlockList/BlockCount.tsx | 5 +-- .../BlockList/Grouped/BlockListGrouped.tsx | 14 ++----- .../Ungrouped/BlockListUngrouped.tsx | 17 +++------ .../BlockList/Ungrouped/skeleton.tsx | 8 +--- src/app/_components/BlockList/UpdateBar.tsx | 6 +-- src/app/_components/ErrorBox.tsx | 6 +-- src/app/_components/NavBar/BtcStxPrice.tsx | 7 ++-- src/app/_components/NavBar/DesktopNav.tsx | 6 +-- src/app/_components/NavBar/Logo.tsx | 4 +- src/app/_components/NavBar/MobileNav.tsx | 6 +-- src/app/_components/NavBar/NetworkLabel.tsx | 10 ++--- .../_components/NavBar/NetworkModeBanner.tsx | 6 +-- src/app/_components/NavBar/index.tsx | 6 +-- .../Stats/CurrentStackingCycle/index.tsx | 7 +--- src/app/_components/Stats/LastBlock/index.tsx | 7 +--- .../Stats/NextStackingCycle/index.tsx | 9 ++--- src/app/_components/Stats/StxSupply/index.tsx | 9 ++--- .../_components/time-filter/TimeFilter.tsx | 5 +-- .../StxBalance/StackingPercentage.tsx | 7 ++-- .../address/[principal]/StxBalance/index.tsx | 14 +++---- src/app/block/[hash]/PageClient.tsx | 12 ++---- .../btcblock/[hash]/BitcoinAnchorDetails.tsx | 6 +-- src/app/btcblock/[hash]/NavBlock.tsx | 5 +-- src/app/sandbox/Wrapper.tsx | 7 +--- .../components/Argument/ListArgumentInput.tsx | 18 ++------- .../ContractCall/AvailableFunctionsView.tsx | 38 +++++++++---------- .../DefaultView/PopularContracts.tsx | 5 +-- .../components/ContractCall/FunctionView.tsx | 7 ++-- .../ContractCall/PostConditionForm.tsx | 6 +-- .../ContractCall/SelectedContractView.tsx | 33 +++++++--------- src/app/sandbox/components/Toolbar.tsx | 11 ++---- .../sandbox/components/TransactionsPanel.tsx | 10 ++--- src/app/sandbox/deploy/LeftSection.tsx | 9 ++--- src/app/sandbox/deploy/RightSection.tsx | 6 +-- src/app/sandbox/faucet/PageClient.tsx | 5 +-- src/app/sandbox/layout/RightPanel.tsx | 11 ++---- src/app/sandbox/layout/SideNav.tsx | 11 +++--- src/app/search/filters/Address.tsx | 10 ++--- src/app/search/filters/Date.tsx | 6 +-- src/app/search/filters/index.tsx | 9 ++--- src/app/signers/NextCycleCard.tsx | 8 ++-- src/app/signers/SignerDistributionHeader.tsx | 9 ++--- src/app/signers/SignersHeader.tsx | 9 +---- src/app/token/[tokenId]/PageClient.tsx | 3 +- .../token/[tokenId]/Tabs/DeveloperStat.tsx | 4 +- src/app/token/[tokenId]/Tabs/Developers.tsx | 3 +- .../token/[tokenId]/TokenInfo/TrendArrow.tsx | 8 ++-- src/app/tokens/TokenRow/index.tsx | 12 +++--- src/app/tokens/TokensList/TokensList.tsx | 3 +- src/app/transactions/MempoolFeeStats.tsx | 27 ++++++------- .../txid/[txId]/Cards/ContractDetailsCard.tsx | 27 ++++++------- .../ContractCall/FunctionSummaryName.tsx | 6 +-- src/app/txid/[txId]/Events.tsx | 11 ++---- src/app/txid/[txId]/PostConditions.tsx | 9 ++--- src/app/txid/[txId]/SenderRecipient.tsx | 4 +- src/app/txid/[txId]/TxDetails/Amount.tsx | 11 +----- src/app/txid/[txId]/TxDetails/BlockHeight.tsx | 13 +++---- src/app/txid/[txId]/TxDetails/Broadcast.tsx | 8 ++-- .../txid/[txId]/TxDetails/NonCanonical.tsx | 7 +--- src/app/txid/[txId]/TxDetails/Recipient.tsx | 5 +-- src/app/txid/[txId]/TxDetails/Sender.tsx | 5 +-- src/app/txid/[txId]/TxPage.tsx | 1 - src/common/components/BtcStxBlockLinks.tsx | 9 ++--- src/common/components/ErrorMessageLayout.tsx | 8 ++-- src/common/components/FilterMenu.tsx | 10 ++--- src/common/components/ListFooter.tsx | 7 ++-- src/common/components/Sip10Disclaimer.tsx | 6 +-- src/common/components/TxIcon.tsx | 12 +++--- src/common/components/TxTypeTag.tsx | 5 +-- src/common/components/contract-source.tsx | 5 +-- src/common/components/icons/_base.tsx | 4 +- src/common/components/icons/atom.tsx | 28 -------------- .../modals/AddNetwork/AddNetworkForm.tsx | 5 +-- src/common/components/modals/Nakamoto.tsx | 5 +-- src/common/components/modals/SBTCModal.tsx | 5 +-- src/common/components/status.tsx | 7 ++-- src/common/components/transaction-item.tsx | 5 +-- src/features/search/NoTxs.tsx | 9 ++--- .../search/dropdown/error-message.tsx | 5 +-- .../search/search-field/search-box.tsx | 9 ++--- .../txs-list/ListItem/TransferListItem.tsx | 9 ++--- src/features/txs-list/ListItem/TxListItem.tsx | 4 +- .../txs-list/ListItem/TxListItemMini.tsx | 2 +- .../txs-list/tabs/CSVDownloadButton.tsx | 6 +-- .../txsFilterAndSort/FilterButton.tsx | 7 +--- .../txsFilterAndSort/TransactionMessages.tsx | 12 +++--- src/ui/CodeEditor/index.tsx | 2 +- src/ui/ExpandingTextarea.tsx | 1 - src/ui/Icon.tsx | 21 ---------- src/ui/icons/WalletIcon.tsx | 6 +-- 90 files changed, 277 insertions(+), 514 deletions(-) delete mode 100644 src/common/components/icons/atom.tsx delete mode 100644 src/ui/Icon.tsx 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} >