Function PortfolioPanel

src/components/PortfolioPanel.tsx:50–289

({ markets, onSelectMarket }: PortfolioPanelProps)

}

export default function PortfolioPanel({ markets, onSelectMarket }: PortfolioPanelProps) {
  const { t } = useI18n();
  const connectedAddress = useWalletStore((s) => s.address);
  // Start with "" on both server and client to avoid hydration mismatch,
  // then load from localStorage + connected wallet in a single effect.
  const [savedWallet, setSavedWalletState] = useState<string>("");
  const [inputValue, setInputValue] = useState("");

  useEffect(() => {
    const stored = readSavedWallet();
    if (stored) {
      // Respect manually saved wallet — don't overwrite with connected address
      setSavedWalletState(stored);
    } else if (connectedAddress) {
      // No saved wallet yet: use connected address as default (don't persist yet)
      setSavedWalletState(connectedAddress);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // run once on mount

  // Do NOT auto-sync on wallet connect — user may be tracking a different wallet
  const [positions, setPositions] = useState<TraderPosition[]>([]);
  const [totalValue, setTotalValue] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showClosed, setShowClosed] = useState(false);
  const cancelRef = useRef(false);

  // Match positions to markets by conditionId → marketId, or by title fallback
  const enriched = useMemo<PositionWithMarket[]>(() => {
    return positions.map((p) => {
      // Try matching via conditionId against sub-market IDs first
      let market = markets.find((m) =>
        m.markets.some((sm) => sm.id === p.conditionId)
      );
      // Fallback: match by title substring
      if (!market && p.title) {
        const titleLower = p.title.toLowerCase();
        market = markets.find((m) => m.title.toLowerCase() === titleLower);
        if (!market) {
          market = markets.find((m) =>
            m.title.toLowerCase().includes(titleLower.slice(0, 30)) ||
            titleLower.includes(m.title.toLowerCase().slice(0, 30))
          );
        }
      }
      return { position: p, market };
    });
  }, [positions, markets]);

  const openPositions = useMemo(() => enriched.filter((e) => !e.position.redeemed), [enriched]);
  const closedPositions = useMemo(() => enriched.filter((e) => e.position.redeemed), [enriched]);
  const totalPnl = useMemo(
    () => openPositions.reduce((s, e) => s + e.position.cashPnl, 0),
    [openPositions]
  );

  const load = useCallback(async (wallet: string) => {