Asset Tokenization UI Customization: Complete Guide to Frontend Branding & Development

kit/dapp/
├── src/
│   ├── app/              # Next.js App Router pages
│   │   ├── (auth)/      # Authentication flows
│   │   ├── assets/      # Asset management views
│   │   ├── dashboard/   # Analytics dashboards
│   │   └── api/         # API routes
│   ├── components/      # 50+ React components
│   │   ├── ui/          # Base UI components
│   │   ├── assets/      # Asset-specific widgets
│   │   └── layout/      # Layout components
│   ├── hooks/           # 20+ custom React hooks
│   ├── lib/             # External integrations
│   ├── utils/           # Helper functions
│   ├── types/           # TypeScript definitions
│   └── i18n/            # 12 language translations
└── public/              # Static assets

// Essential hooks for tokenization
useWallet()        // Wallet connection & management
useAssets()        // Asset CRUD operations
usePermissions()   // Role-based access control
useTransactions()  // Transaction history & status
useCompliance()    // KYC/AML checks
useAnalytics()     // Platform metrics

// Custom hook for KYC integration
export function useKYCVerification() {
  const { address } = useWallet();
  const [status, setStatus] = useState<KYCStatus>('pending');
  
  useEffect(() => {
    async function checkKYC() {
      const result = await verifyWithProvider(address);
      setStatus(result.status);
    }
    checkKYC();
  }, [address]);
  
  return { status, isVerified: status === 'approved' };
}

// Hook for real-time asset pricing
export function useAssetPricing(assetId: string) {
  return useQuery({
    queryKey: ['pricing', assetId],
    queryFn: () => fetchPriceData(assetId),
    refetchInterval: 60000, // Update every minute
  });
}

// 1. Error handling
export function useAssetTransfer() {
  const [error, setError] = useState<Error | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  
  const transfer = useCallback(async (params) => {
    try {
      setIsLoading(true);
      setError(null);
      const result = await executeTransfer(params);
      return result;
    } catch (err) {
      setError(err);
      throw err;
    } finally {
      setIsLoading(false);
    }
  }, []);
  
  return { transfer, error, isLoading };
}

// 2. Optimistic updates
export function useOptimisticBalance() {
  const queryClient = useQueryClient();
  
  const updateBalance = (amount: bigint) => {
    queryClient.setQueryData(['balance'], (old) => old + amount);
  };
  
  return { updateBalance };
}

// src/utils/formatters.ts
export const formatters = {
  // Format token amounts with decimals
  tokenAmount: (amount: bigint, decimals: number) => {
    const divisor = 10n ** BigInt(decimals);
    const whole = amount / divisor;
    const fraction = amount % divisor;
    return `${whole}.${fraction.toString().padStart(decimals, '0')}`;
  },
  
  // Format currency with locale
  currency: (amount: number, currency = 'USD') => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency,
      minimumFractionDigits: 2,
    }).format(amount);
  },
  
  // Format dates for different contexts
  date: {
    short: (date: Date) => date.toLocaleDateString(),
    long: (date: Date) => date.toLocaleString(),
    relative: (date: Date) => {
      const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
      const days = Math.floor((date.getTime() - Date.now()) / (1000 * 60 * 60 * 24));
      return rtf.format(days, 'day');
    },
  },
};

// src/types/assets.ts
export interface TokenizedAsset {
  id: string;
  contractAddress: `0x${string}`;
  name: string;
  symbol: string;
  decimals: number;
  totalSupply: bigint;
  assetClass: 'SECURITY' | 'COMMODITY' | 'REAL_ESTATE' | 'FUND';
  status: 'ACTIVE' | 'PAUSED' | 'MATURED';
  metadata: {
    issuer: string;
    issuanceDate: Date;
    maturityDate?: Date;
    couponRate?: number;
    minimumInvestment: bigint;
    regulatoryInfo: {
      isin?: string;
      cusip?: string;
      jurisdiction: string;
      exemptions: string[];
    };
  };
  compliance: {
    kycRequired: boolean;
    accreditationRequired: boolean;
    jurisdictionRestrictions: string[];
    transferRestrictions: TransferRestriction[];
  };
}

export interface TransferRestriction {
  type: 'LOCKUP' | 'WHITELIST' | 'BLACKLIST' | 'VOLUME_LIMIT';
  parameters: Record<string, any>;
  expiryDate?: Date;
}

// src/utils/validators.ts
import { z } from 'zod';

export const validators = {
  // Ethereum address validation
  address: z.string().regex(/^0x[a-fA-F0-9]{40}$/, 'Invalid address'),
  
  // Token amount validation
  tokenAmount: z.object({
    amount: z.string().regex(/^\d+(\.\d+)?$/, 'Invalid amount'),
    decimals: z.number().int().min(0).max(18),
  }),
  
  // Asset creation validation
  assetCreation: z.object({
    name: z.string().min(1).max(100),
    symbol: z.string().min(2).max(10).toUpperCase(),
    totalSupply: z.string().regex(/^\d+$/, 'Must be integer'),
    assetClass: z.enum(['SECURITY', 'COMMODITY', 'REAL_ESTATE', 'FUND']),
    metadata: z.object({
      issuer: z.string().min(1),
      minimumInvestment: z.string().regex(/^\d+$/),
      regulatoryInfo: z.object({
        jurisdiction: z.string().length(2), // ISO country code
        exemptions: z.array(z.string()),
      }),
    }),
  }),
};