Merge pull request #251 from blockworks-foundation/hotkeys-hook

use react-hotkeys-hook

components/trade/TradeHotKeys.tsx

@@ -12,7 +12,6 @@ import {
 import { HotKey } from '@components/settings/HotKeysSettings'
 import mangoStore from '@store/mangoStore'
 import { ReactNode, useCallback } from 'react'
-import Hotkeys from 'react-hot-keys'
 import { GenericMarket, isMangoError } from 'types'
 import { HOT_KEYS_KEY, SOUND_SETTINGS_KEY } from 'utils/constants'
 import { notify } from 'utils/notifications'
@@ -22,11 +21,9 @@ import useLocalStorageState from 'hooks/useLocalStorageState'
 import { INITIAL_SOUND_SETTINGS } from '@components/settings/SoundSettings'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { floorToDecimal, getDecimalCount } from 'utils/numbers'
-import useMangoAccount from 'hooks/useMangoAccount'
 import { Market } from '@project-serum/serum'
-import { useRouter } from 'next/router'
-import useUnownedAccount from 'hooks/useUnownedAccount'
 import { useTranslation } from 'next-i18next'
+import { useCustomHotkeys } from 'hooks/useCustomHotKeys'
 
 const set = mangoStore.getState().set
 
@@ -169,11 +166,8 @@ const calcPerpMax = (
 }
 
 const TradeHotKeys = ({ children }: { children: ReactNode }) => {
-  const { t } = useTranslation(['common', 'settings'])
+  const { t } = useTranslation(['common', 'settings', 'trade'])
   const { price: oraclePrice, serumOrPerpMarket } = useSelectedMarket()
-  const { mangoAccountAddress } = useMangoAccount()
-  const { isUnownedAccount } = useUnownedAccount()
-  const { asPath } = useRouter()
   const [hotKeys] = useLocalStorageState(HOT_KEYS_KEY, [])
   const [soundSettings] = useLocalStorageState(
     SOUND_SETTINGS_KEY,
@@ -270,7 +264,7 @@ const TradeHotKeys = ({ children }: { children: ReactNode }) => {
 
         notify({
           type: 'info',
-          title: t('settings:placing-order'),
+          title: t('trade:placing-order'),
           description: `${t(orderSide)} ${baseSize} ${selectedMarket.name} ${
             orderType === 'limit'
               ? `${t('settings:at')} ${price}`
@@ -360,34 +354,9 @@ const TradeHotKeys = ({ children }: { children: ReactNode }) => {
     [serumOrPerpMarket],
   )
 
-  const onKeyDown = useCallback(
-    (keyName: string) => {
-      const orderDetails = hotKeys.find(
-        (hk: HotKey) => hk.keySequence === keyName,
-      )
-      if (orderDetails) {
-        handlePlaceOrder(orderDetails)
-      }
-    },
-    [handlePlaceOrder, hotKeys],
-  )
+  useCustomHotkeys(hotKeys, handlePlaceOrder)
 
-  const showHotKeys =
-    hotKeys.length &&
-    asPath.includes('/trade') &&
-    mangoAccountAddress &&
-    !isUnownedAccount
-
-  return showHotKeys ? (
-    <Hotkeys
-      keyName={hotKeys.map((k: HotKey) => k.keySequence).toString()}
-      onKeyDown={onKeyDown}
-    >
-      {children}
-    </Hotkeys>
-  ) : (
-    <>{children}</>
-  )
+  return <>{children}</>
 }
 
 export default TradeHotKeys

hooks/useCustomHotKeys.ts

@@ -0,0 +1,22 @@
+import { HotKey } from '@components/settings/HotKeysSettings'
+import { useHotkeys } from 'react-hotkeys-hook'
+
+export const useCustomHotkeys = (
+  hotkeys: HotKey[],
+  handleHotkeyAction: (hotkey: HotKey) => void,
+) => {
+  hotkeys.forEach((hotkey: HotKey) => {
+    const { keySequence } = hotkey
+
+    useHotkeys(
+      keySequence,
+      (event) => {
+        event.preventDefault()
+        handleHotkeyAction(hotkey)
+      },
+      {
+        keydown: true,
+      },
+    )
+  })
+}

package.json

@@ -63,7 +63,7 @@
     "react-dom": "18.2.0",
     "react-flip-numbers": "3.0.5",
     "react-grid-layout": "1.3.4",
-    "react-hot-keys": "2.7.2",
+    "react-hotkeys-hook": "4.4.1",
     "react-i18next": "13.0.2",
     "react-nice-dates": "3.1.0",
     "react-number-format": "4.9.2",

public/locales/en/settings.json

@@ -66,7 +66,6 @@
     "percentage-of-max": "{{size}}% of Max",
     "perp-open-orders": "Perp Open Orders",
     "perp-positions": "Perp Positions",
-    "placing-order": "Placing Order...",
     "preferred-explorer": "Preferred Explorer",
     "privacy-disable": "Disable Privacy Mode",
     "privacy-enable": "Enable Privacy Mode",

public/locales/es/settings.json

@@ -66,7 +66,6 @@
     "percentage-of-max": "{{size}}% of Max",
     "perp-open-orders": "Perp Open Orders",
     "perp-positions": "Perp Positions",
-    "placing-order": "Placing Order...",
     "preferred-explorer": "Preferred Explorer",
     "privacy-disable": "Disable Privacy Mode",
     "privacy-enable": "Enable Privacy Mode",

public/locales/ru/settings.json

@@ -66,7 +66,6 @@
     "percentage-of-max": "{{size}}% of Max",
     "perp-open-orders": "Perp Open Orders",
     "perp-positions": "Perp Positions",
-    "placing-order": "Placing Order...",
     "preferred-explorer": "Preferred Explorer",
     "privacy-disable": "Disable Privacy Mode",
     "privacy-enable": "Enable Privacy Mode",

public/locales/zh/settings.json

@@ -65,7 +65,6 @@
     "percentage-of-max": "{{size}}% of Max",
     "perp-open-orders": "Perp Open Orders",
     "perp-positions": "Perp Positions",
-    "placing-order": "Placing Order...",
     "preferred-explorer": "首选探索器",
     "privacy-disable": "Disable Privacy Mode",
     "privacy-enable": "Enable Privacy Mode",

public/locales/zh_tw/settings.json

@@ -65,7 +65,6 @@
     "percentage-of-max": "{{size}}% of Max",
     "perp-open-orders": "Perp Open Orders",
     "perp-positions": "Perp Positions",
-    "placing-order": "Placing Order...",
     "preferred-explorer": "首選探索器",
     "privacy-disable": "Disable Privacy Mode",
     "privacy-enable": "Enable Privacy Mode",

yarn.lock

@@ -5574,11 +5574,6 @@ hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   dependencies:
     react-is "^16.7.0"
 
-hotkeys-js@^3.8.1:
-  version "3.10.2"
-  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.10.2.tgz#cf52661904f5a13a973565cb97085fea2f5ae257"
-  integrity sha512-Z6vLmJTYzkbZZXlBkhrYB962Q/rZGc/WHQiyEGu9ZZVF7bAeFDjjDa31grWREuw9Ygb4zmlov2bTkPYqj0aFnQ==
-
 howler@2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.3.tgz#a2eff9b08b586798e7a2ee17a602a90df28715da"
@@ -7324,13 +7319,10 @@ react-grid-layout@1.3.4:
     react-draggable "^4.0.0"
     react-resizable "^3.0.4"
 
-react-hot-keys@2.7.2:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/react-hot-keys/-/react-hot-keys-2.7.2.tgz#7d2b02b7e2cf69182ea71ca01885446ebfae01d2"
-  integrity sha512-Z7eSh7SU6s52+zP+vkfFoNk0x4kgEmnwqDiyACKv53crK2AZ7FUaBLnf+vxLor3dvtId9murLmKOsrJeYgeHWw==
-  dependencies:
-    hotkeys-js "^3.8.1"
-    prop-types "^15.7.2"
+react-hotkeys-hook@4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-4.4.1.tgz#1f7a7a1c9c21d4fa3280bf340fcca8fd77d81994"
+  integrity sha512-sClBMBioFEgFGYLTWWRKvhxcCx1DRznd+wkFHwQZspnRBkHTgruKIHptlK/U/2DPX8BhHoRGzpMVWUXMmdZlmw==
 
 react-i18next@13.0.2:
   version "13.0.2"