feat: tag

src/app/components/network-mode-badge.tsx

@@ -2,11 +2,12 @@ import { memo, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { ChainID } from '@stacks/transactions';
-import { Flex, FlexProps, styled } from 'leather-styles/jsx';
+import { Flex, FlexProps } from 'leather-styles/jsx';
 
 import { RouteUrls } from '@shared/route-urls';
 
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
+import { Tag } from '@app/ui/components/tag/tag';
 
 export const NetworkModeBadge = memo((props: FlexProps) => {
   const navigate = useNavigate();
@@ -21,19 +22,12 @@ export const NetworkModeBadge = memo((props: FlexProps) => {
   return (
     <Flex
       _hover={{ cursor: 'pointer' }}
-      alignItems="center"
-      border="subdued"
-      borderRadius="xs"
-      height="24px"
       onClick={() => navigate(RouteUrls.SelectNetwork, { relative: 'path' })}
-      px="space.03"
       position="relative"
       zIndex={999}
       {...props}
     >
-      <styled.span color="ink.text-subdued" textStyle="label.03">
-        {name}
-      </styled.span>
+      <Tag label={name} transparent />
     </Flex>
   );
 });

src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-list/components/psbt-input-item.tsx

@@ -1,8 +1,8 @@
 import { createMoney } from '@shared/models/money.model';
 
 import { formatMoney } from '@app/common/money/format-money';
-import { Pill } from '@app/components/pill';
 import { PsbtInput } from '@app/features/psbt-signer/hooks/use-parsed-inputs';
+import { TagWithTooltip } from '@app/ui/components/tag/tag-with-tooltip';
 import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 
 import { PsbtInputOutputItemLayout } from '../../psbt-input-output-item.layout';
@@ -15,7 +15,11 @@ export function PsbtInputItem({ utxo }: { utxo: PsbtInput }) {
       address={truncateMiddle(utxo.address)}
       addressHoverLabel={utxo.address}
       amount={formatMoney(createMoney(utxo.value, 'BTC'))}
-      label={utxo.toSign ? <Pill hoverLabel={pillHoverLabel} label="Approve" /> : undefined}
+      label={
+        utxo.toSign ? (
+          <TagWithTooltip hoverLabel={pillHoverLabel} label="Approve" transparent />
+        ) : undefined
+      }
       txId={truncateMiddle(utxo.txid)}
       txIdHoverLabel={utxo.txid}
     />

src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx

@@ -39,9 +39,9 @@ export function PsbtInputOutputItemLayout({
             side="bottom"
           >
             <Box display="flex" height="16px">
-              <Link onClick={onCopy} variant="text">
-                {addressHoverLabel ? <CopyIcon /> : null}
-              </Link>
+              <styled.button _hover={{ bg: 'ink.component-background-hover' }} onClick={onCopy}>
+                {addressHoverLabel ? <CopyIcon variant="small" /> : null}
+              </styled.button>
             </Box>
           </BasicTooltip>
           {label}

src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-output-list/components/psbt-output-item.tsx

@@ -1,8 +1,8 @@
 import { createMoney } from '@shared/models/money.model';
 
 import { formatMoney } from '@app/common/money/format-money';
-import { Pill } from '@app/components/pill';
 import { PsbtOutput } from '@app/features/psbt-signer/hooks/use-parsed-outputs';
+import { TagWithTooltip } from '@app/ui/components/tag/tag-with-tooltip';
 import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 
 import { PsbtInputOutputItemLayout } from '../../psbt-input-output-item.layout';
@@ -19,7 +19,11 @@ export function PsbtOutputItem({ output }: { output: PsbtOutput }) {
       address={truncateMiddle(output.address)}
       addressHoverLabel={output.address}
       amount={formatMoney(createMoney(Number(output.value), 'BTC'))}
-      label={output.toSign ? <Pill hoverLabel={pillHoverLabel} label="You" /> : undefined}
+      label={
+        output.toSign ? (
+          <TagWithTooltip hoverLabel={pillHoverLabel} label="You" transparent />
+        ) : undefined
+      }
     />
   );
 }

src/app/features/psbt-signer/components/psbt-request-details-header.tsx

@@ -1,8 +1,7 @@
-import { Box, HStack, styled } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
+import { HStack, styled } from 'leather-styles/jsx';
 
 import { usePsbtSignerContext } from '@app/features/psbt-signer/psbt-signer.context';
-import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { TagWithTooltip } from '@app/ui/components/tag/tag-with-tooltip';
 import { LockIcon } from '@app/ui/icons/lock-icon';
 import { UnlockIcon } from '@app/ui/icons/unlock-icon';
 
@@ -13,37 +12,17 @@ const uncertainLabel =
 
 export function PsbtRequestDetailsHeader() {
   const { isPsbtMutable } = usePsbtSignerContext();
-  const tokenLabelColor = isPsbtMutable
-    ? token('colors.yellow.action-primary-default')
-    : token('colors.ink.text-subdued');
 
   return (
     <HStack alignItems="center" gap="space.02">
       <styled.h2 textStyle="heading.05">Transaction</styled.h2>
-      <BasicTooltip label={isPsbtMutable ? uncertainLabel : immutableLabel} side="bottom">
-        <HStack
-          alignItems="center"
-          border={isPsbtMutable ? 'warning' : 'subdued'}
-          borderRadius="xs"
-          gap="space.01"
-          px="space.02"
-          py="space.01"
-        >
-          <Box width="12px">
-            {isPsbtMutable ? (
-              <UnlockIcon style={{ color: tokenLabelColor }} variant="small" />
-            ) : (
-              <LockIcon style={{ color: tokenLabelColor }} variant="small" />
-            )}
-          </Box>
-          <styled.span
-            color={isPsbtMutable ? 'yellow.action-primary-default' : 'ink.text-subdued'}
-            textStyle="caption.02"
-          >
-            {isPsbtMutable ? 'Uncertain' : 'Certain'}
-          </styled.span>
-        </HStack>
-      </BasicTooltip>
+      <TagWithTooltip
+        hoverLabel={isPsbtMutable ? uncertainLabel : immutableLabel}
+        icon={isPsbtMutable ? <UnlockIcon variant="small" /> : <LockIcon variant="small" />}
+        label={isPsbtMutable ? 'Uncertain' : 'Certain'}
+        transparent
+        variant={isPsbtMutable ? 'warning' : 'default'}
+      />
     </HStack>
   );
 }

src/app/pages/fund/components/fiat-provider-item.tsx

@@ -1,10 +1,10 @@
 import { FundPageSelectors } from '@tests/selectors/fund.selectors';
 
 import { AvailableRegions } from '@app/query/common/remote-config/remote-config.query';
+import { Tag } from '@app/ui/components/tag/tag';
+import { StarIcon, ZapIcon } from '@app/ui/icons';
 
-import { FastCheckoutBadge } from './fast-checkout-badge';
 import { FundAccountTile } from './fund-account-tile';
-import { ZeroPercentFeesBadge } from './zero-percent-fees-badge';
 
 const availableInsideUnitedStatesDescription = 'Available only inside of the US';
 const availableOutsideUnitedStatesDescription = 'Available only outside of the US';
@@ -37,8 +37,12 @@ export function FiatProviderItem(props: FiatProviderProps) {
 
   const Attributes = (
     <>
-      {hasFastCheckoutProcess && <FastCheckoutBadge />}
-      {!hasTradingFees && <ZeroPercentFeesBadge />}
+      {hasFastCheckoutProcess && (
+        <Tag icon={<ZapIcon variant="small" />} label="Fast checkout" variant="success" />
+      )}
+      {!hasTradingFees && (
+        <Tag icon={<StarIcon variant="small" />} label="0 % Fees" variant="warning" />
+      )}
     </>
   );
 

src/app/ui/components/callout/callout.tsx

@@ -1,44 +1,51 @@
 import type { ReactNode } from 'react';
 
-import { css } from 'leather-styles/css';
+import { type RecipeVariantProps, cva } from 'leather-styles/css';
 import { Box, type BoxProps, Stack, styled } from 'leather-styles/jsx';
 
 import { Flag } from '../flag/flag';
 import { getIconVariant } from './callout.utils';
 
-type CalloutVariant = 'default' | 'error' | 'info' | 'success' | 'warning';
-
-const calloutStyles = css({
-  color: 'ink.text-primary',
-  textAlign: 'left',
-  width: '100%',
-
-  '&[data-variant="default"]': {
-    backgroundColor: 'ink.non-interactive',
-  },
-  '&[data-variant="error"]': {
-    backgroundColor: 'red.background-secondary',
+const calloutRecipe = cva({
+  base: {
+    color: 'ink.text-primary',
+    textAlign: 'left',
+    width: '100%',
   },
-  '&[data-variant="info"]': {
-    backgroundColor: 'blue.background-secondary',
+  variants: {
+    variant: {
+      default: {
+        bg: 'ink.non-interactive',
+      },
+      error: {
+        bg: 'red.background-secondary',
+      },
+      info: {
+        bg: 'blue.background-secondary',
+      },
+      success: {
+        bg: 'green.background-secondary',
+      },
+      warning: {
+        bg: 'yellow.background-secondary',
+      },
+    },
   },
-  '&[data-variant="success"]': {
-    backgroundColor: 'green.background-secondary',
-  },
-  '&[data-variant="warning"]': {
-    backgroundColor: 'yellow.background-secondary',
+  defaultVariants: {
+    variant: 'default',
   },
 });
 
+type CalloutVariants = RecipeVariantProps<typeof calloutRecipe>;
+
 interface CalloutProps extends BoxProps {
   icon?: ReactNode;
   title?: string;
-  variant?: CalloutVariant;
 }
-export function Callout(props: CalloutProps) {
+export function Callout(props: CalloutProps & CalloutVariants) {
   const { children, icon, title, variant = 'default', ...rest } = props;
   return (
-    <Box className={calloutStyles} data-variant={variant} {...rest}>
+    <Box className={calloutRecipe({ variant })} data-variant={variant} {...rest}>
       <Flag
         align="top"
         img={icon ? icon : getIconVariant(variant)}

src/app/ui/components/tag/tag-with-tooltip.tsx

@@ -0,0 +1,20 @@
+import { BasicTooltip } from '../tooltip/basic-tooltip';
+import { Tag, type TagProps, type TagVariants } from './tag';
+
+type TooltipSideType = 'bottom' | 'left' | 'right' | 'top';
+
+interface TagWithTooltipProps extends TagProps {
+  hoverLabel: string;
+  side?: TooltipSideType;
+}
+export function TagWithTooltip({
+  hoverLabel,
+  side = 'bottom',
+  ...props
+}: TagWithTooltipProps & TagVariants) {
+  return (
+    <BasicTooltip label={hoverLabel} side={side}>
+      <Tag {...props} />
+    </BasicTooltip>
+  );
+}

src/app/ui/components/tag/tag.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ErrorCircleIcon } from '@app/ui/icons';
+
+import { Tag as Component } from './tag';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'Tag',
+  parameters: {
+    controls: { include: ['transparent', 'variant'] },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+export const Tag: Story = {
+  args: {
+    label: 'Label',
+    variant: 'default',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    icon: <ErrorCircleIcon variant="small" />,
+    label: 'Label',
+    variant: 'default',
+  },
+};