FRONTEND: Team Builder Interface with DnD & Validation

[PoulavBhowmick03]

Description
Interactive team composition interface with real-time Cairo contract validation.

Acceptance Criteria:

1. Drag-and-drop players into formation slots (4-3-3 default)
2. Salary cap counter (€100M budget)
3. Real-time validation against TeamValidation.cairo rules:
   • Player positions
   • Team nationality quotas
   • Captain selection
4. Error toast notifications
5. IPFS metadata preview before submission

Technical Details:

// components/TeamBuilder.tsx
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';

interface PlayerSlot {
  position: 'GK' | 'DEF' | 'MID' | 'FWD';
  player?: Player;
}

export default function TeamBuilder() {
  const [formation, setFormation] = useState<PlayerSlot[]>(/*...*/);
  
  const validateTeam = useCallback(
    debounce(async (players: string[]) => {
      const { isValid } = await callContract('TeamValidation', 'validate_team', [players]);
      setIsValid(isValid);
    }, 300),
    []
  );

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <div className={css.formationGrid}>
        {formation.map((slot, index) => (
          <Droppable droppableId={`slot-${index}`}>
            {/* ... */} 
          </Droppable>
        ))}
      </div>
    </DragDropContext>
  );
}

Notes:

• Implement custom position validators
• Show player stats tooltips on hover

---