feat: release drag drop styling

apps/cowswap-frontend/src/modules/hooksStore/containers/HooksStoreWidget/index.tsx

@@ -1,11 +1,8 @@
-import React, { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react'
 
 import ICON_HOOK from '@cowprotocol/assets/cow-swap/hook.svg'
 import { BannerOrientation, DismissableInlineBanner } from '@cowprotocol/ui'
 
-import { DndProvider } from 'react-dnd'
-import { HTML5Backend } from 'react-dnd-html5-backend'
-
 import { SwapWidget } from 'modules/swap'
 import { useIsSellNative } from 'modules/trade'
 
@@ -72,9 +69,5 @@ export function HooksStoreWidget() {
     <PostHookButton onOpen={() => setSelectedHookPosition('post')} onEditHook={onPostHookEdit} />
   )
 
-  return (
-    <DndProvider backend={HTML5Backend}>
-      <SwapWidget topContent={TopContent} bottomContent={BottomContent} />
-    </DndProvider>
-  )
+  return <SwapWidget topContent={TopContent} bottomContent={BottomContent} />
 }

apps/cowswap-frontend/src/modules/hooksStore/containers/PostHookButton/index.tsx

@@ -6,7 +6,7 @@ import SVG from 'react-inlinesvg'
 import { useHooks } from '../../hooks/useHooks'
 import { useRemoveHook } from '../../hooks/useRemoveHook'
 import { useReorderHooks } from '../../hooks/useReorderHooks'
-import { AppliedHookItem } from '../../pure/AppliedHookItem'
+import { AppliedHookList } from '../../pure/AppliedHookList'
 import { HookTooltip } from '../../pure/HookTooltip'
 import * as styledEl from '../PreHookButton/styled'
 
@@ -23,21 +23,15 @@ export function PostHookButton({ onOpen, onEditHook }: PostHookButtonProps) {
 
   return (
     <>
-      {postHooks && (
-        <styledEl.HookList>
-          {postHooks.map((hook, index) => (
-            <AppliedHookItem
-              key={hook.uuid}
-              account={account}
-              hookDetails={hook}
-              removeHook={removeHook}
-              editHook={onEditHook}
-              isPreHook={false}
-              index={index}
-              moveHook={moveHook}
-            />
-          ))}
-        </styledEl.HookList>
+      {postHooks.length > 0 && (
+        <AppliedHookList
+          account={account}
+          hooks={postHooks}
+          isPreHook={false} // Indicate that these are post-hooks
+          removeHook={removeHook}
+          editHook={onEditHook}
+          moveHook={moveHook}
+        />
       )}
       <styledEl.Wrapper>
         <styledEl.AddHookButton onClick={onOpen}>

apps/cowswap-frontend/src/modules/hooksStore/containers/PreHookButton/index.tsx

@@ -8,7 +8,7 @@ import * as styledEl from './styled'
 import { useHooks } from '../../hooks/useHooks'
 import { useRemoveHook } from '../../hooks/useRemoveHook'
 import { useReorderHooks } from '../../hooks/useReorderHooks'
-import { AppliedHookItem } from '../../pure/AppliedHookItem'
+import { AppliedHookList } from '../../pure/AppliedHookList'
 import { HookTooltip } from '../../pure/HookTooltip'
 
 export interface PreHookButtonProps {
@@ -25,20 +25,14 @@ export function PreHookButton({ onOpen, onEditHook }: PreHookButtonProps) {
   return (
     <>
       {preHooks.length > 0 && (
-        <styledEl.HookList>
-          {preHooks.map((hookDetails, index) => (
-            <AppliedHookItem
-              key={hookDetails.uuid}
-              index={index}
-              account={account}
-              hookDetails={hookDetails}
-              removeHook={removeHook}
-              editHook={onEditHook}
-              moveHook={moveHook}
-              isPreHook
-            />
-          ))}
-        </styledEl.HookList>
+        <AppliedHookList
+          account={account}
+          hooks={preHooks}
+          isPreHook={true}
+          removeHook={removeHook}
+          editHook={onEditHook}
+          moveHook={moveHook}
+        />
       )}
 
       <styledEl.Wrapper>

apps/cowswap-frontend/src/modules/hooksStore/pure/AppliedHookItem/index.tsx

@@ -6,7 +6,6 @@ import { Edit2, Trash2 } from 'react-feather'
 import SVG from 'react-inlinesvg'
 
 import * as styledEl from './styled'
-import { useDragAndDrop } from './useDragAndDrop'
 
 import { TenderlySimulate } from '../../containers/TenderlySimulate'
 import { CowHookDetailsSerialized } from '../../types/hooks'
@@ -18,28 +17,19 @@ interface HookItemProp {
   removeHook: (uuid: string, isPreHook: boolean) => void
   editHook: (uuid: string) => void
   index: number
-  moveHook: (dragIndex: number, hoverIndex: number) => void
 }
 
-export function AppliedHookItem({
-  account,
-  hookDetails,
-  isPreHook,
-  editHook,
-  removeHook,
-  index,
-  moveHook,
-}: HookItemProp) {
+export function AppliedHookItem({ account, hookDetails, isPreHook, editHook, removeHook, index }: HookItemProp) {
   const { hook, dapp } = hookDetails
-  const { ref, isDragging } = useDragAndDrop(index, hookDetails.uuid, moveHook)
 
   return (
-    <styledEl.HookItemWrapper data-uid={hookDetails.uuid} ref={ref} style={{ opacity: isDragging ? 0.5 : 1 }}>
+    <styledEl.HookItemWrapper data-uid={hookDetails.uuid} as="li">
       <styledEl.HookItemHeader title={hookDetails.uuid}>
-        <styledEl.HookItemInfo>
+        <styledEl.HookItemInfo className="DragArea">
           <styledEl.DragIcon>
             <SVG src={ICON_GRID} />
           </styledEl.DragIcon>
+          <styledEl.HookNumber>{index + 1}</styledEl.HookNumber>
           <img src={dapp.image} alt={dapp.name} />
           <span>{dapp.name}</span>
         </styledEl.HookItemInfo>

apps/cowswap-frontend/src/modules/hooksStore/pure/AppliedHookItem/styled.tsx

@@ -11,11 +11,18 @@ export const HookItemWrapper = styled.li`
   box-shadow: 0 5px 16px 0 transparent;
   transition: all 0.2s ease-in-out;
   overflow: hidden;
+  position: relative;
 
   &:hover {
     border: 1px solid var(${UI.COLOR_TEXT_OPACITY_50});
     box-shadow: 0 5px 16px 0 var(${UI.COLOR_PRIMARY_OPACITY_25});
   }
+
+  &.blue-background-class {
+    background: var(${UI.COLOR_INFO_BG});
+    color: var(${UI.COLOR_INFO_TEXT});
+    border: 1px dotted var(${UI.COLOR_INFO_TEXT});
+  }
 `
 
 export const HookItemHeader = styled.div`
@@ -26,18 +33,21 @@ export const HookItemHeader = styled.div`
   align-items: center;
   padding: 6px 10px;
   font-size: 14px;
+  gap: 8px;
   font-weight: 600;
   color: var(${UI.COLOR_TEXT_OPACITY_70});
   background: var(${UI.COLOR_PAPER});
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
+  transition: all 0.2s ease-in-out;
 `
 
 export const DragIcon = styled.div`
   box-sizing: content-box;
   width: 10px;
   height: 16px;
-  cursor: move;
+  cursor: grab;
+  flex: 0 0 auto;
 
   > svg {
     width: 100%;
@@ -50,6 +60,10 @@ export const HookItemInfo = styled.div`
   flex-flow: row nowrap;
   align-items: center;
   gap: 8px;
+  cursor: grab;
+  position: relative;
+  width: 100%;
+  user-select: none;
 
   > img {
     --size: 26px;
@@ -66,6 +80,31 @@ export const HookItemInfo = styled.div`
   }
 `
 
+export const HookNumber = styled.i`
+  --minSize: 26px;
+  min-height: var(--minSize);
+  min-width: var(--minSize);
+  border-radius: 9px;
+  margin: 0;
+  padding: 3px 6px;
+  color: var(${UI.COLOR_TEXT});
+  font-weight: 500;
+  background: var(${UI.COLOR_PAPER_DARKER});
+  border: 1px dotted transparent;
+  font-style: normal;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+
+  .blue-background-class & {
+    background: var(${UI.COLOR_INFO_BG});
+    color: var(${UI.COLOR_INFO_TEXT});
+    border: 2px dotted var(${UI.COLOR_INFO_TEXT});
+  }
+`
+
 export const HookItemActions = styled.div`
   display: flex;
   flex-flow: row nowrap;

apps/cowswap-frontend/src/modules/hooksStore/pure/AppliedHookList/index.tsx

@@ -0,0 +1,71 @@
+import { useRef, useEffect } from 'react'
+
+import Sortable from 'sortablejs'
+import styled from 'styled-components/macro'
+
+import { CowHookDetailsSerialized } from '../../types/hooks'
+import { AppliedHookItem } from '../AppliedHookItem'
+
+const HookList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-flow: column wrap;
+  gap: 10px;
+`
+
+interface AppliedHookListProps {
+  account: string | undefined
+  hooks: CowHookDetailsSerialized[]
+  isPreHook: boolean
+  removeHook: (uuid: string, isPreHook: boolean) => void
+  editHook: (uuid: string) => void
+  moveHook: (fromIndex: number, toIndex: number) => void
+}
+
+export function AppliedHookList({ account, hooks, isPreHook, removeHook, editHook, moveHook }: AppliedHookListProps) {
+  const listRef = useRef<HTMLUListElement>(null)
+
+  useEffect(() => {
+    let sortable: Sortable | undefined
+
+    if (listRef.current) {
+      sortable = Sortable.create(listRef.current, {
+        animation: 250,
+        sort: true,
+        ghostClass: 'blue-background-class',
+        easing: 'ease-in-out',
+        handle: '.DragArea',
+        dataIdAttr: 'data-uid',
+        onEnd: function (evt) {
+          if (evt.oldIndex != null && evt.newIndex != null && evt.oldIndex !== evt.newIndex) {
+            moveHook(evt.oldIndex, evt.newIndex)
+          }
+        },
+      })
+    }
+
+    return () => {
+      if (sortable) {
+        sortable.destroy()
+      }
+    }
+  }, [moveHook])
+
+  return (
+    <HookList ref={listRef}>
+      {hooks.map((hookDetails, index) => (
+        <AppliedHookItem
+          key={hookDetails.uuid}
+          index={index}
+          account={account}
+          hookDetails={hookDetails}
+          isPreHook={isPreHook}
+          removeHook={removeHook}
+          editHook={editHook}
+        />
+      ))}
+    </HookList>
+  )
+}

apps/cowswap-frontend/src/pages/Hooks/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { HooksStoreWidget } from 'modules/hooksStore'
 import { SwapUpdaters } from 'modules/swap'
 

package.json

@@ -192,8 +192,6 @@
     "react-copy-to-clipboard": "^5.0.2",
     "react-cytoscapejs": "^1.2.1",
     "react-device-detect": "^1.6.2",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
     "react-feather": "^2.0.10",
     "react-ga4": "^1.4.1",
@@ -219,6 +217,7 @@
     "remark-gfm": "^4.0.0",
     "setimmediate": "^1.0.5",
     "simple-sitemap-renderer": "^1.1.0",
+    "sortablejs": "^1.15.3",
     "styled-components": "5.3.6",
     "styled-jsx": "5.1.2",
     "styled-theming": "^2.2.0",
@@ -281,6 +280,7 @@
     "@types/react-textfit": "^1.1.4",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/rebass": "^4.0.10",
+    "@types/sortablejs": "^1.15.8",
     "@types/styled-components": "5.1.26",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^9.0.8",
@@ -338,4 +338,4 @@
     "vite-tsconfig-paths": "~4.3.2",
     "vitest": "~0.32.0"
   }
-}
+}