2026-02-01 21:32:06 +07:00
|
|
|
import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
|
feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components
Frontend - Web Dashboard:
- Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs
- Add 11 tool-ui components for inline chat display
- Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.)
- Add modals (AddTokenModal, CreateAlertModal)
- Add mock data for development
Frontend - Browser Extension:
- Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard)
- Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal)
- Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay)
- Add widget components for inline display
- Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface
Documentation:
- Add conversational UX specification
- Add UX analysis report
- Update extension UX design
This implements the Conversational UX paradigm where crypto features
are AI-callable tools that render inline in the chat interface.
2026-02-04 02:19:57 +07:00
|
|
|
import { MOCK_TOKEN_DATA, MOCK_MODE } from "../mock/mockData";
|
2026-02-01 21:32:06 +07:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Page context types
|
|
|
|
|
*/
|
|
|
|
|
export type PageType = "dexscreener" | "coingecko" | "twitter" | "generic";
|
|
|
|
|
|
|
|
|
|
export interface TokenData {
|
|
|
|
|
chain: string;
|
|
|
|
|
pairAddress: string;
|
|
|
|
|
tokenSymbol?: string;
|
feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components
Frontend - Web Dashboard:
- Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs
- Add 11 tool-ui components for inline chat display
- Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.)
- Add modals (AddTokenModal, CreateAlertModal)
- Add mock data for development
Frontend - Browser Extension:
- Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard)
- Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal)
- Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay)
- Add widget components for inline display
- Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface
Documentation:
- Add conversational UX specification
- Add UX analysis report
- Update extension UX design
This implements the Conversational UX paradigm where crypto features
are AI-callable tools that render inline in the chat interface.
2026-02-04 02:19:57 +07:00
|
|
|
tokenName?: string;
|
2026-02-01 21:32:06 +07:00
|
|
|
price?: string;
|
feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components
Frontend - Web Dashboard:
- Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs
- Add 11 tool-ui components for inline chat display
- Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.)
- Add modals (AddTokenModal, CreateAlertModal)
- Add mock data for development
Frontend - Browser Extension:
- Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard)
- Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal)
- Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay)
- Add widget components for inline display
- Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface
Documentation:
- Add conversational UX specification
- Add UX analysis report
- Update extension UX design
This implements the Conversational UX paradigm where crypto features
are AI-callable tools that render inline in the chat interface.
2026-02-04 02:19:57 +07:00
|
|
|
priceChange24h?: number;
|
2026-02-01 21:32:06 +07:00
|
|
|
volume24h?: string;
|
|
|
|
|
liquidity?: string;
|
feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components
Frontend - Web Dashboard:
- Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs
- Add 11 tool-ui components for inline chat display
- Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.)
- Add modals (AddTokenModal, CreateAlertModal)
- Add mock data for development
Frontend - Browser Extension:
- Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard)
- Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal)
- Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay)
- Add widget components for inline display
- Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface
Documentation:
- Add conversational UX specification
- Add UX analysis report
- Update extension UX design
This implements the Conversational UX paradigm where crypto features
are AI-callable tools that render inline in the chat interface.
2026-02-04 02:19:57 +07:00
|
|
|
marketCap?: string;
|
2026-02-01 21:32:06 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export interface PageContext {
|
|
|
|
|
url: string;
|
|
|
|
|
title: string;
|
|
|
|
|
pageType: PageType;
|
|
|
|
|
tokenData?: TokenData;
|
2026-02-04 10:55:49 +07:00
|
|
|
/** Detected tokens from page content (Twitter mentions, addresses, pairs) */
|
|
|
|
|
detectedTokens?: TokenData[];
|
2026-02-01 21:32:06 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface PageContextValue {
|
|
|
|
|
context: PageContext | null;
|
|
|
|
|
updateContext: (context: PageContext) => void;
|
feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components
Frontend - Web Dashboard:
- Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs
- Add 11 tool-ui components for inline chat display
- Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.)
- Add modals (AddTokenModal, CreateAlertModal)
- Add mock data for development
Frontend - Browser Extension:
- Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard)
- Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal)
- Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay)
- Add widget components for inline display
- Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface
Documentation:
- Add conversational UX specification
- Add UX analysis report
- Update extension UX design
This implements the Conversational UX paradigm where crypto features
are AI-callable tools that render inline in the chat interface.
2026-02-04 02:19:57 +07:00
|
|
|
/** Whether we're using mock data */
|
|
|
|
|
isMockMode: boolean;
|
2026-02-01 21:32:06 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const PageContextContext = createContext<PageContextValue>({
|
|
|
|
|
context: null,
|
|
|
|
|
updateContext: () => { },
|
feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components
Frontend - Web Dashboard:
- Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs
- Add 11 tool-ui components for inline chat display
- Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.)
- Add modals (AddTokenModal, CreateAlertModal)
- Add mock data for development
Frontend - Browser Extension:
- Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard)
- Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal)
- Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay)
- Add widget components for inline display
- Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface
Documentation:
- Add conversational UX specification
- Add UX analysis report
- Update extension UX design
This implements the Conversational UX paradigm where crypto features
are AI-callable tools that render inline in the chat interface.
2026-02-04 02:19:57 +07:00
|
|
|
isMockMode: false,
|
2026-02-01 21:32:06 +07:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
export function usePageContext() {
|
|
|
|
|
return useContext(PageContextContext);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Provider for page context detection
|
|
|
|
|
* Listens to messages from content scripts
|
feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components
Frontend - Web Dashboard:
- Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs
- Add 11 tool-ui components for inline chat display
- Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.)
- Add modals (AddTokenModal, CreateAlertModal)
- Add mock data for development
Frontend - Browser Extension:
- Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard)
- Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal)
- Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay)
- Add widget components for inline display
- Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface
Documentation:
- Add conversational UX specification
- Add UX analysis report
- Update extension UX design
This implements the Conversational UX paradigm where crypto features
are AI-callable tools that render inline in the chat interface.
2026-02-04 02:19:57 +07:00
|
|
|
* Uses mock data in development mode
|
2026-02-01 21:32:06 +07:00
|
|
|
*/
|
|
|
|
|
export function PageContextProvider({ children }: { children: ReactNode }) {
|
|
|
|
|
const [context, setContext] = useState<PageContext | null>(null);
|
feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components
Frontend - Web Dashboard:
- Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs
- Add 11 tool-ui components for inline chat display
- Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.)
- Add modals (AddTokenModal, CreateAlertModal)
- Add mock data for development
Frontend - Browser Extension:
- Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard)
- Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal)
- Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay)
- Add widget components for inline display
- Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface
Documentation:
- Add conversational UX specification
- Add UX analysis report
- Update extension UX design
This implements the Conversational UX paradigm where crypto features
are AI-callable tools that render inline in the chat interface.
2026-02-04 02:19:57 +07:00
|
|
|
const isMockMode = MOCK_MODE.enabled;
|
2026-02-01 21:32:06 +07:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components
Frontend - Web Dashboard:
- Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs
- Add 11 tool-ui components for inline chat display
- Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.)
- Add modals (AddTokenModal, CreateAlertModal)
- Add mock data for development
Frontend - Browser Extension:
- Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard)
- Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal)
- Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay)
- Add widget components for inline display
- Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface
Documentation:
- Add conversational UX specification
- Add UX analysis report
- Update extension UX design
This implements the Conversational UX paradigm where crypto features
are AI-callable tools that render inline in the chat interface.
2026-02-04 02:19:57 +07:00
|
|
|
// Use mock data in development mode
|
|
|
|
|
if (MOCK_MODE.enabled && MOCK_MODE.simulateDexScreener) {
|
|
|
|
|
setContext({
|
|
|
|
|
url: "https://dexscreener.com/solana/7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU",
|
|
|
|
|
title: "BULLA / SOL | DEX Screener",
|
|
|
|
|
pageType: "dexscreener",
|
|
|
|
|
tokenData: MOCK_TOKEN_DATA,
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2026-02-01 21:32:06 +07:00
|
|
|
// Listen for page context updates from content script
|
|
|
|
|
const handleMessage = (message: any) => {
|
|
|
|
|
if (message.type === "PAGE_CONTEXT_UPDATE") {
|
|
|
|
|
setContext(message.data);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
chrome.runtime.onMessage.addListener(handleMessage);
|
|
|
|
|
|
|
|
|
|
// Request initial context
|
|
|
|
|
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
|
|
|
|
if (tabs[0]?.id) {
|
|
|
|
|
chrome.tabs.sendMessage(tabs[0].id, { type: "GET_PAGE_CONTEXT" });
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
chrome.runtime.onMessage.removeListener(handleMessage);
|
|
|
|
|
};
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components
Frontend - Web Dashboard:
- Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs
- Add 11 tool-ui components for inline chat display
- Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.)
- Add modals (AddTokenModal, CreateAlertModal)
- Add mock data for development
Frontend - Browser Extension:
- Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard)
- Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal)
- Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay)
- Add widget components for inline display
- Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface
Documentation:
- Add conversational UX specification
- Add UX analysis report
- Update extension UX design
This implements the Conversational UX paradigm where crypto features
are AI-callable tools that render inline in the chat interface.
2026-02-04 02:19:57 +07:00
|
|
|
<PageContextContext.Provider value={{ context, updateContext: setContext, isMockMode }}>
|
2026-02-01 21:32:06 +07:00
|
|
|
{children}
|
|
|
|
|
</PageContextContext.Provider>
|
|
|
|
|
);
|
|
|
|
|
}
|