Component structure

components/
├── account/          # Wallet balance and token management
├── auth/             # Authentication and authorization
├── chat/             # Chat interface components
├── cluster/          # Solana network selection
├── demo/             # Example features
├── settings/         # App configuration
├── solana/           # Wallet adapter integration
└── ui/               # Reusable UI primitives

export interface AuthState {
  isAuthenticated: boolean;
  isLoading: boolean;
  hasCompletedOnboarding: boolean;
  signIn: () => Promise<Account>;
  signOut: () => Promise<void>;
  markOnboardingComplete: () => Promise<void>;
  checkAuthAndRedirect: () => void;
}

export function useAuth() {
  return use(Context);
}

export function SolanaProvider({ children, config }: SolanaProviderProps) {
  const { selectedCluster } = useCluster();
  const connection = useMemo(
    () => new Connection(selectedCluster.endpoint, config),
    [selectedCluster, config]
  );
  
  return (
    <ConnectionContext.Provider value={{ connection }}>
      {children}
    </ConnectionContext.Provider>
  );
}

export function useConnection(): Connection {
  return useSolana().connection;
}

export function AccountFeature() {
  const { account } = useWalletUi();
  const [refreshing, setRefreshing] = useState(false);
  
  const invalidateBalance = useGetBalanceInvalidate({ 
    address: account?.publicKey 
  });
  const invalidateTokenAccounts = useGetTokenAccountsInvalidate({ 
    address: account?.publicKey 
  });
  
  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await Promise.all([invalidateBalance(), invalidateTokenAccounts()]);
    setRefreshing(false);
  }, [invalidateBalance, invalidateTokenAccounts]);
  
  return (
    <AppPage>
      {account ? (
        <ScrollView refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }>
          <AccountUiBalance address={account.publicKey} />
          <AccountUiButtons />
          <AccountUiTokenAccounts address={account.publicKey} />
        </ScrollView>
      ) : (
        <WalletUiButtonConnect />
      )}
    </AppPage>
  );
}

ChatScreen (app/(tabs)/chat/index.tsx)
├── ChatHeader
├── ChatList (when messages exist)
│   └── ChatMessage (for each message)
│       └── ToolManager (for tool invocations)
├── SuggestionCards (when no messages)
├── ChatInput
└── HistoryOverlay (when visible)

interface ChatHeaderProps {
  onHistoryPress: () => void;
  onNewChatPress: () => void;
  chatTitle?: string;
}

export function ChatHeader({ 
  onHistoryPress, 
  onNewChatPress, 
  chatTitle 
}: ChatHeaderProps) {
  // Renders title, history button, new chat button
}

interface ChatInputProps {
  value: string;
  onChangeText: (text: string) => void;
  onSubmit: () => void;
  isLoading: boolean;
}

export function ChatInput({ 
  value, 
  onChangeText, 
  onSubmit, 
  isLoading 
}: ChatInputProps) {
  return (
    <Animated.View entering={FadeInDown.delay(400).duration(600)}>
      <View style={styles.container}>
        <TouchableOpacity>
          <UiIconSymbol name="plus" />
        </TouchableOpacity>
        
        <TextInput
          value={value}
          onChangeText={onChangeText}
          multiline
          placeholder="Ask anything"
        />
        
        <TouchableOpacity onPress={onSubmit} disabled={isLoading}>
          <UiIconSymbol name="waveform" />
        </TouchableOpacity>
      </View>
    </Animated.View>
  );
}

interface ChatMessageProps {
  message: Message;
  addToolResult?: (args: any) => void;
}

export function ChatMessage({ message, addToolResult }: ChatMessageProps) {
  return (
    <View>
      <Text>{message.content}</Text>
      
      {message.toolInvocations?.map((tool) => (
        <ToolManager
          key={tool.toolCallId}
          toolInvocation={tool}
          addToolResult={addToolResult}
        />
      ))}
    </View>
  );
}

interface SuggestionCardsProps {
  onSuggestionPress: (suggestion: string) => void;
}

export function SuggestionCards({ onSuggestionPress }: SuggestionCardsProps) {
  const suggestions = [
    "Check my SOL balance",
    "Show my tokens",
    "Get current TPS",
    "Request airdrop",
  ];
  
  return (
    <View>
      {suggestions.map((suggestion) => (
        <TouchableOpacity onPress={() => onSuggestionPress(suggestion)}>
          <Text>{suggestion}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

interface HistoryOverlayProps {
  visible: boolean;
  onClose: () => void;
  onSelectConversation: (id: string) => void;
  onNewChat: () => void;
  onDeleteChat: (id: string) => void;
  conversations: ChatMetadata[];
  currentChatId: string | null;
}

export interface ClusterProviderContext {
  selectedCluster: Cluster;
  clusters: Cluster[];
  setSelectedCluster: (cluster: Cluster) => void;
  getExplorerUrl(path: string): string;
}

export function useCluster() {
  return useContext(Context);
}

interface UiIconSymbolProps {
  name: string;
  size?: number;
  color?: string;
  weight?: 'ultraLight' | 'thin' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold';
}

export function UiIconSymbol({ 
  name, 
  size = 24, 
  color, 
  weight = 'regular' 
}: UiIconSymbolProps) {
  // iOS: Uses expo-symbols for SF Symbols
  // Android/Web: Uses @expo/vector-icons fallback
}

// Props interface
interface ComponentProps {
  required: string;
  optional?: number;
  callback: (value: string) => void;
}

// Component with typed props
export function Component({ 
  required, 
  optional = 10, 
  callback 
}: ComponentProps) {
  // Component implementation
}