From acfcfcce79aa33b18d7ec1098dcc9f7cf8a8726e Mon Sep 17 00:00:00 2001 From: saml33 Date: Thu, 31 Aug 2023 13:52:33 +1000 Subject: [PATCH] use react-hotkeys-hook --- components/trade/TradeHotKeys.tsx | 41 ++++-------------------------- hooks/useCustomHotKeys.ts | 22 ++++++++++++++++ package.json | 2 +- public/locales/en/settings.json | 1 - public/locales/es/settings.json | 1 - public/locales/ru/settings.json | 1 - public/locales/zh/settings.json | 1 - public/locales/zh_tw/settings.json | 1 - yarn.lock | 18 ++++--------- 9 files changed, 33 insertions(+), 55 deletions(-) create mode 100644 hooks/useCustomHotKeys.ts diff --git a/components/trade/TradeHotKeys.tsx b/components/trade/TradeHotKeys.tsx index dae4c4a7..e0b6aac3 100644 --- a/components/trade/TradeHotKeys.tsx +++ b/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 ? ( - k.keySequence).toString()} - onKeyDown={onKeyDown} - > - {children} - - ) : ( - <>{children} - ) + return <>{children} } export default TradeHotKeys diff --git a/hooks/useCustomHotKeys.ts b/hooks/useCustomHotKeys.ts new file mode 100644 index 00000000..68ac4bf4 --- /dev/null +++ b/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, + }, + ) + }) +} diff --git a/package.json b/package.json index 448edad7..a1d51297 100644 --- a/package.json +++ b/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", diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json index f7323349..daebd7f0 100644 --- a/public/locales/en/settings.json +++ b/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", diff --git a/public/locales/es/settings.json b/public/locales/es/settings.json index f7323349..daebd7f0 100644 --- a/public/locales/es/settings.json +++ b/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", diff --git a/public/locales/ru/settings.json b/public/locales/ru/settings.json index f7323349..daebd7f0 100644 --- a/public/locales/ru/settings.json +++ b/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", diff --git a/public/locales/zh/settings.json b/public/locales/zh/settings.json index 6e27d9ef..b941f4e7 100644 --- a/public/locales/zh/settings.json +++ b/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", diff --git a/public/locales/zh_tw/settings.json b/public/locales/zh_tw/settings.json index d591cfa1..f1c4a009 100644 --- a/public/locales/zh_tw/settings.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 3cfe1e9e..169d79e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1999,7 +1999,7 @@ "@wallet-standard/app" "^1.0.1" "@wallet-standard/base" "^1.0.1" -"@solana/web3.js@^1.17.0", "@solana/web3.js@^1.21.0", "@solana/web3.js@^1.22.0", "@solana/web3.js@^1.32.0", "@solana/web3.js@^1.36.0", "@solana/web3.js@^1.44.3", "@solana/web3.js@^1.50.1", "@solana/web3.js@^1.56.2", "@solana/web3.js@^1.63.1", "@solana/web3.js@^1.66.2", "@solana/web3.js@^1.68.0", "@solana/web3.js@^1.78.2", "@solana/web3.js@^1.78.3": +"@solana/web3.js@^1.17.0", "@solana/web3.js@^1.21.0", "@solana/web3.js@^1.22.0", "@solana/web3.js@^1.32.0", "@solana/web3.js@^1.36.0", "@solana/web3.js@^1.44.3", "@solana/web3.js@^1.50.1", "@solana/web3.js@^1.56.2", "@solana/web3.js@^1.63.1", "@solana/web3.js@^1.66.2", "@solana/web3.js@^1.68.0", "@solana/web3.js@^1.73.2", "@solana/web3.js@^1.78.3": version "1.78.4" resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.78.4.tgz#e8ca9abe4ec2af5fc540c1d272efee24aaffedb3" integrity sha512-up5VG1dK+GPhykmuMIozJZBbVqpm77vbOG6/r5dS7NBGZonwHfTLdBbsYc3rjmaQ4DpCXUa3tUc4RZHRORvZrw== @@ -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"