feat: add Lobstr wallet, dynamic portfolio comparison, OG meta tags, and embed widget params

Author: Anubhav Singh

frontend/package-lock.json

@@ -31,6 +31,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.5.0",
+    "react-router-dom": "^7.18.2",
     "recharts": "^2.8.0",
     "zod": "^4.3.6"
   },

frontend/package.json

@@ -0,0 +1,84 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react'
+import { WalletPicker } from './WalletPicker'
+
+const mockWalletManager = vi.hoisted(() => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getWalletType: vi.fn(),
+  getPublicKey: vi.fn(),
+}))
+
+vi.mock('../utils/walletManager', () => ({
+  walletManager: mockWalletManager,
+}))
+
+vi.mock('../lib/wallet', () => ({
+  SUPPORTED_WALLETS: [
+    { name: 'Freighter', type: 'freighter', installUrl: 'https://www.freighter.app/' },
+    { name: 'Rabet', type: 'rabet', installUrl: 'https://rabet.io/' },
+    { name: 'xBull', type: 'xbull', installUrl: 'https://xbull.app/' },
+    { name: 'LOBSTR', type: 'lobstr', installUrl: 'https://lobstr.co/' },
+    { name: 'WalletConnect', type: 'walletconnect', installUrl: 'https://walletconnect.com/' },
+  ],
+  getLastUsedWallet: vi.fn(() => null),
+  setLastUsedWallet: vi.fn(),
+  clearLastUsedWallet: vi.fn(),
+}))
+
+describe('WalletPicker', () => {
+  let mockOnConnect: (publicKey: string, walletType: string) => void
+  let mockOnError: (error: string) => void
+
+  beforeEach(() => {
+    cleanup()
+    vi.restoreAllMocks()
+
+    mockOnConnect = vi.fn()
+    mockOnError = vi.fn()
+
+    mockWalletManager.getWalletType.mockReturnValue(null)
+  })
+
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('renders all supported wallet options', () => {
+    render(<WalletPicker onConnect={mockOnConnect} onError={mockOnError} />)
+
+    expect(screen.getByText('Freighter')).toBeTruthy()
+    expect(screen.getByText('Rabet')).toBeTruthy()
+    expect(screen.getByText('xBull')).toBeTruthy()
+    expect(screen.getByText('LOBSTR')).toBeTruthy()
+    expect(screen.getByText('WalletConnect')).toBeTruthy()
+  })
+
+  it('detects Lobstr as installed when window.lobstr is available', () => {
+    window.lobstr = {} as any
+    render(<WalletPicker onConnect={mockOnConnect} onError={mockOnError} />)
+    expect(screen.getByText('Installed')).toBeTruthy()
+    delete (window as any).lobstr
+  })
+
+  it('calls walletManager.connect with lobstr when Lobstr is clicked', async () => {
+    window.lobstr = {} as any
+    const testPublicKey = 'GAlobstrtest1234567890abcdef1234567890abcdef1234567890abcdef'
+    mockWalletManager.connect.mockResolvedValue(testPublicKey)
+
+    render(<WalletPicker onConnect={mockOnConnect} onError={mockOnError} />)
+
+    const lobstrButton = screen.getByText('LOBSTR').closest('button')
+    expect(lobstrButton).toBeTruthy()
+
+    fireEvent.click(lobstrButton!)
+
+    await waitFor(() => {
+      expect(mockWalletManager.connect).toHaveBeenCalledWith('lobstr')
+      expect(mockOnConnect).toHaveBeenCalledWith(testPublicKey, 'LOBSTR')
+      expect(mockOnError).not.toHaveBeenCalled()
+    })
+
+    delete (window as any).lobstr
+  })
+})

frontend/src/components/WalletPicker.test.tsx

@@ -27,7 +27,7 @@ export const WalletPicker: React.FC<WalletPickerProps> = ({ onConnect, onError,
       case 'freighter': return !!window.freighter
       case 'rabet': return !!window.rabet
       case 'xbull': return !!window.xBull
-      case 'lobstr': return false // LOBSTR is usually mobile or extension
+      case 'lobstr': return !!window.lobstr
       case 'walletconnect': return false // Requires QR flow
       default: return false
     }

frontend/src/components/WalletPicker.tsx

@@ -38,7 +38,7 @@ const Compare: React.FC<PortfolioCompareProps> = ({ onNavigate, publicKey }) =>
   const togglePortfolio = (portfolioId: string) => {
     if (selectedPortfolioIds.includes(portfolioId)) {
       setSelectedPortfolioIds(prev => prev.filter(id => id !== portfolioId))
-    } else if (selectedPortfolioIds.length < 3) {
+    } else if (selectedPortfolioIds.length < 5) {
       setSelectedPortfolioIds(prev => [...prev, portfolioId])
     }
   }
@@ -101,7 +101,7 @@ const Compare: React.FC<PortfolioCompareProps> = ({ onNavigate, publicKey }) =>
             </div>
           </div>
           <div className="text-sm text-gray-600 dark:text-gray-400">
-            {selectedPortfolioIds.length}/3 {t('compare.selectPortfolios')}
+            {selectedPortfolioIds.length}/5 {t('compare.selectPortfolios')}
           </div>
         </div>
 
@@ -142,7 +142,7 @@ const Compare: React.FC<PortfolioCompareProps> = ({ onNavigate, publicKey }) =>
           <div className="space-y-6">
             <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
               <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">{t('compare.allocation')}</h2>
-              <div className={`grid gap-6 ${selectedPortfolioIds.length === 2 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1 md:grid-cols-3'}`}>
+              <div className={`grid gap-6 ${selectedPortfolioIds.length <= 2 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}>
                 {selectedPortfolios.map((portfolio, index) => {
                   const allocationData = getAllocationData(portfolio)
                   return (