-
+
Back to dashboard
-
Platform analytics
-
Public signals that highlight traction, usage, and stream growth.
+
+ Platform analytics
+
+
+ Public signals that highlight traction, usage, and stream growth.
+
-
- )
+ );
}
diff --git a/app/app/create/create-form.tsx b/app/app/create/create-form.tsx
index 118a4cb..9ddb611 100644
--- a/app/app/create/create-form.tsx
+++ b/app/app/create/create-form.tsx
@@ -1,42 +1,1226 @@
-'use client'
-
-import { useState, useCallback, useEffect, useRef } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { AlertTriangle, ArrowLeft, ArrowRight, Info, Loader2, Copy, Clock } from 'lucide-react'
-import Link from 'next/link'
-import { toast } from 'sonner'
-import { StrKey } from '@stellar/stellar-sdk'
-import { RequireWallet } from '@/components/layout/require-wallet'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import {
+ AlertTriangle,
+ ArrowLeft,
+ ArrowRight,
+ Info,
+ Loader2,
+ Copy,
+ Clock,
+} from "lucide-react";
+import Link from "next/link";
+import { toast } from "sonner";
+import { StrKey } from "@stellar/stellar-sdk";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
-} from '@/components/ui/select'
-import { useContract } from '@/hooks/use-contract'
-import { useWallet } from '@/hooks/use-wallet'
-import { getAllTokens, saveCustomToken, checkAccountInfo } from '@/lib/stellar'
-import { getTokenMetadata, getTokenBalance } from '@/lib/contract'
-import { parseTokenAmount, formatTokenAmount } from '@/lib/stream-utils'
-import { StreamPreview } from '@/components/streams/stream-preview'
-import { CreateConfirmation } from '@/components/streams/create-confirmation'
-import { TxPreviewDialog } from '@/components/ui/tx-preview-dialog'
-import { addAddressBookEntry, getAddressBookEntries, touchAddressBookEntry } from '@/lib/address-book'
-import { buildNextRunAt, saveRecurringRule, type RecurrenceCadence } from '@/lib/recurring'
-import { useFormDraft, clearExpiredDrafts } from '@/hooks/use-form-draft'
-import { StreamTemplates, type StreamTemplate } from '@/components/streams/stream-templates'
-import type { TokenInfo } from '@/types/stream'
-
-// ... rest of the create form code from page.tsx
-// This is a placeholder - the actual component is too large to copy here
-// In a real implementation, you would move the entire CreateForm component here
+} from "@/components/ui/select";
+import { useContract } from "@/hooks/use-contract";
+import { useWallet } from "@/hooks/use-wallet";
+import { getAllTokens, saveCustomToken, checkAccountInfo } from "@/lib/stellar";
+import { getTokenMetadata, getTokenBalance } from "@/lib/contract";
+import { parseTokenAmount, formatTokenAmount } from "@/lib/stream-utils";
+import { StreamPreview } from "@/components/streams/stream-preview";
+import { CreateConfirmation } from "@/components/streams/create-confirmation";
+import { TxPreviewDialog } from "@/components/ui/tx-preview-dialog";
+import {
+ addAddressBookEntry,
+ getAddressBookEntries,
+ touchAddressBookEntry,
+} from "@/lib/address-book";
+import {
+ buildNextRunAt,
+ saveRecurringRule,
+ type RecurrenceCadence,
+} from "@/lib/recurring";
+import { useFormDraft, clearExpiredDrafts } from "@/hooks/use-form-draft";
+import {
+ StreamTemplates,
+ type StreamTemplate,
+} from "@/components/streams/stream-templates";
+import { useTokenPrice } from "@/hooks/use-token-price";
+import type { TokenInfo } from "@/types/stream";
+import { useNetwork } from "@/components/providers/network-provider";
+
+const CUSTOM_VALUE = "__custom__";
+
+function toUnixSeconds(localDatetimeValue: string): bigint {
+ return BigInt(Math.floor(new Date(localDatetimeValue).getTime() / 1000));
+}
+
+function localDatetimeMin(offsetSeconds = 0): string {
+ const d = new Date(Date.now() + offsetSeconds * 1000);
+ // Format as YYYY-MM-DDTHH:mm in local time (not UTC)
+ const pad = (n: number) => String(n).padStart(2, "0");
+ return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function addDuration(baseDatetime: string, seconds: number): string {
+ const base = new Date(baseDatetime);
+ const d = new Date(base.getTime() + seconds * 1000);
+ const pad = (n: number) => String(n).padStart(2, "0");
+ return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function detectTimezone(): string {
+ try {
+ return Intl.DateTimeFormat().resolvedOptions().timeZone;
+ } catch {
+ return "UTC";
+ }
+}
+
+function getTimezoneOffset(): string {
+ const offset = -new Date().getTimezoneOffset();
+ const sign = offset >= 0 ? "+" : "-";
+ const h = Math.floor(Math.abs(offset) / 60);
+ const m = Math.abs(offset) % 60;
+ return `UTC${sign}${h}${m > 0 ? `:${String(m).padStart(2, "0")}` : ""}`;
+}
+
+const COMMON_TIMEZONES = [
+ "UTC",
+ "America/New_York",
+ "America/Chicago",
+ "America/Denver",
+ "America/Los_Angeles",
+ "America/Sao_Paulo",
+ "Europe/London",
+ "Europe/Paris",
+ "Europe/Berlin",
+ "Asia/Dubai",
+ "Asia/Kolkata",
+ "Asia/Singapore",
+ "Asia/Tokyo",
+ "Australia/Sydney",
+] as const;
+
+const DURATION_PRESETS = [
+ { label: "1 week", seconds: 7 * 24 * 3600 },
+ { label: "1 month", seconds: 30 * 24 * 3600 },
+ { label: "3 months", seconds: 90 * 24 * 3600 },
+ { label: "6 months", seconds: 180 * 24 * 3600 },
+ { label: "1 year", seconds: 365 * 24 * 3600 },
+] as const;
+
+const CLIFF_PRESETS = [
+ { label: "No cliff", seconds: 0 },
+ { label: "1 month", seconds: 30 * 24 * 3600 },
+ { label: "3 months", seconds: 90 * 24 * 3600 },
+] as const;
+
+interface FormState {
+ recipient: string;
+ tokenAddress: string;
+ amount: string;
+ startDate: string;
+ endDate: string;
+ hasCliff: boolean;
+ cliffDate: string;
+ cliffAmount: string;
+}
export function CreateForm() {
- // This would contain all the CreateForm logic from the original page.tsx
- // For now, returning a placeholder to avoid breaking the build
- return
Create Form Component
+ const router = useRouter();
+ const searchParams = useSearchParams();
+ const cloneId = searchParams.get("clone");
+ const { address: walletAddress } = useWallet();
+ const { network } = useNetwork();
+ const { createStream, estimateFee, pending, error } = useContract();
+ const [feeEstimate, setFeeEstimate] = useState
(null);
+ const [estimatingFee, setEstimatingFee] = useState(false);
+ const [showTxPreview, setShowTxPreview] = useState(false);
+ const [showConfirmation, setShowConfirmation] = useState(false);
+
+ const [tokens, setTokens] = useState(() =>
+ getAllTokens(network).map((t) => ({ ...t })),
+ );
+ const [isCustom, setIsCustom] = useState(false);
+ const [customAddress, setCustomAddress] = useState("");
+ const [customLoading, setCustomLoading] = useState(false);
+ const [customError, setCustomError] = useState(null);
+ const [customToken, setCustomToken] = useState(null);
+ const [addressBookEntries, setAddressBookEntries] = useState(() =>
+ getAddressBookEntries(),
+ );
+ const [recurrenceCadence, setRecurrenceCadence] =
+ useState("none");
+
+ // Issue #29: balance state
+ const [tokenBalance, setTokenBalance] = useState(null);
+ const [balanceLoading, setBalanceLoading] = useState(false);
+
+ // Issue #103: recipient account validation
+ const [recipientAccountInfo, setRecipientAccountInfo] = useState<{
+ exists: boolean;
+ funded: boolean;
+ transactionCount: number;
+ } | null>(null);
+ const [recipientChecking, setRecipientChecking] = useState(false);
+ const [recipientWarningAcknowledged, setRecipientWarningAcknowledged] =
+ useState(false);
+
+ const defaultStart = localDatetimeMin(60);
+ const defaultEnd = localDatetimeMin(60 + 30 * 24 * 3600);
+
+ const [form, setForm] = useState(() => {
+ const newStart = localDatetimeMin(60);
+ const durationSecs = searchParams.get("duration");
+ const cliffSecs = searchParams.get("cliff");
+ const hasCliff = cliffSecs !== null && cliffSecs !== "0";
+ const newEnd = durationSecs
+ ? addDuration(newStart, Number(durationSecs))
+ : localDatetimeMin(60 + 30 * 24 * 3600);
+ const newCliff =
+ hasCliff && cliffSecs
+ ? addDuration(newStart, Number(cliffSecs))
+ : newStart;
+
+ return {
+ recipient: searchParams.get("recipient") ?? "",
+ tokenAddress: searchParams.get("token") ?? tokens[0]?.address ?? "",
+ amount: searchParams.get("amount") ?? "",
+ startDate: newStart,
+ endDate: newEnd,
+ hasCliff,
+ cliffDate: newCliff,
+ cliffAmount: searchParams.get("cliffAmount") ?? "",
+ };
+ });
+
+ const [errors, setErrors] = useState<
+ Partial>
+ >({});
+ const [selectedTemplateId, setSelectedTemplateId] = useState<
+ string | undefined
+ >(undefined);
+
+ // Issue #168: draft state
+ const [showDraftBanner, setShowDraftBanner] = useState(false);
+ const [draftSavedAt, setDraftSavedAt] = useState(null);
+ const isFirstMount = useRef(true);
+
+ // Issue #170: timezone state
+ const [selectedTimezone, setSelectedTimezone] = useState(() =>
+ detectTimezone(),
+ );
+ const timezoneOffset = getTimezoneOffset();
+
+ const selectedToken =
+ isCustom && customToken
+ ? customToken
+ : (tokens.find((t) => t.address === form.tokenAddress) ?? tokens[0]);
+
+ // Issue #186: USD conversion
+ const [usdInputMode, setUsdInputMode] = useState(false);
+ const [usdAmount, setUsdAmount] = useState("");
+ const {
+ usdPrice,
+ stale: priceStale,
+ loading: priceLoading,
+ } = useTokenPrice(selectedToken?.symbol ?? "");
+
+ const supportsUsd = usdPrice !== null;
+ const tokenAmountNum = parseFloat(form.amount) || 0;
+ const usdEquivalent =
+ supportsUsd && tokenAmountNum > 0
+ ? (tokenAmountNum * usdPrice).toFixed(2)
+ : null;
+
+ const amountPerSecondUsd =
+ usdEquivalent &&
+ (() => {
+ const dur =
+ (new Date(form.endDate).getTime() -
+ new Date(form.startDate).getTime()) /
+ 1000;
+ if (dur <= 0) return null;
+ const usdPerSec = parseFloat(usdEquivalent) / dur;
+ return usdPerSec < 0.01
+ ? usdPerSec.toExponential(2)
+ : usdPerSec.toFixed(4);
+ })();
+
+ function handleUsdAmountChange(val: string) {
+ setUsdAmount(val);
+ if (usdPrice && val) {
+ const tokenAmt = parseFloat(val) / usdPrice;
+ if (!isNaN(tokenAmt))
+ set("amount", tokenAmt.toFixed(selectedToken?.decimals ?? 7));
+ } else {
+ set("amount", "");
+ }
+ }
+
+ // Fetch balance when token or wallet changes
+ useEffect(() => {
+ if (!walletAddress || !selectedToken) return;
+ setTokenBalance(null);
+ setBalanceLoading(true);
+ getTokenBalance(selectedToken.address, walletAddress)
+ .then(setTokenBalance)
+ .catch(() => setTokenBalance(null))
+ .finally(() => setBalanceLoading(false));
+ }, [selectedToken?.address, walletAddress]);
+
+ // Issue #103: Check recipient account info when address changes
+ useEffect(() => {
+ const recipient = form.recipient.trim();
+ if (!recipient || !StrKey.isValidEd25519PublicKey(recipient)) {
+ setRecipientAccountInfo(null);
+ setRecipientWarningAcknowledged(false);
+ return;
+ }
+
+ setRecipientChecking(true);
+ checkAccountInfo(recipient, network)
+ .then((info) => {
+ setRecipientAccountInfo(info);
+ setRecipientWarningAcknowledged(false);
+ })
+ .catch(() => {
+ setRecipientAccountInfo(null);
+ })
+ .finally(() => {
+ setRecipientChecking(false);
+ });
+ }, [form.recipient, network]);
+
+ // Issue #168: wire up draft hook
+ const { loadDraft, restore, discard } = useFormDraft(
+ `create-stream-${walletAddress ?? "anonymous"}`,
+ form,
+ (draft) => {
+ setForm(draft);
+ },
+ true,
+ );
+
+ // Check for existing draft on first mount
+ useEffect(() => {
+ if (!isFirstMount.current) return;
+ isFirstMount.current = false;
+ clearExpiredDrafts();
+ const entry = loadDraft();
+ if (entry) {
+ setDraftSavedAt(entry.savedAt);
+ setShowDraftBanner(true);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ async function handleCustomTokenLookup() {
+ if (!customAddress || customAddress.length < 56) {
+ setCustomError(
+ "Enter a valid Stellar contract address (56 chars, starts with C)",
+ );
+ return;
+ }
+ setCustomLoading(true);
+ setCustomError(null);
+ setCustomToken(null);
+ try {
+ const meta = await getTokenMetadata(customAddress);
+ if (!meta) {
+ setCustomError(
+ "Could not fetch token metadata. Verify this is a valid SEP-41 token contract.",
+ );
+ return;
+ }
+ setCustomToken(meta);
+ saveCustomToken(network, meta);
+ setTokens(getAllTokens(network).map((t) => ({ ...t })));
+ set("tokenAddress", meta.address);
+ } catch {
+ setCustomError("Failed to query token contract");
+ } finally {
+ setCustomLoading(false);
+ }
+ }
+
+ function set(key: K, value: FormState[K]) {
+ setForm((prev) => ({ ...prev, [key]: value }));
+ setErrors((prev) => ({ ...prev, [key]: undefined }));
+ }
+
+ function validate(): boolean {
+ const newErrors: Partial> = {};
+
+ // Issue #28: use StrKey for proper Stellar address validation
+ if (
+ !form.recipient.trim() ||
+ !StrKey.isValidEd25519PublicKey(form.recipient.trim())
+ ) {
+ newErrors.recipient = "Invalid Stellar address format";
+ }
+ // Issue #103: require warning acknowledgment for unfunded accounts
+ if (
+ recipientAccountInfo &&
+ !recipientAccountInfo.exists &&
+ !recipientWarningAcknowledged
+ ) {
+ newErrors.recipient =
+ "Please acknowledge the warning about this recipient address";
+ }
+ if (
+ !form.amount ||
+ isNaN(Number(form.amount)) ||
+ Number(form.amount) <= 0
+ ) {
+ newErrors.amount = "Enter a valid amount greater than 0";
+ }
+ // Issue #29: validate against balance
+ if (form.amount && tokenBalance !== null) {
+ const parsed = parseTokenAmount(form.amount, selectedToken.decimals);
+ if (parsed > tokenBalance) {
+ newErrors.amount = `Amount exceeds your balance (${formatTokenAmount(tokenBalance, selectedToken.decimals, 4)} ${selectedToken.symbol})`;
+ }
+ }
+ if (isCustom && !customToken) {
+ newErrors.tokenAddress = "Look up a valid custom token first";
+ }
+ const start = new Date(form.startDate).getTime();
+ const end = new Date(form.endDate).getTime();
+ if (!form.endDate || end <= start) {
+ newErrors.endDate = "End date must be after start date";
+ }
+ if (form.hasCliff) {
+ const cliff = new Date(form.cliffDate).getTime();
+ if (!form.cliffDate || cliff < start || cliff > end) {
+ newErrors.cliffDate = "Cliff must be between start and end date";
+ }
+ if (form.cliffAmount && Number(form.cliffAmount) > Number(form.amount)) {
+ newErrors.cliffAmount = "Cliff amount cannot exceed total amount";
+ }
+ }
+
+ setErrors(newErrors);
+ return Object.keys(newErrors).length === 0;
+ }
+
+ const buildInput = useCallback(() => {
+ const startTime = toUnixSeconds(form.startDate);
+ const endTime = toUnixSeconds(form.endDate);
+ const cliffTime = form.hasCliff ? toUnixSeconds(form.cliffDate) : startTime;
+ const cliffAmount =
+ form.hasCliff && form.cliffAmount
+ ? parseTokenAmount(form.cliffAmount, selectedToken.decimals)
+ : 0n;
+ return {
+ recipient: form.recipient.trim(),
+ token: selectedToken,
+ totalAmount: parseTokenAmount(form.amount, selectedToken.decimals),
+ startTime,
+ endTime,
+ cliffTime,
+ cliffAmount,
+ };
+ }, [form, selectedToken]);
+
+ async function handleEstimateFee() {
+ if (!validate()) return;
+ setEstimatingFee(true);
+ setFeeEstimate(null);
+ try {
+ const estimate = await estimateFee(buildInput());
+ if (estimate) {
+ setFeeEstimate(estimate.estimatedFeeXlm);
+ }
+ } catch {
+ setFeeEstimate(null);
+ } finally {
+ setEstimatingFee(false);
+ }
+ }
+
+ function handleSubmit(e: React.FormEvent) {
+ e.preventDefault();
+ if (!validate()) return;
+ // Show tx simulation preview first; user proceeds to Freighter from there.
+ setShowTxPreview(true);
+ }
+
+ async function handleConfirmedCreate() {
+ try {
+ const input = buildInput();
+ const id = await createStream(input);
+ touchAddressBookEntry(input.recipient, input.recipient);
+ setAddressBookEntries(getAddressBookEntries());
+
+ if (recurrenceCadence !== "none") {
+ saveRecurringRule({
+ cadence: recurrenceCadence,
+ nextRunAt: buildNextRunAt(Date.now(), recurrenceCadence),
+ lastCreatedAt: Date.now(),
+ streamId: id,
+ recipient: input.recipient,
+ tokenSymbol: input.token.symbol,
+ amount: input.totalAmount.toString(),
+ });
+ }
+
+ discard();
+ setShowConfirmation(false);
+ toast.success("Stream created", {
+ description: `Stream #${id} is live.`,
+ });
+ router.push(`/app/stream/${id}`);
+ } catch {
+ // error is exposed via useContract
+ }
+ }
+
+ function handleTemplateSelect(template: StreamTemplate) {
+ setSelectedTemplateId(template.id);
+ const newStart = localDatetimeMin(60);
+ const newEnd = addDuration(newStart, template.durationSeconds);
+ const hasCliff = template.cliffSeconds > 0;
+ const newCliff = hasCliff
+ ? addDuration(newStart, template.cliffSeconds)
+ : newStart;
+
+ setForm((prev) => {
+ const amount = prev.amount;
+ const cliffAmount =
+ hasCliff && template.cliffPercent > 0 && amount
+ ? String(Math.floor((Number(amount) * template.cliffPercent) / 100))
+ : "";
+ return {
+ ...prev,
+ startDate: newStart,
+ endDate: newEnd,
+ hasCliff,
+ cliffDate: newCliff,
+ cliffAmount,
+ };
+ });
+ setErrors({});
+ }
+
+ const input = showTxPreview || showConfirmation ? buildInput() : null;
+ const durationSeconds =
+ (new Date(form.endDate).getTime() - new Date(form.startDate).getTime()) /
+ 1000;
+ const amountPerSecond =
+ input && durationSeconds > 0
+ ? input.totalAmount / BigInt(Math.floor(durationSeconds))
+ : 0n;
+
+ return (
+
+ {/* Back */}
+
+
+ Back to dashboard
+
+
+
+
+ Create a stream
+
+
+ Tokens unlock continuously to the recipient from start to end.
+
+
+
+
+
+
+ {cloneId && (
+
+
+
+ Duplicating Stream #{cloneId} — form pre-filled with its parameters.
+
+
+ )}
+
+ {/* Issue #168: Draft restore banner */}
+ {showDraftBanner && (
+
+
+
+
+ You have an unsaved draft from{" "}
+ {draftSavedAt
+ ? new Date(draftSavedAt).toLocaleTimeString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ })
+ : "earlier"}
+ .
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ {/* Live preview sidebar */}
+
+
+
+ {/* Step 1: dry-run simulation preview */}
+ {input && (
+
{
+ setShowTxPreview(false);
+ setShowConfirmation(true);
+ }}
+ onCancel={() => setShowTxPreview(false)}
+ pending={false}
+ />
+ )}
+
+ {/* Step 2: confirmation + fee details → Freighter signing */}
+ {input && (
+ setShowConfirmation(false)}
+ pending={pending}
+ feeEstimate={feeEstimate}
+ recipient={input.recipient}
+ token={input.token}
+ totalAmount={input.totalAmount}
+ startTime={input.startTime}
+ endTime={input.endTime}
+ cliffTime={input.cliffTime}
+ cliffAmount={input.cliffAmount}
+ amountPerSecond={amountPerSecond}
+ />
+ )}
+
- {/* Back */}
-
-
- Back to dashboard
-
-
-
-
Create a stream
-
- Tokens unlock continuously to the recipient from start to end.
-
-
-
-
-
-
- {cloneId && (
-
-
-
- Duplicating Stream #{cloneId} — form pre-filled with its parameters.
-
-
- )}
-
- {/* Issue #168: Draft restore banner */}
- {showDraftBanner && (
-
-
-
-
- You have an unsaved draft from{' '}
- {draftSavedAt
- ? new Date(draftSavedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
- : 'earlier'}
- .
-
-
-
-
-
-
-
- )}
-
-
-
-
- {/* Live preview sidebar */}
-
-
-
- {/* Step 1: dry-run simulation preview */}
- {input && (
-
{ setShowTxPreview(false); setShowConfirmation(true) }}
- onCancel={() => setShowTxPreview(false)}
- pending={false}
- />
- )}
-
- {/* Step 2: confirmation + fee details → Freighter signing */}
- {input && (
- setShowConfirmation(false)}
- pending={pending}
- feeEstimate={feeEstimate}
- recipient={input.recipient}
- token={input.token}
- totalAmount={input.totalAmount}
- startTime={input.startTime}
- endTime={input.endTime}
- cliffTime={input.cliffTime}
- cliffAmount={input.cliffAmount}
- amountPerSecond={amountPerSecond}
- />
- )}
-
- {streams.map((s) => (
-
- ))}
-
- )
-}
-
-// ─── FilterBar ────────────────────────────────────────────────────────────────
-
-function FilterBar({
- tokens,
- filters,
-}: {
- tokens: string[]
- filters: ReturnType
-}) {
- const { search, status, token, sort, update, clear, isActive } = filters
-
- return (
-
- {/* Search + sort row */}
-
-
-
- update('q', e.target.value)}
- className="pl-9"
- />
- {search && (
-
- )}
-
-
-
-
- {/* Filter chips row */}
-
-
-
- {tokens.length > 0 && (
-
- )}
-
- {isActive && (
-
-
- Clear filters
-
- )}
-
-
- {/* Header */}
-
-
-
Dashboard
-
- Your active and historical token streams.
-
-
-
- {withdrawableStreams.length > 0 && (
-
- )}
-
-
-
-
- {/* Stats */}
- {loading ?
:
}
-
-
-
-
- {/* Search / filter */}
-
-
- {/* Stream list */}
-
-
-
- All ({filteredAll.length}{filteredAll.length !== all.length ? `/${all.length}` : ''})
-
-
- Receiving ({filteredReceived.length}{filteredReceived.length !== received.length ? `/${received.length}` : ''})
-
-
- Sending ({filteredSent.length}{filteredSent.length !== sent.length ? `/${sent.length}` : ''})
-
- All ({all.length})
- Receiving ({received.length})
- Sending ({sent.length})
- Activity
-
-
-
-
- All ({all.length})
- Receiving ({received.length})
- Sending ({sent.length})
-
-
-
- {loading ? (
-
- {[0, 1, 2, 4].map((i) => )}
-
- ) : all.length === 0 ? (
-
- ) : (
-
- {all.map((s) => (
-
- ))}
-
- )}
-
-
-
- {loading ? (
-
- {[0, 1].map((i) => )}
-
- ) : received.length === 0 ? (
-
-
-
-
- {filteredReceived.length === 0 && received.length === 0 ? (
-
- ) : (
-
- )}
-
-
- {all.length === 0 ? (
-
- ) : (
-
- {all.map((s) => (
-
-
-
- ))}
-
- )}
-
-
-
- {received.length === 0 ? (
-
- ) : (
-
- {received.map((s) => (
-
-
-
- ))}
-
- )}
-
-
-
- {loading ? (
-
- {[0, 1].map((i) => )}
-
- ) : sent.length === 0 ? (
- {filteredSent.length === 0 && sent.length === 0 ? (
-
- ) : (
-
- )}
-
-
-
-
-
-
-
- {sent.length === 0 ? (
-
- ) : (
-
- {sent.map((s) => (
-
-
-
- ))}
-
- )}
-
-
-
-
{label}
{children}
- )
+ );
}
// ─── Withdraw dialog ────────────────────────────────────────────────────────
@@ -118,40 +136,46 @@ function WithdrawDialog({
withdrawable,
token,
}: {
- open: boolean
- onClose: () => void
- streamId: string
- withdrawable: bigint
- token: { symbol: string; decimals: number; address: string }
+ open: boolean;
+ onClose: () => void;
+ streamId: string;
+ withdrawable: bigint;
+ token: { symbol: string; decimals: number; address: string };
}) {
- const { withdraw, pending, error } = useContract()
- const { network } = useNetwork()
- const [inputAmount, setInputAmount] = useState('')
- const [showFeeEstimate, setShowFeeEstimate] = useState(false)
+ const { withdraw, pending, error } = useContract();
+ const { network } = useNetwork();
+ const [inputAmount, setInputAmount] = useState("");
+ const [showFeeEstimate, setShowFeeEstimate] = useState(false);
- const max = formatTokenAmount(withdrawable, token.decimals, token.decimals)
- const parsed = inputAmount ? parseTokenAmount(inputAmount, token.decimals) : 0n
- const invalid = parsed <= 0n || parsed > withdrawable
+ const max = formatTokenAmount(withdrawable, token.decimals, token.decimals);
+ const parsed = inputAmount
+ ? parseTokenAmount(inputAmount, token.decimals)
+ : 0n;
+ const invalid = parsed <= 0n || parsed > withdrawable;
// Calculate estimated fees
- const estimatedFee = TYPICAL_FEES.withdraw.typical
- const feeBreakdown = calculateFeeBreakdown(estimatedFee)
- const withdrawFeeHigh = isHighFee(estimatedFee, TYPICAL_FEES.withdraw.typical)
+ const estimatedFee = TYPICAL_FEES.withdraw.typical;
+ const feeBreakdown = calculateFeeBreakdown(estimatedFee);
+ const withdrawFeeHigh = isHighFee(
+ estimatedFee,
+ TYPICAL_FEES.withdraw.typical,
+ );
async function handleWithdraw() {
try {
- const hash = await withdraw(streamId, parsed)
- toast.success('Withdrawal successful', {
+ const hash = await withdraw(streamId, parsed);
+ toast.success("Withdrawal successful", {
description: `${formatTokenAmount(parsed, token.decimals, 4)} ${token.symbol} sent to your wallet.`,
...(hash && {
action: {
- label: 'View transaction',
- onClick: () => window.open(explorerUrl(network, 'tx', hash), '_blank'),
+ label: "View transaction",
+ onClick: () =>
+ window.open(explorerUrl(network, "tx", hash), "_blank"),
},
}),
- })
- onClose()
- setInputAmount('')
+ });
+ onClose();
+ setInputAmount("");
} catch {
// error shown inline
}
@@ -159,12 +183,15 @@ function WithdrawDialog({
return (
<>
-