Merge pull request #204 from zakkiyyat/feat/166-169

feat: ROI calculator, property badges, view toggle, tx retry

Author: LaGodxy

src/components/PropertyBadge.tsx

@@ -0,0 +1,64 @@
+const ONE_DAY_MS = 86_400_000;
+const SEVEN_DAYS_MS = 7 * ONE_DAY_MS;
+
+export type BadgeType = "New" | "Hot" | "Limited" | "Sold Out" | "Verified";
+
+interface BadgeProps {
+  type: BadgeType;
+}
+
+const BADGE_STYLES: Record<BadgeType, string> = {
+  New: "bg-blue-100 text-blue-700",
+  Hot: "bg-red-100 text-red-700",
+  Limited: "bg-orange-100 text-orange-700",
+  "Sold Out": "bg-gray-200 text-gray-600",
+  Verified: "bg-green-100 text-green-700",
+};
+
+export function PropertyBadge({ type }: BadgeProps) {
+  return (
+    <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${BADGE_STYLES[type]}`}>
+      {type}
+    </span>
+  );
+}
+
+interface PropertyBadgesProps {
+  listedAt: Date;
+  purchaseVolume24h: number;
+  tokensRemaining: number;
+  totalTokens: number;
+  isVerified: boolean;
+}
+
+export function resolvePropertyBadges({
+  listedAt,
+  purchaseVolume24h,
+  tokensRemaining,
+  totalTokens,
+  isVerified,
+}: PropertyBadgesProps): BadgeType[] {
+  const badges: BadgeType[] = [];
+  const age = Date.now() - listedAt.getTime();
+
+  if (tokensRemaining === 0) {
+    badges.push("Sold Out");
+  } else {
+    if (age <= SEVEN_DAYS_MS) badges.push("New");
+    if (purchaseVolume24h > 50) badges.push("Hot");
+    if (tokensRemaining / totalTokens < 0.1) badges.push("Limited");
+  }
+
+  if (isVerified) badges.push("Verified");
+  return badges;
+}
+
+export function PropertyBadgeList(props: PropertyBadgesProps) {
+  const badges = resolvePropertyBadges(props);
+  if (!badges.length) return null;
+  return (
+    <div className="flex flex-wrap gap-1">
+      {badges.map((b) => <PropertyBadge key={b} type={b} />)}
+    </div>
+  );
+}

src/components/ROICalculator.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+
+interface ROIResult {
+  totalReturn: number;
+  annualYield: number;
+  breakEvenMonths: number;
+}
+
+const SP500_ANNUAL_RATE = 0.1;
+
+function calcROI(amount: number, months: number, annualRate = 0.08): ROIResult {
+  const years = months / 12;
+  const totalReturn = amount * Math.pow(1 + annualRate, years) - amount;
+  const annualYield = annualRate * 100;
+  const breakEvenMonths = Math.ceil(Math.log(2) / Math.log(1 + annualRate) * 12);
+  return { totalReturn, annualYield, breakEvenMonths };
+}
+
+export default function ROICalculator() {
+  const [amount, setAmount] = useState(10000);
+  const [months, setMonths] = useState(12);
+
+  const roi = calcROI(amount, months);
+  const sp500 = calcROI(amount, months, SP500_ANNUAL_RATE);
+
+  return (
+    <div className="p-4 border rounded-xl space-y-4">
+      <h3 className="font-semibold text-lg">ROI Calculator</h3>
+
+      <div className="flex gap-4">
+        <label className="flex flex-col text-sm">
+          Investment (USD)
+          <input
+            type="number"
+            value={amount}
+            onChange={(e) => setAmount(Number(e.target.value))}
+            className="border rounded px-2 py-1 mt-1"
+          />
+        </label>
+        <label className="flex flex-col text-sm">
+          Holding Period (months)
+          <input
+            type="number"
+            value={months}
+            onChange={(e) => setMonths(Number(e.target.value))}
+            className="border rounded px-2 py-1 mt-1"
+          />
+        </label>
+      </div>
+
+      <div className="grid grid-cols-3 gap-2 text-center text-sm">
+        <div className="bg-green-50 rounded p-2">
+          <p className="font-medium">Total Return</p>
+          <p className="text-green-700">${roi.totalReturn.toFixed(2)}</p>
+        </div>
+        <div className="bg-blue-50 rounded p-2">
+          <p className="font-medium">Annual Yield</p>
+          <p className="text-blue-700">{roi.annualYield.toFixed(1)}%</p>
+        </div>
+        <div className="bg-yellow-50 rounded p-2">
+          <p className="font-medium">Break-even</p>
+          <p className="text-yellow-700">{roi.breakEvenMonths}mo</p>
+        </div>
+      </div>
+
+      <p className="text-xs text-gray-500">
+        S&P 500 equivalent return: <strong>${sp500.totalReturn.toFixed(2)}</strong>
+      </p>
+    </div>
+  );
+}

src/components/ViewToggle.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect } from "react";
+
+export type ViewMode = "grid" | "list";
+
+const STORAGE_KEY = "propchain:listing-view";
+
+export function useViewMode() {
+  const [mode, setMode] = useState<ViewMode>(() => {
+    if (typeof window === "undefined") return "grid";
+    return (localStorage.getItem(STORAGE_KEY) as ViewMode) ?? "grid";
+  });
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, mode);
+  }, [mode]);
+
+  return { mode, setMode };
+}
+
+interface ViewToggleProps {
+  mode: ViewMode;
+  onChange: (mode: ViewMode) => void;
+}
+
+export function ViewToggle({ mode, onChange }: ViewToggleProps) {
+  return (
+    <div className="flex border rounded-lg overflow-hidden text-sm">
+      <button
+        onClick={() => onChange("grid")}
+        className={`px-3 py-1.5 flex items-center gap-1 ${mode === "grid" ? "bg-indigo-600 text-white" : "text-gray-600 hover:bg-gray-100"}`}
+        aria-pressed={mode === "grid"}
+      >
+        <GridIcon /> Grid
+      </button>
+      <button
+        onClick={() => onChange("list")}
+        className={`px-3 py-1.5 flex items-center gap-1 ${mode === "list" ? "bg-indigo-600 text-white" : "text-gray-600 hover:bg-gray-100"}`}
+        aria-pressed={mode === "list"}
+      >
+        <ListIcon /> List
+      </button>
+    </div>
+  );
+}
+
+function GridIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+      <rect x="0" y="0" width="6" height="6" rx="1" />
+      <rect x="8" y="0" width="6" height="6" rx="1" />
+      <rect x="0" y="8" width="6" height="6" rx="1" />
+      <rect x="8" y="8" width="6" height="6" rx="1" />
+    </svg>
+  );
+}
+
+function ListIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+      <rect x="0" y="1" width="14" height="2" rx="1" />
+      <rect x="0" y="6" width="14" height="2" rx="1" />
+      <rect x="0" y="11" width="14" height="2" rx="1" />
+    </svg>
+  );
+}

src/hooks/useTxRetry.ts

@@ -0,0 +1,57 @@
+import { useState, useCallback } from "react";
+
+const MAX_RETRIES = 3;
+const RETRYABLE_CODES = new Set(["NETWORK_ERROR", "TIMEOUT", "UNPREDICTABLE_GAS_LIMIT"]);
+
+type TxStatus = "idle" | "pending" | "success" | "failed";
+
+interface UseTxRetryOptions {
+  onSuccess?: (hash: string) => void;
+  onFailure?: (error: Error) => void;
+}
+
+export function useTxRetry(
+  sendTx: (gasMultiplier: number) => Promise<string>,
+  options: UseTxRetryOptions = {}
+) {
+  const [status, setStatus] = useState<TxStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [attempts, setAttempts] = useState(0);
+
+  const execute = useCallback(
+    async (retryCount = 0) => {
+      setStatus("pending");
+      setError(null);
+      const gasMultiplier = 1 + retryCount * 0.2; // bump gas 20% per retry
+
+      try {
+        const hash = await sendTx(gasMultiplier);
+        setStatus("success");
+        setAttempts(0);
+        options.onSuccess?.(hash);
+      } catch (err: unknown) {
+        const e = err as { code?: string; message?: string };
+        const isRetryable = e.code ? RETRYABLE_CODES.has(e.code) : true;
+        const nextAttempt = retryCount + 1;
+
+        if (isRetryable && nextAttempt < MAX_RETRIES) {
+          setAttempts(nextAttempt);
+          setStatus("failed");
+          setError(`Transaction failed: ${e.message ?? "unknown error"}. Retry ${nextAttempt}/${MAX_RETRIES} available.`);
+        } else {
+          setStatus("failed");
+          setAttempts(0);
+          const finalError = new Error(e.message ?? "Transaction failed");
+          setError(isRetryable ? "Max retries reached." : `Non-retryable error: ${e.message}`);
+          options.onFailure?.(finalError);
+        }
+      }
+    },
+    [sendTx, options]
+  );
+
+  const retry = useCallback(() => execute(attempts), [execute, attempts]);
+  const canRetry = status === "failed" && attempts > 0 && attempts < MAX_RETRIES;
+
+  return { status, error, canRetry, attempts, execute: () => execute(0), retry };
+}