feat: wp

src/app/_components/BlockList/Grouped/skeleton.tsx

@@ -178,10 +178,9 @@ export function UpdateBarSkeleton() {
 
 export function BlocksPageBlockListSkeleton() {
   return (
-    // TODO: fix this loading state
     <BlocksPageBlockListLayout>
-      {/* <BlocksPageControlsSkeleton horizontal /> */}
-      {/* <UpdateBarSkeleton /> */}
+      <BlocksPageControlsSkeleton horizontal />
+      <UpdateBarSkeleton />
       <BlocksPageBlockListGroupedSkeleton />
     </BlocksPageBlockListLayout>
   );

src/app/_components/BlockList/Ungrouped/skeleton.tsx

@@ -1,3 +1,4 @@
+import StxIcon from '@/ui/icons/StxIcon';
 import { Box, Flex, HStack, Icon, Stack } from '@chakra-ui/react';
 import { Circle } from '@phosphor-icons/react';
 import React from 'react';
@@ -7,7 +8,6 @@ import { Caption } from '../../../../ui/typography';
 import { BlockListGridHeaderRowSkeleton } from '../Grouped/skeleton';
 import { LineAndNode } from '../LineAndNode';
 import { BtcBlockRowLayout, StxBlocksGridLayout } from './BlockListUngrouped';
-import StxIcon from '@/ui/icons/StxIcon';
 
 export function BlockListRowSkeleton({
   minimized,
@@ -19,7 +19,7 @@ export function BlockListRowSkeleton({
   isFirst?: boolean;
 }) {
   const icon = isFirst ? (
-    <Icon h={2.5} w={2.5} fill="white">
+    <Icon h={2.5} w={2.5} color="white">
       <StxIcon />
     </Icon>
   ) : null;

src/app/_components/PageLayout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+// TODO: Use this for all pages, instead of incorporating this into PageWrapper. In PageWrapper, replace the Stack with a <Box mt={10} mb={8}>{children}</Box>
+export const PageLayout = ({ children }: { children: ReactNode }) => {
+  return (
+    <Stack mt={10} mb={8} gap={7}>
+      {children}
+    </Stack>
+  );
+};

src/app/_components/PageWrapper.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { SBTCModal } from '@/common/components/modals/SBTCModal';
 import { Stack } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
@@ -90,8 +89,6 @@ export function PageWrapper({
         <IncidentsStatusBarWithErrorBoundary />
         <CMSStatusBars statusBarContent={statusBarContent} />
       </Stack>
-      {/* <NakamotoModal /> */}
-      <SBTCModal />
       <WrapperWithBg serverThemeCookie={serverThemeCookie}>
         <Stack mx="auto" width="full" maxWidth="breakpoint-xl" p={6} minHeight={'100vh'}>
           <NavBar tokenPrice={tokenPrice} />

src/app/address/[principal]/StxBalance/BalanceItem.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import { Flex, FlexProps, Text } from '@chakra-ui/react';
+import { Flex, FlexProps } from '@chakra-ui/react';
 
 import { useStxPrice } from '../../../../common/queries/useCurrentPrices';
 import {
   formatStacksAmount,
   getLocaleDecimalSeparator,
   getUsdValue,
 } from '../../../../common/utils/utils';
+import { Text } from '../../../../ui/Text';
 import { ExplorerErrorBoundary } from '../../../_components/ErrorBoundary';
 
 function UsdBalanceBase({ balance }: { balance: number }) {

src/app/block/[hash]/PageClient.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { useDisclosure } from '@chakra-ui/react';
-import { Box, Flex, Icon, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Icon, Stack, useDisclosure } from '@chakra-ui/react';
 import { Question, X } from '@phosphor-icons/react';
 import dynamic from 'next/dynamic';
 
@@ -14,6 +13,7 @@ import '../../../common/components/loaders/skeleton-text';
 import { useSuspenseBlockByHeightOrHash } from '../../../common/queries/useBlockByHash';
 import { DialogBackdrop, DialogContent, DialogRoot } from '../../../components/ui/dialog';
 import { SkeletonTxsList } from '../../../features/txs-list/SkeletonTxsList';
+import { Text } from '../../../ui/Text';
 import { PageTitle } from '../../_components/PageTitle';
 import { TowColLayout } from '../../_components/TwoColLayout';
 import { BlockBtcAnchorBlockCard } from './BlockBtcAnchorBlockCard';

src/app/blocks/page.tsx

@@ -5,7 +5,7 @@ import dynamic from 'next/dynamic';
 import BlocksPageSkeleton from './skeleton';
 
 const Page = dynamic(() => import('./PageClient'), {
-  loading: () => <BlocksPageSkeleton />,
+  // loading: () => <BlocksPageSkeleton />, // TODO: fix this loading state
   ssr: true,
 });
 

src/app/btcblock/[hash]/BitcoinAnchorDetails.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex, Icon, Text } from '@chakra-ui/react';
+import { Flex, Icon } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 import { useParamsBlockHash } from '../../../app/block/[hash]/useParamsBlockHash';
@@ -10,6 +10,7 @@ import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useSuspenseBurnBlock } from '../../../common/queries/useBurnBlock';
 import { toRelativeTime, truncateMiddle } from '../../../common/utils/utils';
 import { Link } from '../../../ui/Link';
+import { Text } from '../../../ui/Text';
 import BitcoinIcon from '../../../ui/icons/BitcoinIcon';
 import { ExplorerErrorBoundary } from '../../_components/ErrorBoundary';
 

src/app/sandbox/components/Argument/ListArgumentInput.tsx

@@ -1,11 +1,12 @@
-import { Box, Flex, Icon, Text } from '@chakra-ui/react';
+import { Box, Flex, Icon } from '@chakra-ui/react';
 import { X } from '@phosphor-icons/react';
 import { FieldArray } from 'formik';
 import { FC } from 'react';
 
 import { ClarityAbiTypeList } from '@stacks/transactions';
 
 import { Button } from '../../../../ui/Button';
+import { Text } from '../../../../ui/Text';
 import { ListValueType } from '../../types/values';
 import { getTuple } from '../../utils';
 import { Argument } from './index';

src/app/sandbox/components/ContractCall/AvailableFunctionsView.tsx

@@ -1,4 +1,4 @@
-import { Flex, Grid, Icon, Stack, Text } from '@chakra-ui/react';
+import { Flex, Grid, Icon, Stack } from '@chakra-ui/react';
 import { ArrowRight } from '@phosphor-icons/react';
 import { FC, forwardRef } from 'react';
 
@@ -7,6 +7,7 @@ import { ExplorerLink } from '../../../../common/components/ExplorerLinks';
 import { Section } from '../../../../common/components/Section';
 import { ContractWithParsedAbi } from '../../../../common/types/contract';
 import { showFn } from '../../../../common/utils/sandbox';
+import { Text } from '../../../../ui/Text';
 import FunctionReadOnlyIcon from '../../../../ui/icons/FunctionReadOnly';
 import FunctionXIcon from '../../../../ui/icons/FunctionX';
 

src/app/sandbox/components/ContractCall/DefaultView/SearchContractsForm.tsx

@@ -7,8 +7,9 @@ import { useGlobalContext } from '../../../../../common/context/useGlobalContext
 import { buildUrl } from '../../../../../common/utils/buildUrl';
 import { onPaste, validateStacksAddress } from '../../../../../common/utils/utils';
 import { Button } from '../../../../../components/ui/button';
+import { Text } from '../../../../../ui/Text';
 import { TextLink } from '../../../../../ui/TextLink';
-import { Caption, Text, Title } from '../../../../../ui/typography';
+import { Caption, Title } from '../../../../../ui/typography';
 
 export const SearchContractsForm: FC<{ rootContractAddress: string }> = ({
   rootContractAddress,

src/app/sandbox/components/ContractCall/FunctionView.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Flex, Icon, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Icon, Stack } from '@chakra-ui/react';
 import { Info } from '@phosphor-icons/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { Form, Formik, FormikErrors } from 'formik';
@@ -24,6 +24,7 @@ import { useStacksNetwork } from '../../../../common/hooks/useStacksNetwork';
 import { showFn } from '../../../../common/utils/sandbox';
 import { Switch } from '../../../../components/ui/switch';
 import { Button } from '../../../../ui/Button';
+import { Text } from '../../../../ui/Text';
 import { Tooltip } from '../../../../ui/Tooltip';
 import { ListValueType, NonTupleValueType, TupleValueType, ValueType } from '../../types/values';
 import { encodeOptional, encodeOptionalTuple, encodeTuple, getTuple } from '../../utils';

src/app/sandbox/components/ContractCall/PostConditionForm.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Icon, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Icon, Stack } from '@chakra-ui/react';
 import { CaretDown } from '@phosphor-icons/react';
 import { Field, FormikErrors } from 'formik';
 import { useMemo, useState } from 'react';
@@ -23,6 +23,7 @@ import {
 import { isUint128 } from '../../../../common/utils/number-utils';
 import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../../../../components/ui/menu';
 import { Input } from '../../../../ui/Input';
+import { Text } from '../../../../ui/Text';
 import { Caption } from '../../../../ui/typography';
 import { NonTupleValueType } from '../../types/values';
 import { FormikSetFieldValueFunction, FunctionFormikState } from './FunctionView';

src/app/sandbox/components/TransactionsPanel.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { AccordionItemContent, Box, Flex, HStack, Stack } from '@chakra-ui/react';
-import { Icon } from '@chakra-ui/react';
+import { AccordionItemContent, Box, Flex, HStack, Icon, Stack } from '@chakra-ui/react';
 import { CaretDown } from '@phosphor-icons/react';
 import { useRouter } from 'next/navigation';
 import React, { useMemo } from 'react';
@@ -27,8 +26,9 @@ import { FilterButton } from '../../../features/txsFilterAndSort/FilterButton';
 import { AllTransactionsFilteredMessage } from '../../../features/txsFilterAndSort/TransactionMessages';
 import { useFilterAndSortState } from '../../../features/txsFilterAndSort/useFilterAndSortState';
 import { IconButton } from '../../../ui/IconButton';
+import { Text } from '../../../ui/Text';
 import FunctionXIcon from '../../../ui/icons/FunctionX';
-import { Caption, Text, Title } from '../../../ui/typography';
+import { Caption, Title } from '../../../ui/typography';
 import { ExplorerErrorBoundary } from '../../_components/ErrorBoundary';
 import { useUser } from '../hooks/useUser';
 import { setCodeBody, toggleRightPanel } from '../sandbox-slice';

src/app/sandbox/deploy/LeftSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Button, Flex, Icon, Stack, Text } from '@chakra-ui/react';
+import { Box, Button, Flex, Icon, Stack } from '@chakra-ui/react';
 import { ArrowSquareOut, Toolbox, X } from '@phosphor-icons/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useCallback, useState } from 'react';
@@ -14,6 +14,7 @@ import { useAppDispatch, useAppSelector } from '../../../common/state/hooks';
 import { InputGroup } from '../../../components/ui/input-group';
 import { IconButton } from '../../../ui/IconButton';
 import { Input } from '../../../ui/Input';
+import { Text } from '../../../ui/Text';
 import { TextLink } from '../../../ui/TextLink';
 import { Tooltip } from '../../../ui/Tooltip';
 import { Caption, Title } from '../../../ui/typography';

src/app/sandbox/faucet/PageClient.tsx

@@ -6,8 +6,9 @@ import React from 'react';
 
 import { useFaucet } from '../../../common/queries/useFaucet';
 import { Button } from '../../../ui/Button';
+import { Text } from '../../../ui/Text';
 import StxIcon from '../../../ui/icons/StxIcon';
-import { Text, Title } from '../../../ui/typography';
+import { Title } from '../../../ui/typography';
 import { useUser } from '../hooks/useUser';
 
 function getErrorMessage(error: any) {

src/app/sandbox/layout/RightPanel.tsx

@@ -5,9 +5,10 @@ import { Card } from '../../../common/components/Card';
 import { useAppSelector } from '../../../common/state/hooks';
 import { microToStacksFormatted, truncateMiddle } from '../../../common/utils/utils';
 import { IconButton } from '../../../ui/IconButton';
+import { Text } from '../../../ui/Text';
 import { Tooltip } from '../../../ui/Tooltip';
 import StxIcon from '../../../ui/icons/StxIcon';
-import { Caption, Text } from '../../../ui/typography';
+import { Caption } from '../../../ui/typography';
 import { TransactionsPanel } from '../components/TransactionsPanel';
 import { useUser } from '../hooks/useUser';
 import { selectShowRightPanel } from '../sandbox-slice';

src/app/sandbox/skeleton.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import { Flex } from '@chakra-ui/react';
-
-import { Spinner } from '../../ui/Spinner';
+import { Flex, Spinner } from '@chakra-ui/react';
 
 export default function Skeleton() {
   return (

src/app/sandbox/transfer/PageClient.tsx

@@ -14,7 +14,8 @@ import { useFeeTransfer } from '../../../common/queries/useFeeTransfer';
 import { microToStacks, stacksToMicro, validateStacksAddress } from '../../../common/utils/utils';
 import { Button } from '../../../ui/Button';
 import { Input } from '../../../ui/Input';
-import { Caption, Text, Title } from '../../../ui/typography';
+import { Text } from '../../../ui/Text';
+import { Caption, Title } from '../../../ui/typography';
 import { useUser } from '../hooks/useUser';
 
 const PageClient: NextPage = () => {

src/app/search/PageClient.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { Flex, Text } from '@chakra-ui/react';
-import React from 'react';
+import { Flex } from '@chakra-ui/react';
 
 import { Section } from '../../common/components/Section';
 import { filterToFormattedValueMap, getKeywordByFilter } from '../../common/queries/useSearchQuery';
+import { Text } from '../../ui/Text';
 import { TxSearchResult } from './TxSearchResult';
 import { FilterProps, FiltersWithWrapper } from './filters';
 

src/app/search/TxSearchResult.tsx

@@ -1,5 +1,4 @@
-import { Flex, Text } from '@chakra-ui/react';
-import * as React from 'react';
+import { Flex } from '@chakra-ui/react';
 
 import { Transaction } from '@stacks/stacks-blockchain-api-types';
 
@@ -12,6 +11,7 @@ import { TxListItem } from '../../features/txs-list/ListItem/TxListItem';
 import { ShowValueMenu } from '../../features/txsFilterAndSort/ShowValueMenu';
 import { ConfirmedTxsSortMenu } from '../../features/txsFilterAndSort/SortMenu';
 import { useFilterAndSortState } from '../../features/txsFilterAndSort/useFilterAndSortState';
+import { Text } from '../../ui/Text';
 import { FilterProps } from './filters';
 
 function Header({ txCount }: { txCount: number }) {

src/app/search/filters/Address.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Icon, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Icon, Stack } from '@chakra-ui/react';
 import { ArrowDownRight, ArrowUpRight, CaretDown } from '@phosphor-icons/react';
 import { Field, FieldProps, Form, Formik } from 'formik';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -9,6 +9,7 @@ import { Field as ChakraField } from '../../../components/ui/field';
 import { PopoverContent, PopoverRoot, PopoverTrigger } from '../../../components/ui/popover';
 import { Button } from '../../../ui/Button';
 import { ExpandingTextarea } from '../../../ui/ExpandingTextarea';
+import { Text } from '../../../ui/Text';
 
 interface AddressFilterProps {
   defaultFromAddress?: string;

src/app/search/filters/Date.tsx

@@ -1,11 +1,12 @@
-import { Flex, Icon, Text } from '@chakra-ui/react';
+import { Flex, Icon } from '@chakra-ui/react';
 import { CaretDown } from '@phosphor-icons/react';
 import { ReactNode, useEffect, useState } from 'react';
 
 import { Badge } from '../../../common/components/Badge';
 import { filterToFormattedValueMap } from '../../../common/queries/useSearchQuery';
 import { PopoverContent, PopoverRoot, PopoverTrigger } from '../../../components/ui/popover';
 import { Button } from '../../../ui/Button';
+import { Text } from '../../../ui/Text';
 import { AfterForm } from './After';
 import { BeforeForm } from './Before';
 import { DateRangeForm } from './DateRange';

src/app/search/filters/index.tsx

@@ -1,8 +1,9 @@
-import { Flex, Icon, Stack, Text } from '@chakra-ui/react';
+import { Flex, Icon, Stack } from '@chakra-ui/react';
 import { Backspace, FunnelSimple } from '@phosphor-icons/react';
 import { usePathname, useSearchParams } from 'next/navigation';
 
 import { filterToFormattedValueMap } from '../../../common/queries/useSearchQuery';
+import { Text } from '../../../ui/Text';
 import { TextLink } from '../../../ui/TextLink';
 import { AddressFilter } from './Address';
 import { DateFilter } from './Date';

src/app/signer/[signerKey]/AssociatedAddressesTable.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Stack } from '@chakra-ui/react';
 import { ReactNode, Suspense, useMemo } from 'react';
 
 import {
@@ -8,6 +8,7 @@ import {
 import { CopyButton } from '../../../common/components/CopyButton';
 import { ListFooter } from '../../../common/components/ListFooter';
 import { Section } from '../../../common/components/Section';
+import { Text } from '../../../ui/Text';
 import { ExplorerErrorBoundary } from '../../_components/ErrorBoundary';
 import { useSuspenseCurrentStackingCycle } from '../../_components/Stats/CurrentStackingCycle/useCurrentStackingCycle';
 import { AssociatedAddressesTableSkeleton } from './skeleton';

src/app/signer/[signerKey]/StackingHistoryTable.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { Box, Flex, Table, Text } from '@chakra-ui/react';
+import { Box, Flex, Table } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { ReactNode, Suspense, useCallback, useMemo, useState } from 'react';
 
 import { StackingHistoryInfo, useSignerStackingHistory } from '../../../app/signers/data/UseSigner';
 import { ListFooter } from '../../../common/components/ListFooter';
 import { Section } from '../../../common/components/Section';
+import { Text } from '../../../ui/Text';
 import { ScrollableBox } from '../../_components/BlockList/ScrollableDiv';
 import { ExplorerErrorBoundary } from '../../_components/ErrorBoundary';
 import { useSuspenseCurrentStackingCycle } from '../../_components/Stats/CurrentStackingCycle/useCurrentStackingCycle';

src/app/signers/CurrentCycleCard.tsx

@@ -1,11 +1,11 @@
-import { ClientOnly } from '@chakra-ui/react';
-import { Box, Flex, Stack, Text } from '@chakra-ui/react';
+import { Box, ClientOnly, Flex, Stack } from '@chakra-ui/react';
 import pluralize from 'pluralize';
 import { Suspense, useCallback, useMemo, useState } from 'react';
 import { Cell, Pie, PieChart, Sector, SectorProps } from 'recharts';
 
 import { Card } from '../../common/components/Card';
 import { useColorMode } from '../../components/ui/color-mode';
+import { Text } from '../../ui/Text';
 import { ExplorerErrorBoundary } from '../_components/ErrorBoundary';
 import { useSuspenseCurrentStackingCycle } from '../_components/Stats/CurrentStackingCycle/useCurrentStackingCycle';
 import { SignersStatsSectionSkeleton } from './skeleton';

src/app/signers/NextCycleCard.tsx

@@ -1,8 +1,9 @@
-import { Box, Icon, Text } from '@chakra-ui/react';
+import { Box, Icon } from '@chakra-ui/react';
 import pluralize from 'pluralize';
 import { Suspense } from 'react';
 
 import { Card } from '../../common/components/Card';
+import { Text } from '../../ui/Text';
 import BitcoinIcon from '../../ui/icons/BitcoinIcon';
 import { ExplorerErrorBoundary } from '../_components/ErrorBoundary';
 import { useSuspenseNextStackingCycle } from '../_components/Stats/NextStackingCycle/useNextStackingCycle';