diff --git a/package.json b/package.json index 1746866044..62c127ef1e 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,8 @@ "rehype-raw": "^6.1.1", "semver": "^7.6.3", "style-loader": "^3.3.2", - "umi-request": "^1.4.0" + "umi-request": "^1.4.0", + "use-sound": "^5.0.0" }, "devDependencies": { "@babel/core": "^7.18.2", diff --git a/packages/extension-polkagate/src/assets/sounds/bonk-click-wdeny-feel.wav b/packages/extension-polkagate/src/assets/sounds/bonk-click-wdeny-feel.wav new file mode 100644 index 0000000000..d03ad12da6 Binary files /dev/null and b/packages/extension-polkagate/src/assets/sounds/bonk-click-wdeny-feel.wav differ diff --git a/packages/extension-polkagate/src/assets/sounds/button-casual-event.wav b/packages/extension-polkagate/src/assets/sounds/button-casual-event.wav new file mode 100644 index 0000000000..7bd635dc74 Binary files /dev/null and b/packages/extension-polkagate/src/assets/sounds/button-casual-event.wav differ diff --git a/packages/extension-polkagate/src/assets/sounds/click-pop-two-part.wav b/packages/extension-polkagate/src/assets/sounds/click-pop-two-part.wav new file mode 100644 index 0000000000..2676ba4602 Binary files /dev/null and b/packages/extension-polkagate/src/assets/sounds/click-pop-two-part.wav differ diff --git a/packages/extension-polkagate/src/assets/sounds/heavy_00.wav b/packages/extension-polkagate/src/assets/sounds/heavy_00.wav new file mode 100644 index 0000000000..328ba9498f Binary files /dev/null and b/packages/extension-polkagate/src/assets/sounds/heavy_00.wav differ diff --git a/packages/extension-polkagate/src/assets/sounds/index.ts b/packages/extension-polkagate/src/assets/sounds/index.ts new file mode 100644 index 0000000000..6be6d6f127 --- /dev/null +++ b/packages/extension-polkagate/src/assets/sounds/index.ts @@ -0,0 +1,8 @@ +// Copyright 2019-2025 @polkadot/extension-polkagate authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +//@ts-nocheck +export { default as heavy } from './heavy_00.wav'; +export { default as pingBing } from './ping-bing.wav'; +export { default as quickUiOrEventDeep } from './quick-ui-or-event-deep.wav'; +export { default as soft } from './soft_00.wav'; diff --git a/packages/extension-polkagate/src/assets/sounds/littlerobotsoundfactory_06.wav b/packages/extension-polkagate/src/assets/sounds/littlerobotsoundfactory_06.wav new file mode 100644 index 0000000000..3d0d3741af Binary files /dev/null and b/packages/extension-polkagate/src/assets/sounds/littlerobotsoundfactory_06.wav differ diff --git a/packages/extension-polkagate/src/assets/sounds/mouth_06.wav b/packages/extension-polkagate/src/assets/sounds/mouth_06.wav new file mode 100644 index 0000000000..b5e4e98f96 Binary files /dev/null and b/packages/extension-polkagate/src/assets/sounds/mouth_06.wav differ diff --git a/packages/extension-polkagate/src/assets/sounds/ping-bing.wav b/packages/extension-polkagate/src/assets/sounds/ping-bing.wav new file mode 100644 index 0000000000..3a1fe6d1f3 Binary files /dev/null and b/packages/extension-polkagate/src/assets/sounds/ping-bing.wav differ diff --git a/packages/extension-polkagate/src/assets/sounds/quick-ui-or-event-deep.wav b/packages/extension-polkagate/src/assets/sounds/quick-ui-or-event-deep.wav new file mode 100644 index 0000000000..fa1cbc52b6 Binary files /dev/null and b/packages/extension-polkagate/src/assets/sounds/quick-ui-or-event-deep.wav differ diff --git a/packages/extension-polkagate/src/assets/sounds/rollover-low.wav b/packages/extension-polkagate/src/assets/sounds/rollover-low.wav new file mode 100644 index 0000000000..7486741433 Binary files /dev/null and b/packages/extension-polkagate/src/assets/sounds/rollover-low.wav differ diff --git a/packages/extension-polkagate/src/assets/sounds/soft_00.wav b/packages/extension-polkagate/src/assets/sounds/soft_00.wav new file mode 100644 index 0000000000..fffb646e42 Binary files /dev/null and b/packages/extension-polkagate/src/assets/sounds/soft_00.wav differ diff --git a/packages/extension-polkagate/src/assets/sounds/standard_00.wav b/packages/extension-polkagate/src/assets/sounds/standard_00.wav new file mode 100644 index 0000000000..ff3a455060 Binary files /dev/null and b/packages/extension-polkagate/src/assets/sounds/standard_00.wav differ diff --git a/packages/extension-polkagate/src/hooks/useAlerts.ts b/packages/extension-polkagate/src/hooks/useAlerts.ts index 560875fd33..979ba93a92 100644 --- a/packages/extension-polkagate/src/hooks/useAlerts.ts +++ b/packages/extension-polkagate/src/hooks/useAlerts.ts @@ -5,12 +5,15 @@ import type { Severity } from '../util/types'; import { Chance } from 'chance'; import { useCallback, useContext, useMemo } from 'react'; +import useSound from 'use-sound'; +import { soft } from '../assets/sounds'; import { AlertContext } from '../components'; import { TIME_TO_REMOVE_ALERT } from '../util/constants'; export default function useAlerts () { const { alerts, setAlerts } = useContext(AlertContext); + const [play] = useSound(soft, { volume: 0.4 }); const random = useMemo(() => new Chance(), []); @@ -21,11 +24,12 @@ export default function useAlerts () { const notify = useCallback((text: string, severity?: Severity) => { const id = random.string({ length: 10 }); + play(); setAlerts((prev) => [...prev, { id, severity: severity || 'info', text }]); const timeout = setTimeout(() => removeAlert(id), TIME_TO_REMOVE_ALERT); return () => clearTimeout(timeout); - }, [random, removeAlert, setAlerts]); + }, [play, random, removeAlert, setAlerts]); return { alerts, notify, removeAlert }; } diff --git a/packages/extension-polkagate/src/partials/WebsitesAccess.tsx b/packages/extension-polkagate/src/partials/WebsitesAccess.tsx index eb82992e68..d902ea1d38 100644 --- a/packages/extension-polkagate/src/partials/WebsitesAccess.tsx +++ b/packages/extension-polkagate/src/partials/WebsitesAccess.tsx @@ -7,8 +7,10 @@ import type { ExtensionPopupCloser } from '../util/handleExtensionPopup'; import { Box, Container, Stack, Typography } from '@mui/material'; import { Key, Link2, Profile, Trash } from 'iconsax-react'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import useSound from 'use-sound'; import { emptyList } from '../assets/icons/index'; +import { heavy } from '../assets/sounds'; import { ActionButton, FadeOnScroll, MySnackbar, MyTooltip, SearchField } from '../components'; import { useIsExtensionPopup, useSelectedAccount, useTranslation } from '../hooks'; import { getAuthList, removeAuthorization } from '../messaging'; @@ -48,6 +50,7 @@ function AccessList ({ filteredAuthorizedDapps, setAccessToEdit, setRefresh, set const selectedAccount = useSelectedAccount(); const refContainer = useRef(null); const isExtension = useIsExtensionPopup(); + const [play] = useSound(heavy, { volume: 0.2 }); const [isBusy, setIsBusy] = useState(); const [showSnackbar, setShowSnackbar] = useState(false); @@ -61,10 +64,11 @@ function AccessList ({ filteredAuthorizedDapps, setAccessToEdit, setRefresh, set removeAuthorization(url) .catch(console.error) .finally(() => { + play(); setIsBusy(false); setShowSnackbar(true); }); - }, []); + }, [play]); const onEditList = useCallback((info: AuthUrlInfo) => { setAccessToEdit(info); diff --git a/packages/extension/webpack.shared.cjs b/packages/extension/webpack.shared.cjs index 9cd3ebe7bc..8299cfaace 100644 --- a/packages/extension/webpack.shared.cjs +++ b/packages/extension/webpack.shared.cjs @@ -71,6 +71,10 @@ module.exports = (entry, alias = {}) => ({ } } ] + }, + { + test: /\.(wav|mp3|ogg)$/, + type: 'asset/resource' } ] }, diff --git a/yarn.lock b/yarn.lock index d6adead8d4..b477009899 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13139,6 +13139,13 @@ __metadata: languageName: node linkType: hard +"howler@npm:^2.2.4": + version: 2.2.4 + resolution: "howler@npm:2.2.4" + checksum: 10/e4177f6581ede99fdec68c2dc16a01e74ed3e4f3b28d4804030246f74f15a50311bd3d4d332a6e968a296e6bae1d0a8c8703e8e22d98ef8f5a3299e545e2fe55 + languageName: node + linkType: hard + "hpack.js@npm:^2.1.6": version: 2.1.6 resolution: "hpack.js@npm:2.1.6" @@ -19512,6 +19519,7 @@ __metadata: style-loader: "npm:^3.3.2" typedoc: "npm:^0.27.9" umi-request: "npm:^1.4.0" + use-sound: "npm:^5.0.0" webpack-bundle-analyzer: "npm:^4.9.0" languageName: unknown linkType: soft @@ -22103,6 +22111,17 @@ __metadata: languageName: node linkType: hard +"use-sound@npm:^5.0.0": + version: 5.0.0 + resolution: "use-sound@npm:5.0.0" + dependencies: + howler: "npm:^2.2.4" + peerDependencies: + react: ">=16.8" + checksum: 10/36f701c65efd93c9d864d855ca758193b4fd8788a542a7954e6563176bf1cb0ca29ab19bdb29139c1e723a2f69e256c6bdccbc45a9dadaffcacda1460f716a0e + languageName: node + linkType: hard + "utf-8-validate@npm:^5.0.2": version: 5.0.10 resolution: "utf-8-validate@npm:5.0.10"