fix: improved dragging

airgap-it · Jan 16, 2025 · 6947f2a · 6947f2a
1 parent ffb571d
commit 6947f2a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/beacon-ui/package.json b/packages/beacon-ui/package.json
@@ -38,28 +38,29 @@
     "@airgap/beacon-transport-postmessage": "4.3.1",
     "@airgap/beacon-types": "4.3.1",
     "@airgap/beacon-utils": "4.3.1",
+    "@use-gesture/react": "^10.3.1",
     "@walletconnect/utils": "2.14.0",
     "qrcode-svg": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.24.6",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/node": "^20.6.0",
     "@types/qrcode-svg": "^1.1.2",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@vitejs/plugin-react": "^4.1.0",
     "rollup": "^3.29.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.35.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@babel/preset-react": "^7.24.6",
     "typescript": "^5.2.2",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "vite": "^4.4.9",
-    "@vitejs/plugin-react": "^4.1.0"
+    "vite": "^4.4.9"
   }
 }
diff --git a/packages/beacon-ui/src/components/toast/index.tsx b/packages/beacon-ui/src/components/toast/index.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useDrag } from '@use-gesture/react'
 import { CloseIcon } from '../icons'
 import Loader from '../loader'
 import { isMobileOS } from '../../utils/platform'
@@ -38,16 +39,17 @@ function parseWallet(
 
 const Toast: React.FC<ToastProps> = (props: ToastProps) => {
   const [showMoreInfo, setShowMoreInfo] = useState<boolean>(true)
-  const [divPosition, setDivPosition] = useState<{ x: number; y: number }>({
-    x: isMobileOS(window) ? 12 : window.innerWidth - 460,
-    y: 12
-  })
-  const [isDragging, setIsDragging] = useState<boolean>(false)
-  const offset = { x: 0, y: 0 }
-
   const hasWalletObject = props.label.includes('{{wallet}}') && props.walletInfo
   const isRequestSentToast = props.label.includes('Request sent to')
 
+  // Track the toast position (x, y)
+  const [[x, y], setPosition] = useState<[number, number]>([0, 0])
+
+  const bindDrag = useDrag(({ offset: [mx, my] }) => {
+    // Update x, y whenever offset changes
+    setPosition([mx, my])
+  })
+
   useEffect(() => {
     if (isRequestSentToast) {
       setShowMoreInfo(false)
@@ -57,70 +59,33 @@ const Toast: React.FC<ToastProps> = (props: ToastProps) => {
     }
   }, [isRequestSentToast])
 
-  const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {
-    event.preventDefault() // prevents inner text highlighting
-    const target = event.target as HTMLElement
-
-    if (target.className !== 'toast-header' && target.parentElement?.className !== 'toast-header') {
-      return
-    }
-
-    const boundingRect = target.getBoundingClientRect()
-    offset.x = event.clientX - boundingRect.x
-    offset.y = event.clientY - boundingRect.y
-    setIsDragging(true)
-  }
-
-  const onMouseMoveHandler = (event: MouseEvent) => {
-    if (isDragging && event.buttons === 1) {
-      const newX = Math.min(Math.max(event.clientX - offset.x, 0), window.innerWidth - 460)
-      const newY = Math.min(Math.max(event.clientY - offset.y, 0), window.innerHeight - 12)
-
-      setDivPosition({
-        x: newX,
-        y: newY
-      })
-    }
-  }
-
-  const onMouseUpHandler = () => {
-    setIsDragging(false)
-  }
-
-  useEffect(() => {
-    if (isDragging) {
-      window.addEventListener('mousemove', onMouseMoveHandler)
-      window.addEventListener('mouseup', onMouseUpHandler)
-    } else {
-      window.removeEventListener('mousemove', onMouseMoveHandler)
-      window.removeEventListener('mouseup', onMouseUpHandler)
-    }
-
-    return () => {
-      window.removeEventListener('mousemove', onMouseMoveHandler)
-      window.removeEventListener('mouseup', onMouseUpHandler)
-    }
-  }, [isDragging])
-
   return (
     <div
-      style={{ left: `${divPosition.x}px`, top: `${divPosition.y}px` }}
+      style={{
+        position: 'absolute',
+        transform: `translate3d(${x}px, ${y}px, 0)`,
+        // Required
+        touchAction: 'none'
+      }}
       className={props.open ? 'toast-wrapper-show' : 'toast-wrapper-hide'}
-      onMouseDown={onMouseDownHandler}
+      {...bindDrag()}
     >
       <div className="toast-header">
-        {!isDragging && <Loader />}
+        <Loader />
         {hasWalletObject && props.walletInfo && <>{parseWallet(props.label, props.walletInfo)}</>}
         {!hasWalletObject && <p className="toast-label">{props.label}</p>}
+
         {!isMobileOS(window) && props.openWalletAction && (
           <div className="toast-action-button" onClick={props.openWalletAction}>
             Open Wallet
           </div>
         )}
+
         <div className="toast-button-icon" onClick={props.onClickClose}>
           <CloseIcon />
         </div>
       </div>
+
       {props.actions && showMoreInfo && (
         <div className="toast-body">
           {props.actions.map((action, index) => (

diff --git a/packages/beacon-ui/src/components/toast/styles.css b/packages/beacon-ui/src/components/toast/styles.css
@@ -1,4 +1,5 @@
 .toast-wrapper-show {
+  user-select: none;
   max-width: 460px;
   overflow: hidden;
   background-color: white;