diff --git a/src/components/DebuggerSettings/Content.tsx b/src/components/DebuggerSettings/Content.tsx index 0c366c01..f9b0033b 100644 --- a/src/components/DebuggerSettings/Content.tsx +++ b/src/components/DebuggerSettings/Content.tsx @@ -6,13 +6,14 @@ import { setServiceId, setStepsToPerform } from "@/store/debugger/debuggerSlice" import { Button } from "../ui/button"; import { NumeralSystemContext } from "@/context/NumeralSystemContext"; import { valueToNumeralSystem } from "../Instructions/utils"; -import { useContext, useState } from "react"; +import { ReactNode, useContext, useState } from "react"; import { setAllWorkersServiceId } from "@/store/workers/workersSlice"; import { isSerializedError } from "@/store/utils"; import { logger } from "@/utils/loggerService"; import { ToggleDarkMode } from "@/packages/ui-kit/DarkMode/ToggleDarkMode"; import { Separator } from "../ui/separator"; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"; +import { Popover, PopoverContent } from "../ui/popover"; +import { PopoverTrigger } from "@radix-ui/react-popover"; function stringToNumber(value: string, cb: (x: string) => T): T { try { @@ -58,17 +59,7 @@ export const DebuggerSettingsContent = ({ openStorage }: { openStorage: () => vo
- Service id{" "} - - - - - - -

Provide storage service id

- - - + Service ID vo
- Number of batched steps{" "} - - - - - - -

- To speed up execution PVMs can run multiple steps internally after clicking "Run". This may lead - to inaccurate stops in case the execution diverges between them. -

- - - + + Number of batched steps + Batched steps + vo
- Storage Value{" "} - - - - - - -

- Set storage for read & write host calls. Confirm empty, if you want to process. Storage can be - modified by running program. -

- - - + + Service Storage +
- - {debuggerState.storage !== null && ( - Storage provided + )} +
@@ -148,3 +126,19 @@ export const DebuggerSettingsContent = ({ openStorage }: { openStorage: () => vo ); }; + +function WithHelp({ help, children }: { help: string; children: ReactNode }) { + return ( + <> + {children}{" "} + + + + + +

{help}

+ + + + ); +} diff --git a/src/components/ErrorWarningTooltip/index.tsx b/src/components/ErrorWarningTooltip/index.tsx index 5ff21b64..321786cc 100644 --- a/src/components/ErrorWarningTooltip/index.tsx +++ b/src/components/ErrorWarningTooltip/index.tsx @@ -1,4 +1,4 @@ -import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@radix-ui/react-tooltip"; +import { Tooltip, TooltipTrigger, TooltipContent } from "@radix-ui/react-tooltip"; import { TriangleAlertIcon } from "lucide-react"; import classNames from "classnames"; @@ -9,18 +9,16 @@ export const ErrorWarningTooltip = (props: { variant: "dark" | "light"; }) => { return ( - - - - - - -

{props.msg}

- - - + + + + + +

{props.msg}

+ + ); }; diff --git a/src/components/HostCalls/HostCallsContent.tsx b/src/components/HostCalls/HostCallsContent.tsx index 942c7e69..7068b58e 100644 --- a/src/components/HostCalls/HostCallsContent.tsx +++ b/src/components/HostCalls/HostCallsContent.tsx @@ -9,7 +9,7 @@ import { DebuggerEcalliStorage } from "@/types/pvm"; import { isSerializedError } from "@/store/utils"; import { ChevronLeft, InfoIcon } from "lucide-react"; import { Separator } from "../ui/separator"; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"; +import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; const isEcalliWriteOrRead = (exitArg?: number) => { return exitArg === 2 || exitArg === 3; @@ -74,16 +74,14 @@ export const HostCallsContent = ({ onSetStorage }: { onSetStorage: () => void })
Storage{" "} - - - - - - -

Please provide JSON storage or confirm empty

- - - + + + + + +

Please provide JSON storage or confirm empty

+ +
setNewStorage(v)} initialRows={storage} /> diff --git a/src/components/Instructions/InstructionItem.tsx b/src/components/Instructions/InstructionItem.tsx index 8a5a74c1..859e5c75 100644 --- a/src/components/Instructions/InstructionItem.tsx +++ b/src/components/Instructions/InstructionItem.tsx @@ -9,7 +9,7 @@ import { ProgramRow } from "./InstructionsTable"; import { useAppSelector } from "@/store/hooks.ts"; import { selectWorkers, WorkerState } from "@/store/workers/workersSlice.ts"; import { cn, hexToRgb } from "@/lib/utils.ts"; -import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip.tsx"; +import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "@/components/ui/tooltip.tsx"; import { useIsDarkMode } from "@/packages/ui-kit/DarkMode/utils"; import { selectProgram } from "@/store/debugger/debuggerSlice.ts"; import { getStatusColor } from "@/utils/colors"; @@ -211,31 +211,29 @@ export const InstructionItem = forwardRef( }; return ( - - - {renderContent()} - - {pvmsDiverged ? ( - - {workersWithCurrentPc.map((worker, index) => ( -
- {worker.id} - PC: - - - {valueToNumeralSystem(getWorkerValueFromState(worker, "currentState", "pc"), numeralSystem)} - + + {renderContent()} + + {pvmsDiverged ? ( + + {workersWithCurrentPc.map((worker, index) => ( +
+ {worker.id} - PC: + + + {valueToNumeralSystem(getWorkerValueFromState(worker, "currentState", "pc"), numeralSystem)} -
- ))} - - ) : ( - - {renderTooltipContentInstructionInfo()} - - )} - - - + +
+ ))} + + ) : ( + + {renderTooltipContentInstructionInfo()} + + )} + + ); }, ); diff --git a/src/components/MemoryPreview/MemoryInfinite.tsx b/src/components/MemoryPreview/MemoryInfinite.tsx index 917f3764..a0625975 100644 --- a/src/components/MemoryPreview/MemoryInfinite.tsx +++ b/src/components/MemoryPreview/MemoryInfinite.tsx @@ -14,7 +14,7 @@ import classNames from "classnames"; import { isSerializedError, LOAD_MEMORY_CHUNK_SIZE, MEMORY_SPLIT_STEP } from "@/store/utils"; import { useVirtualizer } from "@tanstack/react-virtual"; import { useInView } from "react-intersection-observer"; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TooltipPortal } from "@/components/ui/tooltip.tsx"; +import { Tooltip, TooltipContent, TooltipTrigger, TooltipPortal } from "@/components/ui/tooltip.tsx"; import React from "react"; import { addressFormatter, findMemoryForWorker, FindMemoryForWorkerType } from "./utils"; import { Search } from "../SearchInput"; @@ -72,57 +72,53 @@ export const MemoryCell = ({ )} > {isEqualAcrossWorkers ? ( - - - {valueToNumeralSystem(value, numeralSystem, numeralSystem ? 2 : 3, false)} - - - -
- Page={Math.floor(address / PAGE_SIZE)} -
- - - - + + {valueToNumeralSystem(value, numeralSystem, numeralSystem ? 2 : 3, false)} + + + +
+ Page={Math.floor(address / PAGE_SIZE)} +
+ + + ) : ( - - - - - - - - -
- {workers.map((worker) => ( - -
- {worker.id} -
-
- - {valueToNumeralSystem( - findMemoryForWorker(worker, address)?.bytes[index], - numeralSystem, - numeralSystem ? 2 : 3, - false, - )} - -
- - ))} -
- - - - + + + + + + + +
+ {workers.map((worker) => ( + +
+ {worker.id} +
+
+ + {valueToNumeralSystem( + findMemoryForWorker(worker, address)?.bytes[index], + numeralSystem, + numeralSystem ? 2 : 3, + false, + )} + +
+ + ))} +
+ + + )} ); diff --git a/src/components/ProgramLoader/Links.tsx b/src/components/ProgramLoader/Links.tsx index df6b742e..679e513d 100644 --- a/src/components/ProgramLoader/Links.tsx +++ b/src/components/ProgramLoader/Links.tsx @@ -32,12 +32,12 @@ export const Links = () => {

JAM SPI program

- SPI program definition can be found in{" "} + SPI program definition can be found in the{" "} - a GrayPaper + GrayPaper

@@ -53,12 +53,12 @@ export const Links = () => {

JSON test file compatible with JAM TestVectors JSON

- Generic program definition can be found in{" "} + Generic program definition can be found in the{" "} - a GrayPaper + GrayPaper

diff --git a/src/components/Registers/index.tsx b/src/components/Registers/index.tsx index 788c6036..020e72cd 100644 --- a/src/components/Registers/index.tsx +++ b/src/components/Registers/index.tsx @@ -3,7 +3,7 @@ import { ReactNode, useContext } from "react"; import { NumeralSystemContext } from "@/context/NumeralSystemContext"; import { valueToNumeralSystem } from "@/components/Instructions/utils.tsx"; import classNames from "classnames"; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; +import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { Input } from "@/components/ui/input.tsx"; import { useAppSelector } from "@/store/hooks.ts"; import { selectWorkers, WorkerState } from "@/store/workers/workersSlice.ts"; @@ -83,30 +83,28 @@ const ComputedValue = ({ "text-red-500 dark:text-red-500": !isEqualAcrossWorkers, })} > - - - - {formatValueToDisplay(value, isEqualAcrossWorkers)} - + + + {formatValueToDisplay(value, isEqualAcrossWorkers)} + - -
- {workers.map((worker, index) => ( - -
- {worker.id} -
-
- {formatValueToDisplay(getWorkerValueFromState(worker, "previousState"))} - → - {formatValueToDisplay(getWorkerValueFromState(worker, "currentState"))} -
- - ))} -
- - - + +
+ {workers.map((worker, index) => ( + +
+ {worker.id} +
+
+ {formatValueToDisplay(getWorkerValueFromState(worker, "previousState"))} + → + {formatValueToDisplay(getWorkerValueFromState(worker, "currentState"))} +
+ + ))} +
+ +
); }; diff --git a/src/main.tsx b/src/main.tsx index cbb3645b..17326bfa 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -8,6 +8,7 @@ import { persistor, store } from "./store"; import { HashRouter } from "react-router"; import { PersistGate } from "redux-persist/integration/react"; import { isDarkMode, setColorMode } from "./packages/ui-kit/DarkMode/utils.ts"; +import { TooltipProvider } from "@radix-ui/react-tooltip"; setColorMode(isDarkMode()); @@ -17,9 +18,11 @@ ReactDOM.createRoot(document.getElementById("root")!).render( - - - + + + + + , diff --git a/src/packages/ui-kit/AppsSidebar/index.tsx b/src/packages/ui-kit/AppsSidebar/index.tsx index 5d1d077c..6987479b 100644 --- a/src/packages/ui-kit/AppsSidebar/index.tsx +++ b/src/packages/ui-kit/AppsSidebar/index.tsx @@ -5,7 +5,7 @@ import { Computers } from "./icons/Computers"; import { Chip } from "./icons/Chip"; import { Logo } from "./icons/Logo"; import { cn } from "@/lib/utils"; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; +import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { ReactNode } from "react"; export const AppsSidebar = () => { @@ -64,11 +64,9 @@ function SidebarLink({ name, href, icon, active = false }: SidebarLinkProps) { function WithTooltip({ tooltip, children }: { tooltip: string; children: ReactNode }) { return ( - - - {children} - {tooltip} - - + + {children} + {tooltip} + ); } diff --git a/src/packages/ui-kit/Header/index.tsx b/src/packages/ui-kit/Header/index.tsx index 5c1957fe..c082068b 100644 --- a/src/packages/ui-kit/Header/index.tsx +++ b/src/packages/ui-kit/Header/index.tsx @@ -17,10 +17,10 @@ export const Header = ({ endSlot }: { endSlot?: JSX.Element }) => { return (
-
+ FluffyLabs logo FluffyLabs brand -
+
FluffyLabs brand