Service layers (#311)

* feat: add service layers

* refactorise the entire UI of cards and modal to hook up with the service layer code

Author: jrwbabylonlab

packages/babylon-core-ui/src/components/ActivityList/ActivityList.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ActivityList } from "./ActivityList";
+
+const meta: Meta<typeof ActivityList> = {
+  title: "Components/Lists/ActivityList",
+  component: ActivityList,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A container component for displaying a list of items with an add button. Commonly used for vault positions or activity feeds.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    onNewItem: () => console.log("New item clicked"),
+  },
+};
+
+export const VaultPositions: Story = {
+  args: {
+    onNewItem: () => console.log("Create new vault position"),
+  },
+};
+
+export const WithCustomStyling: Story = {
+  args: {
+    className: "border-2 border-primary-light",
+    onNewItem: () => console.log("Custom styled list"),
+  },
+};
+

packages/babylon-core-ui/src/components/ActivityList/ActivityList.tsx

@@ -0,0 +1,46 @@
+import { Card } from "../Card";
+import { IconButton } from "../Button";
+import { PlusIcon } from "../Icons";
+import type { PropsWithChildren } from "react";
+
+/**
+ * ActivityList component - Container for displaying a list of items with an add button
+ *
+ * @example
+ * ```tsx
+ * <ActivityList onNewItem={() => handleNewVault()}>
+ *   <ActivityCard data={vaultActivityData} />
+ *   <ActivityCard data={vaultActivityData} />
+ * </ActivityList>
+ * ```
+ */
+export interface ActivityListProps {
+  onNewItem?: () => void;
+  className?: string;
+}
+
+export function ActivityList({
+  onNewItem,
+  className,
+  children,
+}: PropsWithChildren<ActivityListProps>) {
+  return (
+    <Card className={className}>
+      <div className="flex flex-col gap-4">
+        {children}
+        
+        <div className="flex justify-center py-4">
+          <IconButton
+            variant="outlined"
+            size="large"
+            onClick={onNewItem}
+            aria-label="Create new item"
+          >
+            <PlusIcon />
+          </IconButton>
+        </div>
+      </div>
+    </Card>
+  );
+}
+

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

@@ -0,0 +1,3 @@
+export { ActivityList } from "./ActivityList";
+export type { ActivityListProps } from "./ActivityList";
+

packages/babylon-core-ui/src/components/BorrowCard/BorrowCard.stories.tsx

@@ -2,6 +2,6 @@ export { Copy } from './Copy';
 export { Toggle } from './Toggle';
 export { DisplayHash } from './DisplayHash';
 export * from './Avatar';
-export * from './BorrowCard';
+export * from './ActivityList';
 export * from './Text';
 

packages/babylon-core-ui/src/components/BorrowCard/BorrowCard.tsx

@@ -17,7 +17,7 @@ export * from "./components/Card";
 export * from "./components/Toggle";
 export * from "./components/List";
 export * from "./components/Badge";
-export * from "./components/BorrowCard";
+export * from "./components/ActivityList";
 export * from "./components/SubSection";
 export * from "./components/CounterButton";
 export * from "./components/Menu";

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

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { useAppKitAccount } from "@reown/appkit/react";
+
 import { useChainConnector } from "./useChainConnector";
 
 interface UseAppKitBridgeOptions {

packages/babylon-core-ui/src/components/index.ts

@@ -1,19 +1,19 @@
 import { useAppKitBridge } from '@babylonlabs-io/wallet-connector';
-import { Borrow } from './components/ui';
-import { PegInTest } from './components/examples/PegInTest';
+import { Activities } from './components/Activities';
 
 // TODO: Uncomment this when we have a way to test the contract queries
-import ContractQueryExample from "./components/examples/ContractQueryExample";
+// import { PegInTest } from './components/examples/PegInTest';
+// import ContractQueryExample from "./components/examples/ContractQueryExample";
 
 export default function VaultLayout() {
   // Initialize AppKit bridge for ETH wallet connection
   useAppKitBridge();
 
   return (
     <div className="container mx-auto flex max-w-[760px] flex-1 flex-col gap-12 px-4 py-8">
-      <ContractQueryExample />
-      <PegInTest />
-      <Borrow />
+      {/* <ContractQueryExample /> */}
+      {/* <PegInTest /> */}
+      <Activities />
     </div>
   );
 }