diff --git a/src/components/client/InstructionHeader.tsx b/src/components/client/InstructionHeader.tsx index 71e7659..6c0eee5 100644 --- a/src/components/client/InstructionHeader.tsx +++ b/src/components/client/InstructionHeader.tsx @@ -15,8 +15,16 @@ import { MenuList, Tooltip, } from "@chakra-ui/react"; +import { arrayMove } from "@dnd-kit/sortable"; import React, { useContext } from "react"; -import { FaEllipsisV, FaEraser, FaEye, FaEyeSlash } from "react-icons/fa"; +import { + FaAngleDoubleDown, + FaAngleDoubleUp, + FaEllipsisV, + FaEraser, + FaEye, + FaEyeSlash, +} from "react-icons/fa"; import { useInstruction } from "../../hooks/useInstruction"; import { useSessionStoreWithUndo } from "../../hooks/useSessionStore"; import { removeFrom } from "../../utils/sortable"; @@ -28,7 +36,10 @@ export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => { const { instruction, update, reset } = useInstruction(); const { listeners, attributes } = useContext(SortableItemContext); - const set = useSessionStoreWithUndo((state) => state.set); + const [instructionOrder, set] = useSessionStoreWithUndo((state) => [ + state.transaction.instructions.order, + state.set, + ]); return ( @@ -99,6 +110,36 @@ export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => { variant="ghost" /> + } + isDisabled={index === 0} + onClick={() => { + set((state) => { + state.transaction.instructions.order = arrayMove( + state.transaction.instructions.order, + index, + 0 + ); + }); + }} + > + Move to the top + + } + isDisabled={index === instructionOrder.length - 1} + onClick={() => { + set((state) => { + state.transaction.instructions.order = arrayMove( + state.transaction.instructions.order, + index, + instructionOrder.length - 1 + ); + }); + }} + > + Move to the bottom + } onClick={() => { diff --git a/src/components/client/TransactionHeader.tsx b/src/components/client/TransactionHeader.tsx index 3966509..d9683a6 100644 --- a/src/components/client/TransactionHeader.tsx +++ b/src/components/client/TransactionHeader.tsx @@ -17,10 +17,10 @@ import { import { useWallet } from "@solana/wallet-adapter-react"; import React from "react"; import { + FaCompress, FaEllipsisV, FaEraser, FaExpand, - FaExpandAlt, FaFileImport, FaPlay, FaShareAlt, @@ -147,7 +147,7 @@ export const TransactionHeader: React.FC<{ transaction: ITransaction }> = ({ /> } + icon={} onClick={() => { setAllExpanded(true); }} @@ -155,7 +155,7 @@ export const TransactionHeader: React.FC<{ transaction: ITransaction }> = ({ Expand All } + icon={} onClick={() => { setAllExpanded(false); }}