Web Components & Hooks

AppLayout
  |-- Header
  |-- LeftSidebar
  |     |-- SessionTabs
  |     |-- ActivityPanel
  |     |-- AutomationsPanel
  |-- ChatPanel (center)
  |-- RightSidebar
        |-- WalletPanel
        |-- PositionsPanel
        |-- MarketPanel
        |-- NftsPanel
        |-- PredictionsPanel
        |-- StakingPanel
        |-- LaunchpadPanel

function useChat(apiKey: string | null): {
  messages: Message[];
  isLoading: boolean;
  sendMessage: (content: string) => Promise<void>;
  clearMessages: () => void;
  sessionId: string;
}

function useWalletBalances(): {
  balances: TokenBalance[];
  isLoading: boolean;
  refetch: () => void;
}

function useTokenPrices(apiKey: string | null): {
  prices: Record<string, { price: number; change24h: number }>;
  isLoading: boolean;
}

function useActivity(apiKey: string | null): {
  activities: Activity[];
  isLoading: boolean;
  refetch: () => void;
}

function usePositions(apiKey: string | null): {
  positions: PositionsData | null;
  isLoading: boolean;
  refetch: () => void;
}

function useMarketData(apiKey: string | null): {
  trending: TrendingPool[];
  isLoading: boolean;
}

function useNfts(address: string | undefined, apiKey: string | null): {
  nfts: NftItem[];
  isLoading: boolean;
  refetch: () => void;
}

function useAutomations(
  walletAddress: string | undefined,
  apiKey: string | null
): {
  automations: Automation[];
  isLoading: boolean;
  create: (params: CreateAutomationParams) => Promise<void>;
  updateStatus: (id: string, status: string) => Promise<void>;
  remove: (id: string) => Promise<void>;
  refetch: () => void;
}