fix: use the common DragHandle component everywhere

Author: sohrab-

src/components/client/InstructionHeader.tsx

@@ -2,7 +2,6 @@ import {
   ChevronDownIcon,
   ChevronRightIcon,
   DeleteIcon,
-  DragHandleIcon,
 } from "@chakra-ui/icons";
 import {
   Flex,
@@ -16,7 +15,7 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { arrayMove } from "@dnd-kit/sortable";
-import React, { useContext } from "react";
+import React from "react";
 import {
   FaAngleDoubleDown,
   FaAngleDoubleUp,
@@ -28,13 +27,12 @@ import {
 import { useInstruction } from "../../hooks/useInstruction";
 import { useSessionStoreWithUndo } from "../../hooks/useSessionStore";
 import { removeFrom } from "../../utils/sortable";
+import { DragHandle } from "../common/DragHandle";
 import { EditableName } from "../common/EditableName";
 import { Numbering } from "../common/Numbering";
-import { SortableItemContext } from "../common/Sortable";
 
 export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => {
   const { instruction, update, reset } = useInstruction();
-  const { listeners, attributes } = useContext(SortableItemContext);
 
   const [instructionOrder, set] = useSessionStoreWithUndo((state) => [
     state.transaction.instructions.order,
@@ -43,7 +41,7 @@ export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => {
 
   return (
     <Flex mb={instruction.expanded ? "4" : undefined} alignItems="center">
-      <DragHandleIcon mr="2" {...attributes} {...listeners} />
+      <DragHandle unlockedProps={{ mr: "2" }} />
 
       <IconButton
         h="8"

src/components/client/accounts/PdaButton.tsx

@@ -1,9 +1,4 @@
-import {
-  AddIcon,
-  CloseIcon,
-  DragHandleIcon,
-  SearchIcon,
-} from "@chakra-ui/icons";
+import { AddIcon, CloseIcon, SearchIcon } from "@chakra-ui/icons";
 import {
   Box,
   Button,
@@ -29,7 +24,7 @@ import {
 } from "@chakra-ui/react";
 import { PublicKey } from "@solana/web3.js";
 import produce, { Draft } from "immer";
-import React, { useContext, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { FaRobot } from "react-icons/fa";
 import { v4 as uuid } from "uuid";
 import { IPubKey } from "../../../types/internal";
@@ -40,7 +35,8 @@ import {
   toSortableCollection,
   toSortedArray,
 } from "../../../utils/sortable";
-import { Sortable, SortableItemContext } from "../../common/Sortable";
+import { DragHandle } from "../../common/DragHandle";
+import { Sortable } from "../../common/Sortable";
 
 type Seed = { value: string } & Identifiable;
 type SeedState = SortableCollection<Seed>;
@@ -190,34 +186,32 @@ const SeedItem = forwardRef<
     removeSeed: () => void;
   },
   "div"
->(({ seed, setSeed, removeSeed }, ref) => {
-  const { listeners, attributes } = useContext(SortableItemContext);
+>(({ seed, setSeed, removeSeed }, ref) => (
+  <Flex alignItems="center" mb="1">
+    <DragHandle unlockedProps={{ h: "2.5", w: "2.5", mr: "1" }} />
 
-  return (
-    <Flex alignItems="center" mb="1">
-      <DragHandleIcon h="2.5" w="2.5" mr="1" {...attributes} {...listeners} />
-      <Input
-        ref={ref}
-        placeholder="Seed"
-        size="sm"
-        value={seed.value}
-        key={seed.id}
-        onChange={(e) => {
-          setSeed((state) => {
-            state.value = e.target.value;
-          });
-        }}
+    <Input
+      ref={ref}
+      placeholder="Seed"
+      size="sm"
+      value={seed.value}
+      key={seed.id}
+      onChange={(e) => {
+        setSeed((state) => {
+          state.value = e.target.value;
+        });
+      }}
+    />
+
+    <Tooltip label="Remove">
+      <IconButton
+        ml="1"
+        size="xs"
+        aria-label="Remove"
+        icon={<CloseIcon />}
+        variant="ghost"
+        onClick={removeSeed}
       />
-      <Tooltip label="Remove">
-        <IconButton
-          ml="1"
-          size="xs"
-          aria-label="Remove"
-          icon={<CloseIcon />}
-          variant="ghost"
-          onClick={removeSeed}
-        />
-      </Tooltip>
-    </Flex>
-  );
-});
+    </Tooltip>
+  </Flex>
+));

src/components/options/fields/RpcEndpointOption.tsx

@@ -1,4 +1,4 @@
-import { DeleteIcon, DragHandleIcon } from "@chakra-ui/icons";
+import { DeleteIcon } from "@chakra-ui/icons";
 import {
   Flex,
   Grid,
@@ -9,12 +9,12 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { WritableDraft } from "immer/dist/internal";
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import { FaEye, FaEyeSlash } from "react-icons/fa";
 import { usePersistentStore } from "../../../hooks/usePersistentStore";
 import { INetwork, IRpcEndpoint } from "../../../types/internal";
 import { removeFrom } from "../../../utils/sortable";
-import { SortableItemContext } from "../../common/Sortable";
+import { DragHandle } from "../../common/DragHandle";
 
 const isValidUrl = (url: string) => {
   try {
@@ -33,7 +33,6 @@ export const RpcEndpointOption: React.FC<IRpcEndpoint> = ({
   custom,
   enabled,
 }) => {
-  const { listeners, attributes } = useContext(SortableItemContext);
   const set = usePersistentStore((state) => state.set);
 
   const updateEndpoint = (fn: (state: WritableDraft<IRpcEndpoint>) => void) => {
@@ -53,7 +52,7 @@ export const RpcEndpointOption: React.FC<IRpcEndpoint> = ({
 
   return (
     <Flex alignItems="center">
-      <DragHandleIcon h="3" w="3" mr="1" {...attributes} {...listeners} />
+      <DragHandle unlockedProps={{ h: "3", w: "3", mr: "1" }} />
 
       <Grid
         p="4"

src/components/palette/preview/InstructionPreview.tsx

@@ -43,7 +43,7 @@ export const InstructionPreview: React.FC<{
     >
       <Flex mb="1" alignItems="center">
         {/* TODO implement drag-and-drop */}
-        {/* <DragHandleIcon h="2.5" mr="1" /> */}
+        {/* <DragHandle unlockedProps={{ h: "2.5", mr: "1" }} /> */}
 
         <InstructionIcon />
 

src/components/palette/preview/Preview.tsx

@@ -60,7 +60,7 @@ export const Preview: React.FC<{
     >
       <Flex mb="3" alignItems="center">
         {/* TODO implement drag-and-drop */}
-        {/* <DragHandleIcon h="2.5" mt="1" mr="1" /> */}
+        {/* <DragHandle unlockedProps={{ h: "2.5", mt: "1", mr: "1" }} /> */}
 
         {/* icon */}
         {isSource("anchorProgramId", "anchorJson") && <AnchorIcon />}