feat: wp

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

@@ -8,7 +8,6 @@ import { ClarityAbiFunction } from '@stacks/transactions';
 import { TxLink } from '../../../../common/components/ExplorerLinks';
 import { Section } from '../../../../common/components/Section';
 import { TxIcon } from '../../../../common/components/TxIcon';
-import { ArrowLeftIcon } from '../../../../common/components/icons/arrow-left';
 import { useGlobalContext } from '../../../../common/context/useGlobalContext';
 import { useAppSelector } from '../../../../common/state/hooks';
 import { ContractWithParsedAbi } from '../../../../common/types/contract';
@@ -22,21 +21,6 @@ import { AvailableFunctionsView } from './AvailableFunctionsView';
 import { FunctionView } from './FunctionView';
 import { PluralizedCaption } from './PluralizedCaption';
 
-const BackLink: React.FC<{ href: string }> = ({ href }) => {
-  return (
-    <NextLink href={href}>
-      <Flex alignItems="center" mb={4} _hover={{ cursor: 'pointer' }}>
-        <Icon h={4} w={4} mr={2}>
-          <ArrowLeftIcon />
-        </Icon>
-        <Box transform={'none'} fontSize="sm">
-          Back to search
-        </Box>
-      </Flex>
-    </NextLink>
-  );
-};
-
 interface ContractInfoProps {
   contract: ContractWithParsedAbi;
 }

src/app/sandbox/components/TransactionsPanel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { AccordionItemContent, Box, Flex, HStack, Icon, Stack } from '@chakra-ui/react';
-import { CaretDown } from '@phosphor-icons/react';
+import { CaretDown, Info } from '@phosphor-icons/react';
 import { useRouter } from 'next/navigation';
 import React, { useMemo } from 'react';
 
@@ -10,7 +10,6 @@ import { Transaction } from '@stacks/stacks-blockchain-api-types';
 import { Badge } from '../../../common/components/Badge';
 import { ExplorerLink } from '../../../common/components/ExplorerLinks';
 import { Section } from '../../../common/components/Section';
-import { InfoCircleIcon } from '../../../common/components/icons/info-circle';
 import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useContractById } from '../../../common/queries/useContractById';
 import { useAppDispatch } from '../../../common/state/hooks';
@@ -135,15 +134,15 @@ const TxDetailsFunctions = ({
             return func.access !== 'private' ? (
               <Flex
                 borderBottomWidth={index === arr.length - 1 ? undefined : '1px'}
-                px="16px"
-                py="8px"
+                px={4}
+                py={2}
                 alignItems="center"
                 justifyContent="space-between"
               >
                 <Flex alignItems="center" color={`text`}>
                   {func.access === 'read_only' ? (
                     <Icon h={4.5} w={4.5}>
-                      <InfoCircleIcon />
+                      <Info />
                     </Icon>
                   ) : (
                     <Icon h={4.5} w={4.5}>

src/app/sandbox/layout/SideNav.tsx

@@ -1,8 +1,8 @@
 import { Icon, Stack, StackProps } from '@chakra-ui/react';
+import { Drop } from '@phosphor-icons/react';
 import { usePathname } from 'next/navigation';
 import React from 'react';
 
-import { DropIcon } from '../../../common/components/icons/drop';
 import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { buildUrl } from '../../../common/utils/buildUrl';
 import ClarityIcon from '../../../ui/icons/ClarityIcon';
@@ -54,7 +54,7 @@ export const SideNav: React.FC<StackProps> = () => {
           url={buildUrl(`/sandbox/faucet`, network)}
           icon={
             <Icon h={5} w={5} color={'surfaceOpposite'}>
-              <DropIcon />
+              <Drop />
             </Icon>
           }
           isSelected={pathname?.startsWith('/sandbox/faucet')}

src/app/token/[tokenId]/PageClient.tsx

@@ -35,7 +35,9 @@ export default function PageClient({
       return (
         <Box borderRadius="xl" bg="red.200" p={4}>
           <Flex gap={2}>
-            <Icon as={Warning} h={4} w={4} color="red.600" />
+            <Icon h={4} w={4} color="red.600">
+              <Warning />
+            </Icon>
             <Text fontSize="sm" display="inline">
               <Text as="span" fontWeight="bold">
                 Warning:&nbsp;
@@ -51,7 +53,9 @@ export default function PageClient({
       return (
         <Box borderRadius="xl" bg="red.200" p={4}>
           <Flex gap={2}>
-            <Icon as={Warning} h={4} w={4} color="red.600" />
+            <Icon h={4} w={4} color="red.600">
+              <Warning />
+            </Icon>
             <Text fontSize="sm" display="inline">
               <Text as="span" fontWeight="bold">
                 Warning:&nbsp;

src/common/components/status.tsx

@@ -1,40 +1,8 @@
 'use client';
 
-import { FlexProps, Icon, Spinner } from '@chakra-ui/react';
-import { Check, WarningCircle } from '@phosphor-icons/react';
-import * as React from 'react';
 import { ReactNode } from 'react';
 
-import { TxStatus } from '../types/tx';
 import { Badge, BadgeProps } from './Badge';
-import { LoaderQuarter } from './icons/loader-quarter';
-import { MicroblockIcon } from './icons/microblock';
-
-export const Pending = ({ speed = 0.9, ...p }: any) => <LoaderQuarter {...p} />;
-
-const labelMap = {
-  pending: 'In mempool',
-  success: 'Confirmed',
-  success_anchor_block: 'Confirmed in anchor block',
-  success_microblock: 'Included in microblock',
-  non_canonical: 'Non-canonical (orphaned)',
-  failed: 'Failed',
-  dropped: 'Dropped',
-};
-
-const iconMap = {
-  pending: <Spinner />,
-  success: <Check />,
-  success_anchor_block: <Check />,
-  success_microblock: <MicroblockIcon fill="white" />,
-  non_canonical: <WarningCircle />,
-  failed: <WarningCircle />,
-  dropped: <WarningCircle />,
-};
-
-interface StatusProps extends FlexProps {
-  status: TxStatus;
-}
 
 export function StyledBadge({ children, ...rest }: { children: ReactNode } & BadgeProps) {
   return (
@@ -51,16 +19,3 @@ export function StyledBadge({ children, ...rest }: { children: ReactNode } & Bad
     </Badge>
   );
 }
-
-export const TxStatusLabel: React.FC<StatusProps> = ({ status, ...rest }) => {
-  const IconComponent = iconMap[status];
-  const label = labelMap[status];
-  return (
-    <StyledBadge>
-      <Icon h={3} w={3}>
-        {IconComponent}
-      </Icon>
-      {label}
-    </StyledBadge>
-  );
-};