From de43f3dc655491df4814e3ae5ee97c2660f07ac2 Mon Sep 17 00:00:00 2001 From: Igor Stuev <108066576+isstuev@users.noreply.github.com> Date: Mon, 6 Jan 2025 16:57:22 +0100 Subject: [PATCH] remove skeleton animations (#2505) * remove skeleton animations test * eslint add Skeleton * eslint-fix --- eslint.config.mjs | 2 +- theme/components/Skeleton.ts | 1 + ui/address/AddressCsvExportLink.tsx | 3 ++- .../AddressAccountHistoryListItem.tsx | 3 ++- .../AddressAccountHistoryTableItem.tsx | 3 ++- .../AddressBlocksValidatedListItem.tsx | 3 ++- .../AddressBlocksValidatedTableItem.tsx | 3 ++- .../coinBalance/AddressCoinBalanceListItem.tsx | 3 ++- .../coinBalance/AddressCoinBalanceTableItem.tsx | 3 ++- ui/address/contract/ContractCodeIdes.tsx | 2 +- .../ContractDetailsVerificationButton.tsx | 4 +++- .../contract/ContractExternalLibraries.tsx | 2 +- .../contract/ContractSourceAddressSelector.tsx | 3 ++- ui/address/contract/ContractSourceCode.tsx | 3 ++- .../contract/alerts/ContractDetailsAlerts.tsx | 3 ++- .../contract/info/ContractDetailsInfoItem.tsx | 3 ++- .../contract/methods/ContractConnectWallet.tsx | 3 ++- .../contract/methods/ContractCustomAbiAlert.tsx | 3 ++- .../contract/methods/ContractMethodsCustom.tsx | 3 ++- ui/address/details/AddressCounterItem.tsx | 2 +- ui/address/details/AddressNameInfo.tsx | 2 +- ui/address/details/AddressNetWorth.tsx | 3 ++- ui/address/details/AddressQrCode.tsx | 2 +- ui/address/details/AddressSaveOnGas.tsx | 3 ++- ui/address/ensDomains/AddressEnsDomains.tsx | 2 +- .../epochRewards/AddressEpochRewardsListItem.tsx | 2 +- .../AddressEpochRewardsTableItem.tsx | 3 ++- ui/address/internals/AddressIntTxsListItem.tsx | 3 ++- ui/address/internals/AddressIntTxsTableItem.tsx | 3 ++- ui/address/mud/AddressMudTablesListItem.tsx | 3 ++- ui/address/mud/AddressMudTablesTableItem.tsx | 3 ++- ui/address/tokenSelect/TokenSelect.tsx | 3 ++- ui/address/tokenSelect/TokenSelectButton.tsx | 3 ++- ui/address/tokens/AddressCollections.tsx | 3 ++- ui/address/tokens/ERC20TokensListItem.tsx | 3 ++- ui/address/tokens/ERC20TokensTableItem.tsx | 3 ++- ui/address/tokens/NFTItem.tsx | 3 ++- ui/address/tokens/TokenBalancesItem.tsx | 3 ++- ui/addresses/AddressesListItem.tsx | 3 ++- ui/addresses/AddressesTableItem.tsx | 3 ++- .../AddressesLabelSearchListItem.tsx | 3 ++- .../AddressesLabelSearchTableItem.tsx | 3 ++- ui/advancedFilter/ItemByColumn.tsx | 3 ++- ui/blob/BlobData.tsx | 3 ++- ui/blob/BlobInfo.tsx | 3 ++- ui/block/BlockDetails.tsx | 3 ++- .../BlockEpochElectionRewardsListItem.tsx | 3 ++- .../BlockEpochElectionRewardsTableItem.tsx | 3 ++- ui/blocks/BlocksListItem.tsx | 3 ++- ui/blocks/BlocksTabSlot.tsx | 3 ++- ui/blocks/BlocksTableItem.tsx | 3 ++- .../CustomAbiTable/CustomAbiListItem.tsx | 3 ++- .../CustomAbiTable/CustomAbiTableItem.tsx | 2 +- .../optimisticL2/OptimisticDepositsListItem.tsx | 2 +- .../optimisticL2/OptimisticDepositsTableItem.tsx | 3 ++- .../scrollL2/ScrollL2DepositsListItem.tsx | 3 ++- .../scrollL2/ScrollL2DepositsTableItem.tsx | 3 ++- ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx | 3 ++- ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx | 3 ++- .../OptimisticL2DisputeGamesListItem.tsx | 2 +- .../OptimisticL2DisputeGamesTableItem.tsx | 3 ++- ui/gasTracker/GasTrackerNetworkUtilization.tsx | 3 ++- ui/gasTracker/GasTrackerPriceSnippet.tsx | 3 ++- ui/home/LatestBlocks.tsx | 3 ++- ui/home/LatestBlocksItem.tsx | 2 +- ui/home/LatestTxsItem.tsx | 2 +- ui/home/LatestTxsItemMobile.tsx | 2 +- ui/home/indicators/ChainIndicatorItem.tsx | 3 ++- ui/home/indicators/ChainIndicators.tsx | 3 ++- ui/home/latestBatches/LatestBatchItem.tsx | 2 +- ui/home/latestDeposits/LatestDeposits.tsx | 2 +- ui/home/latestDeposits/LatestDepositsItem.tsx | 2 +- ui/marketplace/Banner/FeaturedApp.tsx | 3 ++- ui/marketplace/Banner/FeaturedAppMobile.tsx | 4 +++- ui/marketplace/Banner/IframeBanner.tsx | 3 ++- ui/marketplace/MarketplaceAppCard.tsx | 3 ++- ui/marketplace/MarketplaceAppTopBar.tsx | 3 ++- ui/marketplace/Rating/Rating.tsx | 3 ++- ui/messages/ArbitrumL2Messages.tsx | 3 ++- ui/messages/ArbitrumL2MessagesListItem.tsx | 3 ++- ui/messages/ArbitrumL2MessagesTableItem.tsx | 3 ++- ui/mudWorlds/MudWorldsListItem.tsx | 3 ++- ui/mudWorlds/MudWorldsTableItem.tsx | 3 ++- ui/nameDomain/NameDomainDetails.tsx | 3 ++- ui/nameDomains/NameDomainsListItem.tsx | 2 +- ui/nameDomains/NameDomainsTableItem.tsx | 3 ++- .../OptimisticL2OutputRootsListItem.tsx | 3 ++- .../OptimisticL2OutputRootsTableItem.tsx | 3 ++- ui/pages/AccountsLabelSearch.tsx | 3 ++- ui/pages/ApiKeys.tsx | 3 ++- ui/pages/ArbitrumL2TxnBatches.tsx | 3 ++- ui/pages/BeaconChainWithdrawals.tsx | 3 ++- ui/pages/Block.tsx | 3 ++- ui/pages/Chart.tsx | 3 ++- ui/pages/CustomAbi.tsx | 3 ++- ui/pages/GasTracker.tsx | 2 +- ui/pages/OptimisticL2Deposits.tsx | 3 ++- ui/pages/OptimisticL2DisputeGames.tsx | 3 ++- ui/pages/OptimisticL2OutputRoots.tsx | 3 ++- ui/pages/OptimisticL2TxnBatches.tsx | 3 ++- ui/pages/OptimisticL2Withdrawals.tsx | 3 ++- ui/pages/Pool.tsx | 3 ++- ui/pages/RewardsDashboard.tsx | 3 ++- ui/pages/ScrollL2Deposits.tsx | 3 ++- ui/pages/ScrollL2TxnBatches.tsx | 3 ++- ui/pages/ScrollL2Withdrawals.tsx | 3 ++- ui/pages/SearchResults.tsx | 3 ++- ui/pages/ShibariumDeposits.tsx | 3 ++- ui/pages/ShibariumWithdrawals.tsx | 3 ++- ui/pages/VerifiedAddresses.tsx | 3 ++- ui/pages/Watchlist.tsx | 3 ++- ui/pages/ZkEvmL2Deposits.tsx | 3 ++- ui/pages/ZkEvmL2TxnBatches.tsx | 3 ++- ui/pages/ZkEvmL2Withdrawals.tsx | 3 ++- ui/pages/ZkSyncL2TxnBatches.tsx | 3 ++- ui/pool/PoolInfo.tsx | 3 ++- ui/pools/PoolsListItem.tsx | 3 ++- ui/pools/PoolsTableItem.tsx | 3 ++- .../AddressTagTable/AddressTagListItem.tsx | 3 ++- ui/privateTags/PrivateAddressTags.tsx | 3 ++- ui/privateTags/PrivateTransactionTags.tsx | 3 ++- ui/rewards/RewardsReadOnlyInputWithCopy.tsx | 3 ++- .../dashboard/RewardsDashboardCardValue.tsx | 3 ++- ui/rewards/login/steps/CongratsStepContent.tsx | 3 ++- ui/rewards/login/steps/LoginStepContent.tsx | 3 ++- ui/searchResults/SearchResultListItem.tsx | 3 ++- ui/searchResults/SearchResultTableItem.tsx | 3 ++- .../AccountActionsMenu/AccountActionsMenu.tsx | 3 ++- ui/shared/AdditionalInfoButton.tsx | 2 +- ui/shared/ApiKeySnippet.tsx | 3 ++- ui/shared/CodeViewSnippet.tsx | 3 ++- ui/shared/CopyToClipboard.tsx | 3 ++- ui/shared/CurrencyValue.tsx | 3 ++- ui/shared/DetailsInfoItem.tsx | 3 ++- ui/shared/DetailsTimestamp.tsx | 2 +- ui/shared/EntityTags/EntityTag.tsx | 3 ++- ui/shared/GasUsedToTargetRatio.tsx | 4 +++- ui/shared/Hint.tsx | 3 ++- ui/shared/HintPopover.tsx | 2 +- ui/shared/IconSvg.tsx | 3 ++- ui/shared/IdenticonGithub.tsx | 4 +++- ui/shared/ListItemMobile/ListItemMobileGrid.tsx | 4 +++- ui/shared/NativeTokenIcon.tsx | 3 ++- ui/shared/Noves/NovesFromTo.tsx | 3 ++- ui/shared/Page/PageTitle.tsx | 3 ++- ui/shared/PopoverTriggerTooltip.tsx | 3 ++- ui/shared/PrevNext.tsx | 3 ++- ui/shared/RawDataSnippet.tsx | 4 +++- ui/shared/SocketNewItemsNotice.tsx | 4 +++- ui/shared/TableItemActionButtons.tsx | 3 ++- ui/shared/Tabs/AdaptiveTabsList.tsx | 3 ++- ui/shared/Tabs/TabsSkeleton.tsx | 3 ++- ui/shared/TimeAgoWithTooltip.tsx | 3 ++- .../TokenTransfer/TokenTransferListItem.tsx | 3 ++- .../TokenTransfer/TokenTransferTableItem.tsx | 3 ++- .../TokenTransferSnippet.tsx | 3 ++- ui/shared/TruncatedValue.tsx | 3 ++- ui/shared/Utilization/Utilization.tsx | 3 ++- ui/shared/ad/AdBannerContent.tsx | 3 ++- ui/shared/ad/CoinzillaTextAd.tsx | 3 ++- ui/shared/address/AddressAddToWallet.tsx | 3 ++- ui/shared/alerts/ServiceDegradationWarning.tsx | 4 +++- ui/shared/alerts/TestnetWarning.tsx | 3 ++- ui/shared/batch/ArbitrumL2TxnBatchDA.tsx | 4 +++- ui/shared/blob/BlobDataType.tsx | 3 ++- ui/shared/chakra/Skeleton.tsx | 16 ++++++++++++++++ ui/shared/chakra/Tag.tsx | 3 ++- ui/shared/chart/ChartIntervalSelect.tsx | 2 +- ui/shared/chart/ChartMenu.tsx | 2 +- ui/shared/chart/ChartWidget.tsx | 2 +- ui/shared/chart/ChartWidgetContent.tsx | 3 ++- ui/shared/entities/address/AddressEntity.tsx | 3 ++- ui/shared/entities/base/components.tsx | 3 ++- ui/shared/entities/ens/EnsEntity.tsx | 3 ++- ui/shared/entities/pool/PoolEntity.tsx | 3 ++- ui/shared/entities/token/TokenEntity.tsx | 3 ++- ui/shared/filters/FilterButton.tsx | 3 ++- ui/shared/filters/FilterInput.tsx | 3 ++- ui/shared/forms/components/ImageUrlPreview.tsx | 4 +++- ui/shared/links/LinkExternal.tsx | 3 ++- ui/shared/logs/LogDecodedInputDataHeader.tsx | 3 ++- ui/shared/logs/LogDecodedInputDataTable.tsx | 3 ++- ui/shared/logs/LogItem.tsx | 3 ++- ui/shared/logs/LogTopic.tsx | 3 ++- ui/shared/nft/NftMedia.tsx | 4 +++- ui/shared/pagination/Pagination.tsx | 3 ++- ui/shared/radioButtonGroup/RadioButtonGroup.tsx | 3 ++- ui/shared/select/SelectButton.tsx | 3 ++- ui/shared/sort/ButtonDesktop.tsx | 2 +- ui/shared/sort/ButtonMobile.tsx | 3 ++- ui/shared/stats/StatsWidget.tsx | 3 ++- ui/shared/tx/TxFee.tsx | 3 ++- ui/shared/tx/interpretation/TxInterpretation.tsx | 3 ++- ui/shared/userOps/UserOpStatus.tsx | 2 +- .../verificationSteps/VerificationSteps.tsx | 4 +++- ui/snippets/footer/Footer.tsx | 3 ++- ui/snippets/footer/FooterLinkItem.tsx | 3 ++- .../header/alerts/IndexingBlocksAlert.tsx | 3 ++- ui/snippets/networkMenu/NetworkLogo.tsx | 3 ++- .../networkMenu/NetworkMenuContentDesktop.tsx | 4 +++- .../networkMenu/NetworkMenuContentMobile.tsx | 4 +++- ui/snippets/topBar/TopBarStats.tsx | 3 ++- ui/stats/ChartsWidgetsList.tsx | 3 ++- ui/token/TokenDetails.tsx | 3 ++- ui/token/TokenHolders/TokenHoldersListItem.tsx | 2 +- ui/token/TokenHolders/TokenHoldersTableItem.tsx | 3 ++- ui/token/TokenInventoryItem.tsx | 3 ++- ui/token/TokenNftMarketplaces.tsx | 3 ++- ui/token/TokenTransfer/TokenTransferListItem.tsx | 3 ++- .../TokenTransfer/TokenTransferTableItem.tsx | 3 ++- ui/token/TokenVerifiedInfo.tsx | 2 +- ui/tokenInstance/TokenInstanceDetails.tsx | 3 ++- .../details/TokenInstanceMetadataInfo.tsx | 3 ++- .../details/TokenInstanceTransfersCount.tsx | 2 +- ui/tokenTransfers/TokenTransfersListItem.tsx | 3 ++- ui/tokenTransfers/TokenTransfersTableItem.tsx | 3 ++- ui/tokens/TokensListItem.tsx | 3 ++- ui/tokens/TokensTableItem.tsx | 3 ++- ui/tx/TxAssetFlows.tsx | 3 ++- ui/tx/assetFlows/TxAssetFlowsListItem.tsx | 3 ++- .../assetFlows/components/NovesActionSnippet.tsx | 3 ++- ui/tx/blobs/TxBlobListItem.tsx | 2 +- ui/tx/blobs/TxBlobsTableItem.tsx | 3 ++- ui/tx/details/TxDetailsFeePerGas.tsx | 2 +- ui/tx/details/TxDetailsGasPrice.tsx | 2 +- ui/tx/details/TxInfo.tsx | 2 +- ui/tx/details/TxInfoScrollFees.tsx | 3 ++- ui/tx/internals/TxInternalsListItem.tsx | 3 ++- ui/tx/internals/TxInternalsTableItem.tsx | 3 ++- ui/tx/state/utils.tsx | 3 ++- .../arbitrumL2/ArbitrumL2TxnBatchDetails.tsx | 3 ++- .../arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx | 2 +- .../arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx | 3 ++- .../optimisticL2/OptimisticL2TxnBatchDetails.tsx | 3 ++- .../OptimisticL2TxnBatchesListItem.tsx | 2 +- .../OptimisticL2TxnBatchesTableItem.tsx | 3 ++- .../scrollL2/ScrollL2TxnBatchDetails.tsx | 3 ++- .../scrollL2/ScrollL2TxnBatchesListItem.tsx | 2 +- .../scrollL2/ScrollL2TxnBatchesTableItem.tsx | 3 ++- ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx | 3 ++- .../zkEvmL2/ZkEvmTxnBatchesListItem.tsx | 3 ++- .../zkEvmL2/ZkEvmTxnBatchesTableItem.tsx | 3 ++- .../zkSyncL2/ZkSyncL2TxnBatchDetails.tsx | 3 ++- .../zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx | 3 ++- .../zkSyncL2/ZkSyncTxnBatchesListItem.tsx | 3 ++- .../zkSyncL2/ZkSyncTxnBatchesTableItem.tsx | 3 ++- ui/txs/TxAdditionalInfoContainer.tsx | 3 ++- ui/txs/TxsListItem.tsx | 3 ++- ui/userOp/UserOpDetails.tsx | 3 ++- ui/userOp/UserOpRaw.tsx | 2 +- ui/userOps/UserOpsListItem.tsx | 2 +- ui/validatorsBlackfort/ValidatorsListItem.tsx | 3 ++- ui/validatorsBlackfort/ValidatorsTableItem.tsx | 3 ++- ui/validatorsStability/ValidatorsListItem.tsx | 2 +- ui/validatorsStability/ValidatorsTableItem.tsx | 3 ++- .../VerifiedAddressesListItem.tsx | 3 ++- .../VerifiedAddressesTableItem.tsx | 3 ++- .../VerifiedContractsListItem.tsx | 3 ++- .../VerifiedContractsTableItem.tsx | 3 ++- .../WatchlistTable/WatchListAddressItem.tsx | 3 ++- ui/watchlist/WatchlistTable/WatchListItem.tsx | 3 ++- .../WatchlistTable/WatchListTableItem.tsx | 2 +- .../BeaconChainWithdrawalsListItem.tsx | 2 +- .../BeaconChainWithdrawalsTableItem.tsx | 3 ++- .../OptimisticL2WithdrawalsListItem.tsx | 2 +- .../OptimisticL2WithdrawalsTableItem.tsx | 3 ++- .../scrollL2/ScrollL2WithdrawalsListItem.tsx | 3 ++- .../scrollL2/ScrollL2WithdrawalsTableItem.tsx | 3 ++- .../zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx | 3 ++- .../zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx | 3 ++- 270 files changed, 524 insertions(+), 268 deletions(-) create mode 100644 ui/shared/chakra/Skeleton.tsx diff --git a/eslint.config.mjs b/eslint.config.mjs index 9f7ae682b6..68d77abad7 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -27,7 +27,7 @@ const RESTRICTED_MODULES = { { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' }, { name: '@chakra-ui/react', - importNames: [ 'Popover', 'Menu', 'PinInput', 'useToast' ], + importNames: [ 'Popover', 'Menu', 'PinInput', 'useToast', 'Skeleton' ], message: 'Please use corresponding component or hook from ui/shared/chakra component instead', }, { diff --git a/theme/components/Skeleton.ts b/theme/components/Skeleton.ts index 65555c8c58..6648bf4368 100644 --- a/theme/components/Skeleton.ts +++ b/theme/components/Skeleton.ts @@ -1,3 +1,4 @@ +// eslint-disable-next-line no-restricted-imports import { Skeleton as SkeletonComponent } from '@chakra-ui/react'; import { defineStyle, diff --git a/ui/address/AddressCsvExportLink.tsx b/ui/address/AddressCsvExportLink.tsx index 313de665c8..13e470497f 100644 --- a/ui/address/AddressCsvExportLink.tsx +++ b/ui/address/AddressCsvExportLink.tsx @@ -1,4 +1,4 @@ -import { chakra, Tooltip, Hide, Skeleton, Flex } from '@chakra-ui/react'; +import { chakra, Tooltip, Hide, Flex } from '@chakra-ui/react'; import React from 'react'; import type { CsvExportParams } from 'types/client/address'; @@ -8,6 +8,7 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import useIsInitialLoading from 'lib/hooks/useIsInitialLoading'; import useIsMobile from 'lib/hooks/useIsMobile'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/address/accountHistory/AddressAccountHistoryListItem.tsx b/ui/address/accountHistory/AddressAccountHistoryListItem.tsx index 1770b2062f..55dc187e5a 100644 --- a/ui/address/accountHistory/AddressAccountHistoryListItem.tsx +++ b/ui/address/accountHistory/AddressAccountHistoryListItem.tsx @@ -1,8 +1,9 @@ -import { Box, Flex, Skeleton, Text } from '@chakra-ui/react'; +import { Box, Flex, Text } from '@chakra-ui/react'; import React, { useMemo } from 'react'; import type { NovesResponseData } from 'types/api/noves'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; diff --git a/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx b/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx index 16211ba8f2..23bae973c9 100644 --- a/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx +++ b/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx @@ -1,8 +1,9 @@ -import { Td, Tr, Skeleton, Box } from '@chakra-ui/react'; +import { Td, Tr, Box } from '@chakra-ui/react'; import React, { useMemo } from 'react'; import type { NovesResponseData } from 'types/api/noves'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; import NovesFromTo from 'ui/shared/Noves/NovesFromTo'; diff --git a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx index fc3d6f6050..c1cb7bd75e 100644 --- a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx +++ b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx @@ -1,4 +1,4 @@ -import { Text, Flex, Skeleton } from '@chakra-ui/react'; +import { Text, Flex } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -8,6 +8,7 @@ import config from 'configs/app'; import getBlockTotalReward from 'lib/block/getBlockTotalReward'; import { currencyUnits } from 'lib/units'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; diff --git a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx index 296eb00567..6427902394 100644 --- a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx +++ b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx @@ -1,4 +1,4 @@ -import { Td, Tr, Flex, Skeleton } from '@chakra-ui/react'; +import { Td, Tr, Flex } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -7,6 +7,7 @@ import type { Block } from 'types/api/block'; import config from 'configs/app'; import getBlockTotalReward from 'lib/block/getBlockTotalReward'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; diff --git a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx index 4f9a21dc74..f138215be4 100644 --- a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx +++ b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx @@ -1,4 +1,4 @@ -import { Text, Stat, StatHelpText, StatArrow, Flex, Skeleton } from '@chakra-ui/react'; +import { Text, Stat, StatHelpText, StatArrow, Flex } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -6,6 +6,7 @@ import type { AddressCoinBalanceHistoryItem } from 'types/api/address'; import { WEI, ZERO } from 'lib/consts'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; diff --git a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx index eff93d79a2..a12ea53b7a 100644 --- a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx +++ b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx @@ -1,10 +1,11 @@ -import { Td, Tr, Text, Stat, StatHelpText, StatArrow, Skeleton } from '@chakra-ui/react'; +import { Td, Tr, Text, Stat, StatHelpText, StatArrow } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { AddressCoinBalanceHistoryItem } from 'types/api/address'; import { WEI, ZERO } from 'lib/consts'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; diff --git a/ui/address/contract/ContractCodeIdes.tsx b/ui/address/contract/ContractCodeIdes.tsx index fc06317043..0c8ca5cbf9 100644 --- a/ui/address/contract/ContractCodeIdes.tsx +++ b/ui/address/contract/ContractCodeIdes.tsx @@ -6,7 +6,6 @@ import { PopoverBody, PopoverContent, Image, - Skeleton, useDisclosure, useColorModeValue, } from '@chakra-ui/react'; @@ -14,6 +13,7 @@ import React from 'react'; import config from 'configs/app'; import Popover from 'ui/shared/chakra/Popover'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import LinkExternal from 'ui/shared/links/LinkExternal'; diff --git a/ui/address/contract/ContractDetailsVerificationButton.tsx b/ui/address/contract/ContractDetailsVerificationButton.tsx index 129f251f02..0f23d96f54 100644 --- a/ui/address/contract/ContractDetailsVerificationButton.tsx +++ b/ui/address/contract/ContractDetailsVerificationButton.tsx @@ -1,8 +1,10 @@ -import { Button, Skeleton } from '@chakra-ui/react'; +import { Button } from '@chakra-ui/react'; import React from 'react'; import { route } from 'nextjs-routes'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + interface Props { isLoading: boolean; addressHash: string; diff --git a/ui/address/contract/ContractExternalLibraries.tsx b/ui/address/contract/ContractExternalLibraries.tsx index 83df015e2b..08a940c540 100644 --- a/ui/address/contract/ContractExternalLibraries.tsx +++ b/ui/address/contract/ContractExternalLibraries.tsx @@ -10,7 +10,6 @@ import { PopoverBody, PopoverContent, PopoverTrigger, - Skeleton, StackDivider, useDisclosure, VStack, @@ -22,6 +21,7 @@ import type { SmartContractExternalLibrary } from 'types/api/contract'; import useIsMobile from 'lib/hooks/useIsMobile'; import { apos } from 'lib/html-entities'; import Popover from 'ui/shared/chakra/Popover'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/address/contract/ContractSourceAddressSelector.tsx b/ui/address/contract/ContractSourceAddressSelector.tsx index aa61b96732..3e92d3374a 100644 --- a/ui/address/contract/ContractSourceAddressSelector.tsx +++ b/ui/address/contract/ContractSourceAddressSelector.tsx @@ -1,8 +1,9 @@ -import { chakra, Flex, Skeleton } from '@chakra-ui/react'; +import { chakra, Flex } from '@chakra-ui/react'; import React from 'react'; import { route } from 'nextjs-routes'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import LinkNewTab from 'ui/shared/links/LinkNewTab'; diff --git a/ui/address/contract/ContractSourceCode.tsx b/ui/address/contract/ContractSourceCode.tsx index 7a3be99133..e80fbbe16a 100644 --- a/ui/address/contract/ContractSourceCode.tsx +++ b/ui/address/contract/ContractSourceCode.tsx @@ -1,4 +1,4 @@ -import { Flex, Skeleton, Text, Tooltip } from '@chakra-ui/react'; +import { Flex, Text, Tooltip } from '@chakra-ui/react'; import React from 'react'; import type { SmartContract } from 'types/api/contract'; @@ -6,6 +6,7 @@ import type { SmartContract } from 'types/api/contract'; import { route } from 'nextjs-routes'; import formatLanguageName from 'lib/contracts/formatLanguageName'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import LinkInternal from 'ui/shared/links/LinkInternal'; import CodeEditor from 'ui/shared/monaco/CodeEditor'; diff --git a/ui/address/contract/alerts/ContractDetailsAlerts.tsx b/ui/address/contract/alerts/ContractDetailsAlerts.tsx index f701de2f02..4bf02c15a6 100644 --- a/ui/address/contract/alerts/ContractDetailsAlerts.tsx +++ b/ui/address/contract/alerts/ContractDetailsAlerts.tsx @@ -1,4 +1,4 @@ -import { chakra, Alert, Box, Flex, Skeleton } from '@chakra-ui/react'; +import { chakra, Alert, Box, Flex } from '@chakra-ui/react'; import type { Channel } from 'phoenix'; import React from 'react'; @@ -8,6 +8,7 @@ import type { SmartContract } from 'types/api/contract'; import { route } from 'nextjs-routes'; import useSocketMessage from 'lib/socket/useSocketMessage'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import LinkExternal from 'ui/shared/links/LinkExternal'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/address/contract/info/ContractDetailsInfoItem.tsx b/ui/address/contract/info/ContractDetailsInfoItem.tsx index ab4e0f10ce..b07ff57bf7 100644 --- a/ui/address/contract/info/ContractDetailsInfoItem.tsx +++ b/ui/address/contract/info/ContractDetailsInfoItem.tsx @@ -1,6 +1,7 @@ -import { chakra, useColorModeValue, Flex, GridItem, Skeleton } from '@chakra-ui/react'; +import { chakra, useColorModeValue, Flex, GridItem } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Hint from 'ui/shared/Hint'; interface Props { diff --git a/ui/address/contract/methods/ContractConnectWallet.tsx b/ui/address/contract/methods/ContractConnectWallet.tsx index 21c24193c3..148b0115d9 100644 --- a/ui/address/contract/methods/ContractConnectWallet.tsx +++ b/ui/address/contract/methods/ContractConnectWallet.tsx @@ -1,9 +1,10 @@ -import { Alert, Button, Flex, Skeleton } from '@chakra-ui/react'; +import { Alert, Button, Flex } from '@chakra-ui/react'; import React from 'react'; import config from 'configs/app'; import useIsMobile from 'lib/hooks/useIsMobile'; import useWeb3Wallet from 'lib/web3/useWallet'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; interface Props { diff --git a/ui/address/contract/methods/ContractCustomAbiAlert.tsx b/ui/address/contract/methods/ContractCustomAbiAlert.tsx index 633aa43cb4..92fda1fdf0 100644 --- a/ui/address/contract/methods/ContractCustomAbiAlert.tsx +++ b/ui/address/contract/methods/ContractCustomAbiAlert.tsx @@ -1,6 +1,7 @@ -import { Alert, Skeleton } from '@chakra-ui/react'; +import { Alert } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; interface Props { isLoading?: boolean; } diff --git a/ui/address/contract/methods/ContractMethodsCustom.tsx b/ui/address/contract/methods/ContractMethodsCustom.tsx index 00203175c7..d2890c69df 100644 --- a/ui/address/contract/methods/ContractMethodsCustom.tsx +++ b/ui/address/contract/methods/ContractMethodsCustom.tsx @@ -1,4 +1,4 @@ -import { Button, Flex, Skeleton, useDisclosure } from '@chakra-ui/react'; +import { Button, Flex, useDisclosure } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; import React from 'react'; @@ -8,6 +8,7 @@ import type { SmartContract } from 'types/api/contract'; import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery'; import getQueryParamString from 'lib/router/getQueryParamString'; import CustomAbiModal from 'ui/customAbi/CustomAbiModal/CustomAbiModal'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import RawDataSnippet from 'ui/shared/RawDataSnippet'; import AuthGuard from 'ui/snippets/auth/AuthGuard'; import useIsAuth from 'ui/snippets/auth/useIsAuth'; diff --git a/ui/address/details/AddressCounterItem.tsx b/ui/address/details/AddressCounterItem.tsx index 2354967e22..fd4695a37a 100644 --- a/ui/address/details/AddressCounterItem.tsx +++ b/ui/address/details/AddressCounterItem.tsx @@ -1,4 +1,3 @@ -import { Skeleton } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -8,6 +7,7 @@ import type { AddressCounters } from 'types/api/address'; import { route } from 'nextjs-routes'; import type { ResourceError } from 'lib/api/resources'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import LinkInternal from 'ui/shared/links/LinkInternal'; interface Props { diff --git a/ui/address/details/AddressNameInfo.tsx b/ui/address/details/AddressNameInfo.tsx index d9d8dc9122..46536c99b2 100644 --- a/ui/address/details/AddressNameInfo.tsx +++ b/ui/address/details/AddressNameInfo.tsx @@ -1,8 +1,8 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { Address } from 'types/api/address'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; diff --git a/ui/address/details/AddressNetWorth.tsx b/ui/address/details/AddressNetWorth.tsx index 7fea56048c..a00d9c38f5 100644 --- a/ui/address/details/AddressNetWorth.tsx +++ b/ui/address/details/AddressNetWorth.tsx @@ -1,4 +1,4 @@ -import { Skeleton, Text, Flex } from '@chakra-ui/react'; +import { Text, Flex } from '@chakra-ui/react'; import React from 'react'; import type { Address } from 'types/api/address'; @@ -6,6 +6,7 @@ import type { Address } from 'types/api/address'; import config from 'configs/app'; import getCurrencyValue from 'lib/getCurrencyValue'; import * as mixpanel from 'lib/mixpanel/index'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import TextSeparator from 'ui/shared/TextSeparator'; import { getTokensTotalInfo } from '../utils/tokenUtils'; diff --git a/ui/address/details/AddressQrCode.tsx b/ui/address/details/AddressQrCode.tsx index 4a3f3970a0..210e731dda 100644 --- a/ui/address/details/AddressQrCode.tsx +++ b/ui/address/details/AddressQrCode.tsx @@ -12,7 +12,6 @@ import { useDisclosure, Tooltip, IconButton, - Skeleton, } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import QRCode from 'qrcode'; @@ -23,6 +22,7 @@ import type { Address as AddressType } from 'types/api/address'; import getPageType from 'lib/mixpanel/getPageType'; import * as mixpanel from 'lib/mixpanel/index'; import { useRollbar } from 'lib/rollbar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/address/details/AddressSaveOnGas.tsx b/ui/address/details/AddressSaveOnGas.tsx index 3452de3beb..3290774b69 100644 --- a/ui/address/details/AddressSaveOnGas.tsx +++ b/ui/address/details/AddressSaveOnGas.tsx @@ -1,9 +1,10 @@ -import { Image, Skeleton } from '@chakra-ui/react'; +import { Image } from '@chakra-ui/react'; import { useQuery } from '@tanstack/react-query'; import React from 'react'; import * as v from 'valibot'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import LinkExternal from 'ui/shared/links/LinkExternal'; import TextSeparator from 'ui/shared/TextSeparator'; diff --git a/ui/address/ensDomains/AddressEnsDomains.tsx b/ui/address/ensDomains/AddressEnsDomains.tsx index fe046db30a..6349d3d431 100644 --- a/ui/address/ensDomains/AddressEnsDomains.tsx +++ b/ui/address/ensDomains/AddressEnsDomains.tsx @@ -8,7 +8,6 @@ import { PopoverContent, PopoverTrigger, Show, - Skeleton, useDisclosure, chakra, } from '@chakra-ui/react'; @@ -23,6 +22,7 @@ import { route } from 'nextjs-routes'; import type { ResourceError } from 'lib/api/resources'; import dayjs from 'lib/date/dayjs'; import Popover from 'ui/shared/chakra/Popover'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import EnsEntity from 'ui/shared/entities/ens/EnsEntity'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/address/epochRewards/AddressEpochRewardsListItem.tsx b/ui/address/epochRewards/AddressEpochRewardsListItem.tsx index 4d61904873..bf09fd8714 100644 --- a/ui/address/epochRewards/AddressEpochRewardsListItem.tsx +++ b/ui/address/epochRewards/AddressEpochRewardsListItem.tsx @@ -1,9 +1,9 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { AddressEpochRewardsItem } from 'types/api/address'; import getCurrencyValue from 'lib/getCurrencyValue'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; diff --git a/ui/address/epochRewards/AddressEpochRewardsTableItem.tsx b/ui/address/epochRewards/AddressEpochRewardsTableItem.tsx index ab7169121a..4f1985b40c 100644 --- a/ui/address/epochRewards/AddressEpochRewardsTableItem.tsx +++ b/ui/address/epochRewards/AddressEpochRewardsTableItem.tsx @@ -1,9 +1,10 @@ -import { Flex, Td, Tr, Text, Skeleton } from '@chakra-ui/react'; +import { Flex, Td, Tr, Text } from '@chakra-ui/react'; import React from 'react'; import type { AddressEpochRewardsItem } from 'types/api/address'; import getCurrencyValue from 'lib/getCurrencyValue'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; diff --git a/ui/address/internals/AddressIntTxsListItem.tsx b/ui/address/internals/AddressIntTxsListItem.tsx index df13c6dbee..9ea80ae411 100644 --- a/ui/address/internals/AddressIntTxsListItem.tsx +++ b/ui/address/internals/AddressIntTxsListItem.tsx @@ -1,4 +1,4 @@ -import { Flex, HStack, Skeleton } from '@chakra-ui/react'; +import { Flex, HStack } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -7,6 +7,7 @@ import type { InternalTransaction } from 'types/api/internalTransaction'; import config from 'configs/app'; import { currencyUnits } from 'lib/units'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; diff --git a/ui/address/internals/AddressIntTxsTableItem.tsx b/ui/address/internals/AddressIntTxsTableItem.tsx index 3bd6b694fa..14e55999e9 100644 --- a/ui/address/internals/AddressIntTxsTableItem.tsx +++ b/ui/address/internals/AddressIntTxsTableItem.tsx @@ -1,4 +1,4 @@ -import { Tr, Td, Box, Flex, Skeleton } from '@chakra-ui/react'; +import { Tr, Td, Box, Flex } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -6,6 +6,7 @@ import type { InternalTransaction } from 'types/api/internalTransaction'; import config from 'configs/app'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; diff --git a/ui/address/mud/AddressMudTablesListItem.tsx b/ui/address/mud/AddressMudTablesListItem.tsx index e3e5aa74bd..33c479ca21 100644 --- a/ui/address/mud/AddressMudTablesListItem.tsx +++ b/ui/address/mud/AddressMudTablesListItem.tsx @@ -1,4 +1,4 @@ -import { Divider, Text, Skeleton, useBoolean, Flex, Link, VStack, chakra, Box, Grid, GridItem } from '@chakra-ui/react'; +import { Divider, Text, useBoolean, Flex, Link, VStack, chakra, Box, Grid, GridItem } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import React from 'react'; @@ -6,6 +6,7 @@ import type { AddressMudTableItem } from 'types/api/address'; import { route } from 'nextjs-routes'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import HashStringShorten from 'ui/shared/HashStringShorten'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/address/mud/AddressMudTablesTableItem.tsx b/ui/address/mud/AddressMudTablesTableItem.tsx index 66d72a2a48..4796d5d097 100644 --- a/ui/address/mud/AddressMudTablesTableItem.tsx +++ b/ui/address/mud/AddressMudTablesTableItem.tsx @@ -1,4 +1,4 @@ -import { Td, Tr, Text, Skeleton, useBoolean, Link, Table, VStack, chakra } from '@chakra-ui/react'; +import { Td, Tr, Text, useBoolean, Link, Table, VStack, chakra } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import React from 'react'; @@ -6,6 +6,7 @@ import type { AddressMudTableItem } from 'types/api/address'; import { route } from 'nextjs-routes'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx index 0bc02b17c6..a892ce6391 100644 --- a/ui/address/tokenSelect/TokenSelect.tsx +++ b/ui/address/tokenSelect/TokenSelect.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, IconButton, Skeleton, Tooltip } from '@chakra-ui/react'; +import { Box, Flex, IconButton, Tooltip } from '@chakra-ui/react'; import { useQueryClient, useIsFetching } from '@tanstack/react-query'; import _sumBy from 'lodash/sumBy'; import NextLink from 'next/link'; @@ -11,6 +11,7 @@ import { getResourceKey } from 'lib/api/useApiQuery'; import useIsMobile from 'lib/hooks/useIsMobile'; import * as mixpanel from 'lib/mixpanel/index'; import getQueryParamString from 'lib/router/getQueryParamString'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import useFetchTokens from '../utils/useFetchTokens'; diff --git a/ui/address/tokenSelect/TokenSelectButton.tsx b/ui/address/tokenSelect/TokenSelectButton.tsx index 9662b20cc9..77398e6c63 100644 --- a/ui/address/tokenSelect/TokenSelectButton.tsx +++ b/ui/address/tokenSelect/TokenSelectButton.tsx @@ -1,10 +1,11 @@ -import { Box, Button, Skeleton, chakra, useColorModeValue } from '@chakra-ui/react'; +import { Box, Button, chakra, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import type { FormattedData } from './types'; import { space } from 'lib/html-entities'; import * as mixpanel from 'lib/mixpanel/index'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import { getTokensTotalInfo } from '../utils/tokenUtils'; diff --git a/ui/address/tokens/AddressCollections.tsx b/ui/address/tokens/AddressCollections.tsx index 71dad66352..3ef99fc515 100644 --- a/ui/address/tokens/AddressCollections.tsx +++ b/ui/address/tokens/AddressCollections.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Text, Grid, HStack, Skeleton } from '@chakra-ui/react'; +import { Box, Flex, Text, Grid, HStack } from '@chakra-ui/react'; import React from 'react'; import { route } from 'nextjs-routes'; @@ -6,6 +6,7 @@ import { route } from 'nextjs-routes'; import useIsMobile from 'lib/hooks/useIsMobile'; import { apos } from 'lib/html-entities'; import ActionBar from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/address/tokens/ERC20TokensListItem.tsx b/ui/address/tokens/ERC20TokensListItem.tsx index 91e76c4cd8..43bb92c04c 100644 --- a/ui/address/tokens/ERC20TokensListItem.tsx +++ b/ui/address/tokens/ERC20TokensListItem.tsx @@ -1,10 +1,11 @@ -import { Flex, HStack, Skeleton } from '@chakra-ui/react'; +import { Flex, HStack } from '@chakra-ui/react'; import React from 'react'; import type { AddressTokenBalance } from 'types/api/address'; import getCurrencyValue from 'lib/getCurrencyValue'; import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; diff --git a/ui/address/tokens/ERC20TokensTableItem.tsx b/ui/address/tokens/ERC20TokensTableItem.tsx index 8f1f491db9..84e7d1547a 100644 --- a/ui/address/tokens/ERC20TokensTableItem.tsx +++ b/ui/address/tokens/ERC20TokensTableItem.tsx @@ -1,10 +1,11 @@ -import { Tr, Td, Flex, Skeleton } from '@chakra-ui/react'; +import { Tr, Td, Flex } from '@chakra-ui/react'; import React from 'react'; import type { AddressTokenBalance } from 'types/api/address'; import getCurrencyValue from 'lib/getCurrencyValue'; import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; diff --git a/ui/address/tokens/NFTItem.tsx b/ui/address/tokens/NFTItem.tsx index 270da14fbb..ee95353a8d 100644 --- a/ui/address/tokens/NFTItem.tsx +++ b/ui/address/tokens/NFTItem.tsx @@ -1,4 +1,4 @@ -import { Tag, Flex, Text, Link, Skeleton, LightMode } from '@chakra-ui/react'; +import { Tag, Flex, Text, Link, LightMode } from '@chakra-ui/react'; import React from 'react'; import type { AddressNFT } from 'types/api/address'; @@ -7,6 +7,7 @@ import { route } from 'nextjs-routes'; import getCurrencyValue from 'lib/getCurrencyValue'; import { getTokenTypeName } from 'lib/token/tokenTypes'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import NftEntity from 'ui/shared/entities/nft/NftEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import NftMedia from 'ui/shared/nft/NftMedia'; diff --git a/ui/address/tokens/TokenBalancesItem.tsx b/ui/address/tokens/TokenBalancesItem.tsx index 0e1a2a3077..c733f1529c 100644 --- a/ui/address/tokens/TokenBalancesItem.tsx +++ b/ui/address/tokens/TokenBalancesItem.tsx @@ -1,6 +1,7 @@ -import { Box, Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react'; +import { Box, Flex, Text, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; type Props = { name: string; value: string; diff --git a/ui/addresses/AddressesListItem.tsx b/ui/addresses/AddressesListItem.tsx index 9ed744454e..f9b845a70d 100644 --- a/ui/addresses/AddressesListItem.tsx +++ b/ui/addresses/AddressesListItem.tsx @@ -1,4 +1,4 @@ -import { Flex, HStack, Skeleton } from '@chakra-ui/react'; +import { Flex, HStack } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -7,6 +7,7 @@ import type { AddressesItem } from 'types/api/addresses'; import config from 'configs/app'; import { ZERO } from 'lib/consts'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; diff --git a/ui/addresses/AddressesTableItem.tsx b/ui/addresses/AddressesTableItem.tsx index 18ecaa1afc..4bad73729c 100644 --- a/ui/addresses/AddressesTableItem.tsx +++ b/ui/addresses/AddressesTableItem.tsx @@ -1,10 +1,11 @@ -import { Tr, Td, Text, Skeleton, Flex } from '@chakra-ui/react'; +import { Tr, Td, Text, Flex } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { AddressesItem } from 'types/api/addresses'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; diff --git a/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx b/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx index b0cabf576c..988773cb2d 100644 --- a/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx +++ b/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx @@ -1,4 +1,4 @@ -import { HStack, Skeleton } from '@chakra-ui/react'; +import { HStack } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -6,6 +6,7 @@ import type { AddressesItem } from 'types/api/addresses'; import config from 'configs/app'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; diff --git a/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx b/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx index f3985ae9a3..14a672df47 100644 --- a/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx +++ b/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx @@ -1,10 +1,11 @@ -import { Tr, Td, Text, Skeleton } from '@chakra-ui/react'; +import { Tr, Td, Text } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { AddressesItem } from 'types/api/addresses'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; type Props = { diff --git a/ui/advancedFilter/ItemByColumn.tsx b/ui/advancedFilter/ItemByColumn.tsx index c9906d158d..d2b63bce53 100644 --- a/ui/advancedFilter/ItemByColumn.tsx +++ b/ui/advancedFilter/ItemByColumn.tsx @@ -1,4 +1,4 @@ -import { Flex, Skeleton } from '@chakra-ui/react'; +import { Flex } from '@chakra-ui/react'; import React from 'react'; import type { AdvancedFilterResponseItem } from 'types/api/advancedFilter'; @@ -7,6 +7,7 @@ import config from 'configs/app'; import getCurrencyValue from 'lib/getCurrencyValue'; import type { ColumnsIds } from 'ui/advancedFilter/constants'; import AddressFromToIcon from 'ui/shared/address/AddressFromToIcon'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; diff --git a/ui/blob/BlobData.tsx b/ui/blob/BlobData.tsx index cfa9a31615..b17142fba8 100644 --- a/ui/blob/BlobData.tsx +++ b/ui/blob/BlobData.tsx @@ -1,4 +1,4 @@ -import { Flex, GridItem, Skeleton, Button } from '@chakra-ui/react'; +import { Flex, GridItem, Button } from '@chakra-ui/react'; import React from 'react'; import * as blobUtils from 'lib/blob'; @@ -8,6 +8,7 @@ import downloadBlob from 'lib/downloadBlob'; import hexToBase64 from 'lib/hexToBase64'; import hexToBytes from 'lib/hexToBytes'; import hexToUtf8 from 'lib/hexToUtf8'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import RawDataSnippet from 'ui/shared/RawDataSnippet'; import Select from 'ui/shared/select/Select'; diff --git a/ui/blob/BlobInfo.tsx b/ui/blob/BlobInfo.tsx index cf746d6ed2..ea14bb374e 100644 --- a/ui/blob/BlobInfo.tsx +++ b/ui/blob/BlobInfo.tsx @@ -1,8 +1,9 @@ -import { Alert, Grid, GridItem, Skeleton } from '@chakra-ui/react'; +import { Alert, Grid, GridItem } from '@chakra-ui/react'; import React from 'react'; import type { Blob } from 'types/api/blobs'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider'; diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx index ec45400a23..5e8d95bb13 100644 --- a/ui/block/BlockDetails.tsx +++ b/ui/block/BlockDetails.tsx @@ -1,4 +1,4 @@ -import { Grid, GridItem, Text, Link, Box, Tooltip, Skeleton } from '@chakra-ui/react'; +import { Grid, GridItem, Text, Link, Box, Tooltip } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import capitalize from 'lodash/capitalize'; import { useRouter } from 'next/router'; @@ -20,6 +20,7 @@ import getQueryParamString from 'lib/router/getQueryParamString'; import { currencyUnits } from 'lib/units'; import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider'; diff --git a/ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx b/ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx index d43cd48018..aae73d82bd 100644 --- a/ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx +++ b/ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx @@ -1,9 +1,10 @@ -import { Box, Flex, IconButton, Skeleton, useDisclosure } from '@chakra-ui/react'; +import { Box, Flex, IconButton, useDisclosure } from '@chakra-ui/react'; import React from 'react'; import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block'; import getCurrencyValue from 'lib/getCurrencyValue'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx b/ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx index b12cb6dea1..5dbcca6ec3 100644 --- a/ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx +++ b/ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx @@ -1,9 +1,10 @@ -import { Flex, IconButton, Skeleton, Td, Tr, useDisclosure } from '@chakra-ui/react'; +import { Flex, IconButton, Td, Tr, useDisclosure } from '@chakra-ui/react'; import React from 'react'; import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block'; import getCurrencyValue from 'lib/getCurrencyValue'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/blocks/BlocksListItem.tsx b/ui/blocks/BlocksListItem.tsx index 8243942f2b..8c33ef8afc 100644 --- a/ui/blocks/BlocksListItem.tsx +++ b/ui/blocks/BlocksListItem.tsx @@ -1,4 +1,4 @@ -import { Flex, Skeleton, Text, Box, Tooltip } from '@chakra-ui/react'; +import { Flex, Text, Box, Tooltip } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import capitalize from 'lodash/capitalize'; import React from 'react'; @@ -13,6 +13,7 @@ import { WEI } from 'lib/consts'; import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle'; import { currencyUnits } from 'lib/units'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/blocks/BlocksTabSlot.tsx b/ui/blocks/BlocksTabSlot.tsx index ff8b9fe6d8..b6a98ca6dd 100644 --- a/ui/blocks/BlocksTabSlot.tsx +++ b/ui/blocks/BlocksTabSlot.tsx @@ -1,4 +1,4 @@ -import { Flex, Box, Text, Skeleton } from '@chakra-ui/react'; +import { Flex, Box, Text } from '@chakra-ui/react'; import React from 'react'; import type { PaginationParams } from 'ui/shared/pagination/types'; @@ -8,6 +8,7 @@ import { route } from 'nextjs-routes'; import useApiQuery from 'lib/api/useApiQuery'; import { nbsp } from 'lib/html-entities'; import { HOMEPAGE_STATS } from 'stubs/stats'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; import Pagination from 'ui/shared/pagination/Pagination'; diff --git a/ui/blocks/BlocksTableItem.tsx b/ui/blocks/BlocksTableItem.tsx index 48114e1ea5..c5bf924e10 100644 --- a/ui/blocks/BlocksTableItem.tsx +++ b/ui/blocks/BlocksTableItem.tsx @@ -1,4 +1,4 @@ -import { Tr, Td, Flex, Box, Tooltip, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { Tr, Td, Flex, Box, Tooltip, useColorModeValue } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import { motion } from 'framer-motion'; import React from 'react'; @@ -11,6 +11,7 @@ import config from 'configs/app'; import getBlockTotalReward from 'lib/block/getBlockTotalReward'; import { WEI } from 'lib/consts'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx b/ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx index 764ff7999a..b0a92b8126 100644 --- a/ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx +++ b/ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx @@ -1,8 +1,9 @@ -import { Box, Skeleton } from '@chakra-ui/react'; +import { Box } from '@chakra-ui/react'; import React, { useCallback } from 'react'; import type { CustomAbi } from 'types/api/account'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TableItemActionButtons from 'ui/shared/TableItemActionButtons'; diff --git a/ui/customAbi/CustomAbiTable/CustomAbiTableItem.tsx b/ui/customAbi/CustomAbiTable/CustomAbiTableItem.tsx index 121c28eaac..b3711a9d26 100644 --- a/ui/customAbi/CustomAbiTable/CustomAbiTableItem.tsx +++ b/ui/customAbi/CustomAbiTable/CustomAbiTableItem.tsx @@ -2,12 +2,12 @@ import { Tr, Td, Box, - Skeleton, } from '@chakra-ui/react'; import React, { useCallback } from 'react'; import type { CustomAbi } from 'types/api/account'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TableItemActionButtons from 'ui/shared/TableItemActionButtons'; diff --git a/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx index 7c1564735d..87f1936e7c 100644 --- a/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx +++ b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx @@ -1,10 +1,10 @@ -import { Skeleton } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; diff --git a/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx b/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx index 299509a4a9..b76a972bac 100644 --- a/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx +++ b/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx @@ -1,10 +1,11 @@ -import { Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Td, Tr } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; diff --git a/ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx b/ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx index 37a6d20602..0c4ea8099e 100644 --- a/ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx +++ b/ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx @@ -1,10 +1,11 @@ -import { Skeleton, chakra } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import React from 'react'; import type { ScrollL2MessageItem } from 'types/api/scrollL2'; import config from 'configs/app'; import getCurrencyValue from 'lib/getCurrencyValue'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx b/ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx index 4a48813c23..5ec1bbb355 100644 --- a/ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx +++ b/ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx @@ -1,10 +1,11 @@ -import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react'; +import { Td, Tr, chakra } from '@chakra-ui/react'; import React from 'react'; import type { ScrollL2MessageItem } from 'types/api/scrollL2'; import config from 'configs/app'; import getCurrencyValue from 'lib/getCurrencyValue'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx index 3bca44ee29..0a9de9a39e 100644 --- a/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx +++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx @@ -1,10 +1,11 @@ -import { Skeleton, chakra } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx index 962135741b..62a52ac14f 100644 --- a/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx +++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx @@ -1,10 +1,11 @@ -import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react'; +import { Td, Tr, chakra } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx index 27d83573c5..8080006e60 100644 --- a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx +++ b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx @@ -1,9 +1,9 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2'; import HashStringShorten from 'ui/shared/HashStringShorten'; diff --git a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx index dd55542b5d..0b4d6a5759 100644 --- a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx +++ b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx @@ -1,9 +1,10 @@ -import { Flex, Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Flex, Td, Tr } from '@chakra-ui/react'; import React from 'react'; import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2'; import HashStringShorten from 'ui/shared/HashStringShorten'; diff --git a/ui/gasTracker/GasTrackerNetworkUtilization.tsx b/ui/gasTracker/GasTrackerNetworkUtilization.tsx index e108c7a880..a30e520790 100644 --- a/ui/gasTracker/GasTrackerNetworkUtilization.tsx +++ b/ui/gasTracker/GasTrackerNetworkUtilization.tsx @@ -1,7 +1,8 @@ -import { Skeleton, chakra } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import React from 'react'; import { mdash } from 'lib/html-entities'; +import Skeleton from 'ui/shared/chakra/Skeleton'; interface Props { percentage: number; diff --git a/ui/gasTracker/GasTrackerPriceSnippet.tsx b/ui/gasTracker/GasTrackerPriceSnippet.tsx index f9ebe01445..14420ba5a6 100644 --- a/ui/gasTracker/GasTrackerPriceSnippet.tsx +++ b/ui/gasTracker/GasTrackerPriceSnippet.tsx @@ -1,10 +1,11 @@ -import { Box, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { Box, Flex, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import type { GasPriceInfo, GasPrices } from 'types/api/stats'; import { SECOND } from 'lib/consts'; import { asymp } from 'lib/html-entities'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import GasPrice from 'ui/shared/gas/GasPrice'; import type { IconName } from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/home/LatestBlocks.tsx b/ui/home/LatestBlocks.tsx index 25b7d6ccc4..119037267a 100644 --- a/ui/home/LatestBlocks.tsx +++ b/ui/home/LatestBlocks.tsx @@ -1,4 +1,4 @@ -import { chakra, Box, Heading, Flex, Text, VStack, Skeleton } from '@chakra-ui/react'; +import { chakra, Box, Heading, Flex, Text, VStack } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; import { AnimatePresence } from 'framer-motion'; import React from 'react'; @@ -16,6 +16,7 @@ import useSocketChannel from 'lib/socket/useSocketChannel'; import useSocketMessage from 'lib/socket/useSocketMessage'; import { BLOCK } from 'stubs/block'; import { HOMEPAGE_STATS } from 'stubs/stats'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import LinkInternal from 'ui/shared/links/LinkInternal'; import LatestBlocksItem from './LatestBlocksItem'; diff --git a/ui/home/LatestBlocksItem.tsx b/ui/home/LatestBlocksItem.tsx index dee0c889f4..e6767a8834 100644 --- a/ui/home/LatestBlocksItem.tsx +++ b/ui/home/LatestBlocksItem.tsx @@ -2,7 +2,6 @@ import { Box, Flex, Grid, - Skeleton, Tooltip, } from '@chakra-ui/react'; import { motion } from 'framer-motion'; @@ -13,6 +12,7 @@ import type { Block } from 'types/api/block'; import config from 'configs/app'; import getBlockTotalReward from 'lib/block/getBlockTotalReward'; import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/home/LatestTxsItem.tsx b/ui/home/LatestTxsItem.tsx index 82b3c0296a..0b4d2ceef6 100644 --- a/ui/home/LatestTxsItem.tsx +++ b/ui/home/LatestTxsItem.tsx @@ -4,7 +4,6 @@ import { HStack, Text, Grid, - Skeleton, } from '@chakra-ui/react'; import React from 'react'; @@ -14,6 +13,7 @@ import config from 'configs/app'; import getValueWithUnit from 'lib/getValueWithUnit'; import { currencyUnits } from 'lib/units'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxStatus from 'ui/shared/statusTag/TxStatus'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; diff --git a/ui/home/LatestTxsItemMobile.tsx b/ui/home/LatestTxsItemMobile.tsx index c5b852a776..efbe0e05ef 100644 --- a/ui/home/LatestTxsItemMobile.tsx +++ b/ui/home/LatestTxsItemMobile.tsx @@ -3,7 +3,6 @@ import { Flex, HStack, Text, - Skeleton, } from '@chakra-ui/react'; import React from 'react'; @@ -13,6 +12,7 @@ import config from 'configs/app'; import getValueWithUnit from 'lib/getValueWithUnit'; import { currencyUnits } from 'lib/units'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxStatus from 'ui/shared/statusTag/TxStatus'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; diff --git a/ui/home/indicators/ChainIndicatorItem.tsx b/ui/home/indicators/ChainIndicatorItem.tsx index 5cfc5b1ebc..7b9606d924 100644 --- a/ui/home/indicators/ChainIndicatorItem.tsx +++ b/ui/home/indicators/ChainIndicatorItem.tsx @@ -1,4 +1,4 @@ -import { Text, Flex, Box, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { Text, Flex, Box, useColorModeValue } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import React from 'react'; @@ -6,6 +6,7 @@ import type { HomeStats } from 'types/api/stats'; import type { ChainIndicatorId } from 'types/homepage'; import type { ResourceError } from 'lib/api/resources'; +import Skeleton from 'ui/shared/chakra/Skeleton'; interface Props { id: ChainIndicatorId; diff --git a/ui/home/indicators/ChainIndicators.tsx b/ui/home/indicators/ChainIndicators.tsx index 6180f5194d..698b053555 100644 --- a/ui/home/indicators/ChainIndicators.tsx +++ b/ui/home/indicators/ChainIndicators.tsx @@ -1,9 +1,10 @@ -import { Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react'; +import { Flex, Text, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import config from 'configs/app'; import useApiQuery from 'lib/api/useApiQuery'; import { HOMEPAGE_STATS } from 'stubs/stats'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Hint from 'ui/shared/Hint'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/home/latestBatches/LatestBatchItem.tsx b/ui/home/latestBatches/LatestBatchItem.tsx index 4d56701235..b0b15922ca 100644 --- a/ui/home/latestBatches/LatestBatchItem.tsx +++ b/ui/home/latestBatches/LatestBatchItem.tsx @@ -1,13 +1,13 @@ import { Box, Flex, - Skeleton, } from '@chakra-ui/react'; import { motion } from 'framer-motion'; import React from 'react'; import { route } from 'nextjs-routes'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import LinkInternal from 'ui/shared/links/LinkInternal'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; diff --git a/ui/home/latestDeposits/LatestDeposits.tsx b/ui/home/latestDeposits/LatestDeposits.tsx index d0eba75354..e6ba00bc95 100644 --- a/ui/home/latestDeposits/LatestDeposits.tsx +++ b/ui/home/latestDeposits/LatestDeposits.tsx @@ -3,13 +3,13 @@ import { Flex, Grid, GridItem, - Skeleton, } from '@chakra-ui/react'; import React from 'react'; import { route } from 'nextjs-routes'; import useIsMobile from 'lib/hooks/useIsMobile'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/home/latestDeposits/LatestDepositsItem.tsx b/ui/home/latestDeposits/LatestDepositsItem.tsx index 3bc208ab04..eeef1bfd31 100644 --- a/ui/home/latestDeposits/LatestDepositsItem.tsx +++ b/ui/home/latestDeposits/LatestDepositsItem.tsx @@ -2,11 +2,11 @@ import { Box, Flex, Grid, - Skeleton, } from '@chakra-ui/react'; import React from 'react'; import useIsMobile from 'lib/hooks/useIsMobile'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/marketplace/Banner/FeaturedApp.tsx b/ui/marketplace/Banner/FeaturedApp.tsx index b7d88fc921..0c6230b4be 100644 --- a/ui/marketplace/Banner/FeaturedApp.tsx +++ b/ui/marketplace/Banner/FeaturedApp.tsx @@ -1,4 +1,4 @@ -import { Link, Skeleton, useColorModeValue, LinkBox, Flex, Image, LinkOverlay, IconButton } from '@chakra-ui/react'; +import { Link, useColorModeValue, LinkBox, Flex, Image, LinkOverlay, IconButton } from '@chakra-ui/react'; import NextLink from 'next/link'; import type { MouseEvent } from 'react'; import React, { useCallback } from 'react'; @@ -7,6 +7,7 @@ import type { MarketplaceAppPreview } from 'types/client/marketplace'; import useIsMobile from 'lib/hooks/useIsMobile'; import * as mixpanel from 'lib/mixpanel/index'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import FavoriteIcon from '../FavoriteIcon'; import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon'; diff --git a/ui/marketplace/Banner/FeaturedAppMobile.tsx b/ui/marketplace/Banner/FeaturedAppMobile.tsx index 5f7e8c7b4b..34c3acd855 100644 --- a/ui/marketplace/Banner/FeaturedAppMobile.tsx +++ b/ui/marketplace/Banner/FeaturedAppMobile.tsx @@ -1,9 +1,11 @@ -import { IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, Flex } from '@chakra-ui/react'; +import { IconButton, Image, Link, LinkBox, useColorModeValue, Flex } from '@chakra-ui/react'; import type { MouseEvent } from 'react'; import React from 'react'; import type { MarketplaceAppPreview } from 'types/client/marketplace'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + import FavoriteIcon from '../FavoriteIcon'; import MarketplaceAppCardLink from '../MarketplaceAppCardLink'; import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon'; diff --git a/ui/marketplace/Banner/IframeBanner.tsx b/ui/marketplace/Banner/IframeBanner.tsx index 85d11c2698..29327ca8bf 100644 --- a/ui/marketplace/Banner/IframeBanner.tsx +++ b/ui/marketplace/Banner/IframeBanner.tsx @@ -1,7 +1,8 @@ -import { Link, Skeleton, Box } from '@chakra-ui/react'; +import { Link, Box } from '@chakra-ui/react'; import React, { useCallback, useState } from 'react'; import * as mixpanel from 'lib/mixpanel/index'; +import Skeleton from 'ui/shared/chakra/Skeleton'; const IframeBanner = ({ contentUrl, linkUrl }: { contentUrl: string; linkUrl: string }) => { const [ isFrameLoading, setIsFrameLoading ] = useState(true); diff --git a/ui/marketplace/MarketplaceAppCard.tsx b/ui/marketplace/MarketplaceAppCard.tsx index 4e19994dfa..976903c519 100644 --- a/ui/marketplace/MarketplaceAppCard.tsx +++ b/ui/marketplace/MarketplaceAppCard.tsx @@ -1,4 +1,4 @@ -import { IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, chakra, Flex } from '@chakra-ui/react'; +import { IconButton, Image, Link, LinkBox, useColorModeValue, chakra, Flex } from '@chakra-ui/react'; import type { MouseEvent } from 'react'; import React, { useCallback } from 'react'; @@ -6,6 +6,7 @@ import type { MarketplaceAppWithSecurityReport, ContractListTypes, AppRating } f import useIsMobile from 'lib/hooks/useIsMobile'; import isBrowser from 'lib/isBrowser'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import AppSecurityReport from './AppSecurityReport'; diff --git a/ui/marketplace/MarketplaceAppTopBar.tsx b/ui/marketplace/MarketplaceAppTopBar.tsx index 55b6a717da..3aa7977f5e 100644 --- a/ui/marketplace/MarketplaceAppTopBar.tsx +++ b/ui/marketplace/MarketplaceAppTopBar.tsx @@ -1,4 +1,4 @@ -import { chakra, Flex, Tooltip, Skeleton } from '@chakra-ui/react'; +import { chakra, Flex, Tooltip } from '@chakra-ui/react'; import React from 'react'; import type { MarketplaceAppOverview, MarketplaceAppSecurityReport, ContractListTypes } from 'types/client/marketplace'; @@ -9,6 +9,7 @@ import config from 'configs/app'; import { useAppContext } from 'lib/contexts/app'; import useIsMobile from 'lib/hooks/useIsMobile'; import RewardsButton from 'ui/rewards/RewardsButton'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import LinkExternal from 'ui/shared/links/LinkExternal'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/marketplace/Rating/Rating.tsx b/ui/marketplace/Rating/Rating.tsx index 4884460e20..b6c06a509b 100644 --- a/ui/marketplace/Rating/Rating.tsx +++ b/ui/marketplace/Rating/Rating.tsx @@ -1,4 +1,4 @@ -import { Text, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Skeleton, useOutsideClick, Box } from '@chakra-ui/react'; +import { Text, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, useOutsideClick, Box } from '@chakra-ui/react'; import React from 'react'; import type { AppRating } from 'types/client/marketplace'; @@ -6,6 +6,7 @@ import type { AppRating } from 'types/client/marketplace'; import config from 'configs/app'; import type { EventTypes, EventPayload } from 'lib/mixpanel/index'; import Popover from 'ui/shared/chakra/Popover'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Content from './PopoverContent'; import Stars from './Stars'; diff --git a/ui/messages/ArbitrumL2Messages.tsx b/ui/messages/ArbitrumL2Messages.tsx index 1637fd8881..895e69b410 100644 --- a/ui/messages/ArbitrumL2Messages.tsx +++ b/ui/messages/ArbitrumL2Messages.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton } from '@chakra-ui/react'; +import { Hide, Show } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; @@ -8,6 +8,7 @@ import { generateListStub } from 'stubs/utils'; import ArbitrumL2MessagesListItem from 'ui/messages/ArbitrumL2MessagesListItem'; import ArbitrumL2MessagesTable from 'ui/messages/ArbitrumL2MessagesTable'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/messages/ArbitrumL2MessagesListItem.tsx b/ui/messages/ArbitrumL2MessagesListItem.tsx index d291efc9fe..45865c4b46 100644 --- a/ui/messages/ArbitrumL2MessagesListItem.tsx +++ b/ui/messages/ArbitrumL2MessagesListItem.tsx @@ -1,9 +1,10 @@ -import { Skeleton, chakra } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import React from 'react'; import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; diff --git a/ui/messages/ArbitrumL2MessagesTableItem.tsx b/ui/messages/ArbitrumL2MessagesTableItem.tsx index a59319ef31..af149e9c8d 100644 --- a/ui/messages/ArbitrumL2MessagesTableItem.tsx +++ b/ui/messages/ArbitrumL2MessagesTableItem.tsx @@ -1,9 +1,10 @@ -import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react'; +import { Td, Tr, chakra } from '@chakra-ui/react'; import React from 'react'; import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; diff --git a/ui/mudWorlds/MudWorldsListItem.tsx b/ui/mudWorlds/MudWorldsListItem.tsx index 404a5319b5..6d66cf1043 100644 --- a/ui/mudWorlds/MudWorldsListItem.tsx +++ b/ui/mudWorlds/MudWorldsListItem.tsx @@ -1,4 +1,4 @@ -import { HStack, Skeleton } from '@chakra-ui/react'; +import { HStack } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -6,6 +6,7 @@ import type { MudWorldItem } from 'types/api/mudWorlds'; import config from 'configs/app'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; diff --git a/ui/mudWorlds/MudWorldsTableItem.tsx b/ui/mudWorlds/MudWorldsTableItem.tsx index c2a0e1ab73..857d442453 100644 --- a/ui/mudWorlds/MudWorldsTableItem.tsx +++ b/ui/mudWorlds/MudWorldsTableItem.tsx @@ -1,10 +1,11 @@ -import { Text, Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Text, Td, Tr } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { MudWorldItem } from 'types/api/mudWorlds'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; type Props = { item: MudWorldItem; isLoading?: boolean }; diff --git a/ui/nameDomain/NameDomainDetails.tsx b/ui/nameDomain/NameDomainDetails.tsx index f12e4fa30f..851b7dbd4b 100644 --- a/ui/nameDomain/NameDomainDetails.tsx +++ b/ui/nameDomain/NameDomainDetails.tsx @@ -1,4 +1,4 @@ -import { Grid, Skeleton, Tooltip, Flex } from '@chakra-ui/react'; +import { Grid, Tooltip, Flex } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import React from 'react'; @@ -10,6 +10,7 @@ import config from 'configs/app'; import type { ResourceError } from 'lib/api/resources'; import dayjs from 'lib/date/dayjs'; import stripTrailingSlash from 'lib/stripTrailingSlash'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import NftEntity from 'ui/shared/entities/nft/NftEntity'; diff --git a/ui/nameDomains/NameDomainsListItem.tsx b/ui/nameDomains/NameDomainsListItem.tsx index 63ba315ffa..d7e5500b24 100644 --- a/ui/nameDomains/NameDomainsListItem.tsx +++ b/ui/nameDomains/NameDomainsListItem.tsx @@ -1,10 +1,10 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type * as bens from '@blockscout/bens-types'; import dayjs from 'lib/date/dayjs'; import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import EnsEntity from 'ui/shared/entities/ens/EnsEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; diff --git a/ui/nameDomains/NameDomainsTableItem.tsx b/ui/nameDomains/NameDomainsTableItem.tsx index ed79386a5d..5ba1f2f3e4 100644 --- a/ui/nameDomains/NameDomainsTableItem.tsx +++ b/ui/nameDomains/NameDomainsTableItem.tsx @@ -1,10 +1,11 @@ -import { chakra, Tr, Td, Skeleton } from '@chakra-ui/react'; +import { chakra, Tr, Td } from '@chakra-ui/react'; import React from 'react'; import type * as bens from '@blockscout/bens-types'; import dayjs from 'lib/date/dayjs'; import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import EnsEntity from 'ui/shared/entities/ens/EnsEntity'; diff --git a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx index 51bf962945..d4a9eebecd 100644 --- a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx +++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx @@ -1,9 +1,10 @@ -import { Flex, Skeleton } from '@chakra-ui/react'; +import { Flex } from '@chakra-ui/react'; import React from 'react'; import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx index 4e2fd76c73..ae7b3a8cd6 100644 --- a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx +++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx @@ -1,9 +1,10 @@ -import { Flex, Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Flex, Td, Tr } from '@chakra-ui/react'; import React from 'react'; import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/pages/AccountsLabelSearch.tsx b/ui/pages/AccountsLabelSearch.tsx index 8ed107858e..51e7382b68 100644 --- a/ui/pages/AccountsLabelSearch.tsx +++ b/ui/pages/AccountsLabelSearch.tsx @@ -1,4 +1,4 @@ -import { chakra, Flex, Hide, Show, Skeleton } from '@chakra-ui/react'; +import { chakra, Flex, Hide, Show } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import React from 'react'; @@ -10,6 +10,7 @@ import { generateListStub } from 'stubs/utils'; import AddressesLabelSearchListItem from 'ui/addressesLabelSearch/AddressesLabelSearchListItem'; import AddressesLabelSearchTable from 'ui/addressesLabelSearch/AddressesLabelSearchTable'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import EntityTag from 'ui/shared/EntityTags/EntityTag'; import PageTitle from 'ui/shared/Page/PageTitle'; diff --git a/ui/pages/ApiKeys.tsx b/ui/pages/ApiKeys.tsx index 2f00e205d7..25666eba9c 100644 --- a/ui/pages/ApiKeys.tsx +++ b/ui/pages/ApiKeys.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Link, Text, Skeleton, useDisclosure } from '@chakra-ui/react'; +import { Box, Button, Link, Text, useDisclosure } from '@chakra-ui/react'; import React, { useCallback, useState } from 'react'; import type { ApiKey } from 'types/api/account'; @@ -11,6 +11,7 @@ import ApiKeyListItem from 'ui/apiKey/ApiKeyTable/ApiKeyListItem'; import ApiKeyTable from 'ui/apiKey/ApiKeyTable/ApiKeyTable'; import DeleteApiKeyModal from 'ui/apiKey/DeleteApiKeyModal'; import AccountPageDescription from 'ui/shared/AccountPageDescription'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import PageTitle from 'ui/shared/Page/PageTitle'; import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken'; diff --git a/ui/pages/ArbitrumL2TxnBatches.tsx b/ui/pages/ArbitrumL2TxnBatches.tsx index 42e9785d5e..941f348e90 100644 --- a/ui/pages/ArbitrumL2TxnBatches.tsx +++ b/ui/pages/ArbitrumL2TxnBatches.tsx @@ -1,10 +1,11 @@ -import { Hide, Show, Skeleton, Text } from '@chakra-ui/react'; +import { Hide, Show, Text } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; import { ARBITRUM_L2_TXN_BATCHES_ITEM } from 'stubs/arbitrumL2'; import { generateListStub } from 'stubs/utils'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/BeaconChainWithdrawals.tsx b/ui/pages/BeaconChainWithdrawals.tsx index b19f30f26c..e7b8a0cd84 100644 --- a/ui/pages/BeaconChainWithdrawals.tsx +++ b/ui/pages/BeaconChainWithdrawals.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton, Text } from '@chakra-ui/react'; +import { Hide, Show, Text } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -9,6 +9,7 @@ import { currencyUnits } from 'lib/units'; import { generateListStub } from 'stubs/utils'; import { WITHDRAWAL } from 'stubs/withdrawals'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/Block.tsx b/ui/pages/Block.tsx index 07981b8836..9bea7844d9 100644 --- a/ui/pages/Block.tsx +++ b/ui/pages/Block.tsx @@ -1,4 +1,4 @@ -import { chakra, Skeleton } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import capitalize from 'lodash/capitalize'; import { useRouter } from 'next/router'; import React from 'react'; @@ -23,6 +23,7 @@ import useBlockTxsQuery from 'ui/block/useBlockTxsQuery'; import useBlockWithdrawalsQuery from 'ui/block/useBlockWithdrawalsQuery'; import TextAd from 'ui/shared/ad/TextAd'; import ServiceDegradationWarning from 'ui/shared/alerts/ServiceDegradationWarning'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import NetworkExplorers from 'ui/shared/NetworkExplorers'; import PageTitle from 'ui/shared/Page/PageTitle'; diff --git a/ui/pages/Chart.tsx b/ui/pages/Chart.tsx index 1e1bef382a..a5172de838 100644 --- a/ui/pages/Chart.tsx +++ b/ui/pages/Chart.tsx @@ -1,4 +1,4 @@ -import { Button, Flex, Link, Skeleton, Text } from '@chakra-ui/react'; +import { Button, Flex, Link, Text } from '@chakra-ui/react'; import type { NextRouter } from 'next/router'; import { useRouter } from 'next/router'; import React from 'react'; @@ -16,6 +16,7 @@ import * as metadata from 'lib/metadata'; import * as mixpanel from 'lib/mixpanel/index'; import getQueryParamString from 'lib/router/getQueryParamString'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import ChartIntervalSelect from 'ui/shared/chart/ChartIntervalSelect'; import ChartMenu from 'ui/shared/chart/ChartMenu'; import ChartWidgetContent from 'ui/shared/chart/ChartWidgetContent'; diff --git a/ui/pages/CustomAbi.tsx b/ui/pages/CustomAbi.tsx index 49a72ae9e7..d8a7f9d11a 100644 --- a/ui/pages/CustomAbi.tsx +++ b/ui/pages/CustomAbi.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react'; +import { Box, Button, useDisclosure } from '@chakra-ui/react'; import React, { useCallback, useState } from 'react'; import type { CustomAbi } from 'types/api/account'; @@ -10,6 +10,7 @@ import CustomAbiListItem from 'ui/customAbi/CustomAbiTable/CustomAbiListItem'; import CustomAbiTable from 'ui/customAbi/CustomAbiTable/CustomAbiTable'; import DeleteCustomAbiModal from 'ui/customAbi/DeleteCustomAbiModal'; import AccountPageDescription from 'ui/shared/AccountPageDescription'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import PageTitle from 'ui/shared/Page/PageTitle'; import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken'; diff --git a/ui/pages/GasTracker.tsx b/ui/pages/GasTracker.tsx index 177fbae566..b5198159bc 100644 --- a/ui/pages/GasTracker.tsx +++ b/ui/pages/GasTracker.tsx @@ -3,7 +3,6 @@ import { Box, Flex, Heading, - Skeleton, chakra, } from '@chakra-ui/react'; import React from 'react'; @@ -16,6 +15,7 @@ import GasTrackerChart from 'ui/gasTracker/GasTrackerChart'; import GasTrackerFaq from 'ui/gasTracker/GasTrackerFaq'; import GasTrackerNetworkUtilization from 'ui/gasTracker/GasTrackerNetworkUtilization'; import GasTrackerPrices from 'ui/gasTracker/GasTrackerPrices'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import GasInfoUpdateTimer from 'ui/shared/gas/GasInfoUpdateTimer'; import NativeTokenIcon from 'ui/shared/NativeTokenIcon'; import PageTitle from 'ui/shared/Page/PageTitle'; diff --git a/ui/pages/OptimisticL2Deposits.tsx b/ui/pages/OptimisticL2Deposits.tsx index 0ee9c993e3..6a53f07afa 100644 --- a/ui/pages/OptimisticL2Deposits.tsx +++ b/ui/pages/OptimisticL2Deposits.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton } from '@chakra-ui/react'; +import { Hide, Show } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; @@ -8,6 +8,7 @@ import { generateListStub } from 'stubs/utils'; import OptimisticDepositsListItem from 'ui/deposits/optimisticL2/OptimisticDepositsListItem'; import OptimisticDepositsTable from 'ui/deposits/optimisticL2/OptimisticDepositsTable'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/OptimisticL2DisputeGames.tsx b/ui/pages/OptimisticL2DisputeGames.tsx index a21f5061e4..fe285ed966 100644 --- a/ui/pages/OptimisticL2DisputeGames.tsx +++ b/ui/pages/OptimisticL2DisputeGames.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton, Text } from '@chakra-ui/react'; +import { Hide, Show, Text } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; @@ -7,6 +7,7 @@ import { generateListStub } from 'stubs/utils'; import OptimisticL2DisputeGamesListItem from 'ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem'; import OptimisticL2DisputeGamesTable from 'ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/OptimisticL2OutputRoots.tsx b/ui/pages/OptimisticL2OutputRoots.tsx index b68ee7f7d2..c8044ee32f 100644 --- a/ui/pages/OptimisticL2OutputRoots.tsx +++ b/ui/pages/OptimisticL2OutputRoots.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton, Text } from '@chakra-ui/react'; +import { Hide, Show, Text } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; @@ -7,6 +7,7 @@ import { generateListStub } from 'stubs/utils'; import OptimisticL2OutputRootsListItem from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem'; import OptimisticL2OutputRootsTable from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/OptimisticL2TxnBatches.tsx b/ui/pages/OptimisticL2TxnBatches.tsx index 28820cf487..78d6126203 100644 --- a/ui/pages/OptimisticL2TxnBatches.tsx +++ b/ui/pages/OptimisticL2TxnBatches.tsx @@ -1,10 +1,11 @@ -import { Hide, Show, Skeleton, Text } from '@chakra-ui/react'; +import { Hide, Show, Text } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; import { L2_TXN_BATCHES_ITEM } from 'stubs/L2'; import { generateListStub } from 'stubs/utils'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/OptimisticL2Withdrawals.tsx b/ui/pages/OptimisticL2Withdrawals.tsx index 27d2ed56cf..764bbb57f1 100644 --- a/ui/pages/OptimisticL2Withdrawals.tsx +++ b/ui/pages/OptimisticL2Withdrawals.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton } from '@chakra-ui/react'; +import { Hide, Show } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; @@ -6,6 +6,7 @@ import { rightLineArrow, nbsp } from 'lib/html-entities'; import { L2_WITHDRAWAL_ITEM } from 'stubs/L2'; import { generateListStub } from 'stubs/utils'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/Pool.tsx b/ui/pages/Pool.tsx index d88877857d..3cccb24201 100644 --- a/ui/pages/Pool.tsx +++ b/ui/pages/Pool.tsx @@ -1,4 +1,4 @@ -import { Tag, Box, Flex, Image, Skeleton } from '@chakra-ui/react'; +import { Tag, Box, Flex, Image } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import React from 'react'; @@ -13,6 +13,7 @@ import * as addressStubs from 'stubs/address'; import { POOL } from 'stubs/pools'; import PoolInfo from 'ui/pool/PoolInfo'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import * as PoolEntity from 'ui/shared/entities/pool/PoolEntity'; diff --git a/ui/pages/RewardsDashboard.tsx b/ui/pages/RewardsDashboard.tsx index 37dff36c39..e98cf8f878 100644 --- a/ui/pages/RewardsDashboard.tsx +++ b/ui/pages/RewardsDashboard.tsx @@ -1,4 +1,4 @@ -import { Flex, Skeleton, Image, Alert } from '@chakra-ui/react'; +import { Flex, Image, Alert } from '@chakra-ui/react'; import React, { useEffect, useState } from 'react'; import config from 'configs/app'; @@ -8,6 +8,7 @@ import DailyRewardClaimButton from 'ui/rewards/dashboard/DailyRewardClaimButton' import RewardsDashboardCard from 'ui/rewards/dashboard/RewardsDashboardCard'; import RewardsDashboardCardValue from 'ui/rewards/dashboard/RewardsDashboardCardValue'; import RewardsReadOnlyInputWithCopy from 'ui/rewards/RewardsReadOnlyInputWithCopy'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import LinkExternal from 'ui/shared/links/LinkExternal'; import PageTitle from 'ui/shared/Page/PageTitle'; import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken'; diff --git a/ui/pages/ScrollL2Deposits.tsx b/ui/pages/ScrollL2Deposits.tsx index 8274e8caf9..334b7b2688 100644 --- a/ui/pages/ScrollL2Deposits.tsx +++ b/ui/pages/ScrollL2Deposits.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton } from '@chakra-ui/react'; +import { Hide, Show } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; @@ -8,6 +8,7 @@ import { generateListStub } from 'stubs/utils'; import ScrollL2DepositsListItem from 'ui/deposits/scrollL2/ScrollL2DepositsListItem'; import ScrollL2DepositsTable from 'ui/deposits/scrollL2/ScrollL2DepositsTable'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/ScrollL2TxnBatches.tsx b/ui/pages/ScrollL2TxnBatches.tsx index 60cf2f4fb8..fa388c9e3f 100644 --- a/ui/pages/ScrollL2TxnBatches.tsx +++ b/ui/pages/ScrollL2TxnBatches.tsx @@ -1,10 +1,11 @@ -import { Hide, Show, Skeleton, Text } from '@chakra-ui/react'; +import { Hide, Show, Text } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; import { SCROLL_L2_TXN_BATCH } from 'stubs/scrollL2'; import { generateListStub } from 'stubs/utils'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/ScrollL2Withdrawals.tsx b/ui/pages/ScrollL2Withdrawals.tsx index abba1ff9d2..3a3a67ac30 100644 --- a/ui/pages/ScrollL2Withdrawals.tsx +++ b/ui/pages/ScrollL2Withdrawals.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton } from '@chakra-ui/react'; +import { Hide, Show } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; @@ -6,6 +6,7 @@ import { rightLineArrow, nbsp } from 'lib/html-entities'; import { SCROLL_L2_MESSAGE_ITEM } from 'stubs/scrollL2'; import { generateListStub } from 'stubs/utils'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/SearchResults.tsx b/ui/pages/SearchResults.tsx index b25b40d827..21d74ddbb9 100644 --- a/ui/pages/SearchResults.tsx +++ b/ui/pages/SearchResults.tsx @@ -1,4 +1,4 @@ -import { Box, chakra, Table, Tbody, Tr, Th, Skeleton, Show, Hide } from '@chakra-ui/react'; +import { Box, chakra, Table, Tbody, Tr, Th, Show, Hide } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import type { FormEvent } from 'react'; import React from 'react'; @@ -16,6 +16,7 @@ import SearchResultsInput from 'ui/searchResults/SearchResultsInput'; import SearchResultTableItem from 'ui/searchResults/SearchResultTableItem'; import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import ContentLoader from 'ui/shared/ContentLoader'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import * as Layout from 'ui/shared/layout/components'; diff --git a/ui/pages/ShibariumDeposits.tsx b/ui/pages/ShibariumDeposits.tsx index 81a95861f2..f76090c309 100644 --- a/ui/pages/ShibariumDeposits.tsx +++ b/ui/pages/ShibariumDeposits.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton } from '@chakra-ui/react'; +import { Hide, Show } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; @@ -8,6 +8,7 @@ import { generateListStub } from 'stubs/utils'; import DepositsListItem from 'ui/deposits/shibarium/DepositsListItem'; import DepositsTable from 'ui/deposits/shibarium/DepositsTable'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/ShibariumWithdrawals.tsx b/ui/pages/ShibariumWithdrawals.tsx index 0e946965b1..b9f8b55187 100644 --- a/ui/pages/ShibariumWithdrawals.tsx +++ b/ui/pages/ShibariumWithdrawals.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton } from '@chakra-ui/react'; +import { Hide, Show } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; @@ -6,6 +6,7 @@ import { rightLineArrow, nbsp } from 'lib/html-entities'; import { SHIBARIUM_WITHDRAWAL_ITEM } from 'stubs/shibarium'; import { generateListStub } from 'stubs/utils'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/VerifiedAddresses.tsx b/ui/pages/VerifiedAddresses.tsx index 9cbc994d9e..c701852ce8 100644 --- a/ui/pages/VerifiedAddresses.tsx +++ b/ui/pages/VerifiedAddresses.tsx @@ -1,4 +1,4 @@ -import { OrderedList, ListItem, chakra, Button, useDisclosure, Show, Hide, Skeleton, Link } from '@chakra-ui/react'; +import { OrderedList, ListItem, chakra, Button, useDisclosure, Show, Hide, Link } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; import React from 'react'; @@ -12,6 +12,7 @@ import getQueryParamString from 'lib/router/getQueryParamString'; import { TOKEN_INFO_APPLICATION, VERIFIED_ADDRESS } from 'stubs/account'; import AddressVerificationModal from 'ui/addressVerification/AddressVerificationModal'; import AccountPageDescription from 'ui/shared/AccountPageDescription'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import AdminSupportText from 'ui/shared/texts/AdminSupportText'; diff --git a/ui/pages/Watchlist.tsx b/ui/pages/Watchlist.tsx index a01800fa78..ae53414ad9 100644 --- a/ui/pages/Watchlist.tsx +++ b/ui/pages/Watchlist.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react'; +import { Box, Button, useDisclosure } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; import React, { useCallback, useState } from 'react'; @@ -9,6 +9,7 @@ import { getResourceKey } from 'lib/api/useApiQuery'; import { WATCH_LIST_ITEM_WITH_TOKEN_INFO } from 'stubs/account'; import AccountPageDescription from 'ui/shared/AccountPageDescription'; import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import Pagination from 'ui/shared/pagination/Pagination'; diff --git a/ui/pages/ZkEvmL2Deposits.tsx b/ui/pages/ZkEvmL2Deposits.tsx index dd9d363140..9b09f1b6bf 100644 --- a/ui/pages/ZkEvmL2Deposits.tsx +++ b/ui/pages/ZkEvmL2Deposits.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton } from '@chakra-ui/react'; +import { Hide, Show } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; @@ -8,6 +8,7 @@ import { ZKEVM_DEPOSITS_ITEM } from 'stubs/zkEvmL2'; import ZkEvmL2DepositsListItem from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem'; import ZkEvmL2DepositsTable from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsTable'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/ZkEvmL2TxnBatches.tsx b/ui/pages/ZkEvmL2TxnBatches.tsx index ab2b79d3e0..e03f1337c1 100644 --- a/ui/pages/ZkEvmL2TxnBatches.tsx +++ b/ui/pages/ZkEvmL2TxnBatches.tsx @@ -1,10 +1,11 @@ -import { Hide, Show, Skeleton, Text } from '@chakra-ui/react'; +import { Hide, Show, Text } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; import { generateListStub } from 'stubs/utils'; import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/ZkEvmL2Withdrawals.tsx b/ui/pages/ZkEvmL2Withdrawals.tsx index 430936c335..4fc7a80fca 100644 --- a/ui/pages/ZkEvmL2Withdrawals.tsx +++ b/ui/pages/ZkEvmL2Withdrawals.tsx @@ -1,4 +1,4 @@ -import { Hide, Show, Skeleton } from '@chakra-ui/react'; +import { Hide, Show } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; @@ -6,6 +6,7 @@ import { rightLineArrow, nbsp } from 'lib/html-entities'; import { generateListStub } from 'stubs/utils'; import { ZKEVM_WITHDRAWALS_ITEM } from 'stubs/zkEvmL2'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pages/ZkSyncL2TxnBatches.tsx b/ui/pages/ZkSyncL2TxnBatches.tsx index bd0164fb50..01bccd4ded 100644 --- a/ui/pages/ZkSyncL2TxnBatches.tsx +++ b/ui/pages/ZkSyncL2TxnBatches.tsx @@ -1,10 +1,11 @@ -import { Hide, Show, Skeleton, Text } from '@chakra-ui/react'; +import { Hide, Show, Text } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; import { generateListStub } from 'stubs/utils'; import { ZKSYNC_L2_TXN_BATCHES_ITEM } from 'stubs/zkSyncL2'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/pool/PoolInfo.tsx b/ui/pool/PoolInfo.tsx index fed9a75faf..36c660a992 100644 --- a/ui/pool/PoolInfo.tsx +++ b/ui/pool/PoolInfo.tsx @@ -1,8 +1,9 @@ -import { Grid, Skeleton } from '@chakra-ui/react'; +import { Grid } from '@chakra-ui/react'; import React from 'react'; import type { Pool } from 'types/api/pools'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; diff --git a/ui/pools/PoolsListItem.tsx b/ui/pools/PoolsListItem.tsx index 4c0f92cdca..7874ce68e7 100644 --- a/ui/pools/PoolsListItem.tsx +++ b/ui/pools/PoolsListItem.tsx @@ -1,9 +1,10 @@ -import { Skeleton, Image } from '@chakra-ui/react'; +import { Image } from '@chakra-ui/react'; import React from 'react'; import type { Pool } from 'types/api/pools'; import getPoolLinks from 'lib/pools/getPoolLinks'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import PoolEntity from 'ui/shared/entities/pool/PoolEntity'; import LinkExternal from 'ui/shared/links/LinkExternal'; diff --git a/ui/pools/PoolsTableItem.tsx b/ui/pools/PoolsTableItem.tsx index e180eb587e..47a991fabb 100644 --- a/ui/pools/PoolsTableItem.tsx +++ b/ui/pools/PoolsTableItem.tsx @@ -1,10 +1,11 @@ -import { Flex, Box, Td, Tr, Skeleton, Text, Image, Tooltip } from '@chakra-ui/react'; +import { Flex, Box, Td, Tr, Text, Image, Tooltip } from '@chakra-ui/react'; import React from 'react'; import type { Pool } from 'types/api/pools'; import getItemIndex from 'lib/getItemIndex'; import getPoolLinks from 'lib/pools/getPoolLinks'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import PoolEntity from 'ui/shared/entities/pool/PoolEntity'; import LinkExternal from 'ui/shared/links/LinkExternal'; diff --git a/ui/privateTags/AddressTagTable/AddressTagListItem.tsx b/ui/privateTags/AddressTagTable/AddressTagListItem.tsx index de9bbd68d1..613cc7d42e 100644 --- a/ui/privateTags/AddressTagTable/AddressTagListItem.tsx +++ b/ui/privateTags/AddressTagTable/AddressTagListItem.tsx @@ -1,8 +1,9 @@ -import { Tag, Flex, HStack, Text, Skeleton } from '@chakra-ui/react'; +import { Tag, Flex, HStack, Text } from '@chakra-ui/react'; import React, { useCallback } from 'react'; import type { AddressTag } from 'types/api/account'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TableItemActionButtons from 'ui/shared/TableItemActionButtons'; diff --git a/ui/privateTags/PrivateAddressTags.tsx b/ui/privateTags/PrivateAddressTags.tsx index 17498438eb..66259604e4 100644 --- a/ui/privateTags/PrivateAddressTags.tsx +++ b/ui/privateTags/PrivateAddressTags.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react'; +import { Box, Button, useDisclosure } from '@chakra-ui/react'; import React, { useCallback, useState } from 'react'; import type { AddressTag } from 'types/api/account'; @@ -7,6 +7,7 @@ import { PAGE_TYPE_DICT } from 'lib/mixpanel/getPageType'; import { PRIVATE_TAG_ADDRESS } from 'stubs/account'; import AccountPageDescription from 'ui/shared/AccountPageDescription'; import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import Pagination from 'ui/shared/pagination/Pagination'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/privateTags/PrivateTransactionTags.tsx b/ui/privateTags/PrivateTransactionTags.tsx index d06c4f3b03..5fce7c1380 100644 --- a/ui/privateTags/PrivateTransactionTags.tsx +++ b/ui/privateTags/PrivateTransactionTags.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react'; +import { Box, Button, useDisclosure } from '@chakra-ui/react'; import React, { useCallback, useState } from 'react'; import type { TransactionTag } from 'types/api/account'; @@ -6,6 +6,7 @@ import type { TransactionTag } from 'types/api/account'; import { PRIVATE_TAG_TX } from 'stubs/account'; import AccountPageDescription from 'ui/shared/AccountPageDescription'; import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import Pagination from 'ui/shared/pagination/Pagination'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; diff --git a/ui/rewards/RewardsReadOnlyInputWithCopy.tsx b/ui/rewards/RewardsReadOnlyInputWithCopy.tsx index fc8defb958..cb31a21a6b 100644 --- a/ui/rewards/RewardsReadOnlyInputWithCopy.tsx +++ b/ui/rewards/RewardsReadOnlyInputWithCopy.tsx @@ -1,6 +1,7 @@ -import { FormControl, Input, InputGroup, InputRightElement, Skeleton, chakra } from '@chakra-ui/react'; +import { FormControl, Input, InputGroup, InputRightElement, chakra } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import FormInputPlaceholder from 'ui/shared/forms/inputs/FormInputPlaceholder'; diff --git a/ui/rewards/dashboard/RewardsDashboardCardValue.tsx b/ui/rewards/dashboard/RewardsDashboardCardValue.tsx index 6e46c1f6a3..8d1bc9bc97 100644 --- a/ui/rewards/dashboard/RewardsDashboardCardValue.tsx +++ b/ui/rewards/dashboard/RewardsDashboardCardValue.tsx @@ -1,6 +1,7 @@ -import { Flex, Text, Skeleton } from '@chakra-ui/react'; +import { Flex, Text } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import HintPopover from 'ui/shared/HintPopover'; import MeritsIcon from '../MeritsIcon'; diff --git a/ui/rewards/login/steps/CongratsStepContent.tsx b/ui/rewards/login/steps/CongratsStepContent.tsx index 1876290c54..a1d778ab2a 100644 --- a/ui/rewards/login/steps/CongratsStepContent.tsx +++ b/ui/rewards/login/steps/CongratsStepContent.tsx @@ -1,9 +1,10 @@ -import { Text, Box, Flex, Button, Skeleton, useColorModeValue, Tag } from '@chakra-ui/react'; +import { Text, Box, Flex, Button, useColorModeValue, Tag } from '@chakra-ui/react'; import React from 'react'; import { route } from 'nextjs-routes'; import { useRewardsContext } from 'lib/contexts/rewards'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import MeritsIcon from '../../MeritsIcon'; diff --git a/ui/rewards/login/steps/LoginStepContent.tsx b/ui/rewards/login/steps/LoginStepContent.tsx index 3b13dd57c4..560651ebf9 100644 --- a/ui/rewards/login/steps/LoginStepContent.tsx +++ b/ui/rewards/login/steps/LoginStepContent.tsx @@ -1,4 +1,4 @@ -import { Text, Button, useColorModeValue, Image, Box, Flex, Switch, useBoolean, Input, FormControl, Alert, Skeleton, Divider } from '@chakra-ui/react'; +import { Text, Button, useColorModeValue, Image, Box, Flex, Switch, useBoolean, Input, FormControl, Alert, Divider } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import type { ChangeEvent } from 'react'; import React, { useCallback, useState, useEffect, useMemo } from 'react'; @@ -7,6 +7,7 @@ import { useRewardsContext } from 'lib/contexts/rewards'; import * as cookies from 'lib/cookies'; import { apos } from 'lib/html-entities'; import useWallet from 'lib/web3/useWallet'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import FormInputPlaceholder from 'ui/shared/forms/inputs/FormInputPlaceholder'; import LinkExternal from 'ui/shared/links/LinkExternal'; import useProfileQuery from 'ui/snippets/auth/useProfileQuery'; diff --git a/ui/searchResults/SearchResultListItem.tsx b/ui/searchResults/SearchResultListItem.tsx index 9ed5a28ec9..9149ce740d 100644 --- a/ui/searchResults/SearchResultListItem.tsx +++ b/ui/searchResults/SearchResultListItem.tsx @@ -1,4 +1,4 @@ -import { chakra, Flex, Grid, Image, Box, Text, Skeleton, useColorMode, Tag } from '@chakra-ui/react'; +import { chakra, Flex, Grid, Image, Box, Text, useColorMode, Tag } from '@chakra-ui/react'; import React from 'react'; import xss from 'xss'; @@ -12,6 +12,7 @@ import dayjs from 'lib/date/dayjs'; import highlightText from 'lib/highlightText'; import * as mixpanel from 'lib/mixpanel/index'; import { saveToRecentKeywords } from 'lib/recentSearchKeywords'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel'; import * as AddressEntity from 'ui/shared/entities/address/AddressEntity'; import * as BlobEntity from 'ui/shared/entities/blob/BlobEntity'; diff --git a/ui/searchResults/SearchResultTableItem.tsx b/ui/searchResults/SearchResultTableItem.tsx index 1d195b861e..d521a95a41 100644 --- a/ui/searchResults/SearchResultTableItem.tsx +++ b/ui/searchResults/SearchResultTableItem.tsx @@ -1,4 +1,4 @@ -import { chakra, Tr, Td, Text, Flex, Image, Box, Skeleton, useColorMode, Tag } from '@chakra-ui/react'; +import { chakra, Tr, Td, Text, Flex, Image, Box, useColorMode, Tag } from '@chakra-ui/react'; import React from 'react'; import xss from 'xss'; @@ -12,6 +12,7 @@ import dayjs from 'lib/date/dayjs'; import highlightText from 'lib/highlightText'; import * as mixpanel from 'lib/mixpanel/index'; import { saveToRecentKeywords } from 'lib/recentSearchKeywords'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel'; import * as AddressEntity from 'ui/shared/entities/address/AddressEntity'; import * as BlobEntity from 'ui/shared/entities/blob/BlobEntity'; diff --git a/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx b/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx index de51d2069c..6b72f6fbc7 100644 --- a/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx +++ b/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx @@ -1,4 +1,4 @@ -import { Box, IconButton, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react'; +import { Box, IconButton, MenuButton, MenuList, chakra } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import React from 'react'; @@ -8,6 +8,7 @@ import config from 'configs/app'; import * as mixpanel from 'lib/mixpanel/index'; import getQueryParamString from 'lib/router/getQueryParamString'; import Menu from 'ui/shared/chakra/Menu'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import useProfileQuery from 'ui/snippets/auth/useProfileQuery'; diff --git a/ui/shared/AdditionalInfoButton.tsx b/ui/shared/AdditionalInfoButton.tsx index 144820e89a..8a969d9cd6 100644 --- a/ui/shared/AdditionalInfoButton.tsx +++ b/ui/shared/AdditionalInfoButton.tsx @@ -2,10 +2,10 @@ import { useColorModeValue, chakra, Button, - Skeleton, } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; interface Props { diff --git a/ui/shared/ApiKeySnippet.tsx b/ui/shared/ApiKeySnippet.tsx index 745489ed68..1636864ad5 100644 --- a/ui/shared/ApiKeySnippet.tsx +++ b/ui/shared/ApiKeySnippet.tsx @@ -1,6 +1,7 @@ -import { Box, HStack, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { Box, HStack, Flex, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/shared/CodeViewSnippet.tsx b/ui/shared/CodeViewSnippet.tsx index b8374001cc..aab337424a 100644 --- a/ui/shared/CodeViewSnippet.tsx +++ b/ui/shared/CodeViewSnippet.tsx @@ -1,6 +1,7 @@ -import { Box, chakra, Flex, Skeleton } from '@chakra-ui/react'; +import { Box, chakra, Flex } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CodeEditor from 'ui/shared/monaco/CodeEditor'; diff --git a/ui/shared/CopyToClipboard.tsx b/ui/shared/CopyToClipboard.tsx index be3c1311d7..568b4a4ba0 100644 --- a/ui/shared/CopyToClipboard.tsx +++ b/ui/shared/CopyToClipboard.tsx @@ -1,6 +1,7 @@ -import { IconButton, Tooltip, useClipboard, chakra, useDisclosure, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { IconButton, Tooltip, useClipboard, chakra, useDisclosure, useColorModeValue } from '@chakra-ui/react'; import React, { useEffect, useState } from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import type { IconName } from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/shared/CurrencyValue.tsx b/ui/shared/CurrencyValue.tsx index 4b4bf7b3a9..6fb6da57d7 100644 --- a/ui/shared/CurrencyValue.tsx +++ b/ui/shared/CurrencyValue.tsx @@ -1,7 +1,8 @@ -import { chakra, Skeleton } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import React from 'react'; import getCurrencyValue from 'lib/getCurrencyValue'; +import Skeleton from 'ui/shared/chakra/Skeleton'; interface Props { value: string; diff --git a/ui/shared/DetailsInfoItem.tsx b/ui/shared/DetailsInfoItem.tsx index bae00ec3ad..1a764da84a 100644 --- a/ui/shared/DetailsInfoItem.tsx +++ b/ui/shared/DetailsInfoItem.tsx @@ -1,6 +1,7 @@ -import { chakra, GridItem, Flex, Text, Skeleton } from '@chakra-ui/react'; +import { chakra, GridItem, Flex, Text } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as ContainerWithScrollY from 'ui/shared/ContainerWithScrollY'; import Hint from 'ui/shared/Hint'; import HintPopover from 'ui/shared/HintPopover'; diff --git a/ui/shared/DetailsTimestamp.tsx b/ui/shared/DetailsTimestamp.tsx index db1ca4e1ef..87153aba74 100644 --- a/ui/shared/DetailsTimestamp.tsx +++ b/ui/shared/DetailsTimestamp.tsx @@ -1,7 +1,7 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import dayjs from 'lib/date/dayjs'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import TextSeparator from 'ui/shared/TextSeparator'; diff --git a/ui/shared/EntityTags/EntityTag.tsx b/ui/shared/EntityTags/EntityTag.tsx index 477acc087d..f403c2ea58 100644 --- a/ui/shared/EntityTags/EntityTag.tsx +++ b/ui/shared/EntityTags/EntityTag.tsx @@ -1,9 +1,10 @@ import type { ResponsiveValue } from '@chakra-ui/react'; -import { chakra, Image, Skeleton, Tag } from '@chakra-ui/react'; +import { chakra, Image, Tag } from '@chakra-ui/react'; import React from 'react'; import type { EntityTag as TEntityTag } from './types'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import TruncatedValue from 'ui/shared/TruncatedValue'; diff --git a/ui/shared/GasUsedToTargetRatio.tsx b/ui/shared/GasUsedToTargetRatio.tsx index 3b80dd1582..4025fb2766 100644 --- a/ui/shared/GasUsedToTargetRatio.tsx +++ b/ui/shared/GasUsedToTargetRatio.tsx @@ -1,6 +1,8 @@ -import { Skeleton, Tooltip } from '@chakra-ui/react'; +import { Tooltip } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + type Props = { value: number; isLoading?: boolean; diff --git a/ui/shared/Hint.tsx b/ui/shared/Hint.tsx index 5aac2b52e5..a08b1f0eb5 100644 --- a/ui/shared/Hint.tsx +++ b/ui/shared/Hint.tsx @@ -1,7 +1,8 @@ import type { TooltipProps } from '@chakra-ui/react'; -import { chakra, IconButton, Tooltip, useDisclosure, Skeleton } from '@chakra-ui/react'; +import { chakra, IconButton, Tooltip, useDisclosure } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; interface Props { diff --git a/ui/shared/HintPopover.tsx b/ui/shared/HintPopover.tsx index 7dde21f4fa..84a70e0d19 100644 --- a/ui/shared/HintPopover.tsx +++ b/ui/shared/HintPopover.tsx @@ -3,7 +3,6 @@ import type { PopoverContentProps, PopoverProps } from '@chakra-ui/react'; import { - Skeleton, DarkMode, PopoverArrow, PopoverBody, @@ -16,6 +15,7 @@ import { import React from 'react'; import Popover from 'ui/shared/chakra/Popover'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from './IconSvg'; diff --git a/ui/shared/IconSvg.tsx b/ui/shared/IconSvg.tsx index 7c04cc5f1b..e50b451a4c 100644 --- a/ui/shared/IconSvg.tsx +++ b/ui/shared/IconSvg.tsx @@ -1,9 +1,10 @@ import type { HTMLChakraProps } from '@chakra-ui/react'; -import { Skeleton, chakra } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import { type IconName } from 'public/icons/name'; import React from 'react'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; export const href = config.app.spriteHash ? `/icons/sprite.${ config.app.spriteHash }.svg` : '/icons/sprite.svg'; diff --git a/ui/shared/IdenticonGithub.tsx b/ui/shared/IdenticonGithub.tsx index 430740247c..c8cbae516d 100644 --- a/ui/shared/IdenticonGithub.tsx +++ b/ui/shared/IdenticonGithub.tsx @@ -1,7 +1,9 @@ -import { useColorModeValue, useToken, Box, chakra, Skeleton } from '@chakra-ui/react'; +import { useColorModeValue, useToken, Box, chakra } from '@chakra-ui/react'; import dynamic from 'next/dynamic'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + const Identicon = dynamic<{ bg: string; string: string; size: number }>( async() => { const lib = await import('react-identicons'); diff --git a/ui/shared/ListItemMobile/ListItemMobileGrid.tsx b/ui/shared/ListItemMobile/ListItemMobileGrid.tsx index 1e51c318f6..8da2cdbce9 100644 --- a/ui/shared/ListItemMobile/ListItemMobileGrid.tsx +++ b/ui/shared/ListItemMobile/ListItemMobileGrid.tsx @@ -1,7 +1,9 @@ -import { Grid, chakra, GridItem, Skeleton } from '@chakra-ui/react'; +import { Grid, chakra, GridItem } from '@chakra-ui/react'; import { motion } from 'framer-motion'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + interface ContainerProps { className?: string; isAnimated?: boolean; diff --git a/ui/shared/NativeTokenIcon.tsx b/ui/shared/NativeTokenIcon.tsx index 92bebeb4aa..4eb6077467 100644 --- a/ui/shared/NativeTokenIcon.tsx +++ b/ui/shared/NativeTokenIcon.tsx @@ -1,9 +1,10 @@ -import { Skeleton, Image, chakra } from '@chakra-ui/react'; +import { Image, chakra } from '@chakra-ui/react'; import React from 'react'; import config from 'configs/app'; import useApiQuery from 'lib/api/useApiQuery'; import { HOMEPAGE_STATS } from 'stubs/stats'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import TokenLogoPlaceholder from './TokenLogoPlaceholder'; diff --git a/ui/shared/Noves/NovesFromTo.tsx b/ui/shared/Noves/NovesFromTo.tsx index db1ea47205..c597f9fd3c 100644 --- a/ui/shared/Noves/NovesFromTo.tsx +++ b/ui/shared/Noves/NovesFromTo.tsx @@ -1,9 +1,10 @@ -import { Box, Skeleton } from '@chakra-ui/react'; +import { Box } from '@chakra-ui/react'; import type { FC } from 'react'; import React from 'react'; import type { NovesResponseData } from 'types/api/noves'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import type { NovesFlowViewItem } from 'ui/tx/assetFlows/utils/generateFlowViewData'; import Tag from '../chakra/Tag'; diff --git a/ui/shared/Page/PageTitle.tsx b/ui/shared/Page/PageTitle.tsx index 4dc0cf12b8..9e199f5136 100644 --- a/ui/shared/Page/PageTitle.tsx +++ b/ui/shared/Page/PageTitle.tsx @@ -1,9 +1,10 @@ -import { Heading, Flex, Tooltip, Link, chakra, Skeleton, useDisclosure } from '@chakra-ui/react'; +import { Heading, Flex, Tooltip, Link, chakra, useDisclosure } from '@chakra-ui/react'; import _debounce from 'lodash/debounce'; import React from 'react'; import useIsMobile from 'lib/hooks/useIsMobile'; import TextAd from 'ui/shared/ad/TextAd'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/shared/PopoverTriggerTooltip.tsx b/ui/shared/PopoverTriggerTooltip.tsx index c1afd6e022..1db1148aec 100644 --- a/ui/shared/PopoverTriggerTooltip.tsx +++ b/ui/shared/PopoverTriggerTooltip.tsx @@ -1,7 +1,8 @@ -import { Skeleton, Tooltip, chakra } from '@chakra-ui/react'; +import { Tooltip, chakra } from '@chakra-ui/react'; import React from 'react'; import useIsMobile from 'lib/hooks/useIsMobile'; +import Skeleton from 'ui/shared/chakra/Skeleton'; type Props = { label: string; diff --git a/ui/shared/PrevNext.tsx b/ui/shared/PrevNext.tsx index 5593ed9a69..5e05cea519 100644 --- a/ui/shared/PrevNext.tsx +++ b/ui/shared/PrevNext.tsx @@ -1,6 +1,7 @@ -import { Box, IconButton, chakra, Tooltip, Flex, Skeleton } from '@chakra-ui/react'; +import { Box, IconButton, chakra, Tooltip, Flex } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; interface Props { diff --git a/ui/shared/RawDataSnippet.tsx b/ui/shared/RawDataSnippet.tsx index 68b23fc407..bcbf77ed22 100644 --- a/ui/shared/RawDataSnippet.tsx +++ b/ui/shared/RawDataSnippet.tsx @@ -1,7 +1,9 @@ import type { ChakraProps } from '@chakra-ui/react'; -import { Box, Flex, chakra, useColorModeValue, Skeleton } from '@chakra-ui/react'; +import { Box, Flex, chakra, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + import CopyToClipboard from './CopyToClipboard'; interface Props { diff --git a/ui/shared/SocketNewItemsNotice.tsx b/ui/shared/SocketNewItemsNotice.tsx index 4645145003..d5069f9089 100644 --- a/ui/shared/SocketNewItemsNotice.tsx +++ b/ui/shared/SocketNewItemsNotice.tsx @@ -1,7 +1,9 @@ -import { Alert, Link, Text, chakra, useTheme, useColorModeValue, Skeleton, Tr, Td } from '@chakra-ui/react'; +import { Alert, Link, Text, chakra, useTheme, useColorModeValue, Tr, Td } from '@chakra-ui/react'; import { transparentize } from '@chakra-ui/theme-tools'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + interface InjectedProps { content: React.ReactNode; } diff --git a/ui/shared/TableItemActionButtons.tsx b/ui/shared/TableItemActionButtons.tsx index 3c59331ba8..d2a855cccc 100644 --- a/ui/shared/TableItemActionButtons.tsx +++ b/ui/shared/TableItemActionButtons.tsx @@ -1,7 +1,8 @@ -import { Tooltip, IconButton, HStack, Skeleton } from '@chakra-ui/react'; +import { Tooltip, IconButton, HStack } from '@chakra-ui/react'; import React from 'react'; import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; type Props = { diff --git a/ui/shared/Tabs/AdaptiveTabsList.tsx b/ui/shared/Tabs/AdaptiveTabsList.tsx index a249e2800a..1cc429b4d3 100644 --- a/ui/shared/Tabs/AdaptiveTabsList.tsx +++ b/ui/shared/Tabs/AdaptiveTabsList.tsx @@ -1,10 +1,11 @@ import type { StyleProps, ThemingProps } from '@chakra-ui/react'; -import { Box, Skeleton, Tab, TabList, useColorModeValue } from '@chakra-ui/react'; +import { Box, Tab, TabList, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import { useScrollDirection } from 'lib/contexts/scrollDirection'; import useIsMobile from 'lib/hooks/useIsMobile'; import useIsSticky from 'lib/hooks/useIsSticky'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import TabCounter from './TabCounter'; import TabsMenu from './TabsMenu'; diff --git a/ui/shared/Tabs/TabsSkeleton.tsx b/ui/shared/Tabs/TabsSkeleton.tsx index 2185565183..eabc8fd352 100644 --- a/ui/shared/Tabs/TabsSkeleton.tsx +++ b/ui/shared/Tabs/TabsSkeleton.tsx @@ -1,8 +1,9 @@ -import { Flex, Skeleton, chakra, Box, useColorModeValue } from '@chakra-ui/react'; +import { Flex, chakra, Box, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import type { RoutedTab } from '../Tabs/types'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import useTabIndexFromQuery from 'ui/shared/Tabs/useTabIndexFromQuery'; type TabSize = 'sm' | 'md'; diff --git a/ui/shared/TimeAgoWithTooltip.tsx b/ui/shared/TimeAgoWithTooltip.tsx index ca665840a2..0335da49ae 100644 --- a/ui/shared/TimeAgoWithTooltip.tsx +++ b/ui/shared/TimeAgoWithTooltip.tsx @@ -1,8 +1,9 @@ -import { Skeleton, Tooltip, chakra } from '@chakra-ui/react'; +import { Tooltip, chakra } from '@chakra-ui/react'; import React from 'react'; import dayjs from 'lib/date/dayjs'; import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; +import Skeleton from 'ui/shared/chakra/Skeleton'; type Props = { timestamp?: string | number | null; diff --git a/ui/shared/TokenTransfer/TokenTransferListItem.tsx b/ui/shared/TokenTransfer/TokenTransferListItem.tsx index 2fc519d2df..9906b5d9b4 100644 --- a/ui/shared/TokenTransfer/TokenTransferListItem.tsx +++ b/ui/shared/TokenTransfer/TokenTransferListItem.tsx @@ -1,4 +1,4 @@ -import { Flex, Skeleton } from '@chakra-ui/react'; +import { Flex } from '@chakra-ui/react'; import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; @@ -6,6 +6,7 @@ import type { TokenTransfer } from 'types/api/tokenTransfer'; import getCurrencyValue from 'lib/getCurrencyValue'; import { getTokenTypeName } from 'lib/token/tokenTypes'; 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'; diff --git a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx index 9410305732..693108ee93 100644 --- a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx +++ b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx @@ -1,4 +1,4 @@ -import { Tr, Td, Flex, Skeleton, Box } from '@chakra-ui/react'; +import { Tr, Td, Flex, Box } from '@chakra-ui/react'; import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; @@ -6,6 +6,7 @@ import type { TokenTransfer } from 'types/api/tokenTransfer'; import getCurrencyValue from 'lib/getCurrencyValue'; import { getTokenTypeName } from 'lib/token/tokenTypes'; 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'; diff --git a/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx b/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx index f62498d5d5..46a09374d0 100644 --- a/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx +++ b/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx @@ -1,4 +1,4 @@ -import { Flex, Skeleton } from '@chakra-ui/react'; +import { Flex } from '@chakra-ui/react'; import React from 'react'; import type { @@ -10,6 +10,7 @@ import type { } from 'types/api/tokenTransfer'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import TokenTransferSnippetFiat from './TokenTransferSnippetFiat'; import TokenTransferSnippetNft from './TokenTransferSnippetNft'; diff --git a/ui/shared/TruncatedValue.tsx b/ui/shared/TruncatedValue.tsx index 3266df076b..0402871420 100644 --- a/ui/shared/TruncatedValue.tsx +++ b/ui/shared/TruncatedValue.tsx @@ -1,7 +1,8 @@ import type { PlacementWithLogical } from '@chakra-ui/react'; -import { Skeleton, chakra } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip'; interface Props { diff --git a/ui/shared/Utilization/Utilization.tsx b/ui/shared/Utilization/Utilization.tsx index 03dbe7e6f0..bcd0d9f3f3 100644 --- a/ui/shared/Utilization/Utilization.tsx +++ b/ui/shared/Utilization/Utilization.tsx @@ -1,7 +1,8 @@ -import { Box, Flex, chakra, useColorModeValue, Skeleton } from '@chakra-ui/react'; +import { Box, Flex, chakra, useColorModeValue } from '@chakra-ui/react'; import clamp from 'lodash/clamp'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; interface Props { className?: string; value: number; diff --git a/ui/shared/ad/AdBannerContent.tsx b/ui/shared/ad/AdBannerContent.tsx index ba54e20f04..0b0c85cf39 100644 --- a/ui/shared/ad/AdBannerContent.tsx +++ b/ui/shared/ad/AdBannerContent.tsx @@ -1,10 +1,11 @@ -import { chakra, Skeleton } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import React from 'react'; import type { BannerPlatform } from './types'; import type { AdBannerProviders } from 'types/client/adProviders'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AdbutlerBanner from './AdbutlerBanner'; import CoinzillaBanner from './CoinzillaBanner'; diff --git a/ui/shared/ad/CoinzillaTextAd.tsx b/ui/shared/ad/CoinzillaTextAd.tsx index cca2282a0d..11ff86e753 100644 --- a/ui/shared/ad/CoinzillaTextAd.tsx +++ b/ui/shared/ad/CoinzillaTextAd.tsx @@ -1,8 +1,9 @@ -import { Box, Image, Link, Text, chakra, Skeleton } from '@chakra-ui/react'; +import { Box, Image, Link, Text, chakra } from '@chakra-ui/react'; import React, { useEffect } from 'react'; import { ndash } from 'lib/html-entities'; import isBrowser from 'lib/isBrowser'; +import Skeleton from 'ui/shared/chakra/Skeleton'; type AdData = { ad: { diff --git a/ui/shared/address/AddressAddToWallet.tsx b/ui/shared/address/AddressAddToWallet.tsx index 7d0274c0e5..0ae38709da 100644 --- a/ui/shared/address/AddressAddToWallet.tsx +++ b/ui/shared/address/AddressAddToWallet.tsx @@ -1,4 +1,4 @@ -import { Box, chakra, IconButton, Skeleton, Tooltip } from '@chakra-ui/react'; +import { Box, chakra, IconButton, Tooltip } from '@chakra-ui/react'; import React from 'react'; import type { TokenInfo } from 'types/api/token'; @@ -9,6 +9,7 @@ import * as mixpanel from 'lib/mixpanel/index'; import useAddOrSwitchChain from 'lib/web3/useAddOrSwitchChain'; import useProvider from 'lib/web3/useProvider'; import { WALLETS_INFO } from 'lib/web3/wallets'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; const feature = config.features.web3Wallet; diff --git a/ui/shared/alerts/ServiceDegradationWarning.tsx b/ui/shared/alerts/ServiceDegradationWarning.tsx index 3dd49467d3..cf941d6de3 100644 --- a/ui/shared/alerts/ServiceDegradationWarning.tsx +++ b/ui/shared/alerts/ServiceDegradationWarning.tsx @@ -1,6 +1,8 @@ -import { Alert, Skeleton, Spinner, chakra } from '@chakra-ui/react'; +import { Alert, Spinner, chakra } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + interface Props { isLoading?: boolean; className?: string; diff --git a/ui/shared/alerts/TestnetWarning.tsx b/ui/shared/alerts/TestnetWarning.tsx index efec49a218..865ebbad3f 100644 --- a/ui/shared/alerts/TestnetWarning.tsx +++ b/ui/shared/alerts/TestnetWarning.tsx @@ -1,7 +1,8 @@ -import { Alert, Skeleton, chakra } from '@chakra-ui/react'; +import { Alert, chakra } from '@chakra-ui/react'; import React from 'react'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; interface Props { isLoading?: boolean; diff --git a/ui/shared/batch/ArbitrumL2TxnBatchDA.tsx b/ui/shared/batch/ArbitrumL2TxnBatchDA.tsx index 1acbe4ab28..ac7b789bfe 100644 --- a/ui/shared/batch/ArbitrumL2TxnBatchDA.tsx +++ b/ui/shared/batch/ArbitrumL2TxnBatchDA.tsx @@ -1,8 +1,10 @@ -import { Skeleton, Tag } from '@chakra-ui/react'; +import { Tag } from '@chakra-ui/react'; import React from 'react'; import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + export interface Props { dataContainer: ArbitrumL2TxnBatchesItem['batch_data_container']; isLoading?: boolean; diff --git a/ui/shared/blob/BlobDataType.tsx b/ui/shared/blob/BlobDataType.tsx index 6b0b36a3df..b1e52dc88d 100644 --- a/ui/shared/blob/BlobDataType.tsx +++ b/ui/shared/blob/BlobDataType.tsx @@ -1,7 +1,8 @@ -import { Flex, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { Flex, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import * as blobUtils from 'lib/blob'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import type { IconName } from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/shared/chakra/Skeleton.tsx b/ui/shared/chakra/Skeleton.tsx new file mode 100644 index 0000000000..5e0b640f2d --- /dev/null +++ b/ui/shared/chakra/Skeleton.tsx @@ -0,0 +1,16 @@ +import type { SkeletonProps } from '@chakra-ui/react'; +// eslint-disable-next-line no-restricted-imports +import { Skeleton as ChakraSkeleton } from '@chakra-ui/react'; +import { forwardRef } from 'react'; + +const Skeleton = forwardRef((props, ref) => { + if (props.isLoaded) { + return ; + } + + return ; +}); + +Skeleton.displayName = 'Skeleton'; + +export default Skeleton; diff --git a/ui/shared/chakra/Tag.tsx b/ui/shared/chakra/Tag.tsx index f8e0cb762f..ee8784f525 100644 --- a/ui/shared/chakra/Tag.tsx +++ b/ui/shared/chakra/Tag.tsx @@ -1,7 +1,8 @@ -import { Skeleton, Tag as ChakraTag } from '@chakra-ui/react'; +import { Tag as ChakraTag } from '@chakra-ui/react'; import type { TagProps } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip'; export interface Props extends TagProps { diff --git a/ui/shared/chart/ChartIntervalSelect.tsx b/ui/shared/chart/ChartIntervalSelect.tsx index dcb9b0a394..c8b0fcae60 100644 --- a/ui/shared/chart/ChartIntervalSelect.tsx +++ b/ui/shared/chart/ChartIntervalSelect.tsx @@ -1,10 +1,10 @@ import type { TagProps } from '@chakra-ui/react'; -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { StatsInterval, StatsIntervalIds } from 'types/client/stats'; import type { SelectOption } from 'ui/shared/select/types'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Select from 'ui/shared/select/Select'; import TagGroupSelect from 'ui/shared/tagGroupSelect/TagGroupSelect'; import { STATS_INTERVALS } from 'ui/stats/constants'; diff --git a/ui/shared/chart/ChartMenu.tsx b/ui/shared/chart/ChartMenu.tsx index 6e2c1b832e..74ea712715 100644 --- a/ui/shared/chart/ChartMenu.tsx +++ b/ui/shared/chart/ChartMenu.tsx @@ -3,7 +3,6 @@ import { MenuButton, MenuItem, MenuList, - Skeleton, useClipboard, useColorModeValue, VisuallyHidden, @@ -18,6 +17,7 @@ import dayjs from 'lib/date/dayjs'; import isBrowser from 'lib/isBrowser'; import saveAsCSV from 'lib/saveAsCSV'; import Menu from 'ui/shared/chakra/Menu'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import FullscreenChartModal from './FullscreenChartModal'; diff --git a/ui/shared/chart/ChartWidget.tsx b/ui/shared/chart/ChartWidget.tsx index 748647b384..d63b0d1510 100644 --- a/ui/shared/chart/ChartWidget.tsx +++ b/ui/shared/chart/ChartWidget.tsx @@ -2,7 +2,6 @@ import { chakra, Flex, IconButton, - Skeleton, Tooltip, useColorModeValue, } from '@chakra-ui/react'; @@ -14,6 +13,7 @@ import type { TimeChartItem } from './types'; import { route, type Route } from 'nextjs-routes'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import ChartMenu from './ChartMenu'; diff --git a/ui/shared/chart/ChartWidgetContent.tsx b/ui/shared/chart/ChartWidgetContent.tsx index 0c97f207f6..47437d4dcc 100644 --- a/ui/shared/chart/ChartWidgetContent.tsx +++ b/ui/shared/chart/ChartWidgetContent.tsx @@ -1,10 +1,11 @@ -import { Box, Center, Flex, Link, Skeleton, Text } from '@chakra-ui/react'; +import { Box, Center, Flex, Link, Text } from '@chakra-ui/react'; import React from 'react'; import type { TimeChartItem } from './types'; import type { Resolution } from '@blockscout/stats-types'; import { apos } from 'lib/html-entities'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import ChartWatermarkIcon from './ChartWatermarkIcon'; import ChartWidgetGraph from './ChartWidgetGraph'; diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx index 24ff651fac..6f62e565b0 100644 --- a/ui/shared/entities/address/AddressEntity.tsx +++ b/ui/shared/entities/address/AddressEntity.tsx @@ -1,5 +1,5 @@ import type { As } from '@chakra-ui/react'; -import { Box, Flex, Skeleton, Tooltip, chakra, VStack } from '@chakra-ui/react'; +import { Box, Flex, Tooltip, chakra, VStack } from '@chakra-ui/react'; import React from 'react'; import type { AddressParam } from 'types/api/addressParams'; @@ -9,6 +9,7 @@ import { route } from 'nextjs-routes'; import { toBech32Address } from 'lib/address/bech32'; import { useAddressHighlightContext } from 'lib/contexts/addressHighlight'; import { useSettingsContext } from 'lib/contexts/settings'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as EntityBase from 'ui/shared/entities/base/components'; import { distributeEntityProps, getIconProps } from '../base/utils'; diff --git a/ui/shared/entities/base/components.tsx b/ui/shared/entities/base/components.tsx index 7378cff684..6eb36d6b35 100644 --- a/ui/shared/entities/base/components.tsx +++ b/ui/shared/entities/base/components.tsx @@ -1,7 +1,8 @@ -import { chakra, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { chakra, Flex, useColorModeValue } from '@chakra-ui/react'; import type { As, IconProps } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import type { Props as CopyToClipboardProps } from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import HashStringShorten from 'ui/shared/HashStringShorten'; diff --git a/ui/shared/entities/ens/EnsEntity.tsx b/ui/shared/entities/ens/EnsEntity.tsx index 8371f295d5..e5dfb9883d 100644 --- a/ui/shared/entities/ens/EnsEntity.tsx +++ b/ui/shared/entities/ens/EnsEntity.tsx @@ -1,5 +1,5 @@ import type { As } from '@chakra-ui/react'; -import { Box, chakra, Flex, Image, PopoverBody, PopoverContent, PopoverTrigger, Portal, Skeleton, Text } from '@chakra-ui/react'; +import { Box, chakra, Flex, Image, PopoverBody, PopoverContent, PopoverTrigger, Portal, Text } from '@chakra-ui/react'; import React from 'react'; import type * as bens from '@blockscout/bens-types'; @@ -7,6 +7,7 @@ import type * as bens from '@blockscout/bens-types'; import { route } from 'nextjs-routes'; import Popover from 'ui/shared/chakra/Popover'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as EntityBase from 'ui/shared/entities/base/components'; import IconSvg from 'ui/shared/IconSvg'; import LinkExternal from 'ui/shared/links/LinkExternal'; diff --git a/ui/shared/entities/pool/PoolEntity.tsx b/ui/shared/entities/pool/PoolEntity.tsx index eddbc71401..6f3bf0b750 100644 --- a/ui/shared/entities/pool/PoolEntity.tsx +++ b/ui/shared/entities/pool/PoolEntity.tsx @@ -1,5 +1,5 @@ import type { As } from '@chakra-ui/react'; -import { Flex, Skeleton, chakra, useColorModeValue } from '@chakra-ui/react'; +import { Flex, chakra, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import type { Pool } from 'types/api/pools'; @@ -7,6 +7,7 @@ import type { Pool } from 'types/api/pools'; import { route } from 'nextjs-routes'; import { getPoolTitle } from 'lib/pools/getPoolTitle'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as EntityBase from 'ui/shared/entities/base/components'; import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip'; diff --git a/ui/shared/entities/token/TokenEntity.tsx b/ui/shared/entities/token/TokenEntity.tsx index 63fce45d65..4eae494bd8 100644 --- a/ui/shared/entities/token/TokenEntity.tsx +++ b/ui/shared/entities/token/TokenEntity.tsx @@ -1,11 +1,12 @@ import type { As } from '@chakra-ui/react'; -import { Image, Skeleton, chakra } from '@chakra-ui/react'; +import { Image, chakra } from '@chakra-ui/react'; import React from 'react'; import type { TokenInfo } from 'types/api/token'; import { route } from 'nextjs-routes'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as EntityBase from 'ui/shared/entities/base/components'; import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder'; import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip'; diff --git a/ui/shared/filters/FilterButton.tsx b/ui/shared/filters/FilterButton.tsx index 67bad9989d..a5d5e5b8b9 100644 --- a/ui/shared/filters/FilterButton.tsx +++ b/ui/shared/filters/FilterButton.tsx @@ -1,7 +1,8 @@ import type { As } from '@chakra-ui/react'; -import { Skeleton, Box, Button, Circle, useColorModeValue } from '@chakra-ui/react'; +import { Box, Button, Circle, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; const FilterIcon = ; diff --git a/ui/shared/filters/FilterInput.tsx b/ui/shared/filters/FilterInput.tsx index 00fcb05b52..63ebf3ca18 100644 --- a/ui/shared/filters/FilterInput.tsx +++ b/ui/shared/filters/FilterInput.tsx @@ -1,7 +1,8 @@ -import { chakra, Input, InputGroup, InputLeftElement, InputRightElement, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { chakra, Input, InputGroup, InputLeftElement, InputRightElement, useColorModeValue } from '@chakra-ui/react'; import type { ChangeEvent } from 'react'; import React, { useCallback, useState } from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import ClearButton from 'ui/shared/ClearButton'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/shared/forms/components/ImageUrlPreview.tsx b/ui/shared/forms/components/ImageUrlPreview.tsx index 86a368c8b7..d846a0a0cf 100644 --- a/ui/shared/forms/components/ImageUrlPreview.tsx +++ b/ui/shared/forms/components/ImageUrlPreview.tsx @@ -1,7 +1,9 @@ import type { ColorMode } from '@chakra-ui/react'; -import { Image, Skeleton, chakra, DarkMode } from '@chakra-ui/react'; +import { Image, chakra, DarkMode } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + interface Props { src: string | undefined; onLoad?: () => void; diff --git a/ui/shared/links/LinkExternal.tsx b/ui/shared/links/LinkExternal.tsx index 7070f81981..7e5ea0a603 100644 --- a/ui/shared/links/LinkExternal.tsx +++ b/ui/shared/links/LinkExternal.tsx @@ -1,7 +1,8 @@ import type { LinkProps } from '@chakra-ui/react'; -import { Link, chakra, Box, Skeleton } from '@chakra-ui/react'; +import { Link, chakra, Box } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import type { Variants } from './useLinkStyles'; diff --git a/ui/shared/logs/LogDecodedInputDataHeader.tsx b/ui/shared/logs/LogDecodedInputDataHeader.tsx index 2fe2065b3a..dd7220f664 100644 --- a/ui/shared/logs/LogDecodedInputDataHeader.tsx +++ b/ui/shared/logs/LogDecodedInputDataHeader.tsx @@ -1,6 +1,7 @@ -import { Divider, Flex, Skeleton, VStack } from '@chakra-ui/react'; +import { Divider, Flex, VStack } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; interface Props { diff --git a/ui/shared/logs/LogDecodedInputDataTable.tsx b/ui/shared/logs/LogDecodedInputDataTable.tsx index 07505d8803..6aac962900 100644 --- a/ui/shared/logs/LogDecodedInputDataTable.tsx +++ b/ui/shared/logs/LogDecodedInputDataTable.tsx @@ -1,9 +1,10 @@ -import { Flex, Grid, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { Flex, Grid, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import type { DecodedInput } from 'types/api/decodedInput'; import type { ArrayElement } from 'types/utils'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TruncatedValue from 'ui/shared/TruncatedValue'; diff --git a/ui/shared/logs/LogItem.tsx b/ui/shared/logs/LogItem.tsx index 05bc40ba41..77d196646f 100644 --- a/ui/shared/logs/LogItem.tsx +++ b/ui/shared/logs/LogItem.tsx @@ -1,4 +1,4 @@ -import { Grid, GridItem, Tooltip, Button, useColorModeValue, Alert, Link, Skeleton } from '@chakra-ui/react'; +import { Grid, GridItem, Tooltip, Button, useColorModeValue, Alert, Link } from '@chakra-ui/react'; import React from 'react'; import type { Log } from 'types/api/log'; @@ -7,6 +7,7 @@ import { route } from 'nextjs-routes'; // import searchIcon from 'icons/search.svg'; import { space } from 'lib/html-entities'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData'; diff --git a/ui/shared/logs/LogTopic.tsx b/ui/shared/logs/LogTopic.tsx index 971063ec4e..9496c44ba6 100644 --- a/ui/shared/logs/LogTopic.tsx +++ b/ui/shared/logs/LogTopic.tsx @@ -1,9 +1,10 @@ -import { Flex, Button, Select, Skeleton } from '@chakra-ui/react'; +import { Flex, Button, Select } from '@chakra-ui/react'; import capitalize from 'lodash/capitalize'; import React from 'react'; import hexToAddress from 'lib/hexToAddress'; import hexToUtf8 from 'lib/hexToUtf8'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; diff --git a/ui/shared/nft/NftMedia.tsx b/ui/shared/nft/NftMedia.tsx index 23ce3a19fd..4982210d61 100644 --- a/ui/shared/nft/NftMedia.tsx +++ b/ui/shared/nft/NftMedia.tsx @@ -1,9 +1,11 @@ -import { AspectRatio, chakra, Skeleton, useDisclosure } from '@chakra-ui/react'; +import { AspectRatio, chakra, useDisclosure } from '@chakra-ui/react'; import React from 'react'; import { useInView } from 'react-intersection-observer'; import type { TokenInstance } from 'types/api/token'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + import NftFallback from './NftFallback'; import NftHtml from './NftHtml'; import NftHtmlFullscreen from './NftHtmlFullscreen'; diff --git a/ui/shared/pagination/Pagination.tsx b/ui/shared/pagination/Pagination.tsx index e288f4d6d1..14418b6f1d 100644 --- a/ui/shared/pagination/Pagination.tsx +++ b/ui/shared/pagination/Pagination.tsx @@ -1,8 +1,9 @@ -import { Button, Skeleton, Flex, IconButton, chakra } from '@chakra-ui/react'; +import { Button, Flex, IconButton, chakra } from '@chakra-ui/react'; import React from 'react'; import type { PaginationParams } from './types'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; interface Props extends PaginationParams { diff --git a/ui/shared/radioButtonGroup/RadioButtonGroup.tsx b/ui/shared/radioButtonGroup/RadioButtonGroup.tsx index 7a3cb25969..af77a42ccc 100644 --- a/ui/shared/radioButtonGroup/RadioButtonGroup.tsx +++ b/ui/shared/radioButtonGroup/RadioButtonGroup.tsx @@ -1,7 +1,8 @@ -import { chakra, ButtonGroup, Button, Flex, useRadio, useRadioGroup, Skeleton } from '@chakra-ui/react'; +import { chakra, ButtonGroup, Button, Flex, useRadio, useRadioGroup } from '@chakra-ui/react'; import type { ChakraProps, UseRadioProps } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import type { IconName } from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/shared/select/SelectButton.tsx b/ui/shared/select/SelectButton.tsx index 0bcbf202c5..6a3e49ade4 100644 --- a/ui/shared/select/SelectButton.tsx +++ b/ui/shared/select/SelectButton.tsx @@ -1,6 +1,7 @@ -import { Box, Button, Skeleton } from '@chakra-ui/react'; +import { Box, Button } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; interface Props { diff --git a/ui/shared/sort/ButtonDesktop.tsx b/ui/shared/sort/ButtonDesktop.tsx index e127a5e9db..42e4bfba1d 100644 --- a/ui/shared/sort/ButtonDesktop.tsx +++ b/ui/shared/sort/ButtonDesktop.tsx @@ -2,11 +2,11 @@ import { Box, useColorModeValue, Button, - Skeleton, chakra, } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; type ButtonProps = { diff --git a/ui/shared/sort/ButtonMobile.tsx b/ui/shared/sort/ButtonMobile.tsx index 7a898c9135..69145c31c0 100644 --- a/ui/shared/sort/ButtonMobile.tsx +++ b/ui/shared/sort/ButtonMobile.tsx @@ -1,6 +1,7 @@ -import { IconButton, chakra, Skeleton } from '@chakra-ui/react'; +import { IconButton, chakra } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; type Props = { diff --git a/ui/shared/stats/StatsWidget.tsx b/ui/shared/stats/StatsWidget.tsx index 2c52639068..0429b03ae8 100644 --- a/ui/shared/stats/StatsWidget.tsx +++ b/ui/shared/stats/StatsWidget.tsx @@ -1,9 +1,10 @@ -import { Box, Flex, Text, Skeleton, useColorModeValue, chakra } from '@chakra-ui/react'; +import { Box, Flex, Text, useColorModeValue, chakra } from '@chakra-ui/react'; import NextLink from 'next/link'; import React from 'react'; import type { Route } from 'nextjs-routes'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Hint from 'ui/shared/Hint'; import IconSvg, { type IconName } from 'ui/shared/IconSvg'; import TruncatedValue from 'ui/shared/TruncatedValue'; diff --git a/ui/shared/tx/TxFee.tsx b/ui/shared/tx/TxFee.tsx index 01fa1eb240..c26aee074c 100644 --- a/ui/shared/tx/TxFee.tsx +++ b/ui/shared/tx/TxFee.tsx @@ -1,4 +1,4 @@ -import { chakra, Skeleton } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import React from 'react'; import type { Transaction } from 'types/api/transaction'; @@ -6,6 +6,7 @@ import type { Transaction } from 'types/api/transaction'; import config from 'configs/app'; import getCurrencyValue from 'lib/getCurrencyValue'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CurrencyValue from 'ui/shared/CurrencyValue'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; diff --git a/ui/shared/tx/interpretation/TxInterpretation.tsx b/ui/shared/tx/interpretation/TxInterpretation.tsx index 7eda2b5992..e00322f9a3 100644 --- a/ui/shared/tx/interpretation/TxInterpretation.tsx +++ b/ui/shared/tx/interpretation/TxInterpretation.tsx @@ -1,4 +1,4 @@ -import { Skeleton, Tooltip, chakra } from '@chakra-ui/react'; +import { Tooltip, chakra } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -13,6 +13,7 @@ import config from 'configs/app'; import dayjs from 'lib/date/dayjs'; import * as mixpanel from 'lib/mixpanel/index'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import EnsEntity from 'ui/shared/entities/ens/EnsEntity'; diff --git a/ui/shared/userOps/UserOpStatus.tsx b/ui/shared/userOps/UserOpStatus.tsx index ea58a5feba..974830c00c 100644 --- a/ui/shared/userOps/UserOpStatus.tsx +++ b/ui/shared/userOps/UserOpStatus.tsx @@ -1,6 +1,6 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import StatusTag from 'ui/shared/statusTag/StatusTag'; type Props = { diff --git a/ui/shared/verificationSteps/VerificationSteps.tsx b/ui/shared/verificationSteps/VerificationSteps.tsx index 889a09d370..0fead928c6 100644 --- a/ui/shared/verificationSteps/VerificationSteps.tsx +++ b/ui/shared/verificationSteps/VerificationSteps.tsx @@ -1,8 +1,10 @@ -import { Skeleton, chakra } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import React from 'react'; import type { Step } from './types'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + import VerificationStep from './VerificationStep'; export interface Props { diff --git a/ui/snippets/footer/Footer.tsx b/ui/snippets/footer/Footer.tsx index b0b2ecaa87..b347d5201e 100644 --- a/ui/snippets/footer/Footer.tsx +++ b/ui/snippets/footer/Footer.tsx @@ -1,5 +1,5 @@ import type { GridProps, HTMLChakraProps } from '@chakra-ui/react'; -import { Box, Grid, Flex, Text, Link, VStack, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { Box, Grid, Flex, Text, Link, VStack, useColorModeValue } from '@chakra-ui/react'; import { useQuery } from '@tanstack/react-query'; import React from 'react'; @@ -11,6 +11,7 @@ import useApiQuery from 'lib/api/useApiQuery'; import useFetch from 'lib/hooks/useFetch'; import useIssueUrl from 'lib/hooks/useIssueUrl'; import { copy } from 'lib/html-entities'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils'; import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet'; diff --git a/ui/snippets/footer/FooterLinkItem.tsx b/ui/snippets/footer/FooterLinkItem.tsx index 2e364a306e..550ea3f857 100644 --- a/ui/snippets/footer/FooterLinkItem.tsx +++ b/ui/snippets/footer/FooterLinkItem.tsx @@ -1,6 +1,7 @@ -import { Center, Link, Skeleton } from '@chakra-ui/react'; +import { Center, Link } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import type { IconName } from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/snippets/header/alerts/IndexingBlocksAlert.tsx b/ui/snippets/header/alerts/IndexingBlocksAlert.tsx index edb57e3682..bffc91a791 100644 --- a/ui/snippets/header/alerts/IndexingBlocksAlert.tsx +++ b/ui/snippets/header/alerts/IndexingBlocksAlert.tsx @@ -1,4 +1,4 @@ -import { Alert, AlertIcon, AlertTitle, Skeleton } from '@chakra-ui/react'; +import { Alert, AlertIcon, AlertTitle } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; import React from 'react'; @@ -12,6 +12,7 @@ import * as cookies from 'lib/cookies'; import { nbsp, ndash } from 'lib/html-entities'; import useSocketChannel from 'lib/socket/useSocketChannel'; import useSocketMessage from 'lib/socket/useSocketMessage'; +import Skeleton from 'ui/shared/chakra/Skeleton'; const IndexingBlocksAlert = () => { const appProps = useAppContext(); diff --git a/ui/snippets/networkMenu/NetworkLogo.tsx b/ui/snippets/networkMenu/NetworkLogo.tsx index 7c8a935efa..b5d182a3a5 100644 --- a/ui/snippets/networkMenu/NetworkLogo.tsx +++ b/ui/snippets/networkMenu/NetworkLogo.tsx @@ -1,9 +1,10 @@ -import { Box, Image, useColorModeValue, Skeleton, chakra } from '@chakra-ui/react'; +import { Box, Image, useColorModeValue, chakra } from '@chakra-ui/react'; import React from 'react'; import { route } from 'nextjs-routes'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; interface Props { diff --git a/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx b/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx index bb640fd1bc..a94b4b86a6 100644 --- a/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx +++ b/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx @@ -1,8 +1,10 @@ -import { PopoverContent, PopoverBody, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, Skeleton, Flex, useColorModeValue } from '@chakra-ui/react'; +import { PopoverContent, PopoverBody, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, Flex, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import type { FeaturedNetwork, NetworkGroup } from 'types/networks'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + import NetworkMenuLink from './NetworkMenuLink'; interface Props { diff --git a/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx b/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx index 357830f831..4b48882365 100644 --- a/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx +++ b/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx @@ -1,9 +1,11 @@ -import { Box, Select, VStack, Skeleton, Flex } from '@chakra-ui/react'; +import { Box, Select, VStack, Flex } from '@chakra-ui/react'; import capitalize from 'lodash/capitalize'; import React from 'react'; import type { NetworkGroup, FeaturedNetwork } from 'types/networks'; +import Skeleton from 'ui/shared/chakra/Skeleton'; + import NetworkMenuLink from './NetworkMenuLink'; interface Props { diff --git a/ui/snippets/topBar/TopBarStats.tsx b/ui/snippets/topBar/TopBarStats.tsx index d6ec93a891..17a54da3d6 100644 --- a/ui/snippets/topBar/TopBarStats.tsx +++ b/ui/snippets/topBar/TopBarStats.tsx @@ -1,4 +1,4 @@ -import { Flex, Link, Skeleton, chakra } from '@chakra-ui/react'; +import { Flex, Link, chakra } from '@chakra-ui/react'; import React from 'react'; import config from 'configs/app'; @@ -6,6 +6,7 @@ import useApiQuery from 'lib/api/useApiQuery'; import dayjs from 'lib/date/dayjs'; import useIsMobile from 'lib/hooks/useIsMobile'; import { HOMEPAGE_STATS } from 'stubs/stats'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip'; import GasPrice from 'ui/shared/gas/GasPrice'; import TextSeparator from 'ui/shared/TextSeparator'; diff --git a/ui/stats/ChartsWidgetsList.tsx b/ui/stats/ChartsWidgetsList.tsx index 308d87972a..13d260a3b2 100644 --- a/ui/stats/ChartsWidgetsList.tsx +++ b/ui/stats/ChartsWidgetsList.tsx @@ -1,4 +1,4 @@ -import { Box, Grid, Heading, List, ListItem, Skeleton } from '@chakra-ui/react'; +import { Box, Grid, Heading, List, ListItem } from '@chakra-ui/react'; import React, { useCallback, useState } from 'react'; import type * as stats from '@blockscout/stats-types'; @@ -6,6 +6,7 @@ import type { StatsIntervalIds } from 'types/client/stats'; import useApiQuery from 'lib/api/useApiQuery'; import { apos } from 'lib/html-entities'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import EmptySearchResult from 'ui/shared/EmptySearchResult'; import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/token/TokenDetails.tsx b/ui/token/TokenDetails.tsx index d3e5152eb9..d90c20793d 100644 --- a/ui/token/TokenDetails.tsx +++ b/ui/token/TokenDetails.tsx @@ -1,4 +1,4 @@ -import { Box, Grid, Link, Skeleton } from '@chakra-ui/react'; +import { Box, Grid, Link } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import BigNumber from 'bignumber.js'; import { useRouter } from 'next/router'; @@ -17,6 +17,7 @@ import { TOKEN_COUNTERS } from 'stubs/token'; import type { TokenTabs } from 'ui/pages/Token'; import AppActionButton from 'ui/shared/AppActionButton/AppActionButton'; import useAppActionData from 'ui/shared/AppActionButton/useAppActionData'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem'; import TruncatedValue from 'ui/shared/TruncatedValue'; diff --git a/ui/token/TokenHolders/TokenHoldersListItem.tsx b/ui/token/TokenHolders/TokenHoldersListItem.tsx index 65dc4b2f3a..8f8d7b005e 100644 --- a/ui/token/TokenHolders/TokenHoldersListItem.tsx +++ b/ui/token/TokenHolders/TokenHoldersListItem.tsx @@ -1,9 +1,9 @@ -import { Skeleton } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { TokenHolder, TokenInfo } from 'types/api/token'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import Utilization from 'ui/shared/Utilization/Utilization'; diff --git a/ui/token/TokenHolders/TokenHoldersTableItem.tsx b/ui/token/TokenHolders/TokenHoldersTableItem.tsx index dce7db76bf..554048e487 100644 --- a/ui/token/TokenHolders/TokenHoldersTableItem.tsx +++ b/ui/token/TokenHolders/TokenHoldersTableItem.tsx @@ -1,9 +1,10 @@ -import { Tr, Td, Skeleton } from '@chakra-ui/react'; +import { Tr, Td } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { TokenHolder, TokenInfo } from 'types/api/token'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import Utilization from 'ui/shared/Utilization/Utilization'; diff --git a/ui/token/TokenInventoryItem.tsx b/ui/token/TokenInventoryItem.tsx index 1b9467b0d7..2fefb6eeb4 100644 --- a/ui/token/TokenInventoryItem.tsx +++ b/ui/token/TokenInventoryItem.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Text, Link, useColorModeValue, Skeleton } from '@chakra-ui/react'; +import { Box, Flex, Text, Link, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import type { TokenInfo, TokenInstance } from 'types/api/token'; @@ -6,6 +6,7 @@ import type { TokenInfo, TokenInstance } from 'types/api/token'; import { route } from 'nextjs-routes'; import useIsMobile from 'lib/hooks/useIsMobile'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import LinkInternal from 'ui/shared/links/LinkInternal'; import NftMedia from 'ui/shared/nft/NftMedia'; diff --git a/ui/token/TokenNftMarketplaces.tsx b/ui/token/TokenNftMarketplaces.tsx index 4081c7e209..0993f8a4a5 100644 --- a/ui/token/TokenNftMarketplaces.tsx +++ b/ui/token/TokenNftMarketplaces.tsx @@ -1,10 +1,11 @@ -import { Image, Link, Skeleton, Tooltip } from '@chakra-ui/react'; +import { Image, Link, Tooltip } from '@chakra-ui/react'; import React from 'react'; import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata'; import config from 'configs/app'; import AppActionButton from 'ui/shared/AppActionButton/AppActionButton'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import TextSeparator from 'ui/shared/TextSeparator'; diff --git a/ui/token/TokenTransfer/TokenTransferListItem.tsx b/ui/token/TokenTransfer/TokenTransferListItem.tsx index 8886a533b8..0b944573e6 100644 --- a/ui/token/TokenTransfer/TokenTransferListItem.tsx +++ b/ui/token/TokenTransfer/TokenTransferListItem.tsx @@ -1,4 +1,4 @@ -import { Grid, Flex, Skeleton } from '@chakra-ui/react'; +import { Grid, Flex } from '@chakra-ui/react'; import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; @@ -6,6 +6,7 @@ import type { TokenTransfer } from 'types/api/tokenTransfer'; import getCurrencyValue from 'lib/getCurrencyValue'; import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes'; 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 TxEntity from 'ui/shared/entities/tx/TxEntity'; diff --git a/ui/token/TokenTransfer/TokenTransferTableItem.tsx b/ui/token/TokenTransfer/TokenTransferTableItem.tsx index 216df530c1..f1a15743e7 100644 --- a/ui/token/TokenTransfer/TokenTransferTableItem.tsx +++ b/ui/token/TokenTransfer/TokenTransferTableItem.tsx @@ -1,4 +1,4 @@ -import { Tr, Td, Flex, Skeleton, Box } from '@chakra-ui/react'; +import { Tr, Td, Flex, Box } from '@chakra-ui/react'; import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; @@ -6,6 +6,7 @@ import type { TokenTransfer } from 'types/api/tokenTransfer'; import getCurrencyValue from 'lib/getCurrencyValue'; import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes'; 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 TxEntity from 'ui/shared/entities/tx/TxEntity'; diff --git a/ui/token/TokenVerifiedInfo.tsx b/ui/token/TokenVerifiedInfo.tsx index 28f69bee4e..b53f49a5f1 100644 --- a/ui/token/TokenVerifiedInfo.tsx +++ b/ui/token/TokenVerifiedInfo.tsx @@ -1,4 +1,3 @@ -import { Skeleton } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import React from 'react'; @@ -6,6 +5,7 @@ import type { TokenVerifiedInfo as TTokenVerifiedInfo } from 'types/api/token'; import config from 'configs/app'; import type { ResourceError } from 'lib/api/resources'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import LinkExternal from 'ui/shared/links/LinkExternal'; import TokenProjectInfo from './TokenProjectInfo'; diff --git a/ui/tokenInstance/TokenInstanceDetails.tsx b/ui/tokenInstance/TokenInstanceDetails.tsx index 2ad0667361..0b1fd48719 100644 --- a/ui/tokenInstance/TokenInstanceDetails.tsx +++ b/ui/tokenInstance/TokenInstanceDetails.tsx @@ -1,4 +1,4 @@ -import { Flex, Grid, Skeleton } from '@chakra-ui/react'; +import { Flex, Grid } from '@chakra-ui/react'; import React from 'react'; import type { TokenInfo, TokenInstance } from 'types/api/token'; @@ -7,6 +7,7 @@ import config from 'configs/app'; import useIsMounted from 'lib/hooks/useIsMounted'; import AppActionButton from 'ui/shared/AppActionButton/AppActionButton'; import useAppActionData from 'ui/shared/AppActionButton/useAppActionData'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider'; diff --git a/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx b/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx index ffaf5cd188..dbd3373c93 100644 --- a/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx +++ b/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx @@ -1,10 +1,11 @@ -import { Grid, GridItem, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { Grid, GridItem, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import type { TokenInstance } from 'types/api/token'; import type { MetadataAttributes } from 'types/client/token'; import parseMetadata from 'lib/token/parseMetadata'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider'; import LinkExternal from 'ui/shared/links/LinkExternal'; diff --git a/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx b/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx index 5bb07ff37a..0bd239f9c4 100644 --- a/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx +++ b/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx @@ -1,9 +1,9 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import { route } from 'nextjs-routes'; import useApiQuery from 'lib/api/useApiQuery'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/tokenTransfers/TokenTransfersListItem.tsx b/ui/tokenTransfers/TokenTransfersListItem.tsx index 64a7814f95..74d4d12617 100644 --- a/ui/tokenTransfers/TokenTransfersListItem.tsx +++ b/ui/tokenTransfers/TokenTransfersListItem.tsx @@ -1,10 +1,11 @@ -import { Flex, Skeleton } from '@chakra-ui/react'; +import { Flex } from '@chakra-ui/react'; import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; import getCurrencyValue from 'lib/getCurrencyValue'; import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; diff --git a/ui/tokenTransfers/TokenTransfersTableItem.tsx b/ui/tokenTransfers/TokenTransfersTableItem.tsx index 7a1251329f..3f79432723 100644 --- a/ui/tokenTransfers/TokenTransfersTableItem.tsx +++ b/ui/tokenTransfers/TokenTransfersTableItem.tsx @@ -1,4 +1,4 @@ -import { Tr, Td, Flex, Skeleton } from '@chakra-ui/react'; +import { Tr, Td, Flex } from '@chakra-ui/react'; import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; @@ -6,6 +6,7 @@ import type { TokenTransfer } from 'types/api/tokenTransfer'; import getCurrencyValue from 'lib/getCurrencyValue'; import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import NftEntity from 'ui/shared/entities/nft/NftEntity'; diff --git a/ui/tokens/TokensListItem.tsx b/ui/tokens/TokensListItem.tsx index 45f223c3f9..082dec8fb3 100644 --- a/ui/tokens/TokensListItem.tsx +++ b/ui/tokens/TokensListItem.tsx @@ -1,4 +1,4 @@ -import { Flex, HStack, Grid, GridItem, Skeleton } from '@chakra-ui/react'; +import { Flex, HStack, Grid, GridItem } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -8,6 +8,7 @@ import config from 'configs/app'; import getItemIndex from 'lib/getItemIndex'; import { getTokenTypeName } from 'lib/token/tokenTypes'; import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; diff --git a/ui/tokens/TokensTableItem.tsx b/ui/tokens/TokensTableItem.tsx index 9fd6578517..a48ec01137 100644 --- a/ui/tokens/TokensTableItem.tsx +++ b/ui/tokens/TokensTableItem.tsx @@ -1,4 +1,4 @@ -import { Flex, Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Flex, Td, Tr } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -8,6 +8,7 @@ import config from 'configs/app'; import getItemIndex from 'lib/getItemIndex'; import { getTokenTypeName } from 'lib/token/tokenTypes'; import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import type { EntityProps as AddressEntityProps } from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; diff --git a/ui/tx/TxAssetFlows.tsx b/ui/tx/TxAssetFlows.tsx index 95f39d9ec5..c4d0dac409 100644 --- a/ui/tx/TxAssetFlows.tsx +++ b/ui/tx/TxAssetFlows.tsx @@ -1,4 +1,4 @@ -import { Table, Tbody, Tr, Th, Box, Skeleton, Text, Show, Hide } from '@chakra-ui/react'; +import { Table, Tbody, Tr, Th, Box, Text, Show, Hide } from '@chakra-ui/react'; import _chunk from 'lodash/chunk'; import React, { useMemo, useState } from 'react'; @@ -7,6 +7,7 @@ import type { PaginationParams } from 'ui/shared/pagination/types'; import useApiQuery from 'lib/api/useApiQuery'; import { NOVES_TRANSLATE } from 'stubs/noves/NovesTranslate'; import ActionBar from 'ui/shared/ActionBar'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataListDisplay from 'ui/shared/DataListDisplay'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import Pagination from 'ui/shared/pagination/Pagination'; diff --git a/ui/tx/assetFlows/TxAssetFlowsListItem.tsx b/ui/tx/assetFlows/TxAssetFlowsListItem.tsx index 9a9b491248..93c9f0adb3 100644 --- a/ui/tx/assetFlows/TxAssetFlowsListItem.tsx +++ b/ui/tx/assetFlows/TxAssetFlowsListItem.tsx @@ -1,6 +1,7 @@ -import { Box, Skeleton, Text } from '@chakra-ui/react'; +import { Box, Text } from '@chakra-ui/react'; import React from 'react'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import IconSvg from 'ui/shared/IconSvg'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import NovesFromTo from 'ui/shared/Noves/NovesFromTo'; diff --git a/ui/tx/assetFlows/components/NovesActionSnippet.tsx b/ui/tx/assetFlows/components/NovesActionSnippet.tsx index daa05266c5..f4b7e19d2f 100644 --- a/ui/tx/assetFlows/components/NovesActionSnippet.tsx +++ b/ui/tx/assetFlows/components/NovesActionSnippet.tsx @@ -1,9 +1,10 @@ -import { Box, Hide, PopoverArrow, PopoverContent, PopoverTrigger, Show, Skeleton, Text, useColorModeValue } from '@chakra-ui/react'; +import { Box, Hide, PopoverArrow, PopoverContent, PopoverTrigger, Show, Text, useColorModeValue } from '@chakra-ui/react'; import type { FC } from 'react'; import React from 'react'; import { HEX_REGEXP } from 'lib/regexp'; import Popover from 'ui/shared/chakra/Popover'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/tx/blobs/TxBlobListItem.tsx b/ui/tx/blobs/TxBlobListItem.tsx index e246d24b1a..9bee5a1f05 100644 --- a/ui/tx/blobs/TxBlobListItem.tsx +++ b/ui/tx/blobs/TxBlobListItem.tsx @@ -1,9 +1,9 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { TxBlob } from 'types/api/blobs'; import BlobDataType from 'ui/shared/blob/BlobDataType'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlobEntity from 'ui/shared/entities/blob/BlobEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; diff --git a/ui/tx/blobs/TxBlobsTableItem.tsx b/ui/tx/blobs/TxBlobsTableItem.tsx index 4c82a784dd..1bb086daa6 100644 --- a/ui/tx/blobs/TxBlobsTableItem.tsx +++ b/ui/tx/blobs/TxBlobsTableItem.tsx @@ -1,9 +1,10 @@ -import { Tr, Td, Skeleton } from '@chakra-ui/react'; +import { Tr, Td } from '@chakra-ui/react'; import React from 'react'; import type { TxBlob } from 'types/api/blobs'; import BlobDataType from 'ui/shared/blob/BlobDataType'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlobEntity from 'ui/shared/entities/blob/BlobEntity'; interface Props { diff --git a/ui/tx/details/TxDetailsFeePerGas.tsx b/ui/tx/details/TxDetailsFeePerGas.tsx index afc7bfb8d4..cf7b01d127 100644 --- a/ui/tx/details/TxDetailsFeePerGas.tsx +++ b/ui/tx/details/TxDetailsFeePerGas.tsx @@ -1,9 +1,9 @@ -import { Skeleton } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import config from 'configs/app'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; interface Props { diff --git a/ui/tx/details/TxDetailsGasPrice.tsx b/ui/tx/details/TxDetailsGasPrice.tsx index 16934da4fa..3fef0c7e42 100644 --- a/ui/tx/details/TxDetailsGasPrice.tsx +++ b/ui/tx/details/TxDetailsGasPrice.tsx @@ -1,4 +1,3 @@ -import { Skeleton } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -7,6 +6,7 @@ import type { TokenInfo } from 'types/api/token'; import config from 'configs/app'; import { WEI, WEI_IN_GWEI } from 'lib/consts'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; diff --git a/ui/tx/details/TxInfo.tsx b/ui/tx/details/TxInfo.tsx index af430c281e..47a27d449c 100644 --- a/ui/tx/details/TxInfo.tsx +++ b/ui/tx/details/TxInfo.tsx @@ -9,7 +9,6 @@ import { Tooltip, chakra, useColorModeValue, - Skeleton, HStack, } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; @@ -30,6 +29,7 @@ import * as arbitrum from 'lib/rollups/arbitrum'; import { MESSAGE_DESCRIPTIONS } from 'lib/tx/arbitrumMessageStatusDescription'; import getConfirmationDuration from 'lib/tx/getConfirmationDuration'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CurrencyValue from 'ui/shared/CurrencyValue'; diff --git a/ui/tx/details/TxInfoScrollFees.tsx b/ui/tx/details/TxInfoScrollFees.tsx index 5fd514d540..ef801b2866 100644 --- a/ui/tx/details/TxInfoScrollFees.tsx +++ b/ui/tx/details/TxInfoScrollFees.tsx @@ -1,4 +1,4 @@ -import { Skeleton, Text } from '@chakra-ui/react'; +import { Text } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -6,6 +6,7 @@ import type { Transaction } from 'types/api/transaction'; import { WEI_IN_GWEI } from 'lib/consts'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CurrencyValue from 'ui/shared/CurrencyValue'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import TextSeparator from 'ui/shared/TextSeparator'; diff --git a/ui/tx/internals/TxInternalsListItem.tsx b/ui/tx/internals/TxInternalsListItem.tsx index 513c05cfd1..cc5a0883c5 100644 --- a/ui/tx/internals/TxInternalsListItem.tsx +++ b/ui/tx/internals/TxInternalsListItem.tsx @@ -1,4 +1,4 @@ -import { Flex, HStack, Skeleton } from '@chakra-ui/react'; +import { Flex, HStack } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -7,6 +7,7 @@ import type { InternalTransaction } from 'types/api/internalTransaction'; import config from 'configs/app'; import { currencyUnits } from 'lib/units'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TxStatus from 'ui/shared/statusTag/TxStatus'; diff --git a/ui/tx/internals/TxInternalsTableItem.tsx b/ui/tx/internals/TxInternalsTableItem.tsx index bbf16ebbf9..b33b2b2a8b 100644 --- a/ui/tx/internals/TxInternalsTableItem.tsx +++ b/ui/tx/internals/TxInternalsTableItem.tsx @@ -1,4 +1,4 @@ -import { Tr, Td, Box, Flex, Skeleton } from '@chakra-ui/react'; +import { Tr, Td, Box, Flex } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -6,6 +6,7 @@ import type { InternalTransaction } from 'types/api/internalTransaction'; import config from 'configs/app'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import TxStatus from 'ui/shared/statusTag/TxStatus'; import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils'; diff --git a/ui/tx/state/utils.tsx b/ui/tx/state/utils.tsx index 8a3d39e3e6..03dbb0825f 100644 --- a/ui/tx/state/utils.tsx +++ b/ui/tx/state/utils.tsx @@ -1,4 +1,4 @@ -import { Flex, Skeleton, Tooltip } from '@chakra-ui/react'; +import { Flex, Tooltip } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -9,6 +9,7 @@ import { ZERO_ADDRESS } from 'lib/consts'; import { nbsp, space } from 'lib/html-entities'; import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle'; import { currencyUnits } from 'lib/units'; +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'; diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx index 230fe84705..5e0b895855 100644 --- a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx +++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx @@ -1,4 +1,4 @@ -import { Grid, GridItem, Link, Skeleton } from '@chakra-ui/react'; +import { Grid, GridItem, Link } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import { useRouter } from 'next/router'; import React from 'react'; @@ -12,6 +12,7 @@ import type { ResourceError } from 'lib/api/resources'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx index 21fc5fe04a..0bbc90c147 100644 --- a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx +++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx @@ -1,4 +1,3 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2'; @@ -7,6 +6,7 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx index f57825e855..fbc7b5c1d5 100644 --- a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx +++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx @@ -1,4 +1,4 @@ -import { Td, Tr, Skeleton, HStack } from '@chakra-ui/react'; +import { Td, Tr, HStack } from '@chakra-ui/react'; import React from 'react'; import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2'; @@ -7,6 +7,7 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx index 17b2910d57..56ea9cfaa4 100644 --- a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx +++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx @@ -1,4 +1,4 @@ -import { Grid, Skeleton } from '@chakra-ui/react'; +import { Grid } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import { useRouter } from 'next/router'; import React from 'react'; @@ -11,6 +11,7 @@ import type { ResourceError } from 'lib/api/resources'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx index f98da1de48..c6651fb857 100644 --- a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx +++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx @@ -1,4 +1,3 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2'; @@ -7,6 +6,7 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import LinkInternal from 'ui/shared/links/LinkInternal'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx index acc9476006..42a4c73e92 100644 --- a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx +++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx @@ -1,4 +1,4 @@ -import { Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Td, Tr } from '@chakra-ui/react'; import React from 'react'; import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2'; @@ -7,6 +7,7 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import LinkInternal from 'ui/shared/links/LinkInternal'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; diff --git a/ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails.tsx b/ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails.tsx index 182cf7caa5..4625abc5d8 100644 --- a/ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails.tsx +++ b/ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails.tsx @@ -1,4 +1,4 @@ -import { Grid, Skeleton } from '@chakra-ui/react'; +import { Grid } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import { useRouter } from 'next/router'; import React from 'react'; @@ -11,6 +11,7 @@ import type { ResourceError } from 'lib/api/resources'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; import ScrollL2TxnBatchDA from 'ui/shared/batch/ScrollL2TxnBatchDA'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; diff --git a/ui/txnBatches/scrollL2/ScrollL2TxnBatchesListItem.tsx b/ui/txnBatches/scrollL2/ScrollL2TxnBatchesListItem.tsx index b11a04ede1..99a1c0d986 100644 --- a/ui/txnBatches/scrollL2/ScrollL2TxnBatchesListItem.tsx +++ b/ui/txnBatches/scrollL2/ScrollL2TxnBatchesListItem.tsx @@ -1,4 +1,3 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { ScrollL2TxnBatch } from 'types/api/scrollL2'; @@ -7,6 +6,7 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import ScrollL2TxnBatchDA from 'ui/shared/batch/ScrollL2TxnBatchDA'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/txnBatches/scrollL2/ScrollL2TxnBatchesTableItem.tsx b/ui/txnBatches/scrollL2/ScrollL2TxnBatchesTableItem.tsx index 8d7d680304..b50b2d203b 100644 --- a/ui/txnBatches/scrollL2/ScrollL2TxnBatchesTableItem.tsx +++ b/ui/txnBatches/scrollL2/ScrollL2TxnBatchesTableItem.tsx @@ -1,4 +1,4 @@ -import { Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Td, Tr } from '@chakra-ui/react'; import React from 'react'; import type { ScrollL2TxnBatch } from 'types/api/scrollL2'; @@ -7,6 +7,7 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import ScrollL2TxnBatchDA from 'ui/shared/batch/ScrollL2TxnBatchDA'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx b/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx index 871d21da7e..8844a70c65 100644 --- a/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx +++ b/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx @@ -1,4 +1,4 @@ -import { Grid, Text, Skeleton } from '@chakra-ui/react'; +import { Grid, Text } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import { useRouter } from 'next/router'; import React from 'react'; @@ -11,6 +11,7 @@ import { route } from 'nextjs-routes'; import type { ResourceError } from 'lib/api/resources'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; diff --git a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx index 3804175b1b..24673d4cb9 100644 --- a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx +++ b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx @@ -1,4 +1,4 @@ -import { Skeleton, Text } from '@chakra-ui/react'; +import { Text } from '@chakra-ui/react'; import React from 'react'; import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; @@ -6,6 +6,7 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; import { route } from 'nextjs-routes'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx index b7727700d4..e096779936 100644 --- a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx +++ b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx @@ -1,4 +1,4 @@ -import { Td, Tr, Text, Skeleton } from '@chakra-ui/react'; +import { Td, Tr, Text } from '@chakra-ui/react'; import React from 'react'; import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; @@ -6,6 +6,7 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; import { route } from 'nextjs-routes'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx index 1da0333567..70c78c105e 100644 --- a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx +++ b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx @@ -1,4 +1,4 @@ -import { Grid, GridItem, Link, Skeleton, Text } from '@chakra-ui/react'; +import { Grid, GridItem, Link, Text } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import BigNumber from 'bignumber.js'; import { useRouter } from 'next/router'; @@ -14,6 +14,7 @@ import { WEI, WEI_IN_GWEI } from 'lib/consts'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; import { currencyUnits } from 'lib/units'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; diff --git a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx index 3f735818db..f68a9755ea 100644 --- a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx +++ b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx @@ -1,8 +1,9 @@ -import { Flex, Skeleton } from '@chakra-ui/react'; +import { Flex } from '@chakra-ui/react'; import React from 'react'; import type { ZkSyncBatch } from 'types/api/zkSyncL2'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx index 5beb37b49c..5bcb287718 100644 --- a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx +++ b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx @@ -1,4 +1,4 @@ -import { Skeleton, Text } from '@chakra-ui/react'; +import { Text } from '@chakra-ui/react'; import React from 'react'; import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2'; @@ -6,6 +6,7 @@ import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2'; import { route } from 'nextjs-routes'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx index faabe873a6..8fe72c39bf 100644 --- a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx +++ b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx @@ -1,4 +1,4 @@ -import { Td, Tr, Text, Skeleton } from '@chakra-ui/react'; +import { Td, Tr, Text } from '@chakra-ui/react'; import React from 'react'; import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2'; @@ -6,6 +6,7 @@ import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2'; import { route } from 'nextjs-routes'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/txs/TxAdditionalInfoContainer.tsx b/ui/txs/TxAdditionalInfoContainer.tsx index 25006c8fe7..a179f7c9c2 100644 --- a/ui/txs/TxAdditionalInfoContainer.tsx +++ b/ui/txs/TxAdditionalInfoContainer.tsx @@ -1,7 +1,8 @@ -import { Box, Divider, Skeleton } from '@chakra-ui/react'; +import { Box, Divider } from '@chakra-ui/react'; import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import TxAdditionalInfoContent from './TxAdditionalInfoContent'; diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx index 5483c22011..e6ab27ec11 100644 --- a/ui/txs/TxsListItem.tsx +++ b/ui/txs/TxsListItem.tsx @@ -1,7 +1,7 @@ import { HStack, Flex, - Skeleton, + } from '@chakra-ui/react'; import React from 'react'; @@ -12,6 +12,7 @@ import getValueWithUnit from 'lib/getValueWithUnit'; import { space } from 'lib/html-entities'; import { currencyUnits } from 'lib/units'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; diff --git a/ui/userOp/UserOpDetails.tsx b/ui/userOp/UserOpDetails.tsx index 9aad7a9bb3..01b7b3a4e0 100644 --- a/ui/userOp/UserOpDetails.tsx +++ b/ui/userOp/UserOpDetails.tsx @@ -1,4 +1,4 @@ -import { Grid, GridItem, Text, Link, Skeleton } from '@chakra-ui/react'; +import { Grid, GridItem, Text, Link } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -13,6 +13,7 @@ import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; import { space } from 'lib/html-entities'; import { currencyUnits } from 'lib/units'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CurrencyValue from 'ui/shared/CurrencyValue'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; diff --git a/ui/userOp/UserOpRaw.tsx b/ui/userOp/UserOpRaw.tsx index b47b6c05f7..fa53eae5ad 100644 --- a/ui/userOp/UserOpRaw.tsx +++ b/ui/userOp/UserOpRaw.tsx @@ -1,8 +1,8 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { UserOp } from 'types/api/userOps'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import RawDataSnippet from 'ui/shared/RawDataSnippet'; // order is taken from the ERC-4337 standard diff --git a/ui/userOps/UserOpsListItem.tsx b/ui/userOps/UserOpsListItem.tsx index df9a97660a..454b0dfcb9 100644 --- a/ui/userOps/UserOpsListItem.tsx +++ b/ui/userOps/UserOpsListItem.tsx @@ -1,9 +1,9 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { UserOpsItem } from 'types/api/userOps'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; diff --git a/ui/validatorsBlackfort/ValidatorsListItem.tsx b/ui/validatorsBlackfort/ValidatorsListItem.tsx index a01a144378..ff53a93af6 100644 --- a/ui/validatorsBlackfort/ValidatorsListItem.tsx +++ b/ui/validatorsBlackfort/ValidatorsListItem.tsx @@ -1,4 +1,4 @@ -import { Flex, Skeleton } from '@chakra-ui/react'; +import { Flex } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -6,6 +6,7 @@ import type { ValidatorBlackfort } from 'types/api/validators'; import config from 'configs/app'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import TruncatedValue from 'ui/shared/TruncatedValue'; diff --git a/ui/validatorsBlackfort/ValidatorsTableItem.tsx b/ui/validatorsBlackfort/ValidatorsTableItem.tsx index 35e7cd0cbc..a94e1f68d2 100644 --- a/ui/validatorsBlackfort/ValidatorsTableItem.tsx +++ b/ui/validatorsBlackfort/ValidatorsTableItem.tsx @@ -1,10 +1,11 @@ -import { Tr, Td, Skeleton, Flex } from '@chakra-ui/react'; +import { Tr, Td, Flex } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { ValidatorBlackfort } from 'types/api/validators'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TruncatedValue from 'ui/shared/TruncatedValue'; diff --git a/ui/validatorsStability/ValidatorsListItem.tsx b/ui/validatorsStability/ValidatorsListItem.tsx index 668bad3e86..b308415f8f 100644 --- a/ui/validatorsStability/ValidatorsListItem.tsx +++ b/ui/validatorsStability/ValidatorsListItem.tsx @@ -1,8 +1,8 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { ValidatorStability } from 'types/api/validators'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import ValidatorStatus from 'ui/shared/statusTag/ValidatorStabilityStatus'; diff --git a/ui/validatorsStability/ValidatorsTableItem.tsx b/ui/validatorsStability/ValidatorsTableItem.tsx index 7a1231b796..8a6a8705a6 100644 --- a/ui/validatorsStability/ValidatorsTableItem.tsx +++ b/ui/validatorsStability/ValidatorsTableItem.tsx @@ -1,8 +1,9 @@ -import { Tr, Td, Skeleton } from '@chakra-ui/react'; +import { Tr, Td } from '@chakra-ui/react'; import React from 'react'; import type { ValidatorStability } from 'types/api/validators'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ValidatorStatus from 'ui/shared/statusTag/ValidatorStabilityStatus'; diff --git a/ui/verifiedAddresses/VerifiedAddressesListItem.tsx b/ui/verifiedAddresses/VerifiedAddressesListItem.tsx index 45b19a661f..43aa04b45a 100644 --- a/ui/verifiedAddresses/VerifiedAddressesListItem.tsx +++ b/ui/verifiedAddresses/VerifiedAddressesListItem.tsx @@ -1,9 +1,10 @@ -import { IconButton, Link, Skeleton, Tooltip } from '@chakra-ui/react'; +import { IconButton, Link, Tooltip } from '@chakra-ui/react'; import React from 'react'; import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account'; import dayjs from 'lib/date/dayjs'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx b/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx index 640f944ca5..7d448ae3c2 100644 --- a/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx +++ b/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx @@ -1,9 +1,10 @@ -import { Td, Tr, Link, Tooltip, IconButton, Skeleton } from '@chakra-ui/react'; +import { Td, Tr, Link, Tooltip, IconButton } from '@chakra-ui/react'; import React from 'react'; import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account'; import dayjs from 'lib/date/dayjs'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/verifiedContracts/VerifiedContractsListItem.tsx b/ui/verifiedContracts/VerifiedContractsListItem.tsx index 86d11a262f..65efab950a 100644 --- a/ui/verifiedContracts/VerifiedContractsListItem.tsx +++ b/ui/verifiedContracts/VerifiedContractsListItem.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Skeleton } from '@chakra-ui/react'; +import { Box, Flex } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -8,6 +8,7 @@ import config from 'configs/app'; import formatLanguageName from 'lib/contracts/formatLanguageName'; import { CONTRACT_LICENSES } from 'lib/contracts/licenses'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/verifiedContracts/VerifiedContractsTableItem.tsx b/ui/verifiedContracts/VerifiedContractsTableItem.tsx index 26edbde386..9858262253 100644 --- a/ui/verifiedContracts/VerifiedContractsTableItem.tsx +++ b/ui/verifiedContracts/VerifiedContractsTableItem.tsx @@ -1,4 +1,4 @@ -import { Tr, Td, Flex, chakra, Tooltip, Skeleton } from '@chakra-ui/react'; +import { Tr, Td, Flex, chakra, Tooltip } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -7,6 +7,7 @@ import type { VerifiedContract } from 'types/api/contracts'; import config from 'configs/app'; import formatLanguageName from 'lib/contracts/formatLanguageName'; import { CONTRACT_LICENSES } from 'lib/contracts/licenses'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/watchlist/WatchlistTable/WatchListAddressItem.tsx b/ui/watchlist/WatchlistTable/WatchListAddressItem.tsx index bd847e12b6..225ca116d3 100644 --- a/ui/watchlist/WatchlistTable/WatchListAddressItem.tsx +++ b/ui/watchlist/WatchlistTable/WatchListAddressItem.tsx @@ -1,4 +1,4 @@ -import { HStack, VStack, Flex, Skeleton, Text } from '@chakra-ui/react'; +import { HStack, VStack, Flex, Text } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -8,6 +8,7 @@ import config from 'configs/app'; import getCurrencyValue from 'lib/getCurrencyValue'; import { nbsp } from 'lib/html-entities'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import * as TokenEntity from 'ui/shared/entities/token/TokenEntity'; diff --git a/ui/watchlist/WatchlistTable/WatchListItem.tsx b/ui/watchlist/WatchlistTable/WatchListItem.tsx index 8f56ccec11..b8fc7fb95f 100644 --- a/ui/watchlist/WatchlistTable/WatchListItem.tsx +++ b/ui/watchlist/WatchlistTable/WatchListItem.tsx @@ -1,4 +1,4 @@ -import { Box, Switch, Text, HStack, Flex, Skeleton } from '@chakra-ui/react'; +import { Box, Switch, Text, HStack, Flex } from '@chakra-ui/react'; import { useMutation } from '@tanstack/react-query'; import React, { useCallback, useState } from 'react'; @@ -6,6 +6,7 @@ import type { WatchlistAddress } from 'types/api/account'; import useApiFetch from 'lib/api/useApiFetch'; import useToast from 'lib/hooks/useToast'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TableItemActionButtons from 'ui/shared/TableItemActionButtons'; diff --git a/ui/watchlist/WatchlistTable/WatchListTableItem.tsx b/ui/watchlist/WatchlistTable/WatchListTableItem.tsx index 4b8065b9be..231ef6dd8b 100644 --- a/ui/watchlist/WatchlistTable/WatchListTableItem.tsx +++ b/ui/watchlist/WatchlistTable/WatchListTableItem.tsx @@ -2,7 +2,6 @@ import { Tr, Td, Switch, - Skeleton, } from '@chakra-ui/react'; import { useMutation } from '@tanstack/react-query'; import React, { useCallback, useState } from 'react'; @@ -11,6 +10,7 @@ import type { WatchlistAddress } from 'types/api/account'; import useApiFetch from 'lib/api/useApiFetch'; import useToast from 'lib/hooks/useToast'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import Tag from 'ui/shared/chakra/Tag'; import TableItemActionButtons from 'ui/shared/TableItemActionButtons'; diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx index 0d1c362b97..dabef5ab61 100644 --- a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx +++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx @@ -1,4 +1,3 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { AddressWithdrawalsItem } from 'types/api/address'; @@ -7,6 +6,7 @@ import type { WithdrawalsItem } from 'types/api/withdrawals'; import config from 'configs/app'; import { currencyUnits } from 'lib/units'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx index a4e4b37a82..ef00e21466 100644 --- a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx +++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx @@ -1,10 +1,11 @@ -import { Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Td, Tr } from '@chakra-ui/react'; import React from 'react'; import type { AddressWithdrawalsItem } from 'types/api/address'; import type { BlockWithdrawalsItem } from 'types/api/block'; import type { WithdrawalsItem } from 'types/api/withdrawals'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; diff --git a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx index 39b13bcee5..03fd08524c 100644 --- a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx +++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx @@ -1,10 +1,10 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; import dayjs from 'lib/date/dayjs'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx index 2510cdf485..493ff83939 100644 --- a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx +++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx @@ -1,10 +1,11 @@ -import { Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Td, Tr } from '@chakra-ui/react'; import React from 'react'; import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; import dayjs from 'lib/date/dayjs'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx index a9b6508f5b..d3f5967298 100644 --- a/ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx +++ b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx @@ -1,10 +1,11 @@ -import { Skeleton, chakra } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import React from 'react'; import type { ScrollL2MessageItem } from 'types/api/scrollL2'; import config from 'configs/app'; import getCurrencyValue from 'lib/getCurrencyValue'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx index c70a3c3857..1d5ea66c7a 100644 --- a/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx +++ b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx @@ -1,10 +1,11 @@ -import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react'; +import { Td, Tr, chakra } from '@chakra-ui/react'; import React from 'react'; import type { ScrollL2MessageItem } from 'types/api/scrollL2'; import config from 'configs/app'; import getCurrencyValue from 'lib/getCurrencyValue'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx index 7ff895f10e..5abee444e4 100644 --- a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx +++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx @@ -1,10 +1,11 @@ -import { Skeleton, chakra } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx index 698d54be1b..c1582ea6dc 100644 --- a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx +++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx @@ -1,10 +1,11 @@ -import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react'; +import { Td, Tr, chakra } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2'; import config from 'configs/app'; +import Skeleton from 'ui/shared/chakra/Skeleton'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';