Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 22, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5c73635
fix(packages): implement multiple fixes to new components
jonybur Jul 20, 2025
3345e25
fix(packages): resolve ReDoS vulnerability in toKebabCase regex
jonybur Jul 20, 2025
785114f
fix(packages): always show counter even at 1/1
jonybur Jul 20, 2025
eef5518
fix(packages): remove regex
jonybur Jul 20, 2025
591a9c6
fix(packages): improve FinalityProviderItem
jonybur Jul 20, 2025
111ced6
feat(packages): pull main
jonybur Jul 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 3 additions & 25 deletions packages/babylon-core-ui/src/components/CounterButton/CounterButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ export const AlmostAtMax: Story = {

export const AtMaxCapacity: Story = {
args: {
counter: 5,
max: 5,
counter: 1,
max: 1,
},
};

Expand All @@ -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,
},
};
};
11 changes: 7 additions & 4 deletions packages/babylon-core-ui/src/components/CounterButton/CounterButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@ import { twJoin } from "tailwind-merge";
interface CounterButtonProps {
counter: number;
max: number;
onAdd: () => void;
alwaysShowCounter?: boolean;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is no longer needed, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will address this refactor in a follow up PR

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",
Expand All @@ -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>
)}
Expand Down
1 change: 0 additions & 1 deletion packages/babylon-core-ui/src/components/SubSection/index.ts
View file
Open in desktop

This file was deleted.

33 changes: 24 additions & 9 deletions packages/babylon-core-ui/src/elements/FinalityProviderItem/FinalityProviderItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() || "?";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bsnName is not an optional field. You don't need this ? thing here right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will address this refactor in a follow up PR


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 => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This method isn’t specific to this component. It should be abstracted and moved to a utility module for common use.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will address this refactor in a follow up PR

Expand All @@ -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">
Expand All @@ -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}
Expand Down
2 changes: 2 additions & 0 deletions packages/babylon-core-ui/src/utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const BTC_DECIMAL_PLACES = 8;
export const BBN_DECIMAL_PLACES = 5;
Copy link
Preview

Copilot AI Jul 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is trailing whitespace at the end of the line that should be removed.

Suggested change
export const BBN_DECIMAL_PLACES = 5;
export const BBN_DECIMAL_PLACES = 5;

Copilot uses AI. Check for mistakes.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jonybur linting

5 changes: 3 additions & 2 deletions packages/babylon-core-ui/src/widgets/sections/AmountSubsection/AmountSubsection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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="" />
Expand All @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion packages/babylon-core-ui/src/widgets/sections/FeesSection/BBNFeeAmount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { FeeItem } from "./FeeItem";
import { BBN_DECIMAL_PLACES } from "../../../utils/constants";

interface BBNFeeAmountProps {
amount: number | string;
Expand All @@ -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 (
Expand Down
24 changes: 14 additions & 10 deletions packages/babylon-core-ui/src/widgets/sections/FeesSection/BTCFeeAmount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { FeeItem } from "./FeeItem";
import { BTC_DECIMAL_PLACES } from "../../../utils/constants";

interface BTCFeeAmountProps {
amount: number | string;
Expand All @@ -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}>
Expand Down
10 changes: 5 additions & 5 deletions packages/babylon-core-ui/src/widgets/sections/FeesSection/FeeItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
);
Expand Down
1 change: 0 additions & 1 deletion packages/babylon-core-ui/src/widgets/sections/FeesSection/FeesSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export function FeesSection({
feeAmountHint,
total,
totalHint,

bbnFeeAmount,
bbnCoinSymbol,
bbnFeeAmountHint,
Expand Down
23 changes: 13 additions & 10 deletions packages/babylon-core-ui/src/widgets/sections/FeesSection/Total.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Copy link
Preview

Copilot AI Jul 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variable formattedTotal should be declared with an explicit type annotation (string) for better type safety and code clarity.

Suggested change
let formattedTotal;
let formattedTotal: string;

Copilot uses AI. Check for mistakes.

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)}>
Expand Down
24 changes: 15 additions & 9 deletions packages/babylon-core-ui/src/widgets/sections/PreviewModal/PreviewModal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand All @@ -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",
},
],
Expand All @@ -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",
},
},
Expand Down
Loading