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/CounterButton/CounterButton.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { CounterButton } from "./CounterButton";
+
+const meta: Meta<typeof CounterButton> = {
+  component: CounterButton,
+  tags: ["autodocs"],
+  args: {
+    onAdd: fn(),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    counter: 0,
+    max: 5,
+  },
+};
+
+export const WithCounter: Story = {
+  args: {
+    counter: 2,
+    max: 5,
+  },
+};
+
+export const AlmostAtMax: Story = {
+  args: {
+    counter: 4,
+    max: 5,
+  },
+};
+
+export const AtMaxCapacity: Story = {
+  args: {
+    counter: 5,
+    max: 5,
+  },
+};
+
+export const AlwaysShowCounter: Story = {
+  args: {
+    counter: 0,
+    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,
+  },
+};

src/components/CounterButton/CounterButton.tsx

@@ -0,0 +1,37 @@
+import { AiOutlinePlus } from "react-icons/ai";
+import { twJoin } from "tailwind-merge";
+
+interface CounterButtonProps {
+  counter: number;
+  max: number;
+  onAdd: () => void;
+  alwaysShowCounter?: boolean;
+}
+
+export function CounterButton({ counter, max, onAdd, alwaysShowCounter = false }: CounterButtonProps) {
+  const isClickable = counter < max;
+  const showsCounter = (0 < counter && 1 < max) || (alwaysShowCounter && counter === 0);
+
+  return (
+    <div
+      className={twJoin(
+        "bg-primary-highlight flex overflow-hidden rounded-md border border-accent-primary",
+        isClickable && "cursor-pointer",
+        !showsCounter && !isClickable && "hidden",
+        !showsCounter && "w-10",
+      )}
+      onClick={isClickable ? onAdd : undefined}
+    >
+      {isClickable && (
+        <div className="flex h-10 w-10 items-center justify-center">
+          <AiOutlinePlus size={20} />
+        </div>
+      )}
+      {showsCounter && (
+        <div className="flex h-10 items-center border-l border-accent-primary px-2 text-sm sm:px-4 sm:text-base">
+          {counter}/{max}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/CounterButton/index.tsx

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

src/components/FinalityProviderItem/FinalityProviderItem.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { FinalityProviderItem } from "./FinalityProviderItem";
+
+const meta: Meta<typeof FinalityProviderItem> = {
+  component: FinalityProviderItem,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const mockProvider = {
+  logo_url: "/images/fps/lombard.jpeg",
+  rank: 1,
+  description: {
+    moniker: "Lombard Protocol",
+  },
+};
+
+const mockProviderWithoutLogo = {
+  logo_url: undefined,
+  rank: 5,
+  description: {
+    moniker: "Bitcoin Staking Provider",
+  },
+};
+
+export const Default: Story = {
+  args: {
+    bsnId: "bsn123",
+    bsnName: "Babylon",
+    bsnLogoUrl: "/images/fps/pumpbtc.jpeg",
+    provider: mockProvider,
+    onRemove: (bsnId) => alert(`Remove clicked for ${bsnId}`),
+  },
+};
+
+export const WithoutBsnLogo: Story = {
+  args: {
+    bsnId: "bsn456",
+    bsnName: "Babylon Chain",
+    bsnLogoUrl: undefined,
+    provider: mockProvider,
+    onRemove: (bsnId) => alert(`Remove clicked for ${bsnId}`),
+  },
+};
+
+export const WithoutProviderLogo: Story = {
+  args: {
+    bsnId: "bsn789",
+    bsnName: "Babylon Network",
+    bsnLogoUrl: "/images/fps/solv.jpeg",
+    provider: mockProviderWithoutLogo,
+    onRemove: (bsnId) => alert(`Remove clicked for ${bsnId}`),
+  },
+};
+
+export const HighRankProvider: Story = {
+  args: {
+    bsnId: "bsn999",
+    bsnName: "Babylon Testnet",
+    bsnLogoUrl: "/images/fps/pumpbtc.jpeg",
+    provider: {
+      logo_url: "/images/fps/solv.jpeg",
+      rank: 99,
+      description: {
+        moniker: "High Rank Provider",
+      },
+    },
+    onRemove: (bsnId) => alert(`Remove clicked for ${bsnId}`),
+  },
+};
+
+export const LongNames: Story = {
+  args: {
+    bsnId: "bsn_very_long_id_123456789",
+    bsnName: "Very Long Babylon Network Name That Might Wrap",
+    bsnLogoUrl: "/images/fps/lombard.jpeg",
+    provider: {
+      logo_url: "/images/fps/pumpbtc.jpeg",
+      rank: 42,
+      description: {
+        moniker: "Very Long Finality Provider Name That Should Handle Text Overflow",
+      },
+    },
+    onRemove: (bsnId) => alert(`Remove clicked for ${bsnId}`),
+  },
+};

src/components/FinalityProviderItem/FinalityProviderItem.tsx

@@ -0,0 +1,60 @@
+import { Avatar } from "../Avatar";
+import { Text } from "../Text";
+import { FinalityProviderLogo } from "../FinalityProviderLogo";
+
+interface ProviderDescription {
+  moniker?: string;
+}
+
+interface Provider {
+  logo_url?: string;
+  rank: number;
+  description?: ProviderDescription;
+}
+
+interface FinalityProviderItemProps {
+  bsnId: string;
+  bsnName: string;
+  bsnLogoUrl?: string;
+  provider: Provider;
+  onRemove: (bsnId?: string) => void;
+}
+
+export function FinalityProviderItem({ bsnId, bsnName, bsnLogoUrl, provider, onRemove }: FinalityProviderItemProps) {
+  if (!provider) return null;
+
+  const renderBsnLogo = () => {
+    if (!bsnLogoUrl) return null;
+
+    return <Avatar url={bsnLogoUrl} alt={bsnName} variant="rounded" size="tiny" className="mr-1" />;
+  };
+
+  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="flex flex-col justify-center text-accent-primary">
+          <div className="flex items-center text-xs text-accent-secondary">
+            {renderBsnLogo()}
+            {bsnName}
+          </div>
+          <Text as="div" className="text-base font-medium text-accent-primary">
+            {provider.description?.moniker}
+          </Text>
+        </div>
+      </div>
+
+      <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"
+      >
+        Remove
+      </button>
+    </div>
+  );
+}

src/components/FinalityProviderItem/index.ts

@@ -0,0 +1 @@
+export * from "./FinalityProviderItem";

src/components/FinalityProviderLogo/FinalityProviderLogo.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { FinalityProviderLogo } from "./FinalityProviderLogo";
+
+const meta: Meta<typeof FinalityProviderLogo> = {
+  component: FinalityProviderLogo,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WithImage: Story = {
+  args: {
+    logoUrl: "/images/fps/lombard.jpeg",
+    rank: 1,
+    moniker: "Lombard Protocol",
+  },
+};
+
+export const WithImageLarge: Story = {
+  args: {
+    logoUrl: "/images/fps/pumpbtc.jpeg",
+    rank: 2,
+    moniker: "PumpBTC",
+    size: "lg",
+  },
+};
+
+export const WithImageSmall: Story = {
+  args: {
+    logoUrl: "/images/fps/solv.jpeg",
+    rank: 3,
+    moniker: "Solv Protocol",
+    size: "sm",
+  },
+};
+
+export const FallbackWithMoniker: Story = {
+  args: {
+    rank: 1,
+    moniker: "Babylon Network",
+  },
+};
+
+export const FallbackWithoutMoniker: Story = {
+  args: {
+    rank: 5,
+  },
+};
+
+export const FallbackLarge: Story = {
+  args: {
+    rank: 2,
+    moniker: "Large Provider",
+    size: "lg",
+  },
+};
+
+export const FallbackSmall: Story = {
+  args: {
+    rank: 3,
+    moniker: "Small Provider",
+    size: "sm",
+  },
+};
+
+export const InvalidImage: Story = {
+  args: {
+    logoUrl: "/invalid-image-url.jpg",
+    rank: 4,
+    moniker: "Provider with Invalid Image",
+  },
+};