) => {
const val = e.target.value;
if (/^\d*\.?\d{0,7}$/.test(val) || val === "") {
setAmount(val);
- setError(null);
+ setValidationError(null);
}
};
const handleMax = () => {
setAmount(balance.toFixed(7));
- setError(null);
+ setValidationError(null);
};
const handleSubmit = async () => {
+ // Validation errors stay inline — these are user input issues, not tx errors
if (!isValid) {
- setError(
+ setValidationError(
entered.isGreaterThan(balance)
? "Amount exceeds wallet balance."
: "Enter a valid amount greater than 0."
);
return;
}
+
setIsSubmitting(true);
- setError(null);
- try {
- await onBuyFraction(toStroops(amount), invoice.id);
+ setValidationError(null);
+
+ // executeTx wraps the call in try/catch and fires the correct toast:
+ // - "User Rejected Signature" → warning toast
+ // - Network / Contract error → error toast
+ // Returns null if the transaction failed (toast already shown).
+ const result = await executeTx(() =>
+ onBuyFraction(toStroops(amount), invoice.id)
+ );
+
+ setIsSubmitting(false);
+
+ if (result !== null) {
onClose();
- } catch (err: unknown) {
- setError(err instanceof Error ? err.message : "Transaction failed. Try again.");
- } finally {
- setIsSubmitting(false);
}
};
@@ -129,7 +140,9 @@ export default function FractionalPurchaseModal({
APY
-
{invoice.apy}%
+
+ {invoice.apy}%
+
Days Left
@@ -175,8 +188,8 @@ export default function FractionalPurchaseModal({
{invoice.currency}
- {error && (
- {error}
+ {validationError && (
+ {validationError}
)}
Up to 7 decimal places (Stellar precision)
diff --git a/src/components/ui/ToastContext.tsx b/src/components/ui/ToastContext.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/hooks/useTxWithToast.ts b/src/hooks/useTxWithToast.ts
new file mode 100644
index 0000000..03f8b36
--- /dev/null
+++ b/src/hooks/useTxWithToast.ts
@@ -0,0 +1,59 @@
+"use client";
+
+/**
+ * useTxWithToast.ts
+ * Wraps Freighter transaction calls in try/catch and fires the
+ * correct toast on failure using react-hot-toast.
+ *
+ * Issue #181 - BETAIL-BOYS/TradeFlow-Web
+ * Place at: src/hooks/useTxWithToast.ts
+ */
+
+import { useCallback } from "react";
+import toast from "react-hot-toast";
+import { parseFreighterError, ERROR_TYPE } from "../lib/freighterErrors";
+
+interface UseTxWithToastReturn {
+ executeTx: (fn: () => Promise) => Promise;
+ showTxError: (error: unknown) => void;
+}
+
+export function useTxWithToast(): UseTxWithToastReturn {
+ const showTxError = useCallback((error: unknown) => {
+ const { type, message } = parseFreighterError(error);
+
+ if (type === ERROR_TYPE.USER_REJECTED) {
+ toast(message, {
+ icon: "⚠️",
+ style: {
+ background: "#FEF9C3",
+ color: "#854D0E",
+ border: "1px solid #FDE047",
+ },
+ });
+ } else {
+ toast.error(message, {
+ style: {
+ background: "#FEE2E2",
+ color: "#991B1B",
+ border: "1px solid #FCA5A5",
+ },
+ });
+ }
+ }, []);
+
+ const executeTx = useCallback(
+ async (fn: () => Promise): Promise => {
+ try {
+ const result = await fn();
+ return result;
+ } catch (error: unknown) {
+ showTxError(error);
+ return null;
+ }
+ },
+ [showTxError]
+ );
+
+ return { executeTx, showTxError };
+}
\ No newline at end of file
diff --git a/src/lib/freighterErrors.ts b/src/lib/freighterErrors.ts
new file mode 100644
index 0000000..58e0a8e
--- /dev/null
+++ b/src/lib/freighterErrors.ts
@@ -0,0 +1,110 @@
+/**
+ * freighterErrors.ts
+ * Parses Freighter / Soroban errors into human-readable UI strings.
+ * Issue #181 - BETAIL-BOYS/TradeFlow-Web
+ */
+
+export const ERROR_TYPE = {
+ USER_REJECTED: "USER_REJECTED",
+ NETWORK_ERROR: "NETWORK_ERROR",
+ CONTRACT_ERROR: "CONTRACT_ERROR",
+ UNKNOWN: "UNKNOWN",
+} as const;
+
+export type ErrorType = (typeof ERROR_TYPE)[keyof typeof ERROR_TYPE];
+
+export interface ParsedTxError {
+ type: ErrorType;
+ message: string;
+}
+
+const USER_REJECTED_PATTERNS: string[] = [
+ "user rejected",
+ "user declined",
+ "rejected by user",
+ "transaction was rejected",
+ "signing rejected",
+ "cancelled",
+ "canceled",
+];
+
+const SOROBAN_CODE_MAP: Record = {
+ 1: "The contract rejected this operation.",
+ 2: "Wasm execution ran out of resources.",
+ 3: "Contract storage limit exceeded.",
+ 4: "Contract call stack overflow.",
+ 10: "Transaction sequence number is out of order.",
+ 11: "Insufficient account balance to cover fees.",
+ 12: "Transaction fee is too low.",
+ 13: "Transaction has already been processed.",
+ 20: "Network request timed out. Please try again.",
+ 21: "RPC node is temporarily unavailable.",
+ 22: "Simulation failed before submission.",
+ 23: "Transaction was dropped from the mempool.",
+};
+
+function extractMessage(error: unknown): string {
+ if (typeof error === "string") return error;
+ if (error instanceof Error) return error.message ?? "";
+ if (error !== null && typeof error === "object") {
+ const e = error as Record;
+ return String(e["message"] ?? e["error"] ?? e["detail"] ?? JSON.stringify(error));
+ }
+ return String(error ?? "");
+}
+
+export function parseFreighterError(error: unknown): ParsedTxError {
+ const raw = extractMessage(error);
+ const lower = raw.toLowerCase();
+
+ const isRejected = USER_REJECTED_PATTERNS.some((p) => lower.includes(p));
+ if (isRejected) {
+ return {
+ type: ERROR_TYPE.USER_REJECTED,
+ message: "You cancelled the transaction. No funds were moved.",
+ };
+ }
+
+ const codeMatch = raw.match(/\b(\d+)\b/);
+ if (codeMatch) {
+ const code = parseInt(codeMatch[1], 10);
+ const mapped = SOROBAN_CODE_MAP[code];
+ if (mapped) {
+ return {
+ type: code >= 20 ? ERROR_TYPE.NETWORK_ERROR : ERROR_TYPE.CONTRACT_ERROR,
+ message: mapped,
+ };
+ }
+ }
+
+ if (
+ lower.includes("network") ||
+ lower.includes("timeout") ||
+ lower.includes("connection") ||
+ lower.includes("rpc") ||
+ lower.includes("fetch")
+ ) {
+ return {
+ type: ERROR_TYPE.NETWORK_ERROR,
+ message: "A network error occurred. Check your connection and try again.",
+ };
+ }
+
+ if (
+ lower.includes("contract") ||
+ lower.includes("invoke") ||
+ lower.includes("wasm") ||
+ lower.includes("scval") ||
+ lower.includes("simulation")
+ ) {
+ return {
+ type: ERROR_TYPE.CONTRACT_ERROR,
+ message: "The contract rejected this transaction. Please try again.",
+ };
+ }
+
+ return {
+ type: ERROR_TYPE.UNKNOWN,
+ message: "Something went wrong. Please try again.",
+ };
+}
\ No newline at end of file