new design components

package.json

@@ -98,6 +98,7 @@
     "@popperjs/core": "^2.11.8",
     "react-hook-form": "^7.54.0",
     "react-popper": "^2.3.0",
+    "decimal.js-light": "^2.5.1",
     "tw-colors": "^3.3.2"
   }
-}
+}

src/components/SubSection/SubSection.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SubSection } from "./SubSection";
+import { Text } from "../Text";
+
+const meta: Meta<typeof SubSection> = {
+  component: SubSection,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: <Text>Lorem ipsum dolor sit amet</Text>,
+  },
+};

src/components/SubSection/SubSection.tsx

@@ -0,0 +1,16 @@
+import type { CSSProperties, ReactNode } from "react";
+import { twJoin } from "tailwind-merge";
+
+export const SubSection = ({
+  children,
+  style,
+  className,
+}: {
+  children: ReactNode;
+  style?: CSSProperties;
+  className?: string;
+}) => (
+  <div className={twJoin("flex rounded bg-secondary-highlight p-4 text-accent-primary", className)} style={style}>
+    {children}
+  </div>
+);

src/components/SubSection/index.ts

@@ -0,0 +1 @@
+export { SubSection } from "./SubSection";

src/components/SubSection/index.tsx

@@ -0,0 +1 @@
+export { SubSection } from "./SubSection";

src/index.tsx

@@ -16,6 +16,7 @@ export * from "./components/Card";
 export * from "./components/Toggle";
 export * from "./components/List";
 export * from "./components/Badge";
+export * from "./components/SubSection";
 
 export * from "./widgets/form/Form";
 export * from "./widgets/form/NumberField";
@@ -26,7 +27,12 @@ export * from "./widgets/form/SelectField";
 export * from "./widgets/form/HiddenField";
 export * from "./widgets/form/hooks";
 
+export * from "./widgets/new-design/AmountSubsection";
+export * from "./widgets/new-design/FeesSection";
+export * from "./widgets/new-design/PreviewModal";
+
 export * from "./components/ListLegacy";
 
 export { ScrollLocker } from "./context/Dialog.context";
 export { useFormContext, useFormState, useWatch } from "react-hook-form";
+export { SubSection } from "./components/SubSection";

src/utils/helpers.ts

@@ -0,0 +1,62 @@
+import { Decimal } from "decimal.js-light";
+
+export interface FormatCurrencyOptions<T extends string = string> {
+  prefix?: T;
+  precision?: number;
+  zeroDisplay?: string;
+  format?: Intl.NumberFormatOptions;
+}
+
+const defaultFormatOptions: Required<FormatCurrencyOptions> = {
+  prefix: "$",
+  precision: 2,
+  zeroDisplay: "-",
+  format: {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  },
+};
+
+export function formatCurrency(currencyValue: number, options: FormatCurrencyOptions = {}): string {
+  const { prefix, precision, zeroDisplay, format } = {
+    ...defaultFormatOptions,
+    ...options,
+  };
+
+  if (currencyValue === 0) return zeroDisplay;
+
+  const formatted = currencyValue.toLocaleString("en", format ?? { maximumFractionDigits: precision });
+
+  return `${prefix}${formatted}`;
+}
+
+/**
+ * Converts token amount to formatted currency string
+ * @param amount The amount of token
+ * @param price The price of token in currency
+ * @param options Formatting options
+ */
+export function calculateTokenValueInCurrency(amount: number, price: number, options?: FormatCurrencyOptions): string {
+  const currencyValue = amount * price;
+  return formatCurrency(currencyValue, options);
+}
+
+/**
+ * Limits the number of decimal places of a given number to a specified maximum.
+ *
+ * @param value The original number that you want to limit the decimal places for.
+ * @param maxDecimals The maximum number of decimal places that the result should have.
+ * @returns The number rounded to the specified number of decimal places.
+ *
+ * @example
+ * maxDecimals(3.14159, 2);         // returns 3.14
+ * maxDecimals(1.005, 2);           // returns 1.01
+ * maxDecimals(10, 0);              // returns 10
+ * maxDecimals(0.00010000, 8);      // returns 0.0001
+ * maxDecimals(0.00010000, 8);      // returns 0.0001
+ * maxDecimals(3.141, 3);           // returns 3.141
+ * maxDecimals(3.149, 3);           // returns 3.149
+ */
+export const maxDecimals = (value: number, maxDecimals: number, rm?: number): number => {
+  return new Decimal(value).toDecimalPlaces(maxDecimals, rm).toNumber();
+};

src/widgets/new-design/AmountSubsection/AmountSubsection.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as yup from "yup";
+
+import { AmountSubsection } from "./AmountSubsection";
+import { Form } from "@/widgets/form/Form";
+
+const meta: Meta<typeof AmountSubsection> = {
+  component: AmountSubsection,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Define a simple validation schema for the field used in this story
+const schema = yup
+  .object()
+  .shape({
+    amount: yup.number().required().positive(),
+  })
+  .required();
+
+export const Default: Story = {
+  args: {
+    fieldName: "amount",
+    currencyIcon: "https://via.placeholder.com/40",
+    currencyName: "BBN",
+    placeholder: "Enter Amount",
+    displayBalance: true,
+    balanceDetails: {
+      balance: 1234.56789,
+      symbol: "BBN",
+      price: 0.25,
+      displayUSD: true,
+      decimals: 8,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Form onChange={console.log} schema={schema}>
+        <Story />
+      </Form>
+    ),
+  ],
+};

src/widgets/new-design/AmountSubsection/AmountSubsection.tsx

@@ -0,0 +1,95 @@
+import { HiddenField } from "@/widgets/form/HiddenField";
+import { SubSection } from "@/components/SubSection";
+import { useFormContext, useWatch } from "react-hook-form";
+
+import { calculateTokenValueInCurrency, maxDecimals } from "@/utils/helpers";
+
+interface BalanceDetails {
+  balance: number | string;
+  symbol: string;
+  price?: number;
+  displayUSD?: boolean;
+  decimals?: number;
+}
+
+interface Props {
+  fieldName: string;
+  currencyIcon: string;
+  currencyName: string;
+  placeholder?: string;
+  displayBalance?: boolean;
+  balanceDetails?: BalanceDetails;
+  min?: string;
+  step?: string;
+  autoFocus?: boolean;
+}
+
+export const AmountSubsection = ({
+  fieldName,
+  currencyIcon,
+  currencyName,
+  displayBalance,
+  placeholder = "Enter Amount",
+  balanceDetails,
+  min = "0",
+  step = "any",
+  autoFocus = true,
+}: Props) => {
+  const amount = useWatch({ name: fieldName, defaultValue: "" });
+  const { setValue } = useFormContext();
+
+  const amountValue = parseFloat((amount as string) || "0");
+  const amountUsd = calculateTokenValueInCurrency(amountValue, balanceDetails?.price ?? 0, {
+    zeroDisplay: "$0.00",
+  });
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(fieldName, e.target.value, {
+      shouldValidate: true,
+      shouldDirty: true,
+      shouldTouch: true,
+    });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <SubSection className="flex w-full flex-col content-center justify-between gap-4">
+      <div className="flex w-full flex-row content-center items-center justify-between font-normal">
+        <div className="flex items-center gap-2">
+          <img src={currencyIcon} alt={currencyName} className="h-10 max-h-[2.5rem] w-10 max-w-[2.5rem]" />
+          <div className="text-lg">{currencyName}</div>
+        </div>
+        <input
+          type="number"
+          value={amount ?? ""}
+          min={min}
+          step={step}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+          className="w-2/3 bg-transparent text-right text-lg outline-none"
+        />
+      </div>
+      <HiddenField name={fieldName} defaultValue="" />
+
+      {balanceDetails && displayBalance ? (
+        <div className="flex w-full flex-row content-center justify-between text-sm">
+          <div>
+            Stakable:{" "}
+            <span className="cursor-default">
+              {maxDecimals(Number(balanceDetails.balance), balanceDetails.decimals ?? 8)}
+            </span>{" "}
+            {balanceDetails.symbol}
+          </div>
+          {balanceDetails.displayUSD && balanceDetails.price !== undefined && <div>{amountUsd} USD</div>}
+        </div>
+      ) : null}
+    </SubSection>
+  );
+};

src/widgets/new-design/AmountSubsection/index.tsx

@@ -0,0 +1 @@
+export { AmountSubsection } from "./AmountSubsection";

src/widgets/new-design/FeesSection/BBNFeeAmount.tsx

@@ -0,0 +1,20 @@
+import { FeeItem } from "./FeeItem";
+
+interface BBNFeeAmountProps {
+  amount: number | string;
+  coinSymbol: string;
+  hint?: string;
+  title?: string;
+  className?: string;
+  decimals?: number;
+}
+
+export function BBNFeeAmount({ amount, coinSymbol, hint, title, className, decimals = 5 }: BBNFeeAmountProps) {
+  const formattedAmount = typeof amount === "number" ? amount.toFixed(decimals) : amount;
+
+  return (
+    <FeeItem title={title ?? `${coinSymbol} Network Fee`} hint={hint} className={className}>
+      {formattedAmount} {coinSymbol}
+    </FeeItem>
+  );
+}

src/widgets/new-design/FeesSection/BTCFeeAmount.tsx

@@ -0,0 +1,28 @@
+import { FeeItem } from "./FeeItem";
+
+interface BTCFeeAmountProps {
+  amount: number | string;
+  coinSymbol: string;
+  hint?: string;
+  title?: string;
+  className?: string;
+  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;
+
+  return (
+    <FeeItem title={title ?? `${coinSymbol} Network Fee`} hint={hint} className={className}>
+      {formattedAmount} {coinSymbol}
+    </FeeItem>
+  );
+}

src/widgets/new-design/FeesSection/BTCFeeRate.tsx

@@ -0,0 +1,24 @@
+import { FeeItem } from "./FeeItem";
+import { Button } from "../../../components/Button";
+import { FaPen } from "react-icons/fa6";
+
+interface BTCFeeRateProps {
+  value: number | string;
+  onEdit?: () => void;
+  title?: string;
+  className?: string;
+}
+
+export function BTCFeeRate({ value, onEdit, title = "Network Fee Rate", className }: BTCFeeRateProps) {
+  return (
+    <FeeItem title={title} className={className}>
+      <span>{value} sats/vB</span>
+
+      {onEdit && (
+        <Button size="small" variant="outlined" className="h-6 w-6 pl-1 text-secondary-strokeDark" onClick={onEdit}>
+          <FaPen size={16} className="text-secondary-strokeDark" />
+        </Button>
+      )}
+    </FeeItem>
+  );
+}