From 95a1bff7f22726f6f2d2c32be4b0f1c34ad6bbc7 Mon Sep 17 00:00:00 2001 From: Pedro Ribeiro <47680931+tubarao312@users.noreply.github.com> Date: Wed, 6 Mar 2024 03:50:00 +0000 Subject: [PATCH] Move expand with AI button around --- .../graph/analysis_window/AnalysisWindow.tsx | 2 +- .../content/overview/Overview.tsx | 113 ++++++++++++++++-- .../graph/analysis_window/header/Header.tsx | 111 ++--------------- 3 files changed, 113 insertions(+), 113 deletions(-) diff --git a/src/components/graph/analysis_window/AnalysisWindow.tsx b/src/components/graph/analysis_window/AnalysisWindow.tsx index 8f744209..82c69160 100644 --- a/src/components/graph/analysis_window/AnalysisWindow.tsx +++ b/src/components/graph/analysis_window/AnalysisWindow.tsx @@ -145,7 +145,7 @@ const DraggableWindow: FC = ({ width: analysisMode.name === AnalysisModeNames.Advanced ? "68rem" - : "55rem", + : "61rem", transition: "width 0.5s ease-in-out, opacity 0.2s ease-in-out", }} onMouseEnter={() => { diff --git a/src/components/graph/analysis_window/content/overview/Overview.tsx b/src/components/graph/analysis_window/content/overview/Overview.tsx index e1a03fe5..7e22f2b9 100644 --- a/src/components/graph/analysis_window/content/overview/Overview.tsx +++ b/src/components/graph/analysis_window/content/overview/Overview.tsx @@ -10,10 +10,13 @@ import clsx from "clsx"; import { ArrowDownLeftIcon, ArrowUpRightIcon, + ArrowsPointingInIcon, ArrowsRightLeftIcon, BuildingLibraryIcon, + IdentificationIcon, + InformationCircleIcon, } from "@heroicons/react/16/solid"; -import { CheckIcon, PlusIcon } from "@heroicons/react/20/solid"; +import { CheckIcon, PlusIcon, SparklesIcon } from "@heroicons/react/20/solid"; import { Transition } from "@headlessui/react"; import { Category } from "../../../../../api/model"; @@ -30,6 +33,13 @@ import { AnalysisContext } from "../../AnalysisWindow"; import "../../../../common/Scrollbar.css"; import { logAnalyticsEvent } from "../../../../../services/firestore/analytics/analytics"; +import WithPremium, { WithPremiumProps } from "../../../../premium/WithPremium"; +import { AddressAnalysis } from "../../../../../api/model"; +import { PathExpansionArgs } from "../../../Graph"; +import useAuthState from "../../../../../hooks/useAuthState"; +import { useFreeTierExpandWithAIUsage } from "../../../../../services/firestore/user/free_usage"; +import getExpandWithAIPaths from "../../../expand_with_ai"; +import { addFreeTierExpandWithAIInteraction } from "../../../../../services/firestore/user/free_usage"; /** There can be 3 incoming states for an entity row: * - **Outgoing**: The address is sending funds to the entity @@ -213,7 +223,7 @@ const EntityRow: FC = ({ {showExpandButton ? ( - { }} /> + {}} /> ) : (

@@ -224,6 +234,78 @@ const EntityRow: FC = ({ ); }; +interface ExpandWithAIProps extends WithPremiumProps { + analysisData: AddressAnalysis; + addMultipleDifferentPaths: (args: PathExpansionArgs[]) => void; +} + +const ExpandWithAI: FC = ({ + analysisData, + addMultipleDifferentPaths, + handleActionRequiringAuth, + handleActionRequiringPremium, +}) => { + const { user } = useAuthState(); + const userID = useMemo(() => (user ? user.uid : ""), [user]); + const { hasReachedUsageLimit } = useFreeTierExpandWithAIUsage(userID); + + const expandWithAI = useCallback((analysisData: AddressAnalysis) => { + // Get the paths for the AI to expand + const paths = getExpandWithAIPaths(analysisData); + + // Add the paths to the graph + addMultipleDifferentPaths(paths); + }, []); + + return ( + + ); +}; + +// Expand with AI with authentication +const ExpandWithAIWithPremium = WithPremium(ExpandWithAI); + const Overview: FC = () => { const focusedAddressData = useContext(GraphContext).focusedAddressData!; @@ -271,10 +353,18 @@ const Overview: FC = () => { // TODO - Add a max height and a scrollbar, maybe a slight fade effect to the bottom and top return (
-

- - TOP ENTITIES -

+ +

+ + TOP ENTITIES +

+ +
    {topEntityRows.map((row, index) => ( { }} key={row.entity + focusedAddressData.address} > -
    { - logAnalyticsEvent("expand_address", { page: "overview", address: focusedAddressData.address }) - }}> +
    { + logAnalyticsEvent("expand_address", { + page: "overview", + address: focusedAddressData.address, + }); + }} + > = ({ />

    {analysisMode.name}

    @@ -201,79 +183,6 @@ const LabelsAndTags: FC = ({ // The tag input will only be shown if the user is authenticated const LabelsAndTagsWithAuth = WithAuth(LabelsAndTags); -// Expand with AI ------------------------------------------------------------- -interface ExpandWithAIProps extends WithPremiumProps { - analysisData: AddressAnalysis; - addMultipleDifferentPaths: (args: PathExpansionArgs[]) => void; -} - -const ExpandWithAI: FC = ({ - analysisData, - addMultipleDifferentPaths, - handleActionRequiringAuth, - handleActionRequiringPremium, -}) => { - const { user } = useAuthState(); - const userID = useMemo(() => (user ? user.uid : ""), [user]); - const { hasReachedUsageLimit } = useFreeTierExpandWithAIUsage(userID); - - const expandWithAI = useCallback((analysisData: AddressAnalysis) => { - // Get the paths for the AI to expand - const paths = getExpandWithAIPaths(analysisData); - - // Add the paths to the graph - addMultipleDifferentPaths(paths); - }, []); - - return ( -
    - { - handleActionRequiringAuth({ - pathname: "graph", - }); - - if (hasReachedUsageLimit) { - handleActionRequiringPremium({ - successPath: "graph", - cancelPath: "graph", - }); - } - - await addFreeTierExpandWithAIInteraction(userID); - - expandWithAI(analysisData!); - logAnalyticsEvent("expand_addresses_with_AI"); - }} - className="h-11 w-11 cursor-pointer rounded-md p-1.5 text-indigo-400 transition-all duration-150 ease-in-out hover:bg-indigo-50 " - /> -
    -
    - -

    Expand w/AI

    -
    -
    - The AI algorithm will expand based on the following criteria: -
      -
    • - - Highest riskcategories of - addresses -
      • -
    • - - Most relevant multi-hop paths -
      • -
    -
    -
    -
    - ); -}; - -// Expand with AI with authentication -const ExpandWithAIWithPremium = WithPremium(ExpandWithAI); - interface HeaderProps { onExit: () => void; setAnalysisMode: (mode: AnalysisMode) => void; @@ -286,7 +195,7 @@ const Header: FC = ({ analysisMode, }: HeaderProps) => { // Extract analysisData from context - const { addMultipleDifferentPaths, deleteNodes } = useContext(GraphContext); + const { deleteNodes } = useContext(GraphContext); const { analysisData, address } = useContext(AnalysisContext); // When minimized, the address hash should be sliced off @@ -336,10 +245,6 @@ const Header: FC = ({ /> -
    {