perf/refactor: optimize lending liquidations, interest caching, UI SDK, and tests (#770)

Author: Ojukwu-Chinedu

.github/workflows/contract-integration-tests.yml

@@ -0,0 +1,64 @@
+name: Contract Integration Tests
+
+on:
+  pull_request:
+    branches: [main]
+    paths:
+      - 'stellar-lend/contracts/**'
+      - 'stellar-lend/packages/test-framework/**'
+      - 'stellar-lend/benchmarks/**'
+      - '.github/workflows/contract-integration-tests.yml'
+  workflow_dispatch: {}
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  integration:
+    name: Integration, Fuzz Smoke, Gas Diff
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: dtolnay/rust-toolchain@stable
+        with:
+          components: rustfmt, clippy
+
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cargo/registry
+            ~/.cargo/git
+            stellar-lend/target
+          key: ${{ runner.os }}-contracts-integration-${{ hashFiles('stellar-lend/Cargo.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-contracts-integration-
+
+      - name: Check formatting
+        working-directory: stellar-lend
+        run: cargo fmt --all -- --check
+
+      - name: Run integration framework tests
+        working-directory: stellar-lend
+        run: cargo test --package test-framework --verbose
+
+      - name: Run lending tests
+        working-directory: stellar-lend
+        run: cargo test --package stellarlend-lending --verbose
+
+      - name: Run flash-loan liquidation integration tests
+        working-directory: stellar-lend
+        run: cargo test --package flash-loan-liquidation-tests --verbose
+
+      - name: Run gas benchmarks with regression detection
+        working-directory: stellar-lend
+        run: cargo run --release --bin run_benchmarks -- --compare benchmarks/baseline.json --output benchmark-results.json
+
+      - name: Upload gas diff report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: contract-gas-diff
+          path: |
+            stellar-lend/benchmark-results.json
+            stellar-lend/benchmark-results.md

package.json

@@ -6,7 +6,8 @@
   "workspaces": [
     "api",
     "oracle",
-    "packages/sdk"
+    "packages/sdk",
+    "packages/ui-lending"
   ],
   "scripts": {
     "prepare": "husky || true",

packages/ui-lending/.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-themes'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+
+export default config;

packages/ui-lending/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/ui-lending/package.json

@@ -15,6 +15,7 @@
   "scripts": {
     "build": "tsup",
     "test": "jest",
+    "typecheck": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -23,8 +24,15 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "storybook": "^8.4.7",
+    "tsup": "^8.3.5",
     "typescript": "^5.0.0"
   },
   "keywords": ["stellar", "lending", "defi", "react", "components"],

packages/ui-lending/stories/HealthMeter.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { HealthMeter } from '../src/components/HealthMeter';
+import { createTheme } from '../src/utils/theme';
+
+const meta: Meta<typeof HealthMeter> = {
+  title: 'Lending/HealthMeter',
+  component: HealthMeter,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof HealthMeter>;
+
+const safeHealth = {
+  value: 2.42,
+  status: 'safe' as const,
+  collateralValue: 24_200,
+  borrowedValue: 8_000,
+  liquidationThreshold: 0.8,
+};
+
+export const Safe: Story = {
+  args: { health: safeHealth },
+};
+
+export const Liquidatable: Story = {
+  args: {
+    health: {
+      ...safeHealth,
+      value: 0.94,
+      status: 'liquidatable',
+      borrowedValue: 20_600,
+    },
+  },
+};
+
+export const Compact: Story = {
+  args: { health: safeHealth, showDetails: false },
+};
+
+export const DarkMode: Story = {
+  args: { health: safeHealth, theme: createTheme('dark') },
+  parameters: { backgrounds: { default: 'dark' } },
+};
+
+export const Loading: Story = {
+  args: { health: safeHealth, isLoading: true },
+};

packages/ui-lending/stories/LiquidationRiskGauge.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { LiquidationRiskGauge } from '../src/components/LiquidationRiskGauge';
+import { createTheme } from '../src/utils/theme';
+
+const meta: Meta<typeof LiquidationRiskGauge> = {
+  title: 'Lending/LiquidationRiskGauge',
+  component: LiquidationRiskGauge,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof LiquidationRiskGauge>;
+
+const risk = {
+  healthFactor: 1.18,
+  liquidationPrice: 0.82,
+  currentPrice: 1,
+  safetyBuffer: 0.18,
+  riskLevel: 'high' as const,
+};
+
+export const HighRisk: Story = {
+  args: { risk },
+};
+
+export const Critical: Story = {
+  args: {
+    risk: {
+      ...risk,
+      healthFactor: 0.96,
+      safetyBuffer: 0.02,
+      riskLevel: 'critical',
+    },
+  },
+};
+
+export const DarkMode: Story = {
+  args: { risk, theme: createTheme('dark') },
+  parameters: { backgrounds: { default: 'dark' } },
+};
+
+export const Loading: Story = {
+  args: { risk, isLoading: true },
+};

packages/ui-lending/stories/PoolCard.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { PoolCard } from '../src/components/PoolCard';
+import { createTheme } from '../src/utils/theme';
+
+const meta: Meta<typeof PoolCard> = {
+  title: 'Lending/PoolCard',
+  component: PoolCard,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof PoolCard>;
+
+const pool = {
+  id: 'xlm-usdc',
+  asset: 'USDC Market',
+  symbol: 'USDC',
+  totalSupply: 4_200_000,
+  totalBorrow: 2_730_000,
+  supplyApy: 4.18,
+  borrowApy: 6.92,
+  utilization: 0.65,
+  collateralFactor: 0.8,
+  liquidationThreshold: 0.85,
+  price: 1,
+  isActive: true,
+};
+
+export const Active: Story = {
+  args: { pool },
+};
+
+export const WithActions: Story = {
+  args: {
+    pool,
+    onSupply: (selected) => alert(`Supply ${selected.symbol}`),
+    onBorrow: (selected) => alert(`Borrow ${selected.symbol}`),
+  },
+};
+
+export const Inactive: Story = {
+  args: { pool: { ...pool, isActive: false } },
+};
+
+export const DarkMode: Story = {
+  args: { pool, theme: createTheme('dark') },
+  parameters: { backgrounds: { default: 'dark' } },
+};
+
+export const Loading: Story = {
+  args: { pool, isLoading: true },
+};

packages/ui-lending/stories/RateChart.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { RateChart } from '../src/components/RateChart';
+import { createTheme } from '../src/utils/theme';
+
+const meta: Meta<typeof RateChart> = {
+  title: 'Lending/RateChart',
+  component: RateChart,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof RateChart>;
+
+const data = Array.from({ length: 12 }, (_, i) => ({
+  timestamp: Date.now() - (11 - i) * 86_400_000,
+  supplyApy: 3.2 + i * 0.09,
+  borrowApy: 5.8 + i * 0.14,
+  utilization: 0.51 + i * 0.015,
+}));
+
+export const SupplyAndBorrow: Story = {
+  args: { data },
+};
+
+export const BorrowOnly: Story = {
+  args: { data, showSupply: false },
+};
+
+export const Empty: Story = {
+  args: { data: [], isEmpty: true },
+};
+
+export const DarkMode: Story = {
+  args: { data, theme: createTheme('dark') },
+  parameters: { backgrounds: { default: 'dark' } },
+};
+
+export const Loading: Story = {
+  args: { data, isLoading: true },
+};

packages/ui-lending/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  external: ['react', 'react-dom'],
+});