feat: implement multi-chain transaction history and storage system

README.md

@@ -25,6 +25,32 @@
 
 [Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
 
+## Transaction History
+
+BridgeWise UI SDK includes a multi-chain transaction history system for Stellar and EVM bridge flows.
+
+Usage example:
+
+```tsx
+import { useTransactionHistory, BridgeHistory } from '@bridgewise/ui-components';
+
+function HistoryPanel({ account }: { account: string }) {
+  const transactions = useTransactionHistory(account, {
+    filter: { status: 'confirmed' },
+    sortOrder: 'desc',
+  }).transactions;
+
+  return (
+    <>
+      <BridgeHistory account={account} />
+      <div>Total transactions: {transactions.length}</div>
+    </>
+  );
+}
+```
+
+You can configure local-only storage (default) or optional backend tracking via `TransactionProvider`.
+
 ## Project setup
 
 ```bash

libs/ui-components/README.md

@@ -0,0 +1,84 @@
+# @bridgewise/ui-components
+
+BridgeWise UI SDK components and hooks for cross-chain UX.
+
+## Transaction History
+
+The transaction history module provides a unified view across Stellar and EVM bridge executions.
+
+### Data model
+
+```ts
+interface BridgeTransaction {
+  txHash: string;
+  bridgeName: string;
+  sourceChain: string;
+  destinationChain: string;
+  sourceToken: string;
+  destinationToken: string;
+  amount: number;
+  fee: number;
+  slippagePercent: number;
+  status: 'pending' | 'confirmed' | 'failed';
+  timestamp: Date;
+  account: string;
+}
+```
+
+### Hook usage
+
+```tsx
+import { useTransactionHistory } from '@bridgewise/ui-components';
+
+const transactions = useTransactionHistory(account).transactions;
+```
+
+### Filtering and sorting
+
+```tsx
+const { transactions } = useTransactionHistory(account, {
+  filter: {
+    chain: 'ethereum',
+    bridgeName: 'layerzero',
+    status: 'confirmed',
+    startDate: new Date('2026-01-01'),
+    endDate: new Date('2026-12-31'),
+  },
+  sortOrder: 'desc',
+  includeBackend: true,
+});
+```
+
+### Demo component
+
+```tsx
+import { BridgeHistory } from '@bridgewise/ui-components';
+
+<BridgeHistory account={account} status="confirmed" />;
+```
+
+### Storage configuration
+
+By default, history is persisted in browser local storage.
+
+For server-side tracking, configure an optional backend in `TransactionProvider`:
+
+```tsx
+import {
+  TransactionProvider,
+  createHttpTransactionHistoryBackend,
+} from '@bridgewise/ui-components';
+
+const historyBackend = createHttpTransactionHistoryBackend({
+  baseUrl: 'https://api.bridgewise.example.com',
+});
+
+<TransactionProvider
+  historyConfig={{ backend: historyBackend }}
+  onTransactionTracked={(tx) => {
+    console.log('Tracked transaction', tx.txHash);
+  }}
+>
+  {children}
+</TransactionProvider>;
+```

libs/ui-components/jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  roots: ['<rootDir>/src'],
+  testMatch: ['**/__tests__/**/*.spec.ts', '**/?(*.)+(spec|test).ts'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  testPathIgnorePatterns: ['/dist/', '/node_modules/'],
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.json',
+      },
+    ],
+  },
+};

libs/ui-components/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@bridgewise/ui-components",
   "version": "0.1.0",
+  "scripts": {
+    "test": "jest --config jest.config.js"
+  },
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",

libs/ui-components/src/components/BridgeHistory/BridgeHistory.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import React from 'react';
+import { useTransactionHistory } from '../../hooks/useTransactionHistory';
+import type {
+  BridgeTransactionStatus,
+  TransactionHistoryConfig,
+  TransactionHistoryFilter,
+} from '../../transaction-history/types';
+
+export interface BridgeHistoryProps {
+  account: string;
+  chain?: string;
+  bridgeName?: string;
+  status?: BridgeTransactionStatus;
+  startDate?: Date;
+  endDate?: Date;
+  sortOrder?: 'asc' | 'desc';
+  includeBackend?: boolean;
+  historyConfig?: TransactionHistoryConfig;
+  emptyStateMessage?: string;
+}
+
+export const BridgeHistory: React.FC<BridgeHistoryProps> = ({
+  account,
+  chain,
+  bridgeName,
+  status,
+  startDate,
+  endDate,
+  sortOrder = 'desc',
+  includeBackend = false,
+  historyConfig,
+  emptyStateMessage = 'No transactions found for this account.',
+}) => {
+  const filter: TransactionHistoryFilter = {
+    chain,
+    bridgeName,
+    status,
+    startDate,
+    endDate,
+  };
+
+  const { transactions, loading } = useTransactionHistory(
+    account,
+    {
+      filter,
+      sortOrder,
+      includeBackend,
+    },
+    historyConfig,
+  );
+
+  if (!account) {
+    return <p>Connect a wallet to view transaction history.</p>;
+  }
+
+  if (loading) {
+    return <p>Loading transaction history...</p>;
+  }
+
+  if (transactions.length === 0) {
+    return <p>{emptyStateMessage}</p>;
+  }
+
+  return (
+    <div>
+      <h3>Bridge History</h3>
+      <ul>
+        {transactions.map((transaction) => (
+          <li key={`${transaction.account}:${transaction.txHash}`}>
+            <strong>{transaction.bridgeName}</strong> • {transaction.sourceChain} →{' '}
+            {transaction.destinationChain} • {transaction.amount} {transaction.sourceToken} •{' '}
+            {transaction.status} • {transaction.timestamp.toLocaleString()}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

libs/ui-components/src/components/BridgeHistory/index.ts

@@ -0,0 +1,2 @@
+export { BridgeHistory } from './BridgeHistory';
+export type { BridgeHistoryProps } from './BridgeHistory';