From d0ea8c7dd615e9bcb83ec60c306f06bd7a82d638 Mon Sep 17 00:00:00 2001
From: Nicholas Barnett <n-barnett@hotmail.com>
Date: Wed, 15 Jan 2025 12:52:12 -0600
Subject: [PATCH] feat: wp

---
 .../ContractCall/SelectedContractView.tsx     | 16 -------
 .../sandbox/components/TransactionsPanel.tsx  |  9 ++--
 src/app/sandbox/layout/SideNav.tsx            |  4 +-
 src/app/token/[tokenId]/PageClient.tsx        |  8 +++-
 src/common/components/icons/_base.tsx         | 25 -----------
 src/common/components/icons/arrow-left.tsx    | 12 -----
 src/common/components/icons/arrow-right.tsx   | 12 -----
 src/common/components/icons/chevron-down.tsx  | 10 -----
 src/common/components/icons/copy.tsx          | 11 -----
 src/common/components/icons/drop.tsx          | 10 -----
 src/common/components/icons/external-link.tsx | 12 -----
 src/common/components/icons/filter.tsx        | 10 -----
 src/common/components/icons/info-circle.tsx   | 12 -----
 src/common/components/icons/info.tsx          | 12 -----
 .../components/icons/loader-quarter.tsx       | 12 -----
 src/common/components/icons/microblock.tsx    |  9 ----
 src/common/components/icons/tools.tsx         | 15 -------
 src/common/components/icons/transfer.tsx      | 12 -----
 src/common/components/status.tsx              | 45 -------------------
 19 files changed, 12 insertions(+), 244 deletions(-)
 delete mode 100644 src/common/components/icons/_base.tsx
 delete mode 100644 src/common/components/icons/arrow-left.tsx
 delete mode 100644 src/common/components/icons/arrow-right.tsx
 delete mode 100644 src/common/components/icons/chevron-down.tsx
 delete mode 100644 src/common/components/icons/copy.tsx
 delete mode 100644 src/common/components/icons/drop.tsx
 delete mode 100644 src/common/components/icons/external-link.tsx
 delete mode 100644 src/common/components/icons/filter.tsx
 delete mode 100644 src/common/components/icons/info-circle.tsx
 delete mode 100644 src/common/components/icons/info.tsx
 delete mode 100644 src/common/components/icons/loader-quarter.tsx
 delete mode 100644 src/common/components/icons/microblock.tsx
 delete mode 100644 src/common/components/icons/tools.tsx
 delete mode 100644 src/common/components/icons/transfer.tsx

diff --git a/src/app/sandbox/components/ContractCall/SelectedContractView.tsx b/src/app/sandbox/components/ContractCall/SelectedContractView.tsx
index 69a18cb55..c2b34510d 100644
--- a/src/app/sandbox/components/ContractCall/SelectedContractView.tsx
+++ b/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;
 }
diff --git a/src/app/sandbox/components/TransactionsPanel.tsx b/src/app/sandbox/components/TransactionsPanel.tsx
index 4905c83ed..8a7b49738 100644
--- a/src/app/sandbox/components/TransactionsPanel.tsx
+++ b/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}>
diff --git a/src/app/sandbox/layout/SideNav.tsx b/src/app/sandbox/layout/SideNav.tsx
index a5b8fb3c5..79ea7f3a4 100644
--- a/src/app/sandbox/layout/SideNav.tsx
+++ b/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')}
diff --git a/src/app/token/[tokenId]/PageClient.tsx b/src/app/token/[tokenId]/PageClient.tsx
index a54344709..5f4cf5667 100644
--- a/src/app/token/[tokenId]/PageClient.tsx
+++ b/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;
diff --git a/src/common/components/icons/_base.tsx b/src/common/components/icons/_base.tsx
deleted file mode 100644
index d19898faa..000000000
--- a/src/common/components/icons/_base.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import { forwardRef } from 'react';
-
-export type SvgProps = React.FC<IconProps>;
-
-export const BaseSvg = forwardRef<SVGSVGElement, IconProps>(
-  (
-    { as = 'svg', ...rest },
-    ref // TODO: upgrade to v3. this may be broken
-  ) => (
-    <Icon
-      as={as}
-      w="44px"
-      h="auto"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      ref={ref}
-      {...rest}
-    />
-  )
-);
diff --git a/src/common/components/icons/arrow-left.tsx b/src/common/components/icons/arrow-left.tsx
deleted file mode 100644
index 3770981c8..000000000
--- a/src/common/components/icons/arrow-left.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const ArrowLeftIcon: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" />
-    <line x1="5" y1="12" x2="19" y2="12" />
-    <line x1="5" y1="12" x2="11" y2="18" />
-    <line x1="5" y1="12" x2="11" y2="6" />
-  </BaseSvg>
-);
diff --git a/src/common/components/icons/arrow-right.tsx b/src/common/components/icons/arrow-right.tsx
deleted file mode 100644
index e239b571b..000000000
--- a/src/common/components/icons/arrow-right.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const ArrowRightIcon: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" />
-    <line x1="5" y1="12" x2="19" y2="12" />
-    <line x1="13" y1="18" x2="19" y2="12" />
-    <line x1="13" y1="6" x2="19" y2="12" />
-  </BaseSvg>
-);
diff --git a/src/common/components/icons/chevron-down.tsx b/src/common/components/icons/chevron-down.tsx
deleted file mode 100644
index 40956e380..000000000
--- a/src/common/components/icons/chevron-down.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const ChevronDown: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <polyline points="6 9 12 15 18 9" />
-  </BaseSvg>
-);
diff --git a/src/common/components/icons/copy.tsx b/src/common/components/icons/copy.tsx
deleted file mode 100644
index 957a0191c..000000000
--- a/src/common/components/icons/copy.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const CopyIcon: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" />
-    <rect x="8" y="8" width="12" height="12" rx="2" />
-    <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
-  </BaseSvg>
-);
diff --git a/src/common/components/icons/drop.tsx b/src/common/components/icons/drop.tsx
deleted file mode 100644
index f20d00076..000000000
--- a/src/common/components/icons/drop.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const DropIcon: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 3l5 5a7 7 0 1 1 -10 0l5 -5" />
-  </BaseSvg>
-);
diff --git a/src/common/components/icons/external-link.tsx b/src/common/components/icons/external-link.tsx
deleted file mode 100644
index d3c0293c4..000000000
--- a/src/common/components/icons/external-link.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const ExternalLinkIcon: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-    <line x1="10" y1="14" x2="20" y2="4" />
-    <polyline points="15 4 20 4 20 9" />
-  </BaseSvg>
-);
diff --git a/src/common/components/icons/filter.tsx b/src/common/components/icons/filter.tsx
deleted file mode 100644
index 50576d9d5..000000000
--- a/src/common/components/icons/filter.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const FilterIcon: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M5.5 5h13a1 1 0 0 1 .5 1.5l-5 5.5l0 7l-4 -3l0 -4l-5 -5.5a1 1 0 0 1 .5 -1.5" />
-  </BaseSvg>
-);
diff --git a/src/common/components/icons/info-circle.tsx b/src/common/components/icons/info-circle.tsx
deleted file mode 100644
index d0acee6ad..000000000
--- a/src/common/components/icons/info-circle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const InfoCircleIcon: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" />
-    <circle cx="12" cy="12" r="9" />
-    <line x1="12" y1="8" x2="12.01" y2="8" />
-    <polyline points="11 12 12 12 12 16 13 16" />
-  </BaseSvg>
-);
diff --git a/src/common/components/icons/info.tsx b/src/common/components/icons/info.tsx
deleted file mode 100644
index 32294b8be..000000000
--- a/src/common/components/icons/info.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const InfoIcon: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <circle cx="12" cy="12" r="9" />
-    <line x1="12" y1="8" x2="12.01" y2="8" />
-    <polyline points="11 12 12 12 12 16 13 16" />
-  </BaseSvg>
-);
diff --git a/src/common/components/icons/loader-quarter.tsx b/src/common/components/icons/loader-quarter.tsx
deleted file mode 100644
index 9d56dbb8f..000000000
--- a/src/common/components/icons/loader-quarter.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const LoaderQuarter: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <line x1="12" y1="6" x2="12" y2="3" />
-    <line x1="6" y1="12" x2="3" y2="12" />
-    <line x1="7.75" y1="7.75" x2="5.6" y2="5.6" />
-  </BaseSvg>
-);
diff --git a/src/common/components/icons/microblock.tsx b/src/common/components/icons/microblock.tsx
deleted file mode 100644
index cca327e81..000000000
--- a/src/common/components/icons/microblock.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Box, BoxProps } from '@chakra-ui/react';
-import { Lightning } from '@phosphor-icons/react';
-import React from 'react';
-
-export const MicroblockIcon: React.FC<BoxProps> = props => (
-  <Box {...props}>
-    <Lightning />
-  </Box>
-);
diff --git a/src/common/components/icons/tools.tsx b/src/common/components/icons/tools.tsx
deleted file mode 100644
index 69cfcc51a..000000000
--- a/src/common/components/icons/tools.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const ToolsIcon: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" />
-    <path d="M3 21h4l13 -13a1.5 1.5 0 0 0 -4 -4l-13 13v4" />
-    <line x1="14.5" y1="5.5" x2="18.5" y2="9.5" />
-    <polyline points="12 8 7 3 3 7 8 12" />
-    <line x1="7" y1="8" x2="5.5" y2="9.5" />
-    <polyline points="16 12 21 17 17 21 12 16" />
-    <line x1="16" y1="17" x2="14.5" y2="18.5" />
-  </BaseSvg>
-);
diff --git a/src/common/components/icons/transfer.tsx b/src/common/components/icons/transfer.tsx
deleted file mode 100644
index b46f02cc0..000000000
--- a/src/common/components/icons/transfer.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { BaseSvg, SvgProps } from './_base';
-
-export const TransferIcon: SvgProps = props => (
-  <BaseSvg {...props}>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <polyline points="7 8 3 12 7 16" />
-    <polyline points="17 8 21 12 17 16" />
-    <line x1="3" y1="12" x2="21" y2="12" />
-  </BaseSvg>
-);
diff --git a/src/common/components/status.tsx b/src/common/components/status.tsx
index c357e22f0..a38318193 100644
--- a/src/common/components/status.tsx
+++ b/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>
-  );
-};