+
{addr ? (
<>
-
{addr.slice(0, 6)}…{addr.slice(-4)}
+
) : (
diff --git a/frontend/components/NetworkBadge/NetworkBadge.module.css b/frontend/components/NetworkBadge/NetworkBadge.module.css
new file mode 100644
index 0000000..2781a55
--- /dev/null
+++ b/frontend/components/NetworkBadge/NetworkBadge.module.css
@@ -0,0 +1,9 @@
+.badge {
+ font-size: 0.7rem;
+ font-weight: 600;
+ padding: 0.2rem 0.5rem;
+ border-radius: 4px;
+ background: rgba(34, 197, 94, 0.2);
+ color: #22c55e;
+ border: 1px solid rgba(34, 197, 94, 0.3);
+}
diff --git a/frontend/components/NetworkBadge/NetworkBadge.tsx b/frontend/components/NetworkBadge/NetworkBadge.tsx
new file mode 100644
index 0000000..3856c30
--- /dev/null
+++ b/frontend/components/NetworkBadge/NetworkBadge.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import styles from "./NetworkBadge.module.css";
+
+export function NetworkBadge() {
+ return (
+
+ Mainnet
+
+ );
+}
diff --git a/frontend/components/PaymentForm/PaymentForm.module.css b/frontend/components/PaymentForm/PaymentForm.module.css
index 4716d90..3c4f16d 100644
--- a/frontend/components/PaymentForm/PaymentForm.module.css
+++ b/frontend/components/PaymentForm/PaymentForm.module.css
@@ -20,3 +20,9 @@
border-radius: 8px;
font-weight: 600;
}
+
+.error {
+ color: #ef4444;
+ font-size: 0.85rem;
+ margin: 0;
+}
diff --git a/frontend/components/PaymentForm/PaymentForm.tsx b/frontend/components/PaymentForm/PaymentForm.tsx
index 08c1459..957bd58 100644
--- a/frontend/components/PaymentForm/PaymentForm.tsx
+++ b/frontend/components/PaymentForm/PaymentForm.tsx
@@ -2,26 +2,40 @@
import { useState } from "react";
import { useProcessPayment } from "@/hooks/useProcessPayment";
+import { isValidPrincipal } from "@/lib/utils";
import styles from "./PaymentForm.module.css";
+const MIN_STX = 1;
+
export function PaymentForm() {
const [recipient, setRecipient] = useState("");
const [amountStx, setAmountStx] = useState("");
+ const [error, setError] = useState("");
const { processPayment } = useProcessPayment();
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
+ setError("");
+ if (!isValidPrincipal(recipient.trim())) {
+ setError("Invalid Stacks address");
+ return;
+ }
const amount = BigInt(Math.floor(parseFloat(amountStx || "0") * 1e6));
- if (recipient && amount > BigInt(0)) processPayment(amount, recipient);
+ if (amount < BigInt(MIN_STX * 1e6)) {
+ setError(`Minimum ${MIN_STX} STX`);
+ return;
+ }
+ processPayment(amount, recipient.trim());
};
return (