fix(packages): implement multiple fixes to new components (#43)

jonybur · web-flow · commit cc1edcf4f669 · 2025-07-22T18:46:17.000+01:00
* fix(packages): implement multiple fixes to new components

* fix(packages): resolve ReDoS vulnerability in toKebabCase regex

* fix(packages): always show counter even at 1/1

* fix(packages): remove regex

* fix(packages): improve FinalityProviderItem
diff --git a/packages/babylon-core-ui/src/components/CounterButton/CounterButton.stories.tsx b/packages/babylon-core-ui/src/components/CounterButton/CounterButton.stories.tsx
@@ -38,8 +38,8 @@ export const AlmostAtMax: Story = {
 
 export const AtMaxCapacity: Story = {
   args: {
-    counter: 5,
-    max: 5,
+    counter: 1,
+    max: 1,
   },
 };
 
@@ -49,26 +49,4 @@ export const AlwaysShowCounter: Story = {
     max: 3,
     alwaysShowCounter: true,
   },
-};
-
-export const AlwaysShowCounterWithValue: Story = {
-  args: {
-    counter: 1,
-    max: 3,
-    alwaysShowCounter: true,
-  },
-};
-
-export const SingleMax: Story = {
-  args: {
-    counter: 0,
-    max: 1,
-  },
-};
-
-export const SingleMaxAtCapacity: Story = {
-  args: {
-    counter: 1,
-    max: 1,
-  },
-};
+};
diff --git a/packages/babylon-core-ui/src/components/CounterButton/CounterButton.tsx b/packages/babylon-core-ui/src/components/CounterButton/CounterButton.tsx
@@ -4,18 +4,18 @@ import { twJoin } from "tailwind-merge";
 interface CounterButtonProps {
   counter: number;
   max: number;
-  onAdd: () => void;
   alwaysShowCounter?: boolean;
+  onAdd: () => void;
 }
 
 export function CounterButton({ counter, max, onAdd, alwaysShowCounter = false }: CounterButtonProps) {
   const isClickable = counter < max;
-  const showsCounter = (0 < counter && 1 < max) || (alwaysShowCounter && counter === 0);
+  const showsCounter = (0 < counter) || (alwaysShowCounter && counter === 0);
 
   return (
     <div
       className={twJoin(
-        "bg-primary-highlight flex overflow-hidden rounded-md border border-accent-primary",
+        "bg-primary-highlight flex overflow-hidden rounded-md border border-accent-primary w-fit",
         isClickable && "cursor-pointer",
         !showsCounter && !isClickable && "hidden",
         !showsCounter && "w-10",
@@ -28,7 +28,10 @@ export function CounterButton({ counter, max, onAdd, alwaysShowCounter = false }
         </div>
       )}
       {showsCounter && (
-        <div className="flex h-10 items-center border-l border-accent-primary px-2 text-sm sm:px-4 sm:text-base">
+        <div className={twJoin(
+          "flex h-10 items-center px-2 text-sm sm:px-4 sm:text-base",
+          isClickable && "border-l border-accent-primary"
+        )}>
           {counter}/{max}
         </div>
       )}
diff --git a/packages/babylon-core-ui/src/components/SubSection/index.ts b/packages/babylon-core-ui/src/components/SubSection/index.ts
diff --git a/packages/babylon-core-ui/src/elements/FinalityProviderItem/FinalityProviderItem.tsx b/packages/babylon-core-ui/src/elements/FinalityProviderItem/FinalityProviderItem.tsx
@@ -25,9 +25,22 @@ export function FinalityProviderItem({ bsnId, bsnName, bsnLogoUrl, address, prov
   if (!provider) return null;
 
   const renderBsnLogo = () => {
-    if (!bsnLogoUrl) return null;
+    if (bsnLogoUrl) {
+      return <Avatar url={bsnLogoUrl} alt={bsnName} variant="rounded" size="tiny" className="mr-1" />;
+    }
+
+    const placeholderLetter = bsnName?.charAt(0).toUpperCase() || "?";
 
-    return <Avatar url={bsnLogoUrl} alt={bsnName} variant="rounded" size="tiny" className="mr-1" />;
+    return (
+      <Avatar variant="rounded" size="tiny" className="mr-1">
+        <Text
+          as="span"
+          className="inline-flex h-full w-full items-center justify-center bg-secondary-main text-xs text-accent-contrast"
+        >
+          {placeholderLetter}
+        </Text>
+      </Avatar>
+    );
   };
 
   const shortenAddress = (value: string): string => {
@@ -54,12 +67,14 @@ export function FinalityProviderItem({ bsnId, bsnName, bsnLogoUrl, address, prov
   return (
     <div className="flex flex-row items-center justify-between">
       <div className="flex h-10 flex-row gap-2">
-        <FinalityProviderLogo
-          logoUrl={provider.logo_url}
-          rank={provider.rank}
-          moniker={provider.description?.moniker}
-          size="lg"
-        />
+        <div className="shrink-0">
+          <FinalityProviderLogo
+            logoUrl={provider.logo_url}
+            rank={provider.rank}
+            moniker={provider.description?.moniker}
+            size="lg"
+          />
+        </div>
         <div className="flex flex-col justify-center text-accent-primary">
           {renderChainOrAddress()}
           <Text as="div" className="text-base font-medium text-accent-primary">
@@ -70,7 +85,7 @@ export function FinalityProviderItem({ bsnId, bsnName, bsnLogoUrl, address, prov
       {onRemove ?
         <button
           onClick={() => onRemove(bsnId)}
-          className="cursor-pointer rounded bg-accent-secondary/20 px-2 py-0.5 text-xs tracking-[0.4px] text-accent-primary"
+          className="ml-[10px] cursor-pointer rounded bg-accent-secondary/20 px-2 py-0.5 text-xs tracking-[0.4px] text-accent-primary"
         >
           Remove
         </button> : null}
diff --git a/packages/babylon-core-ui/src/utils/constants.ts b/packages/babylon-core-ui/src/utils/constants.ts
@@ -0,0 +1,2 @@
+export const BTC_DECIMAL_PLACES = 8;
+export const BBN_DECIMAL_PLACES = 5; 
diff --git a/packages/babylon-core-ui/src/widgets/sections/AmountSubsection/AmountSubsection.tsx b/packages/babylon-core-ui/src/widgets/sections/AmountSubsection/AmountSubsection.tsx
@@ -3,6 +3,7 @@ import { SubSection } from "@/components/SubSection";
 import { useFormContext, useWatch } from "react-hook-form";
 
 import { calculateTokenValueInCurrency, maxDecimals } from "@/utils/helpers";
+import { BTC_DECIMAL_PLACES } from "@/utils/constants";
 
 interface BalanceDetails {
   balance: number | string;
@@ -73,7 +74,7 @@ export const AmountSubsection = ({
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
           autoFocus={autoFocus}
-          className="w-2/3 bg-transparent text-right text-lg outline-none"
+          className="w-2/3 bg-transparent text-right text-lg outline-none appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
         />
       </div>
       <HiddenField name={fieldName} defaultValue="" />
@@ -83,7 +84,7 @@ export const AmountSubsection = ({
           <div>
             Stakable:{" "}
             <span className="cursor-default">
-              {maxDecimals(Number(balanceDetails.balance), balanceDetails.decimals ?? 8)}
+              {maxDecimals(Number(balanceDetails.balance), balanceDetails.decimals ?? BTC_DECIMAL_PLACES)}
             </span>{" "}
             {balanceDetails.symbol}
           </div>
diff --git a/packages/babylon-core-ui/src/widgets/sections/FeesSection/BBNFeeAmount.tsx b/packages/babylon-core-ui/src/widgets/sections/FeesSection/BBNFeeAmount.tsx
@@ -1,4 +1,5 @@
 import { FeeItem } from "./FeeItem";
+import { BBN_DECIMAL_PLACES } from "../../../utils/constants";
 
 interface BBNFeeAmountProps {
   amount: number | string;
@@ -9,7 +10,7 @@ interface BBNFeeAmountProps {
   decimals?: number;
 }
 
-export function BBNFeeAmount({ amount, coinSymbol, hint, title, className, decimals = 5 }: BBNFeeAmountProps) {
+export function BBNFeeAmount({ amount, coinSymbol, hint, title, className, decimals = BBN_DECIMAL_PLACES }: BBNFeeAmountProps) {
   const formattedAmount = typeof amount === "number" ? amount.toFixed(decimals) : amount;
 
   return (
diff --git a/packages/babylon-core-ui/src/widgets/sections/FeesSection/BTCFeeAmount.tsx b/packages/babylon-core-ui/src/widgets/sections/FeesSection/BTCFeeAmount.tsx
@@ -1,4 +1,5 @@
 import { FeeItem } from "./FeeItem";
+import { BTC_DECIMAL_PLACES } from "../../../utils/constants";
 
 interface BTCFeeAmountProps {
   amount: number | string;
@@ -9,16 +10,19 @@ interface BTCFeeAmountProps {
   decimals?: number;
 }
 
-export function BTCFeeAmount({ amount, coinSymbol, hint, title, className, decimals = 8 }: BTCFeeAmountProps) {
-  const formattedAmount =
-    typeof amount === "number"
-      ? amount === 0
-        ? "0"
-        : (() => {
-            const str = amount.toFixed(decimals);
-            return str.replace(/0+$/, "").replace(/\.$/, "");
-          })()
-      : amount;
+export function BTCFeeAmount({ amount, coinSymbol, hint, title, className, decimals = BTC_DECIMAL_PLACES }: BTCFeeAmountProps) {
+  let formattedAmount: string;
+
+  if (typeof amount === "number") {
+    if (amount === 0) {
+      formattedAmount = "0";
+    } else {
+      const str = amount.toFixed(decimals);
+      formattedAmount = str.replace(/0+$/, "").replace(/\.$/, "");
+    }
+  } else {
+    formattedAmount = amount;
+  }
 
   return (
     <FeeItem title={title ?? `${coinSymbol} Network Fee`} hint={hint} className={className}>
diff --git a/packages/babylon-core-ui/src/widgets/sections/FeesSection/FeeItem.tsx b/packages/babylon-core-ui/src/widgets/sections/FeesSection/FeeItem.tsx
@@ -21,11 +21,7 @@ export function FeeItem({ title, children, className, hint }: FeeItemProps) {
         {title}
       </Text>
 
-      {!hint ? (
-        <Text as="div" className="flex items-center gap-2">
-          {children}
-        </Text>
-      ) : (
+      {hint ? (
         <div className="flex flex-col items-end">
           <Text as="div" className="flex items-center gap-2">
             {children}
@@ -34,6 +30,10 @@ export function FeeItem({ title, children, className, hint }: FeeItemProps) {
             {hint}
           </Text>
         </div>
+      ) : (
+        <Text as="div" className="flex items-center gap-2">
+          {children}
+        </Text>
       )}
     </div>
   );
diff --git a/packages/babylon-core-ui/src/widgets/sections/FeesSection/FeesSection.tsx b/packages/babylon-core-ui/src/widgets/sections/FeesSection/FeesSection.tsx
@@ -30,7 +30,6 @@ export function FeesSection({
   feeAmountHint,
   total,
   totalHint,
-
   bbnFeeAmount,
   bbnCoinSymbol,
   bbnFeeAmountHint,
diff --git a/packages/babylon-core-ui/src/widgets/sections/FeesSection/Total.tsx b/packages/babylon-core-ui/src/widgets/sections/FeesSection/Total.tsx
@@ -1,5 +1,6 @@
 import { Text } from "../../../components/Text";
 import { twMerge } from "tailwind-merge";
+import { BTC_DECIMAL_PLACES } from "../../../utils/constants";
 
 interface TotalProps {
   total: number | string;
@@ -10,16 +11,18 @@ interface TotalProps {
   decimals?: number;
 }
 
-export function Total({ total, coinSymbol, hint, title = "Total", className, decimals = 8 }: TotalProps) {
-  const formattedTotal =
-    typeof total === "number"
-      ? total === 0
-        ? "0"
-        : (() => {
-            const str = total.toFixed(decimals);
-            return str.replace(/0+$/, "").replace(/\.$/, "");
-          })()
-      : total;
+export function Total({ total, coinSymbol, hint, title = "Total", className, decimals = BTC_DECIMAL_PLACES }: TotalProps) {
+  let formattedTotal;
+  if (typeof total === "number") {
+    if (total === 0) {
+      formattedTotal = "0";
+    } else {
+      const str = total.toFixed(decimals);
+      formattedTotal = str.replace(/0+$/, "").replace(/\.$/, "");
+    }
+  } else {
+    formattedTotal = total;
+  }
 
   return (
     <div className={twMerge("flex flex-row items-start justify-between text-accent-primary", className)}>
diff --git a/packages/babylon-core-ui/src/widgets/sections/PreviewModal/PreviewModal.stories.tsx b/packages/babylon-core-ui/src/widgets/sections/PreviewModal/PreviewModal.stories.tsx
@@ -2,6 +2,12 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { PreviewModal } from "./PreviewModal";
 
+const PlaceholderIcon = ({ text, bgColor = "bg-primary-300" }: { text: string; bgColor?: string }) => (
+  <div className={`${bgColor} flex h-6 w-6 items-center justify-center rounded text-xs font-semibold text-white`}>
+    {text}
+  </div>
+);
+
 const meta: Meta<typeof PreviewModal> = {
   component: PreviewModal,
   tags: ["autodocs"],
@@ -15,25 +21,25 @@ export const Default: Story = {
   args: {
     open: true,
     processing: false,
-    onClose: () => {},
-    onProceed: () => {},
+    onClose: () => { },
+    onProceed: () => { },
     bsns: [
       {
-        icon: <span className="bg-primary-300 h-4 w-4 rounded-full" />,
+        icon: <PlaceholderIcon text="B1" bgColor="bg-black" />,
         name: "BSN 1",
       },
       {
-        icon: <span className="bg-primary-300 h-4 w-4 rounded-full" />,
+        icon: <PlaceholderIcon text="B2" bgColor="bg-black" />,
         name: "BSN 2",
       },
     ],
     finalityProviders: [
       {
-        icon: <span className="bg-secondary-300 h-4 w-4 rounded-full" />,
+        icon: <PlaceholderIcon text="F1" bgColor="bg-black" />,
         name: "FP 1",
       },
       {
-        icon: <span className="bg-secondary-300 h-4 w-4 rounded-full" />,
+        icon: <PlaceholderIcon text="F2" bgColor="bg-black" />,
         name: "FP 2",
       },
     ],
@@ -42,10 +48,10 @@ export const Default: Story = {
       feeRate: "5 sat/vB",
       transactionFees: "0.0001 BTC",
       term: {
-        blocks: "100",
-        duration: "~20 hours",
+        blocks: "60000 blocks",
+        duration: "~ 60 weeks",
       },
-      unbonding: "1 day",
+      unbonding: "~ 1 day",
       unbondingFee: "0 BTC",
     },
   },
diff --git a/packages/babylon-core-ui/src/widgets/sections/PreviewModal/PreviewModal.tsx b/packages/babylon-core-ui/src/widgets/sections/PreviewModal/PreviewModal.tsx

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export const BTC_DECIMAL_PLACES = 8;`
	`2`	`+export const BBN_DECIMAL_PLACES = 5;`