feat(packages): add TableElement and adapt FinalityProviderItem to use it (#45)

* feat(packages): add TableElement and adapt FianlityProviderItem to use it

* Update packages/babylon-core-ui/src/widgets/sections/TableElement/TableElement.tsx

Co-authored-by: Copilot <[email protected]>

* fix(packages): add export

* fix(packages): fix import

---------

Co-authored-by: Copilot <[email protected]>

Author: jonybur

packages/babylon-core-ui/src/elements/FinalityProviderItem/FinalityProviderItem.stories.tsx

@@ -91,3 +91,22 @@ export const LongNames: Story = {
     onRemove: (bsnId: string) => alert(`Remove clicked for ${bsnId}`),
   },
 };
+
+export const WithoutRemove: Story = {
+  args: {
+    bsnId: "bsn321",
+    bsnName: "Babylon Network",
+    bsnLogoUrl: "/images/fps/lombard.jpeg",
+    provider: mockProvider,
+  },
+};
+
+export const AddressOnly: Story = {
+  args: {
+    bsnId: "bsnAddr",
+    bsnName: "",
+    bsnLogoUrl: undefined,
+    address: "dfe19b1234567890f732de",
+    provider: mockProvider,
+  },
+};

packages/babylon-core-ui/src/elements/FinalityProviderItem/FinalityProviderItem.tsx

@@ -12,15 +12,16 @@ interface Provider {
   description?: ProviderDescription;
 }
 
-interface FinalityProviderItemProps {
+export interface FinalityProviderItemProps {
   bsnId: string;
   bsnName: string;
   bsnLogoUrl?: string;
+  address?: string;
   provider: Provider;
-  onRemove: (id?: string) => void;
+  onRemove?: (id?: string) => void;
 }
 
-export function FinalityProviderItem({ bsnId, bsnName, bsnLogoUrl, provider, onRemove }: FinalityProviderItemProps) {
+export function FinalityProviderItem({ bsnId, bsnName, bsnLogoUrl, address, provider, onRemove }: FinalityProviderItemProps) {
   if (!provider) return null;
 
   const renderBsnLogo = () => {
@@ -29,6 +30,27 @@ export function FinalityProviderItem({ bsnId, bsnName, bsnLogoUrl, provider, onR
     return <Avatar url={bsnLogoUrl} alt={bsnName} variant="rounded" size="tiny" className="mr-1" />;
   };
 
+  const shortenAddress = (value: string): string => {
+    const visibleChars = 6;
+    if (!value || value.length <= visibleChars * 2) return value;
+    return `${value.slice(0, visibleChars)}...${value.slice(-visibleChars)}`;
+  };
+
+  const renderChainOrAddress = () => {
+    if (address) {
+      return (
+        <div className="text-xs text-accent-secondary">{shortenAddress(address)}</div>
+      );
+    }
+
+    return (
+      <div className="flex items-center text-xs text-accent-secondary">
+        {renderBsnLogo()}
+        {bsnName}
+      </div>
+    );
+  };
+
   return (
     <div className="flex flex-row items-center justify-between">
       <div className="flex h-10 flex-row gap-2">
@@ -39,22 +61,19 @@ export function FinalityProviderItem({ bsnId, bsnName, bsnLogoUrl, provider, onR
           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>
+          {renderChainOrAddress()}
           <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>
+      {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"
+        >
+          Remove
+        </button> : null}
     </div>
   );
 }

packages/babylon-core-ui/src/index.tsx

@@ -28,6 +28,7 @@ export * from "./widgets/form/RadioField";
 export * from "./widgets/form/SelectField";
 export * from "./widgets/form/HiddenField";
 export * from "./widgets/form/hooks";
+export * from "./widgets/sections/TableElement";
 
 export * from "./widgets/sections/AmountSubsection";
 export * from "./widgets/sections/FinalityProviderSubsection";

packages/babylon-core-ui/src/widgets/sections/TableElement/TableElement.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TableElement } from "./TableElement";
+
+const meta: Meta<typeof TableElement> = {
+    component: TableElement,
+    tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const sampleAttributes = {
+    Balance: "100.123 BTC",
+    "USD Value": "$4,567.89",
+    Status: "Active",
+};
+
+const mockProvider = {
+    logo_url: undefined,
+    rank: 1,
+    description: {
+        moniker: "Lombard Protocol",
+    },
+};
+
+const providerItem = {
+    bsnId: "bsn123",
+    bsnName: "Babylon",
+    address: "dfe19b1234567890f732de",
+    provider: mockProvider,
+    // No onRemove to showcase address/noRemove mode
+};
+
+export const Default: Story = {
+    args: {
+        providerItemProps: providerItem,
+        attributes: sampleAttributes,
+        onSelect: () => alert("Select clicked"),
+    },
+};
+
+export const Selected: Story = {
+    args: {
+        providerItemProps: providerItem,
+        attributes: sampleAttributes,
+        isSelected: true,
+        onSelect: () => alert("Select clicked"),
+    },
+};
+
+export const NotSelectable: Story = {
+    args: {
+        providerItemProps: providerItem,
+        attributes: sampleAttributes,
+        isSelectable: false,
+        onSelect: () => alert("Select clicked"),
+    },
+};
+
+export const WithoutHeader: Story = {
+    args: {
+        providerItemProps: providerItem,
+        attributes: sampleAttributes,
+    },
+};

packages/babylon-core-ui/src/widgets/sections/TableElement/TableElement.tsx

@@ -0,0 +1,47 @@
+import { Button } from "../../../components/Button";
+import { FinalityProviderItem, FinalityProviderItemProps } from "../../../elements/FinalityProviderItem/FinalityProviderItem";
+
+interface TableElementProps {
+    providerItemProps: FinalityProviderItemProps;
+    attributes: Record<string, React.ReactNode>;
+    isSelected?: boolean;
+    isSelectable?: boolean;
+    onSelect?: () => void;
+}
+
+export const TableElement = ({
+    attributes,
+    providerItemProps,
+    isSelected = false,
+    isSelectable = true,
+    onSelect,
+}: TableElementProps) => {
+    return (
+        <div className="bg-secondary-highlight h-[316px] overflow-hidden p-4 flex flex-col rounded justify-between">
+            <FinalityProviderItem {...providerItemProps} />
+
+            <div className="w-full h-px bg-secondary-strokeLight" />
+
+            {Object.entries(attributes).map(([label, value]) => (
+                <div
+                    key={label}
+                    className="text-sm flex flex-row justify-between first:mt-0 mt-1"
+                >
+                    <div className="text-accent-secondary">{label}</div>
+                    <div className="text-accent-primary font-medium">{value}</div>
+                </div>
+            ))}
+
+            {onSelect && (
+                <Button
+                    className="mt-4"
+                    onClick={onSelect}
+                    disabled={!isSelectable}
+                    variant={isSelected ? "contained" : "outlined"}
+                >
+                    {isSelected ? "Selected" : "Select"}
+                </Button>
+            )}
+        </div>
+    );
+}; 

packages/babylon-core-ui/src/widgets/sections/TableElement/index.tsx

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