SyncAssetsComponent

Complete file sync management for blockchain integration with multi-file drop zone, validation, hash calculation, and ordfs.network API integration for checking existing files on-chain.

Demo

File Sync Manager

Sync Files to BlockchainDrop files here or click to browse (max 10 files, 5.0 MB each)

.jpg,.jpeg,.png,.gif,.webp,.svg,.pdf,.txt,.json,.md,.html

Hash Calculationordfs.network IntegrationFee EstimationProgress TrackingDuplicate Detection

Demo Note: This demonstrates the file sync interface. Files are validated, hashed, and checked against the ordfs.network API. In production, files would be synced to the blockchain with transaction fees.

API Reference

This component uses DropZone for file upload handling and extends the Table and Progress primitives from Radix.

Installation

npx bigblocks add sync-assets-component

Import

import { SyncAssetsComponent, FileSyncStatus } from 'bigblocks';

Props

Prop	Type	Required	Default	Description
onSyncComplete	`(results: { success: SyncFile[]; failed: SyncFile[] }) => void`	No	-	Callback when sync operation completes
onError	`(error: string) => void`	No	-	Callback when an error occurs
maxFileSize	`number`	No	`10485760`	Maximum file size in bytes (10MB)
maxFiles	`number`	No	`50`	Maximum number of files allowed
acceptedTypes	`string[]`	No	Common file types	Array of accepted file extensions
estimatedFeePerKB	`number`	No	`500`	Estimated fee per KB in satoshis
className	`string`	No	-	Custom CSS classes

Types

FileSyncStatus

enum FileSyncStatus {
  Pending = 'pending',
  Checking = 'checking',
  OnChain = 'on-chain',
  NeedsSync = 'needs-sync',
  Syncing = 'syncing',
  Synced = 'synced',
  Failed = 'failed'
}

SyncFile

interface SyncFile {
  id: string;
  file: File;
  hash?: string;
  status: FileSyncStatus;
  size: number;
  txid?: string;
  error?: string;
  progress?: number;
  estimatedFee?: number;
}

SyncSummary

interface SyncSummary {
  totalFiles: number;
  needsSyncCount: number;
  totalSize: number; // in bytes
  estimatedTotalFee: number; // in satoshis
}

Basic Usage

import { SyncAssetsComponent } from 'bigblocks';

export default function FileSyncPage() {
  const handleSyncComplete = (results) => {
    console.log('Sync completed:', results);
    console.log('Successful syncs:', results.success.length);
    console.log('Failed syncs:', results.failed.length);
  };

  const handleError = (error) => {
    console.error('Sync error:', error);
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1>File Sync Manager</h1>
      <SyncAssetsComponent
        onSyncComplete={handleSyncComplete}
        onError={handleError}
      />
    </div>
  );
}

Advanced Usage

Custom Configuration

import { SyncAssetsComponent } from 'bigblocks';

export default function CustomSyncManager() {
  return (
    <SyncAssetsComponent
      maxFileSize={50 * 1024 * 1024} // 50MB
      maxFiles={100}
      acceptedTypes={['.jpg', '.png', '.pdf', '.json']}
      estimatedFeePerKB={1000} // Higher fee rate
      onSyncComplete={(results) => {
        // Handle completion
        if (results.failed.length > 0) {
          console.warn('Some files failed to sync:', results.failed);
        }
        
        // Update UI or navigate
        router.push('/files/success');
      }}
      onError={(error) => {
        // Handle errors
        toast.error(`Sync error: ${error}`);
      }}
    />
  );
}

Integration with File Management

import { SyncAssetsComponent, FileSyncStatus } from 'bigblocks';
import { useState } from 'react';

export default function FileManager() {
  const [syncedFiles, setSyncedFiles] = useState([]);
  const [syncHistory, setSyncHistory] = useState([]);

  const handleSyncComplete = (results) => {
    // Update local state
    setSyncedFiles(prev => [...prev, ...results.success]);
    
    // Log to history
    setSyncHistory(prev => [...prev, {
      timestamp: new Date(),
      successCount: results.success.length,
      failureCount: results.failed.length,
      totalSize: results.success.reduce((sum, file) => sum + file.size, 0)
    }]);

    // Notify other components
    window.dispatchEvent(new CustomEvent('filesSync', {
      detail: results
    }));
  };

  return (
    <div className="space-y-6">
      <SyncAssetsComponent
        onSyncComplete={handleSyncComplete}
        maxFileSize={25 * 1024 * 1024} // 25MB
      />
      
      {syncedFiles.length > 0 && (
        <div>
          <h3>Recently Synced Files</h3>
          <ul>
            {syncedFiles.map(file => (
              <li key={file.id}>
                {file.file.name} - 
                <a href={`https://ordfs.network/${file.txid}`} target="_blank">
                  View on Blockchain
                </a>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

Features

Multi-File Drop Zone

Drag and drop multiple files
File validation (size, type, duplicates)
Real-time feedback on validation errors
Support for common file types

Hash Calculation

Uses Web Crypto API SHA-256
Client-side hash calculation
Efficient handling of large files
Progress indication during hashing

Blockchain Integration

ordfs.network API integration
Check existing files on-chain
Avoid duplicate uploads
Transaction ID tracking

Fee Estimation

Configurable fee rates
Per-file fee calculation
Total sync cost estimation
Real-time fee updates

Progress Tracking

Individual file progress
Overall sync progress
Status indicators with icons
Error handling and retry

File Status Flow

graph TD
    A[Pending] --> B[Checking]
    B --> C{File Exists?}
    C -->|Yes| D[OnChain]
    C -->|No| E[NeedsSync]
    E --> F[Syncing]
    F --> G{Success?}
    G -->|Yes| H[Synced]
    G -->|No| I[Failed]
    B --> I

API Integration

The component integrates with ordfs.network API:

// Check if file exists on blockchain
const response = await fetch(`https://ordfs.network/api/files/${hash}`, {
  method: 'GET',
  headers: { Accept: 'application/json' }
});

Error Handling

Common error scenarios:

File too large
Unsupported file type
Duplicate files
Network connectivity issues
API rate limiting
Insufficient funds for sync

Performance Considerations

Efficient hash calculation using Web Workers (where available)
Configurable batch sizes for large file sets
Progressive UI updates during sync operations
Memory-efficient file handling

DropZone - File upload handling
LoadingButton - Action buttons with loading states
ErrorDisplay - Error message display

Best Practices

File Organization

// Organize files by type before syncing
const imageFiles = files.filter(f => f.type.startsWith('image/'));
const documentFiles = files.filter(f => f.type === 'application/pdf');

Error Recovery

const handleError = (error) => {
  // Log error for debugging
  console.error('Sync error:', error);
  
  // Show user-friendly message
  setErrorMessage('Failed to sync files. Please check your connection and try again.');
  
  // Optionally retry failed operations
  setTimeout(() => retrySyncOperation(), 5000);
};

Cost Management

// Monitor total sync costs
const handleSyncComplete = (results) => {
  const totalCost = results.success.reduce((sum, file) => sum + (file.estimatedFee || 0), 0);
  
  if (totalCost > maxBudget) {
    console.warn('Sync cost exceeded budget:', totalCost);
  }
};

SyncAssetsComponent

File Sync Manager

On this page