Address breaking changes in UI library

src/app/components/fees/fee-item-icon.tsx

@@ -12,10 +12,10 @@ import type { FeeType } from '@app/common/fees/use-fees';
 import { IconWrapper } from '../icon-wrapper';
 
 const feeTypeToIconMap: Record<FeeType, ReactNode> = {
-  slow: <AnimalSnailIcon variant="small" />,
-  standard: <AnimalRabbitIcon variant="small" />,
-  fast: <AnimalEagleIcon variant="small" />,
-  custom: <AnimalChameleonIcon variant="small" />,
+  slow: <AnimalSnailIcon />,
+  standard: <AnimalRabbitIcon />,
+  fast: <AnimalEagleIcon />,
+  custom: <AnimalChameleonIcon />,
 };
 
 export function FeeItemIcon({ feeType }: { feeType: FeeType }) {

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

@@ -1,7 +1,7 @@
 import { createMoney, formatMoney, truncateMiddle } from '@leather.io/utils';
 
 import { PsbtInput } from '@app/features/psbt-signer/hooks/use-parsed-inputs';
-import { TagWithTooltip } from '@app/ui/components/tag/tag-with-tooltip';
+import { BadgeWithTooltip } from '@app/ui/components/badge/badge-with-tooltip';
 
 import { PsbtInputOutputItemLayout } from '../../psbt-input-output-item.layout';
 
@@ -15,7 +15,7 @@
       amount={formatMoney(createMoney(utxo.value, 'BTC'))}
       label={
         utxo.toSign ? (
-          <TagWithTooltip hoverLabel={hoverLabel} label="Approve" transparent />
+          <BadgeWithTooltip hoverLabel={hoverLabel} label="Approve" outlined />
         ) : undefined
       }
       txId={truncateMiddle(utxo.txid)}

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

@@ -1,7 +1,7 @@
 import { createMoney, formatMoney, truncateMiddle } from '@leather.io/utils';
 
 import { PsbtOutput } from '@app/features/psbt-signer/hooks/use-parsed-outputs';
-import { TagWithTooltip } from '@app/ui/components/tag/tag-with-tooltip';
+import { BadgeWithTooltip } from '@app/ui/components/badge/badge-with-tooltip';
 
 import { PsbtInputOutputItemLayout } from '../../psbt-input-output-item.layout';
 
@@ -19,7 +19,7 @@
       amount={formatMoney(createMoney(Number(output.value), 'BTC'))}
       label={
         output.toSign ? (
-          <TagWithTooltip transparent hoverLabel={hoverLabel} label="You" />
+          <BadgeWithTooltip outlined hoverLabel={hoverLabel} label="You" />
         ) : undefined
       }
     />

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

@@ -3,7 +3,7 @@
 import { LockIcon, UnlockIcon } from '@leather.io/ui';
 
 import { usePsbtSignerContext } from '@app/features/psbt-signer/psbt-signer.context';
-import { TagWithTooltip } from '@app/ui/components/tag/tag-with-tooltip';
+import { BadgeWithTooltip } from '@app/ui/components/badge/badge-with-tooltip';
 
 const immutableLabel =
   'Any modification to the transaction, including the fee amount or other inputs/outputs, will invalidate the signature.';
@@ -16,12 +16,12 @@
   return (
     <HStack alignItems="center" gap="space.02">
       <styled.h2 textStyle="heading.05">Transaction</styled.h2>
-      <TagWithTooltip
+      <BadgeWithTooltip
         hoverLabel={isPsbtMutable ? uncertainLabel : immutableLabel}
         icon={isPsbtMutable ? <UnlockIcon variant="small" /> : <LockIcon variant="small" />}
         label={isPsbtMutable ? 'Uncertain' : 'Certain'}
-        transparent
         variant={isPsbtMutable ? 'warning' : 'default'}
+        outlined
       />
     </HStack>
   );

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

@@ -1,6 +1,6 @@
 import { FundPageSelectors } from '@tests/selectors/fund.selectors';
 
-import { StarIcon, Tag, ZapIcon } from '@leather.io/ui';
+import { Badge, StarIcon, ZapIcon } from '@leather.io/ui';
 
 import { AvailableRegions } from '@app/query/common/remote-config/remote-config.query';
 
@@ -38,10 +38,10 @@
   const Attributes = (
     <>
       {hasFastCheckoutProcess && (
-        <Tag icon={<ZapIcon variant="small" />} label="Fast checkout" variant="success" />
+        <Badge icon={<ZapIcon variant="small" />} label="Fast checkout" variant="success" />
       )}
       {!hasTradingFees && (
-        <Tag icon={<StarIcon variant="small" />} label="0 % Fees" variant="warning" />
+        <Badge icon={<StarIcon variant="small" />} label="0 % Fees" variant="warning" />
       )}
     </>
   );

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

@@ -0,0 +1,17 @@
+import { Badge, type BadgeProps } from '@leather.io/ui';
+
+import { BasicTooltip } from '../tooltip/basic-tooltip';
+
+type TooltipSideType = 'bottom' | 'left' | 'right' | 'top';
+
+interface BadgeWithTooltipProps extends BadgeProps {
+  hoverLabel: string;
+  side?: TooltipSideType;
+}
+export function BadgeWithTooltip({ hoverLabel, side = 'bottom', ...props }: BadgeWithTooltipProps) {
+  return (
+    <BasicTooltip label={hoverLabel} side={side}>
+      <Badge {...props} />
+    </BasicTooltip>
+  );
+}