+ Submit Invoice
+
+
Start Verification
@@ -160,7 +167,7 @@ export default function HomePage() {
setIsTokenModalOpen(true)}
- className="btn btn-primary text-lg px-6 py-3"
+ className="btn btn-outline text-lg px-6 py-3"
>
Import Token
diff --git a/frontend/src/components/InvoiceForm.tsx b/frontend/src/components/InvoiceForm.tsx
new file mode 100644
index 0000000..ecf0c90
--- /dev/null
+++ b/frontend/src/components/InvoiceForm.tsx
@@ -0,0 +1,313 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { submitInvoiceToSoroban, xlmToStroops, SOROBAN_CONFIG } from '@/utils/soroban';
+
+// Zod schema for form validation
+const invoiceSchema = z.object({
+ debtorName: z.string()
+ .min(2, 'Debtor name must be at least 2 characters')
+ .max(100, 'Debtor name must be less than 100 characters')
+ .trim(),
+ invoiceAmount: z.string()
+ .refine((val) => !isNaN(parseFloat(val)), 'Invalid amount format')
+ .refine((val) => parseFloat(val) > 0, 'Amount must be greater than 0')
+ .refine((val) => parseFloat(val) <= 1000000, 'Amount cannot exceed 1,000,000'),
+ dueDate: z.string()
+ .refine((val) => {
+ const selectedDate = new Date(val);
+ const today = new Date();
+ today.setHours(0, 0, 0, 0);
+ return selectedDate > today;
+ }, 'Due date must be in the future'),
+ documentUri: z.string()
+ .url('Please enter a valid URL')
+ .trim()
+});
+
+type InvoiceFormData = z.infer
;
+
+interface FeeCalculation {
+ networkFee: number;
+ protocolFee: number;
+ totalFee: number;
+ netAmount: number;
+}
+
+export default function InvoiceForm() {
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [feeCalculation, setFeeCalculation] = useState(null);
+ const [submitResult, setSubmitResult] = useState<{ success: boolean; message: string } | null>(null);
+
+ // Initialize react-hook-form
+ const {
+ register,
+ handleSubmit,
+ watch,
+ formState: { errors, isValid },
+ reset,
+ setValue,
+ trigger
+ } = useForm({
+ resolver: zodResolver(invoiceSchema),
+ mode: 'onChange',
+ defaultValues: {
+ debtorName: '',
+ invoiceAmount: '',
+ dueDate: '',
+ documentUri: ''
+ }
+ });
+
+ // Watch for changes in form values
+ const watchedValues = watch();
+
+ // Fee constants from config
+ const NETWORK_FEE = SOROBAN_CONFIG.DEFAULT_NETWORK_FEE;
+ const PROTOCOL_FEE_RATE = SOROBAN_CONFIG.DEFAULT_PROTOCOL_FEE_RATE;
+
+ // Calculate fees whenever invoice amount changes and is valid
+ useEffect(() => {
+ if (watchedValues.invoiceAmount && !errors.invoiceAmount) {
+ const amount = parseFloat(watchedValues.invoiceAmount);
+ if (!isNaN(amount) && amount > 0) {
+ const protocolFee = amount * PROTOCOL_FEE_RATE;
+ const totalFee = NETWORK_FEE + protocolFee;
+ const netAmount = amount - totalFee;
+
+ setFeeCalculation({
+ networkFee: NETWORK_FEE,
+ protocolFee,
+ totalFee,
+ netAmount
+ });
+ } else {
+ setFeeCalculation(null);
+ }
+ } else {
+ setFeeCalculation(null);
+ }
+ }, [watchedValues.invoiceAmount, errors.invoiceAmount]);
+
+ // Format payload for Soroban smart contract
+ const formatSorobanPayload = (data: InvoiceFormData) => {
+ return {
+ debtor_name: data.debtorName,
+ amount: xlmToStroops(parseFloat(data.invoiceAmount)), // Convert to stroops
+ due_date: Math.floor(new Date(data.dueDate).getTime() / 1000), // Unix timestamp
+ document_uri: data.documentUri,
+ created_at: Math.floor(Date.now() / 1000), // Current timestamp
+ metadata: {
+ version: '1.0',
+ source: 'tradeflow-web',
+ network_fee: NETWORK_FEE,
+ protocol_fee_rate: PROTOCOL_FEE_RATE
+ }
+ };
+ };
+
+ // Handle form submission
+ const onSubmit = async (data: InvoiceFormData) => {
+ setIsSubmitting(true);
+ setSubmitResult(null);
+
+ try {
+ const sorobanPayload = formatSorobanPayload(data);
+
+ console.log('Form submitted:', data);
+ console.log('Soroban payload:', sorobanPayload);
+
+ // TODO: Replace with actual contract address and user keys
+ const contractAddress = SOROBAN_CONFIG.INVOICE_NFT_CONTRACT;
+ const userPublicKey = 'G...'; // Get from user wallet
+ const userSecretKey = 'S...'; // Get from user wallet (if needed)
+
+ // Submit to Soroban smart contract
+ const result = await submitInvoiceToSoroban(
+ sorobanPayload,
+ contractAddress,
+ userPublicKey,
+ userSecretKey
+ );
+
+ if (result.success) {
+ setSubmitResult({
+ success: true,
+ message: `Invoice submitted successfully! Transaction: ${result.transaction_hash?.substring(0, 10)}... NFT ID: ${result.nft_id?.substring(0, 10)}...`
+ });
+
+ // Reset form after successful submission
+ reset();
+ setFeeCalculation(null);
+ } else {
+ setSubmitResult({
+ success: false,
+ message: `Error: ${result.error}`
+ });
+ }
+
+ } catch (error) {
+ console.error('Error submitting form:', error);
+ setSubmitResult({
+ success: false,
+ message: 'Error submitting invoice. Please try again.'
+ });
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const getMinDueDate = () => {
+ const tomorrow = new Date();
+ tomorrow.setDate(tomorrow.getDate() + 1);
+ return tomorrow.toISOString().split('T')[0];
+ };
+
+ return (
+
+
Submit Invoice for NFT Minting
+
+ {/* Submission Result Alert */}
+ {submitResult && (
+
+
{submitResult.message}
+
+ )}
+
+
+
{
+ try {
+ // TODO: Implement actual Soroban integration
+ // This is a placeholder implementation
+
+ console.log('Submitting invoice to Soroban contract:', {
+ contractAddress,
+ payload,
+ userPublicKey
+ });
+
+ // Simulate API call delay
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ // Simulate successful transaction
+ const mockTransactionHash = `tx_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+ const mockNftId = `nft_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+ return {
+ success: true,
+ transaction_hash: mockTransactionHash,
+ nft_id: mockNftId
+ };
+
+ } catch (error) {
+ console.error('Error submitting invoice to Soroban:', error);
+ return {
+ success: false,
+ error: error instanceof Error ? error.message : 'Unknown error occurred'
+ };
+ }
+}
+
+/**
+ * Validate Stellar public key format
+ *
+ * @param publicKey The public key to validate
+ * @returns True if valid, false otherwise
+ */
+export function validateStellarPublicKey(publicKey: string): boolean {
+ // Basic validation for Stellar public key (G-prefixed 56 character string)
+ const stellarPublicKeyRegex = /^G[0-9A-Z]{55}$/;
+ return stellarPublicKeyRegex.test(publicKey);
+}
+
+/**
+ * Convert XLM amount to stroops (smallest unit)
+ *
+ * @param xlmAmount Amount in XLM
+ * @returns Amount in stroops (integer)
+ */
+export function xlmToStroops(xlmAmount: number): number {
+ return Math.round(xlmAmount * 10000000);
+}
+
+/**
+ * Convert stroops to XLM
+ *
+ * @param stroops Amount in stroops
+ * @returns Amount in XLM
+ */
+export function stroopsToXlm(stroops: number): number {
+ return stroops / 10000000;
+}
+
+/**
+ * Get current network fee estimate for Soroban transaction
+ *
+ * @returns Promise resolving to network fee in XLM
+ */
+export async function getNetworkFeeEstimate(): Promise {
+ // TODO: Implement actual network fee estimation
+ // For now, return a fixed estimate
+ return 0.001; // 0.001 XLM
+}
+
+/**
+ * Get protocol fee rate from smart contract
+ *
+ * @param contractAddress The smart contract address
+ * @returns Promise resolving to protocol fee rate (e.g., 0.005 for 0.5%)
+ */
+export async function getProtocolFeeRate(contractAddress: string): Promise {
+ // TODO: Implement actual protocol fee rate query
+ // For now, return a fixed rate
+ return 0.005; // 0.5%
+}
+
+/**
+ * Check if user has sufficient balance for transaction
+ *
+ * @param userPublicKey User's Stellar public key
+ * @param requiredAmount Required amount in XLM
+ * @returns Promise resolving to true if sufficient balance
+ */
+export async function checkUserBalance(
+ userPublicKey: string,
+ requiredAmount: number
+): Promise {
+ // TODO: Implement actual balance check using Stellar Horizon API
+ // For now, assume sufficient balance
+ return true;
+}
+
+/**
+ * Get transaction status from Soroban
+ *
+ * @param transactionHash The transaction hash to check
+ * @returns Promise resolving to transaction status
+ */
+export async function getTransactionStatus(transactionHash: string): Promise<{
+ status: 'pending' | 'success' | 'failed';
+ confirmed_at?: number;
+ error?: string;
+}> {
+ // TODO: Implement actual transaction status check
+ // For now, return success
+ return {
+ status: 'success',
+ confirmed_at: Date.now()
+ };
+}
+
+/**
+ * Configuration for Soroban integration
+ */
+export const SOROBAN_CONFIG = {
+ // Testnet configuration (replace with mainnet when ready)
+ NETWORK: 'testnet',
+ HORIZON_URL: 'https://horizon-testnet.stellar.org',
+ SOROBAN_RPC_URL: 'https://soroban-testnet.stellar.org',
+
+ // Contract addresses (replace with actual deployed contracts)
+ INVOICE_NFT_CONTRACT: 'GD... (replace with actual contract address)',
+
+ // Fee constants
+ DEFAULT_NETWORK_FEE: 0.001, // XLM
+ DEFAULT_PROTOCOL_FEE_RATE: 0.005, // 0.5%
+
+ // Transaction limits
+ MAX_INVOICE_AMOUNT: 1000000, // XLM
+ MIN_INVOICE_AMOUNT: 0.0000001, // 1 stroop
+};