+
Fund via USDT (Ethereum)
+
+ Swap USDT from Ethereum to BTC on Arkade using Lendaswap.
+
+
+ {step === "quote" && (
+
+
+ Required for payroll:
+ {formatAmount(requiredAmount)}
+
+ (~${requiredUsd.toFixed(2)} USD)
+
+
+
+
+
+ {
+ setUsdtAmount(e.target.value);
+ setQuote(null);
+ }}
+ min="10"
+ step="0.01"
+ />
+
+
+
+
+ {quote && (
+
+
Swap Quote
+
+
+ You send:
+
+ $
+ {(
+ Number(quote.sourceAmount) /
+ 1_000_000
+ ).toFixed(2)}{" "}
+ USDT
+
+
+
+ You receive:
+
+ {formatAmount(
+ Number(quote.targetAmount)
+ )}
+
+
+
+ Protocol fee:
+
+ {formatAmount(
+ Number(quote.protocolFee)
+ )}
+
+
+
+ Expires:
+
+ {quote.expiresAt.toLocaleTimeString()}
+
+
+
+
+
+
+ )}
+
+ )}
+
+ {step === "deposit" && order && (
+
+
Step 2: Deposit USDT on Ethereum
+
+ Send your USDT to the HTLC contract using your Ethereum
+ wallet (MetaMask, etc).
+
+
+
+
+ Contract Address:
+ {order.contractAddress}
+
+
+ Amount:
+
+ $
+ {(
+ Number(order.sourceAmount) / 1_000_000
+ ).toFixed(2)}{" "}
+ USDT
+
+
+
+ Hash Lock:
+ {order.hashLock}
+
+
+ Timelock:
+
+ {new Date(
+ order.timelock * 1000
+ ).toLocaleString()}
+
+
+
+
+
+
+ setTxHash(e.target.value)}
+ />
+
+
+
+
+ )}
+
+ {step === "claim" && (
+
+
Step 3: Claim BTC on Arkade
+
+ Your USDT deposit has been confirmed. Click below to
+ claim your BTC on Arkade.
+
+
+
+ Destination:
+ {arkadeAddress}
+
+
+
+
+ )}
+
+ {step === "complete" && (
+
+
Swap Complete!
+
Your BTC has been credited to your Arkade wallet.
+
+
+ )}
+
+ {error &&
{error}
}
+
+ onUpdate(index, "name", e.target.value)}
+ className="input-name"
+ />
+ onUpdate(index, "address", e.target.value)}
+ className="input-address"
+ required
+ />
+
+ onUpdate(index, "amount", parseInt(e.target.value) || 0)
+ }
+ className="input-amount"
+ min="1"
+ required
+ />
+
+
+ );
+}
+
+interface PayrollFormProps {
+ onCreated?: (batch: PayrollBatch) => void;
+}
+
+export function PayrollForm({ onCreated }: PayrollFormProps) {
+ const [name, setName] = useState("");
+ const [recipients, setRecipients] = useState<
+ (Omit & { id?: string })[]
+ >([{ address: "", amount: 0 }]);
+ const [errors, setErrors] = useState([]);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const fileInputRef = useRef(null);
+
+ const totalAmount = recipients.reduce((sum, r) => sum + (r.amount || 0), 0);
+
+ const handleAddRecipient = () => {
+ setRecipients([...recipients, { address: "", amount: 0 }]);
+ };
+
+ const handleRemoveRecipient = (index: number) => {
+ if (recipients.length > 1) {
+ setRecipients(recipients.filter((_, i) => i !== index));
+ }
+ };
+
+ const handleUpdateRecipient = (
+ index: number,
+ field: keyof PayrollRecipient,
+ value: string | number
+ ) => {
+ const updated = [...recipients];
+ updated[index] = { ...updated[index], [field]: value };
+ setRecipients(updated);
+ };
+
+ const handleCsvImport = (event: React.ChangeEvent) => {
+ const file = event.target.files?.[0];
+ if (!file) return;
+
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const content = e.target?.result as string;
+ const result = parseCsv(content);
+
+ if (result.errors.length > 0) {
+ setErrors(result.errors);
+ } else {
+ setErrors([]);
+ }
+
+ if (result.recipients.length > 0) {
+ setRecipients(result.recipients);
+ }
+ };
+ reader.readAsText(file);
+
+ // Reset file input
+ if (fileInputRef.current) {
+ fileInputRef.current.value = "";
+ }
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setErrors([]);
+ setIsSubmitting(true);
+
+ try {
+ // Validate
+ const validationErrors: string[] = [];
+
+ if (!name.trim()) {
+ validationErrors.push("Payroll name is required");
+ }
+
+ const validRecipients = recipients.filter(
+ (r) => r.address && r.amount > 0
+ );
+ if (validRecipients.length === 0) {
+ validationErrors.push(
+ "At least one valid recipient is required"
+ );
+ }
+
+ for (let i = 0; i < recipients.length; i++) {
+ const r = recipients[i];
+ if (r.address && r.address.length < 10) {
+ validationErrors.push(
+ `Recipient ${i + 1}: Invalid address`
+ );
+ }
+ if (r.address && (!r.amount || r.amount <= 0)) {
+ validationErrors.push(`Recipient ${i + 1}: Invalid amount`);
+ }
+ }
+
+ if (validationErrors.length > 0) {
+ setErrors(validationErrors);
+ return;
+ }
+
+ // Create payroll batch
+ const batch = payrollService.createPayroll(
+ {
+ name: name.trim(),
+ recipients: validRecipients,
+ },
+ "assistant"
+ );
+
+ // Reset form
+ setName("");
+ setRecipients([{ address: "", amount: 0 }]);
+
+ // Notify parent
+ onCreated?.(batch);
+ } catch (error) {
+ setErrors([
+ error instanceof Error
+ ? error.message
+ : "Failed to create payroll",
+ ]);
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ return (
+
+
Create Payroll
+
+ Add recipients manually using the +/- buttons or import from CSV
+ (Address,Amount format).
+
+
+
+
+
setExpanded(!expanded)}>
+
+
{batch.name}
+
+ {batch.recipients.length} recipients | Created{" "}
+ {batch.createdAt.toLocaleDateString()}
+
+
+
+
+ {batch.status}
+
+
+ {formatAmount(batch.totalAmount)}
+
+
+
+
+ {expanded && (
+
+
+
+
+ | Name |
+ Address |
+ Amount |
+
+
+
+ {batch.recipients.map((r) => (
+
+ | {r.name || "-"} |
+ {r.address} |
+ {formatAmount(r.amount)} |
+
+ ))}
+
+
+
+ {batch.arkTxId && (
+
+ Transaction ID:{" "}
+ {batch.arkTxId}
+
+ )}
+
+ {batch.errorMessage && (
+
+ Error: {batch.errorMessage}
+
+ )}
+
+
+ {batch.status === "pending" && (
+ <>
+
+
+
+ )}
+ {batch.status === "failed" && (
+
+ )}
+
+
+ )}
+
+
e.stopPropagation()}>
+
+
Execute Payroll: {batch.name}
+
+
+
+
+
+
+ Recipients:
+ {batch.recipients.length}
+
+
+ Total Amount:
+ {formatAmount(batch.totalAmount)}
+
+
+
+
+
+
{
+ setPrivateKey(e.target.value);
+ setBalance(null);
+ setWalletAddress(null);
+ }}
+ className="input-key"
+ />
+
+ Your private key is used locally to sign the
+ transaction and is never transmitted.
+
+
+
+ {!balance && (
+
+ )}
+
+ {balance && (
+
+
Wallet Balance
+ {walletAddress && (
+
+ Address:
+ {walletAddress}
+
+ )}
+
+
+ Available:
+
+ {formatAmount(balance.available)}
+
+
+
+ Settled:
+ {formatAmount(balance.settled)}
+
+
+ Preconfirmed:
+
+ {formatAmount(balance.preconfirmed)}
+
+
+
+ Required:
+
+ {formatAmount(batch.totalAmount)}
+
+
+
+
+ {!sufficientBalance && (
+
+ Insufficient balance. You need{" "}
+ {formatAmount(
+ batch.totalAmount - balance.available
+ )}{" "}
+ more to execute this payroll.
+
+ )}
+
+ )}
+
+ {error &&
{error}
}
+
+
+
+
+
+
+
+
+
+
Payroll Management
+
+
+ {stats.pending} pending
+
+
+ {stats.executed} executed
+
+ {stats.pending > 0 && (
+
+ {formatAmount(stats.totalAmount)}{" "}
+ to pay
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {filteredPayrolls.length === 0 ? (
+
+ {filter === "all"
+ ? "No payrolls yet. Create one using the form above."
+ : `No ${filter} payrolls.`}
+
+ ) : (
+
+ {filteredPayrolls.map((batch) => (
+
+ setSelectedBatch(
+ payrolls.find((p) => p.id === id) || null
+ )
+ }
+ onDelete={handleDelete}
+ onReset={handleReset}
+ />
+ ))}
+
+ )}
+
+ {selectedBatch && (
+
setSelectedBatch(null)}
+ onExecuted={handleExecuted}
+ />
+ )}
+