diff --git a/src/app/PageClient.tsx b/src/app/PageClient.tsx
new file mode 100644
index 000000000..74cda4686
--- /dev/null
+++ b/src/app/PageClient.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import * as React from 'react';
+
+import { DEFAULT_BLOCKS_LIST_LIMIT, DEFAULT_LIST_LIMIT_SMALL } from '../common/constants/constants';
+import { useGlobalContext } from '../common/context/useAppContext';
+import { TxListTabs } from '../features/txs-list/tabs/TxListTabs';
+import { Flex } from '../ui/Flex';
+import { Grid } from '../ui/Grid';
+import { useColorMode } from '../ui/hooks/useColorMode';
+import { SkeletonBlockList } from './_components/BlockList/SkeletonBlockList';
+import { PageTitle } from './_components/PageTitle';
+import { Stats } from './_components/Stats/Stats';
+
+const BlocksList = dynamic(() => import('./_components/BlockList').then(mod => mod.BlocksList), {
+ loading: () => ,
+ ssr: false,
+});
+
+export default function Home() {
+ const { activeNetwork } = useGlobalContext();
+ return (
+ <>
+ Stacks Explorer
+ {!activeNetwork.isSubnet && }
+
+
+
+
+
+ );
+}
diff --git a/src/app/_components/Stats/SkeletonStatSection.tsx b/src/app/_components/Stats/SkeletonStatSection.tsx
index 6093d6868..1c76d978a 100644
--- a/src/app/_components/Stats/SkeletonStatSection.tsx
+++ b/src/app/_components/Stats/SkeletonStatSection.tsx
@@ -1,36 +1,34 @@
import * as React from 'react';
import { FC } from 'react';
-import { Box } from '../../../ui/Box';
import { GridProps } from '../../../ui/Grid';
-import { Skeleton } from '../../../ui/Skeleton';
-import { SkeletonText } from '../../../ui/SkeletonText';
+import { SkeletonItem } from '../../../ui/SkeletonItem';
import { Text } from '../../../ui/Text';
import { StatSection } from './StatSection';
export const SkeletonStatSection: FC = props => (
+
-
-
+
}
bodyMainText={
-
+
-
-
+
}
bodySecondaryText={null}
caption={
-
+
-
-
+
}
borderColor={'border'}
{...props}
diff --git a/src/app/address/[principal]/PageClient.tsx b/src/app/address/[principal]/PageClient.tsx
new file mode 100644
index 000000000..299d23504
--- /dev/null
+++ b/src/app/address/[principal]/PageClient.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import * as React from 'react';
+
+import { UnlockingScheduleModal } from '../../../common/components/modals/unlocking-schedule';
+import { useSuspenseAccountBalance } from '../../../common/queries/useAccountBalance';
+import { useAddressNonces } from '../../../common/queries/useAddressNonces';
+import { hasTokenBalance } from '../../../common/utils/accounts';
+import { AddressTxListTabs } from '../../../features/txs-list/tabs/AddressTxListTabs';
+import { Stack } from '../../../ui/components';
+import { PageTitle } from '../../_components/PageTitle';
+import { AddressSummary } from './AddressSummary';
+import { StxBalance } from './StxBalance';
+import { TokenBalanceCard } from './TokenBalanceCard';
+import { Wrapper } from './Wrapper';
+
+export default function AddressPage({ params: { principal } }: any) {
+ const { data: balance } = useSuspenseAccountBalance(principal, { refetchOnWindowFocus: true });
+ const { data: nonces } = useAddressNonces({ address: principal });
+
+ const hasTokenBalances = hasTokenBalance(balance);
+
+ return (
+ <>
+ Address details
+
+
+
+
+
+ {balance && (
+
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/src/app/address/[principal]/page.tsx b/src/app/address/[principal]/page.tsx
index c6b44e297..8b04d8ac6 100644
--- a/src/app/address/[principal]/page.tsx
+++ b/src/app/address/[principal]/page.tsx
@@ -1,47 +1,13 @@
'use client';
+import dynamic from 'next/dynamic';
import * as React from 'react';
-import { UnlockingScheduleModal } from '../../../common/components/modals/unlocking-schedule';
-import { useSuspenseAccountBalance } from '../../../common/queries/useAccountBalance';
-import { useAddressNonces } from '../../../common/queries/useAddressNonces';
-import { hasTokenBalance } from '../../../common/utils/accounts';
-import { AddressTxListTabs } from '../../../features/txs-list/tabs/AddressTxListTabs';
-import { Flex, Stack } from '../../../ui/components';
-import { PageTitle } from '../../_components/PageTitle';
-import { AddressSummary } from './AddressSummary';
-import { StxBalance } from './StxBalance';
-import { TokenBalanceCard } from './TokenBalanceCard';
-import { Wrapper } from './Wrapper';
-import Loading from './loading';
+import Skeleton from './skeleton';
-export default function AddressPage({ params: { principal } }: any) {
- const { data: balance } = useSuspenseAccountBalance(principal, { refetchOnWindowFocus: true });
- const { data: nonces } = useAddressNonces({ address: principal });
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
+ ssr: false,
+});
- const hasTokenBalances = hasTokenBalance(balance);
-
- return (
- <>
- Address details
-
-
-
-
-
- {balance && (
-
-
-
-
- )}
-
-
-
- );
-}
+export default Page;
diff --git a/src/app/address/[principal]/loading.tsx b/src/app/address/[principal]/skeleton.tsx
similarity index 81%
rename from src/app/address/[principal]/loading.tsx
rename to src/app/address/[principal]/skeleton.tsx
index 791375f5e..a9a64ddb1 100644
--- a/src/app/address/[principal]/loading.tsx
+++ b/src/app/address/[principal]/skeleton.tsx
@@ -1,5 +1,5 @@
import { SkeletonPageWithTagsAndTwoColumns } from '../../../common/components/loaders/skeleton-transaction';
-export default function Loading() {
+export default function Skeleton() {
return ;
}
diff --git a/src/app/block/[hash]/PageClient.tsx b/src/app/block/[hash]/PageClient.tsx
new file mode 100644
index 000000000..6ded3bf2a
--- /dev/null
+++ b/src/app/block/[hash]/PageClient.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import * as React from 'react';
+
+import { BtcStxBlockLinks } from '../../../common/components/BtcStxBlockLinks';
+import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
+import { Section } from '../../../common/components/Section';
+import { Timestamp } from '../../../common/components/Timestamp';
+import { TwoColumnPage } from '../../../common/components/TwoColumnPage';
+import { Value } from '../../../common/components/Value';
+import '../../../common/components/loaders/skeleton-text';
+import { useSuspenseBlockByHash } from '../../../common/queries/useBlockByHash';
+import { SkeletonTxsList } from '../../../features/txs-list/SkeletonTxsList';
+import { Box, Flex, Grid } from '../../../ui/components';
+import { PageTitle } from '../../_components/PageTitle';
+import { TowColLayout } from '../../_components/TwoColLayout';
+import { BlockBtcAnchorBlockCard } from './BlockBtcAnchorBlockCard';
+
+const BlockTxsList = dynamic(
+ () => import('./tx-lists/BlockTxsList').then(mod => mod.BlockTxsList),
+ {
+ loading: () => (
+
+ ),
+ ssr: false,
+ }
+);
+
+export default function BlockPage({ params: { hash } }: any) {
+ const { data: block } = useSuspenseBlockByHash(hash, { refetchOnWindowFocus: true });
+ const title = (block && `Block #${block.height.toLocaleString()}`) || '';
+ return (
+ <>
+ {title}
+
+
+ {hash}} copyValue={hash} />
+ {block && (
+ <>
+
+ }
+ />
+ }
+ />
+ {block.txs.length}}
+ />
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/src/app/block/[hash]/loading.tsx b/src/app/block/[hash]/loading.tsx
deleted file mode 100644
index 56578fd09..000000000
--- a/src/app/block/[hash]/loading.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-
-import { SkeletonPageWithTwoColumns } from '../../../common/components/loaders/skeleton-transaction';
-
-export default function Loading() {
- return ;
-}
diff --git a/src/app/block/[hash]/page.tsx b/src/app/block/[hash]/page.tsx
index 6ded3bf2a..8b04d8ac6 100644
--- a/src/app/block/[hash]/page.tsx
+++ b/src/app/block/[hash]/page.tsx
@@ -3,67 +3,11 @@
import dynamic from 'next/dynamic';
import * as React from 'react';
-import { BtcStxBlockLinks } from '../../../common/components/BtcStxBlockLinks';
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { Section } from '../../../common/components/Section';
-import { Timestamp } from '../../../common/components/Timestamp';
-import { TwoColumnPage } from '../../../common/components/TwoColumnPage';
-import { Value } from '../../../common/components/Value';
-import '../../../common/components/loaders/skeleton-text';
-import { useSuspenseBlockByHash } from '../../../common/queries/useBlockByHash';
-import { SkeletonTxsList } from '../../../features/txs-list/SkeletonTxsList';
-import { Box, Flex, Grid } from '../../../ui/components';
-import { PageTitle } from '../../_components/PageTitle';
-import { TowColLayout } from '../../_components/TwoColLayout';
-import { BlockBtcAnchorBlockCard } from './BlockBtcAnchorBlockCard';
+import Skeleton from './skeleton';
-const BlockTxsList = dynamic(
- () => import('./tx-lists/BlockTxsList').then(mod => mod.BlockTxsList),
- {
- loading: () => (
-
- ),
- ssr: false,
- }
-);
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
+ ssr: false,
+});
-export default function BlockPage({ params: { hash } }: any) {
- const { data: block } = useSuspenseBlockByHash(hash, { refetchOnWindowFocus: true });
- const title = (block && `Block #${block.height.toLocaleString()}`) || '';
- return (
- <>
- {title}
-
-
- {hash}} copyValue={hash} />
- {block && (
- <>
-
- }
- />
- }
- />
- {block.txs.length}}
- />
-
- )}
-
-
-
-
-
- );
-}
+export default Page;
diff --git a/src/app/block/[hash]/skeleton.tsx b/src/app/block/[hash]/skeleton.tsx
new file mode 100644
index 000000000..86fd993f2
--- /dev/null
+++ b/src/app/block/[hash]/skeleton.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import { SkeletonPageWithTagsAndTwoColumns } from '../../../common/components/loaders/skeleton-transaction';
+
+export default function Skeleton() {
+ return ;
+}
diff --git a/src/app/blocks/PageClient.tsx b/src/app/blocks/PageClient.tsx
new file mode 100644
index 000000000..51b96d6ba
--- /dev/null
+++ b/src/app/blocks/PageClient.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import * as React from 'react';
+
+import { SkeletonBlockList } from '../../common/components/loaders/skeleton-text';
+import { PageTitle } from '../_components/PageTitle';
+
+const BlocksList = dynamic(() => import('../_components/BlockList').then(mod => mod.BlocksList), {
+ loading: () => ,
+ ssr: false,
+});
+
+const BlocksPage: NextPage = () => {
+ return (
+ <>
+ Blocks
+
+
+ );
+};
+
+export default BlocksPage;
diff --git a/src/app/blocks/page.tsx b/src/app/blocks/page.tsx
index c28232b81..8b04d8ac6 100644
--- a/src/app/blocks/page.tsx
+++ b/src/app/blocks/page.tsx
@@ -1,26 +1,13 @@
'use client';
-import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import * as React from 'react';
-import { SkeletonBlockList } from '../../common/components/loaders/skeleton-text';
-import { Flex } from '../../ui/components';
-import { PageTitle } from '../_components/PageTitle';
-import Loading from './loading';
+import Skeleton from './skeleton';
-const BlocksList = dynamic(() => import('../_components/BlockList').then(mod => mod.BlocksList), {
- loading: () => ,
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
ssr: false,
});
-const BlocksPage: NextPage = () => {
- return (
- <>
- Blocks
-
-
- );
-};
-
-export default BlocksPage;
+export default Page;
diff --git a/src/app/blocks/loading.tsx b/src/app/blocks/skeleton.tsx
similarity index 61%
rename from src/app/blocks/loading.tsx
rename to src/app/blocks/skeleton.tsx
index cdec5c592..5c165b7d7 100644
--- a/src/app/blocks/loading.tsx
+++ b/src/app/blocks/skeleton.tsx
@@ -3,15 +3,14 @@
import React from 'react';
import { SkeletonBlockList } from '../../common/components/loaders/skeleton-text';
-import { Flex } from '../../ui/Flex';
-import { Skeleton } from '../../ui/Skeleton';
+import { SkeletonItem as SkeletonElement } from '../../ui/SkeletonItem';
import { PageTitle } from '../_components/PageTitle';
-export default function Loading() {
+export default function Skeleton() {
return (
<>
-
+
diff --git a/src/app/microblock/[hash]/PageClient.tsx b/src/app/microblock/[hash]/PageClient.tsx
new file mode 100644
index 000000000..766afa794
--- /dev/null
+++ b/src/app/microblock/[hash]/PageClient.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import * as React from 'react';
+import { AiOutlineClockCircle } from 'react-icons/ai';
+
+import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
+import { Section } from '../../../common/components/Section';
+import { Value } from '../../../common/components/Value';
+import { useSuspenseBlockByHash } from '../../../common/queries/useBlockByHash';
+import { useSuspenseMicroblockByHash } from '../../../common/queries/useMicroblockByHash';
+import { toRelativeTime, truncateMiddle } from '../../../common/utils/utils';
+import { SkeletonTxsList } from '../../../features/txs-list/SkeletonTxsList';
+import { Box } from '../../../ui/Box';
+import { Flex } from '../../../ui/Flex';
+import { Grid } from '../../../ui/Grid';
+import { Icon } from '../../../ui/Icon';
+import { Stack } from '../../../ui/Stack';
+import { Tooltip } from '../../../ui/Tooltip';
+import { PageTitle } from '../../_components/PageTitle';
+import { MicroblockTxsList } from './tx-lists/MicroblockTxsList';
+
+export default function MicroblockSinglePage({ params: { hash } }: any) {
+ const queryOptions = {
+ refetchOnWindowFocus: true,
+ retry: 0,
+ };
+
+ const { data: microblock } = useSuspenseMicroblockByHash(hash, queryOptions);
+
+ const { data: block } = useSuspenseBlockByHash(microblock?.block_hash, {
+ ...queryOptions,
+ });
+
+ if (!microblock || !block) return null;
+
+ const title = `Microblock ${truncateMiddle(microblock.microblock_hash)}`;
+
+ const readableTs = `${new Date(block.burn_block_time * 1000).toLocaleTimeString()} ${new Date(
+ block.burn_block_time * 1000
+ ).toLocaleDateString()}`;
+
+ return (
+ <>
+ {title}
+
+
+
+
+ {hash}} copyValue={hash} />
+ {microblock.block_height}}
+ copyValue={microblock.block_height.toString()}
+ />
+
+
+
+
+ {toRelativeTime(block.burn_block_time * 1000)}
+
+
+
+ }
+ copyValue={readableTs}
+ />
+ {block.hash}}
+ copyValue={block.hash}
+ />
+ {microblock.txs.length}}
+ />
+
+
+
+ {microblock.txs?.length ? (
+
+ ) : (
+
+ )}
+
+
+ );
+}
diff --git a/src/app/microblock/[hash]/page.tsx b/src/app/microblock/[hash]/page.tsx
index 766afa794..e76a7aaef 100644
--- a/src/app/microblock/[hash]/page.tsx
+++ b/src/app/microblock/[hash]/page.tsx
@@ -1,99 +1,10 @@
'use client';
-import * as React from 'react';
-import { AiOutlineClockCircle } from 'react-icons/ai';
+import dynamic from 'next/dynamic';
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { Section } from '../../../common/components/Section';
-import { Value } from '../../../common/components/Value';
-import { useSuspenseBlockByHash } from '../../../common/queries/useBlockByHash';
-import { useSuspenseMicroblockByHash } from '../../../common/queries/useMicroblockByHash';
-import { toRelativeTime, truncateMiddle } from '../../../common/utils/utils';
-import { SkeletonTxsList } from '../../../features/txs-list/SkeletonTxsList';
-import { Box } from '../../../ui/Box';
-import { Flex } from '../../../ui/Flex';
-import { Grid } from '../../../ui/Grid';
-import { Icon } from '../../../ui/Icon';
-import { Stack } from '../../../ui/Stack';
-import { Tooltip } from '../../../ui/Tooltip';
-import { PageTitle } from '../../_components/PageTitle';
-import { MicroblockTxsList } from './tx-lists/MicroblockTxsList';
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => null,
+ ssr: false,
+});
-export default function MicroblockSinglePage({ params: { hash } }: any) {
- const queryOptions = {
- refetchOnWindowFocus: true,
- retry: 0,
- };
-
- const { data: microblock } = useSuspenseMicroblockByHash(hash, queryOptions);
-
- const { data: block } = useSuspenseBlockByHash(microblock?.block_hash, {
- ...queryOptions,
- });
-
- if (!microblock || !block) return null;
-
- const title = `Microblock ${truncateMiddle(microblock.microblock_hash)}`;
-
- const readableTs = `${new Date(block.burn_block_time * 1000).toLocaleTimeString()} ${new Date(
- block.burn_block_time * 1000
- ).toLocaleDateString()}`;
-
- return (
- <>
- {title}
-
-
-
-
- {hash}} copyValue={hash} />
- {microblock.block_height}}
- copyValue={microblock.block_height.toString()}
- />
-
-
-
-
- {toRelativeTime(block.burn_block_time * 1000)}
-
-
-
- }
- copyValue={readableTs}
- />
- {block.hash}}
- copyValue={block.hash}
- />
- {microblock.txs.length}}
- />
-
-
-
- {microblock.txs?.length ? (
-
- ) : (
-
- )}
-
-
- );
-}
+export default Page;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 74cda4686..8b04d8ac6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,35 +3,11 @@
import dynamic from 'next/dynamic';
import * as React from 'react';
-import { DEFAULT_BLOCKS_LIST_LIMIT, DEFAULT_LIST_LIMIT_SMALL } from '../common/constants/constants';
-import { useGlobalContext } from '../common/context/useAppContext';
-import { TxListTabs } from '../features/txs-list/tabs/TxListTabs';
-import { Flex } from '../ui/Flex';
-import { Grid } from '../ui/Grid';
-import { useColorMode } from '../ui/hooks/useColorMode';
-import { SkeletonBlockList } from './_components/BlockList/SkeletonBlockList';
-import { PageTitle } from './_components/PageTitle';
-import { Stats } from './_components/Stats/Stats';
+import Skeleton from './skeleton';
-const BlocksList = dynamic(() => import('./_components/BlockList').then(mod => mod.BlocksList), {
- loading: () => ,
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
ssr: false,
});
-export default function Home() {
- const { activeNetwork } = useGlobalContext();
- return (
- <>
- Stacks Explorer
- {!activeNetwork.isSubnet && }
-
-
-
-
-
- );
-}
+export default Page;
diff --git a/src/app/sandbox/contract-call/[[...params]]/PageClient.tsx b/src/app/sandbox/contract-call/[[...params]]/PageClient.tsx
new file mode 100644
index 000000000..17a6e80f7
--- /dev/null
+++ b/src/app/sandbox/contract-call/[[...params]]/PageClient.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { useContractById } from '../../../../common/queries/useContractById';
+import { useSuspensePoxInfo } from '../../../../common/queries/usePoxInfo';
+import { DefaultView } from '../../components/ContractCall/DefaultView';
+import { SelectedContractView } from '../../components/ContractCall/SelectedContractView';
+
+export default function ContractCall({ params: { params } }: { params: { params: string[] } }) {
+ const contractId = params?.[0] || undefined;
+ const functionName = params?.[1] || undefined;
+ const { data: poxInfo } = useSuspensePoxInfo();
+ const { data: contract } = useContractById(contractId);
+
+ const rootContractAddress = poxInfo?.contract_id?.split('.')?.[0];
+
+ if (!rootContractAddress) return null;
+
+ if (!!contractId && !!contract) {
+ return (
+
+ );
+ }
+
+ return ;
+}
diff --git a/src/app/sandbox/contract-call/[[...params]]/page.tsx b/src/app/sandbox/contract-call/[[...params]]/page.tsx
index 17a6e80f7..21f2f845b 100644
--- a/src/app/sandbox/contract-call/[[...params]]/page.tsx
+++ b/src/app/sandbox/contract-call/[[...params]]/page.tsx
@@ -1,29 +1,13 @@
'use client';
-import { useContractById } from '../../../../common/queries/useContractById';
-import { useSuspensePoxInfo } from '../../../../common/queries/usePoxInfo';
-import { DefaultView } from '../../components/ContractCall/DefaultView';
-import { SelectedContractView } from '../../components/ContractCall/SelectedContractView';
+import dynamic from 'next/dynamic';
+import * as React from 'react';
-export default function ContractCall({ params: { params } }: { params: { params: string[] } }) {
- const contractId = params?.[0] || undefined;
- const functionName = params?.[1] || undefined;
- const { data: poxInfo } = useSuspensePoxInfo();
- const { data: contract } = useContractById(contractId);
+import Skeleton from '../../skeleton';
- const rootContractAddress = poxInfo?.contract_id?.split('.')?.[0];
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
+ ssr: false,
+});
- if (!rootContractAddress) return null;
-
- if (!!contractId && !!contract) {
- return (
-
- );
- }
-
- return ;
-}
+export default Page;
diff --git a/src/app/sandbox/deploy/PageClient.tsx b/src/app/sandbox/deploy/PageClient.tsx
new file mode 100644
index 000000000..445e2a268
--- /dev/null
+++ b/src/app/sandbox/deploy/PageClient.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { Flex } from '../../../ui/Flex';
+import { Grid } from '../../../ui/Grid';
+import { LeftSection } from './LeftSection';
+import { RightSection } from './RightSection';
+
+export default function Deploy() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/sandbox/deploy/page.tsx b/src/app/sandbox/deploy/page.tsx
index 445e2a268..23687c218 100644
--- a/src/app/sandbox/deploy/page.tsx
+++ b/src/app/sandbox/deploy/page.tsx
@@ -1,19 +1,13 @@
'use client';
-import { Flex } from '../../../ui/Flex';
-import { Grid } from '../../../ui/Grid';
-import { LeftSection } from './LeftSection';
-import { RightSection } from './RightSection';
+import dynamic from 'next/dynamic';
+import * as React from 'react';
-export default function Deploy() {
- return (
-
-
-
-
-
-
-
-
- );
-}
+import Skeleton from '../skeleton';
+
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
+ ssr: false,
+});
+
+export default Page;
diff --git a/src/app/sandbox/faucet/PageClient.tsx b/src/app/sandbox/faucet/PageClient.tsx
new file mode 100644
index 000000000..830e09d4f
--- /dev/null
+++ b/src/app/sandbox/faucet/PageClient.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import { NextPage } from 'next';
+import React from 'react';
+
+import { Badge } from '../../../common/components/Badge';
+import { DropIcon } from '../../../common/components/icons/drop';
+import { useFaucet } from '../../../common/queries/useFaucet';
+import { Box } from '../../../ui/Box';
+import { Button } from '../../../ui/Button';
+import { Flex } from '../../../ui/Flex';
+import { Grid } from '../../../ui/Grid';
+import { HStack } from '../../../ui/HStack';
+import { Icon } from '../../../ui/Icon';
+import { Stack } from '../../../ui/Stack';
+import { StxIcon } from '../../../ui/icons';
+import { Text, Title } from '../../../ui/typography';
+import { useUser } from '../hooks/useUser';
+
+function getErrorMessage(error: any) {
+ if (!error) return '';
+ const defaultErrorMessage = 'Something went wrong, please try again later.';
+ if (!!error?.message) {
+ return error.message;
+ }
+ if (!!error?.status) {
+ switch (error.status) {
+ case 429:
+ return 'Too many requests, please try again later.';
+ default:
+ return defaultErrorMessage;
+ }
+ } else {
+ return defaultErrorMessage;
+ }
+}
+
+const Faucet: NextPage = () => {
+ const { stxAddress } = useUser();
+ const [stackingIndex, setIndex] = React.useState(0);
+ const { mutate: runFaucetStx, error, isSuccess } = useFaucet();
+ const errorMessage = getErrorMessage(error);
+ const handleStackingRequest = () => {
+ if (stackingIndex <= 3) {
+ setIndex(i => ++i);
+ if (stackingIndex === 3 && !!stxAddress) {
+ void runFaucetStx({ address: stxAddress, staking: true });
+ }
+ }
+ };
+ const getStackingLabel = () => {
+ switch (stackingIndex) {
+ case 4:
+ return 'Okay, STX requested!';
+ case 3:
+ return 'To confirm, you actually want to do this?';
+ case 2:
+ return 'You can only do this once a day.';
+ case 1:
+ return 'Are you sure?';
+ default:
+ return 'I want to stack';
+ }
+ };
+ return (
+
+
+ STX Faucet
+ Need STX to test the network? The faucet can top you up!
+ {!!errorMessage ? {errorMessage} : null}
+ {isSuccess ? (
+
+ 💰
+ STX coming your way shortly!
+ 💰
+
+ ) : null}
+
+
+
+
+
+ );
+};
+
+export default Faucet;
diff --git a/src/app/sandbox/faucet/page.tsx b/src/app/sandbox/faucet/page.tsx
index 830e09d4f..23687c218 100644
--- a/src/app/sandbox/faucet/page.tsx
+++ b/src/app/sandbox/faucet/page.tsx
@@ -1,99 +1,13 @@
'use client';
-import { NextPage } from 'next';
-import React from 'react';
+import dynamic from 'next/dynamic';
+import * as React from 'react';
-import { Badge } from '../../../common/components/Badge';
-import { DropIcon } from '../../../common/components/icons/drop';
-import { useFaucet } from '../../../common/queries/useFaucet';
-import { Box } from '../../../ui/Box';
-import { Button } from '../../../ui/Button';
-import { Flex } from '../../../ui/Flex';
-import { Grid } from '../../../ui/Grid';
-import { HStack } from '../../../ui/HStack';
-import { Icon } from '../../../ui/Icon';
-import { Stack } from '../../../ui/Stack';
-import { StxIcon } from '../../../ui/icons';
-import { Text, Title } from '../../../ui/typography';
-import { useUser } from '../hooks/useUser';
+import Skeleton from '../skeleton';
-function getErrorMessage(error: any) {
- if (!error) return '';
- const defaultErrorMessage = 'Something went wrong, please try again later.';
- if (!!error?.message) {
- return error.message;
- }
- if (!!error?.status) {
- switch (error.status) {
- case 429:
- return 'Too many requests, please try again later.';
- default:
- return defaultErrorMessage;
- }
- } else {
- return defaultErrorMessage;
- }
-}
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
+ ssr: false,
+});
-const Faucet: NextPage = () => {
- const { stxAddress } = useUser();
- const [stackingIndex, setIndex] = React.useState(0);
- const { mutate: runFaucetStx, error, isSuccess } = useFaucet();
- const errorMessage = getErrorMessage(error);
- const handleStackingRequest = () => {
- if (stackingIndex <= 3) {
- setIndex(i => ++i);
- if (stackingIndex === 3 && !!stxAddress) {
- void runFaucetStx({ address: stxAddress, staking: true });
- }
- }
- };
- const getStackingLabel = () => {
- switch (stackingIndex) {
- case 4:
- return 'Okay, STX requested!';
- case 3:
- return 'To confirm, you actually want to do this?';
- case 2:
- return 'You can only do this once a day.';
- case 1:
- return 'Are you sure?';
- default:
- return 'I want to stack';
- }
- };
- return (
-
-
- STX Faucet
- Need STX to test the network? The faucet can top you up!
- {!!errorMessage ? {errorMessage} : null}
- {isSuccess ? (
-
- 💰
- STX coming your way shortly!
- 💰
-
- ) : null}
-
-
-
-
-
- );
-};
-
-export default Faucet;
+export default Page;
diff --git a/src/app/sandbox/loading.tsx b/src/app/sandbox/skeleton.tsx
similarity index 89%
rename from src/app/sandbox/loading.tsx
rename to src/app/sandbox/skeleton.tsx
index 302ad4a9d..c5a6886f6 100644
--- a/src/app/sandbox/loading.tsx
+++ b/src/app/sandbox/skeleton.tsx
@@ -6,7 +6,7 @@ import { Flex } from '../../ui/Flex';
import { SkeletonText } from '../../ui/SkeletonText';
import { Spinner } from '../../ui/Spinner';
-export default function Loading() {
+export default function Skeleton() {
return (
diff --git a/src/app/sandbox/transfer/PageClient.tsx b/src/app/sandbox/transfer/PageClient.tsx
new file mode 100644
index 000000000..9e059e404
--- /dev/null
+++ b/src/app/sandbox/transfer/PageClient.tsx
@@ -0,0 +1,162 @@
+'use client';
+
+import { useColorMode } from '@chakra-ui/react';
+import { BigNumber } from 'bignumber.js';
+import { Form, Formik } from 'formik';
+import { NextPage } from 'next';
+import React from 'react';
+
+import { openSTXTransfer } from '@stacks/connect';
+
+import { Badge } from '../../../common/components/Badge';
+import { CONNECT_AUTH_ORIGIN } from '../../../common/constants/env';
+import { useStacksNetwork } from '../../../common/hooks/useStacksNetwork';
+import { useFeeTransfer } from '../../../common/queries/useFeeTransfer';
+import { microToStacks, stacksToMicro, validateStacksAddress } from '../../../common/utils/utils';
+import { Box } from '../../../ui/Box';
+import { Button } from '../../../ui/Button';
+import { Flex } from '../../../ui/Flex';
+import { Grid } from '../../../ui/Grid';
+import { Input } from '../../../ui/Input';
+import { Stack } from '../../../ui/Stack';
+import { Caption, Text, Title } from '../../../ui/typography';
+import { useUser } from '../hooks/useUser';
+
+const PageClient: NextPage = () => {
+ const { data: feeData } = useFeeTransfer();
+ const network = useStacksNetwork();
+ const { isConnected, balance, stxAddress } = useUser();
+ const fee = feeData ? new BigNumber(feeData as any).multipliedBy(180) : 0;
+ const colorMode = useColorMode().colorMode;
+
+ return (
+ {
+ const _errors: any = {};
+ const validPrincipal = validateStacksAddress(values.recipient);
+ if (!validPrincipal) {
+ _errors.recipient = 'Invalid Stacks address.';
+ } else if (values.recipient === stxAddress) {
+ _errors.recipient = 'You cannot send yourself STX ;)';
+ }
+
+ if (!values.amount) {
+ _errors.amount = 'You need to specify an amount to send.';
+ }
+ if (Number(balance?.stx?.balance || '0') < (values.amount || 0)) {
+ _errors.amount = "Sorry, you don't have enough STX to make this transfer.";
+ }
+ return _errors;
+ }}
+ onSubmit={({ recipient, amount, memo }) => {
+ void openSTXTransfer({
+ network,
+ recipient,
+ amount: stacksToMicro(amount || 0).toString(),
+ memo,
+ authOrigin: CONNECT_AUTH_ORIGIN,
+ });
+ }}
+ render={({ handleChange, handleBlur, values, errors, setFieldValue }) => (
+
+
+
+
+
+ )}
+ />
+ );
+};
+
+export default PageClient;
diff --git a/src/app/sandbox/transfer/page.tsx b/src/app/sandbox/transfer/page.tsx
index 7b1a8e658..23687c218 100644
--- a/src/app/sandbox/transfer/page.tsx
+++ b/src/app/sandbox/transfer/page.tsx
@@ -1,162 +1,13 @@
'use client';
-import { useColorMode } from '@chakra-ui/react';
-import { BigNumber } from 'bignumber.js';
-import { Form, Formik } from 'formik';
-import { NextPage } from 'next';
-import React from 'react';
+import dynamic from 'next/dynamic';
+import * as React from 'react';
-import { openSTXTransfer } from '@stacks/connect';
+import Skeleton from '../skeleton';
-import { Badge } from '../../../common/components/Badge';
-import { CONNECT_AUTH_ORIGIN } from '../../../common/constants/env';
-import { useStacksNetwork } from '../../../common/hooks/useStacksNetwork';
-import { useFeeTransfer } from '../../../common/queries/useFeeTransfer';
-import { microToStacks, stacksToMicro, validateStacksAddress } from '../../../common/utils/utils';
-import { Box } from '../../../ui/Box';
-import { Button } from '../../../ui/Button';
-import { Flex } from '../../../ui/Flex';
-import { Grid } from '../../../ui/Grid';
-import { Input } from '../../../ui/Input';
-import { Stack } from '../../../ui/Stack';
-import { Caption, Text, Title } from '../../../ui/typography';
-import { useUser } from '../hooks/useUser';
-
-const Page: NextPage = () => {
- const { data: feeData } = useFeeTransfer();
- const network = useStacksNetwork();
- const { isConnected, balance, stxAddress } = useUser();
- const fee = feeData ? new BigNumber(feeData as any).multipliedBy(180) : 0;
- const colorMode = useColorMode().colorMode;
-
- return (
- {
- const _errors: any = {};
- const validPrincipal = validateStacksAddress(values.recipient);
- if (!validPrincipal) {
- _errors.recipient = 'Invalid Stacks address.';
- } else if (values.recipient === stxAddress) {
- _errors.recipient = 'You cannot send yourself STX ;)';
- }
-
- if (!values.amount) {
- _errors.amount = 'You need to specify an amount to send.';
- }
- if (Number(balance?.stx?.balance || '0') < (values.amount || 0)) {
- _errors.amount = "Sorry, you don't have enough STX to make this transfer.";
- }
- return _errors;
- }}
- onSubmit={({ recipient, amount, memo }) => {
- void openSTXTransfer({
- network,
- recipient,
- amount: stacksToMicro(amount || 0).toString(),
- memo,
- authOrigin: CONNECT_AUTH_ORIGIN,
- });
- }}
- render={({ handleChange, handleBlur, values, errors, setFieldValue }) => (
-
-
-
-
-
- )}
- />
- );
-};
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
+ ssr: false,
+});
export default Page;
diff --git a/src/app/skeleton.tsx b/src/app/skeleton.tsx
new file mode 100644
index 000000000..48f96c935
--- /dev/null
+++ b/src/app/skeleton.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+
+import { Section } from '../common/components/Section';
+import { SkeletonTxsList } from '../features/txs-list/SkeletonTxsList';
+import { Grid } from '../ui/Grid';
+import { SkeletonBlockList } from './_components/BlockList/SkeletonBlockList';
+import { PageTitle } from './_components/PageTitle';
+import { SkeletonStatSection } from './_components/Stats/SkeletonStatSection';
+import { Wrapper } from './_components/Stats/Wrapper';
+
+export default function Skeleton() {
+ return (
+ <>
+ Stacks Explorer
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/token/[tokenId]/TokenPage.tsx b/src/app/token/[tokenId]/PageClient.tsx
similarity index 91%
rename from src/app/token/[tokenId]/TokenPage.tsx
rename to src/app/token/[tokenId]/PageClient.tsx
index 41e108ecb..d62b4f7d4 100644
--- a/src/app/token/[tokenId]/TokenPage.tsx
+++ b/src/app/token/[tokenId]/PageClient.tsx
@@ -15,10 +15,16 @@ import { PageTitle, PageTitleWithTags } from '../../_components/PageTitle';
import { LinksMenu } from './LinksMenu';
import { Tabs } from './Tabs';
import { TokenInfo } from './TokenInfo';
-import Loading from './loading';
+import Skeleton from './skeleton';
import { TokenInfoProps } from './types';
-export function TokenPage({ tokenId, tokenInfo }: { tokenId: string; tokenInfo: TokenInfoProps }) {
+export default function PageClient({
+ tokenId,
+ tokenInfo,
+}: {
+ tokenId: string;
+ tokenInfo: TokenInfoProps;
+}) {
if (!tokenInfo.basic) throw new Error('Could not find token info');
const { name, symbol } = tokenInfo.basic;
diff --git a/src/app/token/[tokenId]/page.tsx b/src/app/token/[tokenId]/page.tsx
index 96c45d708..ab3466d91 100644
--- a/src/app/token/[tokenId]/page.tsx
+++ b/src/app/token/[tokenId]/page.tsx
@@ -1,7 +1,15 @@
-import { TokenPage } from './TokenPage';
+import dynamic from 'next/dynamic';
+import * as React from 'react';
+
+import Skeleton from '../../sandbox/skeleton';
import { getTokenInfo } from './getTokenInfo';
-export default async function Page({
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
+ ssr: false,
+});
+
+export default async function ({
params: { tokenId },
searchParams: { chain, api },
}: {
@@ -9,5 +17,5 @@ export default async function Page({
searchParams: { chain: string; api: string };
}) {
const tokenInfo = await getTokenInfo(tokenId, chain, api);
- return ;
+ return ;
}
diff --git a/src/app/token/[tokenId]/loading.tsx b/src/app/token/[tokenId]/skeleton.tsx
similarity index 86%
rename from src/app/token/[tokenId]/loading.tsx
rename to src/app/token/[tokenId]/skeleton.tsx
index cfb15404f..40b02adfa 100644
--- a/src/app/token/[tokenId]/loading.tsx
+++ b/src/app/token/[tokenId]/skeleton.tsx
@@ -4,17 +4,16 @@ import * as React from 'react';
import { TabsContainer } from '../../../common/components/TabsContainer';
import { SkeletonTxsList } from '../../../features/txs-list/SkeletonTxsList';
-import { Flex } from '../../../ui/Flex';
-import { Skeleton } from '../../../ui/Skeleton';
+import { SkeletonItem } from '../../../ui/SkeletonItem';
import { PageTitle } from '../../_components/PageTitle';
import { SkeletonStatSection } from '../../_components/Stats/SkeletonStatSection';
import { Wrapper as StatsWrapper } from '../../_components/Stats/Wrapper';
-export default function Loading() {
+export default function Skeleton() {
return (
<>
-
+
diff --git a/src/app/tokens/PageClient.tsx b/src/app/tokens/PageClient.tsx
new file mode 100644
index 000000000..fda589578
--- /dev/null
+++ b/src/app/tokens/PageClient.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import type { NextPage } from 'next';
+import * as React from 'react';
+
+import { PageTitle } from '../_components/PageTitle';
+import { TokensList } from './TokensList/TokensList';
+
+const TokensPage: NextPage = () => (
+ <>
+ Token Tracker
+
+
+);
+
+export default TokensPage;
diff --git a/src/app/tokens/TokenRow/loading.tsx b/src/app/tokens/TokenRow/loading.tsx
index 2e0473573..06bfb192f 100644
--- a/src/app/tokens/TokenRow/loading.tsx
+++ b/src/app/tokens/TokenRow/loading.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
import { Box } from '../../../ui/Box';
import { Flex } from '../../../ui/Flex';
-import { Skeleton } from '../../../ui/Skeleton';
+import { SkeletonItem } from '../../../ui/SkeletonItem';
import { Td } from '../../../ui/Td';
import { Tr } from '../../../ui/Tr';
@@ -11,20 +11,20 @@ export const Loading: FC = () => {
|
-
+
-
+
|
-
+
|
-
+
|
diff --git a/src/app/tokens/page.tsx b/src/app/tokens/page.tsx
index fda589578..8b04d8ac6 100644
--- a/src/app/tokens/page.tsx
+++ b/src/app/tokens/page.tsx
@@ -1,16 +1,13 @@
'use client';
-import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
import * as React from 'react';
-import { PageTitle } from '../_components/PageTitle';
-import { TokensList } from './TokensList/TokensList';
+import Skeleton from './skeleton';
-const TokensPage: NextPage = () => (
- <>
- Token Tracker
-
-
-);
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
+ ssr: false,
+});
-export default TokensPage;
+export default Page;
diff --git a/src/app/tokens/loading.tsx b/src/app/tokens/skeleton.tsx
similarity index 84%
rename from src/app/tokens/loading.tsx
rename to src/app/tokens/skeleton.tsx
index 9555f35c6..f9184503c 100644
--- a/src/app/tokens/loading.tsx
+++ b/src/app/tokens/skeleton.tsx
@@ -8,17 +8,17 @@ import { Flex } from '../../ui/Flex';
import { Icon } from '../../ui/Icon';
import { InputGroup } from '../../ui/InputGroup';
import { InputRightElement } from '../../ui/InputRightElement';
-import { Skeleton } from '../../ui/Skeleton';
+import { SkeletonItem } from '../../ui/SkeletonItem';
import { useColorMode } from '../../ui/hooks/useColorMode';
import { PageTitle } from '../_components/PageTitle';
import { TokenTableSkeleton } from './TokensList/TokenTableSkeleton';
-export default function Loading() {
+export default function Skeleton() {
const colorMode = useColorMode().colorMode;
return (
-
+
-
+
}
>
diff --git a/src/app/transactions/TransactionPage.tsx b/src/app/transactions/PageClient.tsx
similarity index 100%
rename from src/app/transactions/TransactionPage.tsx
rename to src/app/transactions/PageClient.tsx
diff --git a/src/app/transactions/page.tsx b/src/app/transactions/page.tsx
index 3cb253b6f..2b582307b 100644
--- a/src/app/transactions/page.tsx
+++ b/src/app/transactions/page.tsx
@@ -1,9 +1,15 @@
-import React from 'react';
+import dynamic from 'next/dynamic';
+import * as React from 'react';
import { getTokenPrice } from '../getTokenPriceInfo';
-import TransactionsPage from './TransactionPage';
+import Skeleton from './skeleton';
+
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
+ ssr: false,
+});
export default async function () {
const tokenPrice = await getTokenPrice();
- return ;
+ return ;
}
diff --git a/src/app/transactions/loading.tsx b/src/app/transactions/skeleton.tsx
similarity index 86%
rename from src/app/transactions/loading.tsx
rename to src/app/transactions/skeleton.tsx
index 4e3f635d1..64296c934 100644
--- a/src/app/transactions/loading.tsx
+++ b/src/app/transactions/skeleton.tsx
@@ -4,17 +4,16 @@ import * as React from 'react';
import { TabsContainer } from '../../common/components/TabsContainer';
import { SkeletonTxsList } from '../../features/txs-list/SkeletonTxsList';
-import { Flex } from '../../ui/Flex';
-import { Skeleton } from '../../ui/Skeleton';
+import { SkeletonItem } from '../../ui/SkeletonItem';
import { PageTitle } from '../_components/PageTitle';
import { SkeletonStatSection } from '../_components/Stats/SkeletonStatSection';
import { Wrapper as StatsWrapper } from '../_components/Stats/Wrapper';
-export default function Loading() {
+export default function Skeleton() {
return (
<>
-
+
diff --git a/src/app/txid/[txId]/PageClient.tsx b/src/app/txid/[txId]/PageClient.tsx
new file mode 100644
index 000000000..1699eb609
--- /dev/null
+++ b/src/app/txid/[txId]/PageClient.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from 'react';
+
+import { SmartContract } from './SmartContract/SmartContract';
+import { Tx } from './Tx';
+
+function TransactionPage({ params: { txId } }: { params: { txId: string } }) {
+ const isContractId = txId.includes('.');
+
+ if (isContractId) {
+ return ;
+ }
+
+ return ;
+}
+
+export default TransactionPage;
diff --git a/src/app/txid/[txId]/TxPage.tsx b/src/app/txid/[txId]/TxPage.tsx
index 6477a79c4..342277aed 100644
--- a/src/app/txid/[txId]/TxPage.tsx
+++ b/src/app/txid/[txId]/TxPage.tsx
@@ -25,7 +25,7 @@ import { BlocksVisualizer } from './BlocksVisualizer';
import { TxBtcAnchorBlockCard } from './Cards/TxBtcAnchorBlockCard';
import { Events } from './Events';
import { TxAlerts } from './TxAlerts';
-import Loading from './loading';
+import Skeleton from './skeleton';
const ContractDetailsCard = dynamic(
() => import('./Cards/ContractDetailsCard').then(mod => mod.ContractDetailsCard),
@@ -98,7 +98,7 @@ export const TxPage: React.FC<{
setLoading(false);
}, 2000);
- if (loading) return ;
+ if (loading) return ;
return (
<>
diff --git a/src/app/txid/[txId]/page.tsx b/src/app/txid/[txId]/page.tsx
index 1699eb609..8b04d8ac6 100644
--- a/src/app/txid/[txId]/page.tsx
+++ b/src/app/txid/[txId]/page.tsx
@@ -1,18 +1,13 @@
'use client';
+import dynamic from 'next/dynamic';
import * as React from 'react';
-import { SmartContract } from './SmartContract/SmartContract';
-import { Tx } from './Tx';
+import Skeleton from './skeleton';
-function TransactionPage({ params: { txId } }: { params: { txId: string } }) {
- const isContractId = txId.includes('.');
+const Page = dynamic(() => import('./PageClient'), {
+ loading: () => ,
+ ssr: false,
+});
- if (isContractId) {
- return ;
- }
-
- return ;
-}
-
-export default TransactionPage;
+export default Page;
diff --git a/src/app/txid/[txId]/loading.tsx b/src/app/txid/[txId]/skeleton.tsx
similarity index 86%
rename from src/app/txid/[txId]/loading.tsx
rename to src/app/txid/[txId]/skeleton.tsx
index 49d007db5..b5bd88536 100644
--- a/src/app/txid/[txId]/loading.tsx
+++ b/src/app/txid/[txId]/skeleton.tsx
@@ -3,6 +3,6 @@
import { SkeletonPageWithTagsAndTwoColumns } from '../../../common/components/loaders/skeleton-transaction';
import { useColorMode } from '../../../ui/hooks/useColorMode';
-export default function Loading() {
+export default function Skeleton() {
return ;
}
diff --git a/src/common/components/TwoColumnsListItemSkeleton.tsx b/src/common/components/TwoColumnsListItemSkeleton.tsx
index e0b1283e6..740932c8d 100644
--- a/src/common/components/TwoColumnsListItemSkeleton.tsx
+++ b/src/common/components/TwoColumnsListItemSkeleton.tsx
@@ -1,5 +1,5 @@
-import { Skeleton } from '../../ui/Skeleton';
import { SkeletonCircle } from '../../ui/SkeletonCircle';
+import { SkeletonItem } from '../../ui/SkeletonItem';
import { TwoColsListItem } from './TwoColumnsListItem';
export function TwoColumnsListItemSkeleton({
@@ -20,18 +20,18 @@ export function TwoColumnsListItemSkeleton({
icon={icon && }
leftContent={{
title: leftContentTitle ? (
-
+
) : null,
subtitle: leftContentSubtitle ? (
-
+
) : null,
}}
rightContent={{
title: rightContentTitle ? (
-
+
) : null,
subtitle: rightContentSubtitle ? (
-
+
) : null,
}}
/>
diff --git a/src/common/components/loaders/skeleton-transaction.tsx b/src/common/components/loaders/skeleton-transaction.tsx
index cf8d3397c..7818ce073 100644
--- a/src/common/components/loaders/skeleton-transaction.tsx
+++ b/src/common/components/loaders/skeleton-transaction.tsx
@@ -1,60 +1,31 @@
'use client';
-import { useColorMode } from '@chakra-ui/react';
+import { useColorModeValue } from '@chakra-ui/react';
import * as React from 'react';
-import { TbMenu2, TbUser } from 'react-icons/tb';
import { PageTitle } from '../../../app/_components/PageTitle';
-import { SideNav } from '../../../app/sandbox/layout/SideNav';
-import { TxAlerts } from '../../../app/txid/[txId]/TxAlerts';
-import { BlockHash } from '../../../app/txid/[txId]/TxDetails/BlockHash';
-import { BlockHeight } from '../../../app/txid/[txId]/TxDetails/BlockHeight';
-import { Fees } from '../../../app/txid/[txId]/TxDetails/Fees';
-import { ID } from '../../../app/txid/[txId]/TxDetails/ID';
-import { NonCanonical } from '../../../app/txid/[txId]/TxDetails/NonCanonical';
-import { Nonce } from '../../../app/txid/[txId]/TxDetails/Nonce';
-import { Sender } from '../../../app/txid/[txId]/TxDetails/Sender';
import { SkeletonTxsList } from '../../../features/txs-list/SkeletonTxsList';
import { Box } from '../../../ui/Box';
import { Flex } from '../../../ui/Flex';
-import { Grid } from '../../../ui/Grid';
import { HStack } from '../../../ui/HStack';
-import { IconButton } from '../../../ui/IconButton';
-import { Skeleton } from '../../../ui/Skeleton';
import { SkeletonCircle } from '../../../ui/SkeletonCircle';
-import { Spinner } from '../../../ui/Spinner';
-import { Stack } from '../../../ui/Stack';
-import { Caption } from '../../../ui/typography';
-import { getTransactionStatus } from '../../utils/transactions';
-import { getTxTitle } from '../../utils/utils';
+import { SkeletonItem } from '../../../ui/SkeletonItem';
import { KeyValueHorizontal } from '../KeyValueHorizontal';
import { Section } from '../Section';
import { TwoColumnPage } from '../TwoColumnPage';
import { TwoColsListItem } from '../TwoColumnsListItem';
-import { TxTypeTag } from '../TxTypeTag';
import { Value } from '../Value';
-import { TxStatusLabel } from '../status';
-
-export const SkeletonTxListItemMini = () => (
- }
- leftContent={{
- title: ,
- subtitle: ,
- }}
- />
-);
export const SkeletonBlock = () => (
}
leftContent={{
- title: ,
- subtitle: ,
+ title: ,
+ subtitle: ,
}}
rightContent={{
- title: ,
- subtitle: ,
+ title: ,
+ subtitle: ,
}}
/>
);
@@ -77,17 +48,18 @@ const SkeletonTxidSummary = () => {
};
const SkeletonSummaryRow = () => {
+ const borderColor = useColorModeValue('slate.150', 'slate.900');
return (
-
+
-
+
-
+
@@ -95,6 +67,7 @@ const SkeletonSummaryRow = () => {
);
};
const SkeletonSummaryRowShortContent = () => {
+ const borderColor = useColorModeValue('slate.150', 'slate.900');
return (
{
px={'16px'}
paddingLeft={'0'}
overflow="hidden"
+ borderColor={borderColor}
>
-
+
-
+
@@ -127,10 +101,10 @@ const SkeletonTransactionTitle = () => {
return (
-
+
-
+
);
@@ -156,17 +130,21 @@ export const SkeletonPageWithTagsAndTwoColumns = () => {
}
leftContent={
- }>
+ }>
{Array.from({ length: 20 }).map((_, i) => (
}
+ label={}
value={
-
+
}
@@ -177,13 +155,13 @@ export const SkeletonPageWithTagsAndTwoColumns = () => {
}
rightContent={
- }>
+ }>
{Array.from({ length: 20 }).map((_, i) => (
}
+ label={}
value={null}
/>
))}
@@ -194,22 +172,3 @@ export const SkeletonPageWithTagsAndTwoColumns = () => {
/>
);
};
-
-export const SkeletonPageWithTwoColumns = () => {
- return (
-
-
-
- }
- leftContent={
- <>
-
-
-
- }
- rightContent={}
- />
- );
-};
diff --git a/src/features/txs-list/SkeletonTxsList.tsx b/src/features/txs-list/SkeletonTxsList.tsx
index 0a42bd096..c6040096f 100644
--- a/src/features/txs-list/SkeletonTxsList.tsx
+++ b/src/features/txs-list/SkeletonTxsList.tsx
@@ -1,9 +1,6 @@
import * as React from 'react';
-import { TwoColsListItem } from '../../common/components/TwoColumnsListItem';
import { TwoColumnsListItemSkeleton } from '../../common/components/TwoColumnsListItemSkeleton';
-import { Skeleton } from '../../ui/Skeleton';
-import { SkeletonCircle } from '../../ui/SkeletonCircle';
export function SkeletonTxsList({ txsCount = 10 }: { txsCount?: number }) {
return (
diff --git a/src/ui/Skeleton.tsx b/src/ui/SkeletonItem.tsx
similarity index 77%
rename from src/ui/Skeleton.tsx
rename to src/ui/SkeletonItem.tsx
index 42b49a1c8..7aa8df4df 100644
--- a/src/ui/Skeleton.tsx
+++ b/src/ui/SkeletonItem.tsx
@@ -10,7 +10,7 @@ import {
import { UIComponent } from './types';
export type SkeletonProps = CUISkeletonProps & UIComponent;
-export const Skeleton = forwardRef(({ children, size, ...rest }, ref) => (
+export const SkeletonItem = forwardRef(({ children, size, ...rest }, ref) => (
{children}