diff --git a/.licenserc.json b/.licenserc.json index 88e91dbe41..8c5022e23f 100644 --- a/.licenserc.json +++ b/.licenserc.json @@ -3,5 +3,9 @@ "// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors", "// SPDX-License-Identifier: GPL-3.0-only" ], + "**/*.{.css}": [ + "/* Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors", + "SPDX-License-Identifier: GPL-3.0-only */" + ], "ignore": ["testdata", "npm", "public/", "Dockerfile", "src/config/validators/"] } diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 32316e2f7d..0000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,9 +0,0 @@ -# Changelog - -## [1.1.6](https://github.com/paritytech/polkadot-staking-dashboard/compare/v1.1.5...v1.1.6) (2024-02-15) - - -### Bug Fixes - -* fix manage nominations refresh ([#1950](https://github.com/paritytech/polkadot-staking-dashboard/issues/1950)) ([e09176b](https://github.com/paritytech/polkadot-staking-dashboard/commit/e09176bd74f4f78b1d8c2fb2779c77967a9f1c5d)) -* stringify nomination comparison ([#1952](https://github.com/paritytech/polkadot-staking-dashboard/issues/1952)) ([f454dbf](https://github.com/paritytech/polkadot-staking-dashboard/commit/f454dbf4ee14745c6791b2d5ec763ad0a77d6fc2)) diff --git a/README.md b/README.md index 9f5a50ca3d..52a30193ad 100644 --- a/README.md +++ b/README.md @@ -6,11 +6,9 @@ ## Contributing Community Assets -The Polkadot Staking Dashboard is a community-driven project, and we welcome contributions to bolster the dashboard's functionality and features. +### Validator Operators -- **Web Extensions**: Submit PR to the [Polkadot Cloud repository](https://github.com/polkadot-cloud/library/tree/main/packages/assets#adding-web-extension-wallets) to add a web extension. The extension will then be available in the `@polkadot-cloud/assets` NPM package. Full instructions can be found [here](https://github.com/polkadot-cloud/library/tree/main/packages/assets#adding-web-extension-wallets). - -- **Validator Operators**: Submit PR to the [Polkadot Cloud repository](https://github.com/polkadot-cloud/library/tree/main/packages/assets#adding-validator-operators) to add a validator operator. The operator will then be available in the `@polkadot-cloud/assets` NPM package. Full instructions can be found [here](https://github.com/polkadot-cloud/library/tree/main/packages/assets#adding-validator-operators). +To showcase a validator operator on staking dashboard, submit a PR to the [**`@w3ux`**](https://github.com/w3ux/w3ux-library/tree/main) library. The operator will then be available in the **`@w3ux/validator-assets`** NPM package. [Full instructions](https://github.com/w3ux/w3ux-library/tree/main/library/validator-assets). ## URL Variable Support diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 881503dfce..6823de7e13 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,5 +1,25 @@ # Changelog + +## [1.1.7](https://github.com/paritytech/polkadot-staking-dashboard/compare/v1.1.6...v1.1.7) (2024-02-24) + +### Features + +* **refactor:** Add Structure kit ([#1963](https://github.com/paritytech/polkadot-staking-dashboard/issues/1963)) ([e6b181b](https://github.com/paritytech/polkadot-staking-dashboard/commit/e6b181be92c4abf706fd3b7bbe43bbf86abb6318)) +* **refactor:** buttons to project ([#1960](https://github.com/paritytech/polkadot-staking-dashboard/issues/1960)) ([24d365c](https://github.com/paritytech/polkadot-staking-dashboard/commit/24d365cc7bc4ec42ff7240a5fd7d0b24285b94d4)) +* **refactor:** use local themes ([#1953](https://github.com/paritytech/polkadot-staking-dashboard/issues/1953)) ([03e9f71](https://github.com/paritytech/polkadot-staking-dashboard/commit/03e9f7172a73d74b20fee0831bfd8fdc154f43c2)) +* **ux:** Check SubWallet Mobile and filter Subwallet extension ([#1983](https://github.com/paritytech/polkadot-staking-dashboard/issues/1983)) ([3700fad](https://github.com/paritytech/polkadot-staking-dashboard/commit/3700fad464318bb7befd75ff254921c085cb194d)) + + +## [1.1.6](https://github.com/paritytech/polkadot-staking-dashboard/compare/v1.1.5...v1.1.6) (2024-02-15) + + +### Bug Fixes + +* fix manage nominations refresh ([#1950](https://github.com/paritytech/polkadot-staking-dashboard/issues/1950)) ([e09176b](https://github.com/paritytech/polkadot-staking-dashboard/commit/e09176bd74f4f78b1d8c2fb2779c77967a9f1c5d)) +* stringify nomination comparison ([#1952](https://github.com/paritytech/polkadot-staking-dashboard/issues/1952)) ([f454dbf](https://github.com/paritytech/polkadot-staking-dashboard/commit/f454dbf4ee14745c6791b2d5ec763ad0a77d6fc2)) + + ## [1.1.5](https://github.com/paritytech/polkadot-staking-dashboard/compare/v1.1.4...v1.1.5) (2024-02-14) ### Features diff --git a/package.json b/package.json index 7cd86217ef..239fdb9448 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "polkadot-staking-dashboard", - "version": "1.1.6", + "version": "1.2.0", "type": "module", "license": "GPL-3.0-only", "scripts": { @@ -27,27 +27,30 @@ "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@ledgerhq/hw-transport-webhid": "^6.28.4", - "@polkadot-cloud/assets": "^0.4.0", - "@polkadot-cloud/core": "^1.3.3", - "@polkadot-cloud/react": "^0.5.4", - "@polkadot-cloud/utils": "^0.3.0", - "@polkadot/api": "^10.11.2", + "@polkadot/api": "^10.11.3", "@polkadot/keyring": "^12.6.2", - "@polkadot/rpc-provider": "^10.11.2", + "@polkadot/rpc-provider": "10.11.2", "@polkadot/util": "^12.6.2", "@polkadot/util-crypto": "^12.6.2", "@polkawatch/ddp-client": "^2.0.11", "@substrate/connect": "0.7.35", + "@w3ux/extension-assets": "0.1.0", + "@w3ux/hooks": "^0.0.3", + "@w3ux/react-connect-kit": "^0.0.4", + "@w3ux/react-odometer": "^0.0.3", + "@w3ux/react-polkicon": "^0.0.2", + "@w3ux/utils": "^0.0.2", + "@w3ux/validator-assets": "^0.0.4", "@zondax/ledger-substrate": "^0.41.3", "bignumber.js": "^9.1.2", "bn.js": "^5.2.1", "buffer": "^6.0.3", - "chart.js": "^4.4.1", + "chart.js": "^4.4.2", "chroma-js": "^2.4.2", "date-fns": "^3.3.1", - "framer-motion": "^11.0.5", + "framer-motion": "^11.0.8", "html5-qrcode": "^2.3.8", - "i18next": "^23.9.0", + "i18next": "^23.10.0", "i18next-browser-languagedetector": "^7.2.0", "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1", @@ -56,33 +59,33 @@ "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", - "react-error-boundary": "^4.0.12", + "react-error-boundary": "^4.0.13", "react-helmet": "^6.1.0", "react-i18next": "^14.0.5", - "react-router-dom": "^6.22.1", + "react-router-dom": "^6.22.2", "react-scroll": "^1.9.0", "styled-components": "^6.1.8", - "usehooks-ts": "2.15.0" + "usehooks-ts": "2.15.1" }, "devDependencies": { "@ledgerhq/logs": "^6.12.0", "@types/chroma-js": "^2.4.4", "@types/lodash.debounce": "^4", "@types/lodash.throttle": "^4.1.9", - "@types/react": "^18.2.57", + "@types/react": "^18.2.61", "@types/react-dom": "^18.2.19", "@types/react-helmet": "^6.1.11", "@types/react-scroll": "^1.8.10", "@types/styled-components": "^5.1.34", - "@typescript-eslint/eslint-plugin": "^7.0.2", - "@typescript-eslint/parser": "^7.0.2", + "@typescript-eslint/eslint-plugin": "^7.1.0", + "@typescript-eslint/parser": "^7.1.0", "@vitejs/plugin-react-swc": "^3.6.0", - "eslint": "^8.56.0", + "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-import": "^2.29.1", "eslint-plugin-prefer-arrow": "^1.2.3", - "eslint-plugin-prefer-arrow-functions": "^3.2.4", + "eslint-plugin-prefer-arrow-functions": "^3.3.2", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", diff --git a/src/Providers.tsx b/src/Providers.tsx index 369e06b1c8..da2616a71f 100644 --- a/src/Providers.tsx +++ b/src/Providers.tsx @@ -6,9 +6,8 @@ import { BondedProvider } from 'contexts/Bonded'; import { ExtensionsProvider, ExtensionAccountsProvider, - OverlayProvider, LedgerAccountsProvider, -} from '@polkadot-cloud/react/providers'; +} from '@w3ux/react-connect-kit'; import { FastUnstakeProvider } from 'contexts/FastUnstake'; import { FiltersProvider } from 'contexts/Filters'; import { LedgerHardwareProvider } from 'contexts/Hardware/Ledger/LedgerHardware'; @@ -45,6 +44,7 @@ import { ExternalAccountsProvider } from 'contexts/Connect/ExternalAccounts'; import type { Provider } from 'hooks/withProviders'; import { withProviders } from 'hooks/withProviders'; import { CommunityProvider } from 'contexts/Community'; +import { OverlayProvider } from 'kits/Overlay/Provider'; export const Providers = () => { const { diff --git a/src/Router.tsx b/src/Router.tsx index e6ce2ea49a..2ec1f929fe 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -4,7 +4,7 @@ import { registerLastVisited, registerSaEvent } from 'Utils'; import { usePrompt } from 'contexts/Prompt'; import { Disclaimer } from 'library/NetworkBar/Disclaimer'; -import { extractUrlValue } from '@polkadot-cloud/utils'; +import { extractUrlValue } from '@w3ux/utils'; import { useEffect, useRef } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; import { useTranslation } from 'react-i18next'; @@ -36,7 +36,7 @@ import { Page } from 'Page'; import { Body } from 'kits/Structure/Body'; import { Main } from 'kits/Structure/Main'; -export const RouterInner = () => { +const RouterInner = () => { const { t } = useTranslation(); const { network } = useNetwork(); const { pathname, search } = useLocation(); diff --git a/src/Themes.tsx b/src/Themes.tsx index 05953cafc9..c95f0f2ae5 100644 --- a/src/Themes.tsx +++ b/src/Themes.tsx @@ -9,7 +9,6 @@ import { useEffect } from 'react'; import { Entry } from 'kits/Structure/Entry'; // light / dark `mode` added to styled-components provider -// `@polkadot-cloud/react` themes are added to `Entry`. export const ThemedRouter = () => { const { mode } = useTheme(); const { network } = useNetwork(); diff --git a/src/canvas/ManageNominations/index.tsx b/src/canvas/ManageNominations/index.tsx index 6115e5b215..5e9dfdb8d2 100644 --- a/src/canvas/ManageNominations/index.tsx +++ b/src/canvas/ManageNominations/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { GenerateNominations } from 'library/GenerateNominations'; import { useEffect, useState } from 'react'; import { Subheading } from 'pages/Nominate/Wrappers'; diff --git a/src/canvas/PoolMembers/Lists/Default.tsx b/src/canvas/PoolMembers/Lists/Default.tsx index ecb75cbf2b..aab68aa687 100644 --- a/src/canvas/PoolMembers/Lists/Default.tsx +++ b/src/canvas/PoolMembers/Lists/Default.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { isNotZero } from '@polkadot-cloud/utils'; +import { isNotZero } from '@w3ux/utils'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { listItemsPerBatch, listItemsPerPage } from 'library/List/defaults'; diff --git a/src/canvas/PoolMembers/Prompts/UnbondMember.tsx b/src/canvas/PoolMembers/Prompts/UnbondMember.tsx index a89b6305ec..c06b3e318c 100644 --- a/src/canvas/PoolMembers/Prompts/UnbondMember.tsx +++ b/src/canvas/PoolMembers/Prompts/UnbondMember.tsx @@ -1,12 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { - ModalNotes, - ModalPadding, - ModalWarnings, - Polkicon, -} from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { ellipsisFn, greaterThanZero, @@ -14,7 +9,7 @@ import { remToUnit, rmCommas, unitToPlanck, -} from '@polkadot-cloud/utils'; +} from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { getUnixTime } from 'date-fns'; import { useEffect, useState } from 'react'; @@ -32,6 +27,9 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { usePrompt } from 'contexts/Prompt'; import type { PoolMembership } from 'contexts/Pools/types'; import { Title } from 'library/Prompt/Title'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'; export const UnbondMember = ({ who, diff --git a/src/canvas/PoolMembers/Prompts/WithdrawMember.tsx b/src/canvas/PoolMembers/Prompts/WithdrawMember.tsx index a9831617a0..ef62e7b020 100644 --- a/src/canvas/PoolMembers/Prompts/WithdrawMember.tsx +++ b/src/canvas/PoolMembers/Prompts/WithdrawMember.tsx @@ -1,19 +1,14 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { - ModalNotes, - ModalPadding, - ModalWarnings, - Polkicon, -} from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { ellipsisFn, isNotZero, planckToUnit, remToUnit, rmCommas, -} from '@polkadot-cloud/utils'; +} from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { RefObject } from 'react'; import { useState } from 'react'; @@ -29,6 +24,9 @@ import type { PoolMembership } from 'contexts/Pools/types'; import { usePrompt } from 'contexts/Prompt'; import { Title } from 'library/Prompt/Title'; import { useTranslation } from 'react-i18next'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'; export const WithdrawMember = ({ who, diff --git a/src/canvas/PoolMembers/index.tsx b/src/canvas/PoolMembers/index.tsx index 9cee7dbc20..b2fee7c048 100644 --- a/src/canvas/PoolMembers/index.tsx +++ b/src/canvas/PoolMembers/index.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { faTimes } from '@fortawesome/free-solid-svg-icons'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { CanvasFullScreenWrapper } from 'canvas/Wrappers'; import { Members } from 'canvas/PoolMembers/Members'; import { useTranslation } from 'react-i18next'; diff --git a/src/canvas/Wrappers.tsx b/src/canvas/Wrappers.tsx index e48ce32480..9b1d29a4ec 100644 --- a/src/canvas/Wrappers.tsx +++ b/src/canvas/Wrappers.tsx @@ -7,6 +7,7 @@ export const CanvasFullScreenWrapper = styled.div` padding-top: 3rem; min-height: calc(100vh - 12rem); padding-bottom: 2rem; + width: 100%; > .head { display: flex; @@ -24,4 +25,5 @@ export const CanvasSubmitTxFooter = styled.div` border-radius: 1rem; overflow: hidden; margin-bottom: 2rem; + width: 100%; `; diff --git a/src/config/validators/ApertureMining.tsx b/src/config/validators/ApertureMining.tsx index c9199eeaec..0c9b292a8d 100644 --- a/src/config/validators/ApertureMining.tsx +++ b/src/config/validators/ApertureMining.tsx @@ -1,96 +1,8 @@ const ApertureMining = () => ( - - - - - - - - - - - - - - - - - + + + + ); diff --git a/src/config/validators/Blockseeker.tsx b/src/config/validators/Blockseeker.tsx index 3f1e98bbba..13d92c0c9a 100644 --- a/src/config/validators/Blockseeker.tsx +++ b/src/config/validators/Blockseeker.tsx @@ -1,23 +1,8 @@ const Blockseeker = () => ( - - - - - - ( + - ); diff --git a/src/config/validators/Crifferent.tsx b/src/config/validators/Crifferent.tsx index 50138ffdaa..309b567416 100644 --- a/src/config/validators/Crifferent.tsx +++ b/src/config/validators/Crifferent.tsx @@ -1,204 +1,159 @@ const Crifferent = () => ( + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + ); diff --git a/src/config/validators/Decentradot.tsx b/src/config/validators/Decentradot.tsx index 3a6209e098..47c4727d9b 100644 --- a/src/config/validators/Decentradot.tsx +++ b/src/config/validators/Decentradot.tsx @@ -2,7 +2,7 @@ const Decentradot = () => ( diff --git a/src/config/validators/Dionysus.tsx b/src/config/validators/Dionysus.tsx index 3f4c068ca1..07e7cb73ce 100644 --- a/src/config/validators/Dionysus.tsx +++ b/src/config/validators/Dionysus.tsx @@ -1,41 +1,32 @@ const Dionysus = () => ( - - - - - - - - + + + + + + + - - - - - - - - + + + + + + + + ); diff --git a/src/config/validators/Dozenodes.tsx b/src/config/validators/Dozenodes.tsx index 0e9c481aae..4c7bbe763b 100644 --- a/src/config/validators/Dozenodes.tsx +++ b/src/config/validators/Dozenodes.tsx @@ -1,7 +1,7 @@ const Dozenodes = () => ( - - + + ); diff --git a/src/config/validators/DragonStake.tsx b/src/config/validators/DragonStake.tsx index 039209ed92..a5e8dbff03 100644 --- a/src/config/validators/DragonStake.tsx +++ b/src/config/validators/DragonStake.tsx @@ -6,7 +6,7 @@ const DragonStake = () => ( /> ); diff --git a/src/config/validators/Gatotech.tsx b/src/config/validators/Gatotech.tsx index b9363514e2..f1c2eb05b1 100644 --- a/src/config/validators/Gatotech.tsx +++ b/src/config/validators/Gatotech.tsx @@ -1,81 +1,57 @@ const Gatotech = () => ( + + + + + - - - - - - - - + ); diff --git a/src/config/validators/Gdot.tsx b/src/config/validators/Gdot.tsx index 613d6823f0..cc47a64caf 100644 --- a/src/config/validators/Gdot.tsx +++ b/src/config/validators/Gdot.tsx @@ -1,19 +1,10 @@ const Gdot = () => ( - - - - - - + + ); diff --git a/src/config/validators/GenericChain.tsx b/src/config/validators/GenericChain.tsx index 425ef3f474..41ac5eb82c 100644 --- a/src/config/validators/GenericChain.tsx +++ b/src/config/validators/GenericChain.tsx @@ -2,42 +2,41 @@ const GenericChain = () => ( - - - - - - - - + + + + + + + + - - + diff --git a/src/config/validators/GoOpen.tsx b/src/config/validators/GoOpen.tsx index 74ff9dba74..c23d0979b2 100644 --- a/src/config/validators/GoOpen.tsx +++ b/src/config/validators/GoOpen.tsx @@ -1,16 +1,16 @@ const GoOpen = () => ( - + - + - + ); diff --git a/src/config/validators/Helikon.tsx b/src/config/validators/Helikon.tsx index 3e8027b4d6..775b288e89 100644 --- a/src/config/validators/Helikon.tsx +++ b/src/config/validators/Helikon.tsx @@ -1,13 +1,5 @@ const Helikon = () => ( - + ); diff --git a/src/config/validators/Highstake.tsx b/src/config/validators/Highstake.tsx index 1264ed0f3c..6b51ac37c9 100644 --- a/src/config/validators/Highstake.tsx +++ b/src/config/validators/Highstake.tsx @@ -1,141 +1,33 @@ const HighStake = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + ); diff --git a/src/config/validators/Metaspan.tsx b/src/config/validators/Metaspan.tsx index f56a3b4e7b..9a6f7b144f 100644 --- a/src/config/validators/Metaspan.tsx +++ b/src/config/validators/Metaspan.tsx @@ -1,26 +1,17 @@ const Metaspan = () => ( + - ); diff --git a/src/config/validators/P2POrg.tsx b/src/config/validators/P2POrg.tsx index 4f1e39f03f..b0794e9f7a 100644 --- a/src/config/validators/P2POrg.tsx +++ b/src/config/validators/P2POrg.tsx @@ -1,11 +1,5 @@ const P2POrg = () => ( - + ( - + ( + - ); diff --git a/src/config/validators/PioneerStake.tsx b/src/config/validators/PioneerStake.tsx index cb8ab2035e..991d9eea71 100644 --- a/src/config/validators/PioneerStake.tsx +++ b/src/config/validators/PioneerStake.tsx @@ -5,19 +5,31 @@ const PionerStake = () => ( viewBox="0 0 375 375" > - + - + - + ( diff --git a/src/config/validators/Polkachu.tsx b/src/config/validators/Polkachu.tsx index 8385fa8719..ae1e1f1fe3 100644 --- a/src/config/validators/Polkachu.tsx +++ b/src/config/validators/Polkachu.tsx @@ -1,16 +1,12 @@ const Polkachu = () => ( - + ); diff --git a/src/config/validators/Polkadotters.tsx b/src/config/validators/Polkadotters.tsx index 492ed7d8d3..e4f771d8ab 100644 --- a/src/config/validators/Polkadotters.tsx +++ b/src/config/validators/Polkadotters.tsx @@ -1,58 +1,58 @@ const Polkadotters = () => ( - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - + ); diff --git a/src/config/validators/PythagorasCapitalInvestment.tsx b/src/config/validators/PythagorasCapitalInvestment.tsx index 5d5f7ea44c..0424c741ca 100644 --- a/src/config/validators/PythagorasCapitalInvestment.tsx +++ b/src/config/validators/PythagorasCapitalInvestment.tsx @@ -1,32 +1,21 @@ const PythagorasCapitalInvestment = () => ( + - - - - - + ); diff --git a/src/config/validators/SekoyaLabs.tsx b/src/config/validators/SekoyaLabs.tsx index 4d03cfade2..ef3e359b68 100644 --- a/src/config/validators/SekoyaLabs.tsx +++ b/src/config/validators/SekoyaLabs.tsx @@ -1,9 +1,5 @@ const SekoyaLabs = () => ( - + ( /> ); diff --git a/src/config/validators/StakeWorld.tsx b/src/config/validators/StakeWorld.tsx index 1f62d47037..af5d331dae 100644 --- a/src/config/validators/StakeWorld.tsx +++ b/src/config/validators/StakeWorld.tsx @@ -1,236 +1,169 @@ const StakeWorld = () => ( - + - - ); diff --git a/src/config/validators/Stakely.tsx b/src/config/validators/Stakely.tsx index 4f47984501..8de64f880a 100644 --- a/src/config/validators/Stakely.tsx +++ b/src/config/validators/Stakely.tsx @@ -1,18 +1,14 @@ const Stakely = () => ( ); diff --git a/src/config/validators/Stakenode.tsx b/src/config/validators/Stakenode.tsx index 7e10712965..70da783fe5 100644 --- a/src/config/validators/Stakenode.tsx +++ b/src/config/validators/Stakenode.tsx @@ -2,22 +2,22 @@ const Stakenode = () => ( - - + + ( + + - - - + - + - + ); diff --git a/src/config/validators/Stakeplus.tsx b/src/config/validators/Stakeplus.tsx index c7777d3e8a..0cb81fffb2 100644 --- a/src/config/validators/Stakeplus.tsx +++ b/src/config/validators/Stakeplus.tsx @@ -1,39 +1,29 @@ const Stakeplus = () => ( ); diff --git a/src/config/validators/StakerSpace.tsx b/src/config/validators/StakerSpace.tsx index 6808a408a3..8419d9eda4 100644 --- a/src/config/validators/StakerSpace.tsx +++ b/src/config/validators/StakerSpace.tsx @@ -1,13 +1,13 @@ const StakerSpace = () => ( - + ); diff --git a/src/config/validators/Staking4All.tsx b/src/config/validators/Staking4All.tsx index 231781c58d..a1337bea8a 100644 --- a/src/config/validators/Staking4All.tsx +++ b/src/config/validators/Staking4All.tsx @@ -1,27 +1,25 @@ const Staking4All = () => ( - - - - - - - + + + + + ); diff --git a/src/config/validators/StakingFacilities.tsx b/src/config/validators/StakingFacilities.tsx index 16cdbd3cc6..ff21185c8b 100644 --- a/src/config/validators/StakingFacilities.tsx +++ b/src/config/validators/StakingFacilities.tsx @@ -2,22 +2,20 @@ const StakingFacilities = () => ( - - + + ( /> ( - - + + ); diff --git a/src/config/validators/VFValidierung.tsx b/src/config/validators/VFValidierung.tsx index 8a1b8f4796..10e89177a3 100644 --- a/src/config/validators/VFValidierung.tsx +++ b/src/config/validators/VFValidierung.tsx @@ -1,39 +1,37 @@ const VFValidierung = () => ( - - - - - - - - + + + + + + ); diff --git a/src/config/validators/Wojdot.tsx b/src/config/validators/Wojdot.tsx index c0bdd6df32..c1ecb23864 100644 --- a/src/config/validators/Wojdot.tsx +++ b/src/config/validators/Wojdot.tsx @@ -1,25 +1,21 @@ const Wojdot = () => ( - - + + ( /> ( /> ( - - - - - - + + ); diff --git a/src/contexts/ActiveAccounts/index.tsx b/src/contexts/ActiveAccounts/index.tsx index 1834ffc181..120116d9d1 100644 --- a/src/contexts/ActiveAccounts/index.tsx +++ b/src/contexts/ActiveAccounts/index.tsx @@ -4,7 +4,7 @@ import type { ReactNode } from 'react'; import { createContext, useContext, useEffect, useRef, useState } from 'react'; import type { MaybeAddress } from 'types'; -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import { useNetwork } from 'contexts/Network'; import type { ActiveAccountsContextInterface, ActiveProxy } from './types'; import { defaultActiveAccountsContext } from './defaults'; diff --git a/src/contexts/Api/index.tsx b/src/contexts/Api/index.tsx index 1755ddb6a2..859337b0eb 100644 --- a/src/contexts/Api/index.tsx +++ b/src/contexts/Api/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import { createContext, useContext, useEffect, useRef, useState } from 'react'; import { NetworkList, @@ -19,7 +19,7 @@ import type { APIProviderProps, APIStakingMetrics, } from './types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { defaultConsts, defaultActiveEra, @@ -32,8 +32,6 @@ import { import { APIController } from 'static/APIController'; import { isCustomEvent } from 'static/utils'; import type { ApiStatus } from 'static/APIController/types'; -import { NotificationsController } from 'static/NotificationsController'; -import { useTranslation } from 'react-i18next'; import { useEventListener } from 'usehooks-ts'; import BigNumber from 'bignumber.js'; import { SyncController } from 'static/SyncController'; @@ -43,8 +41,6 @@ export const APIContext = createContext(defaultApiContext); export const useApi = () => useContext(APIContext); export const APIProvider = ({ children, network }: APIProviderProps) => { - const { t } = useTranslation('library'); - // Store API connection status. const [apiStatus, setApiStatus] = useState('disconnected'); @@ -180,16 +176,14 @@ export const APIProvider = ({ children, network }: APIProviderProps) => { // Trigger a notification if this disconnect is a result of an offline error. if (err === 'offline-event') { - NotificationsController.emit({ - title: t('disconnected'), - subtitle: t('connectionLost'), - }); - // Start attempting reconnects. APIController.initialize( network, isLightClient ? 'sc' : 'ws', - rpcEndpoint + rpcEndpoint, + { + clearState: false, + } ); } }; @@ -323,12 +317,15 @@ export const APIProvider = ({ children, network }: APIProviderProps) => { // Handle an initial api connection. useEffect(() => { + // NOTE: `provider` should always be present after the first call to initialize. We therefore + // can check whether on initial api connection based `provider`. if (!APIController.provider) { APIController.initialize( network, isLightClient ? 'sc' : 'ws', rpcEndpoint, { + clearState: true, initial: true, } ); @@ -338,15 +335,19 @@ export const APIProvider = ({ children, network }: APIProviderProps) => { // If RPC endpoint changes, and not on light client, re-connect. useEffectIgnoreInitial(() => { if (!isLightClient) { - APIController.initialize(network, 'ws', rpcEndpoint); + APIController.initialize(network, 'ws', rpcEndpoint, { + clearState: false, + }); } }, [rpcEndpoint]); // Trigger API reconnect on network or light client change. useEffectIgnoreInitial(() => { setRpcEndpoint(initialRpcEndpoint()); + const networkSwitch = network !== APIController.network; + // If network changes, reset consts and chain state. - if (network !== APIController.network) { + if (networkSwitch) { setConsts(defaultConsts); setChainState(defaultChainState); setStateWithRef( @@ -363,8 +364,13 @@ export const APIProvider = ({ children, network }: APIProviderProps) => { ); } - // Reconnect API instance. - APIController.initialize(network, isLightClient ? 'sc' : 'ws', rpcEndpoint); + // Reconnect API instance, clearing state only if network has changed. + APIController.initialize( + network, + isLightClient ? 'sc' : 'ws', + rpcEndpoint, + { clearState: !networkSwitch } + ); }, [isLightClient, network]); // Add event listener for `polkadot-api` notifications. Also handles unmounting logic. diff --git a/src/contexts/Bonded/index.tsx b/src/contexts/Bonded/index.tsx index 96939c3f74..9531b16524 100644 --- a/src/contexts/Bonded/index.tsx +++ b/src/contexts/Bonded/index.tsx @@ -7,12 +7,12 @@ import { matchedProperties, removedFrom, setStateWithRef, -} from '@polkadot-cloud/utils'; +} from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useEffect, useRef, useState } from 'react'; import { useApi } from 'contexts/Api'; import type { AnyApi, MaybeAddress } from 'types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useNetwork } from 'contexts/Network'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { useOtherAccounts } from 'contexts/Connect/OtherAccounts'; diff --git a/src/contexts/Community/index.tsx b/src/contexts/Community/index.tsx index 9375fc56bd..439943a3db 100644 --- a/src/contexts/Community/index.tsx +++ b/src/contexts/Community/index.tsx @@ -1,9 +1,9 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { ValidatorEntry } from '@polkadot-cloud/assets/types'; -import { ValidatorCommunity } from '@polkadot-cloud/assets/validators'; -import { shuffle } from '@polkadot-cloud/utils'; +import type { ValidatorEntry } from '@w3ux/validator-assets'; +import { ValidatorCommunity } from '@w3ux/validator-assets'; +import { shuffle } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useState } from 'react'; import { defaultCommunityContext } from './defaults'; diff --git a/src/contexts/Community/types.ts b/src/contexts/Community/types.ts index da5be6cc2c..3a37b73def 100644 --- a/src/contexts/Community/types.ts +++ b/src/contexts/Community/types.ts @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { ValidatorEntry } from '@polkadot-cloud/assets/types'; +import type { ValidatorEntry } from '@w3ux/validator-assets'; export interface CommunityContextInterface { validatorCommunity: ValidatorEntry[]; diff --git a/src/contexts/Connect/ExternalAccounts/Utils.ts b/src/contexts/Connect/ExternalAccounts/Utils.ts index 250d9c26e1..1a2dfd461a 100644 --- a/src/contexts/Connect/ExternalAccounts/Utils.ts +++ b/src/contexts/Connect/ExternalAccounts/Utils.ts @@ -1,8 +1,8 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { ExternalAccount } from '@polkadot-cloud/react/types'; -import { localStorageOrDefault } from '@polkadot-cloud/utils'; +import type { ExternalAccount } from '@w3ux/react-connect-kit/types'; +import { localStorageOrDefault } from '@w3ux/utils'; import type { NetworkName } from 'types'; // Check whether an external account exists in local storage. diff --git a/src/contexts/Connect/ExternalAccounts/index.tsx b/src/contexts/Connect/ExternalAccounts/index.tsx index 6242933ce3..768b9b5e16 100644 --- a/src/contexts/Connect/ExternalAccounts/index.tsx +++ b/src/contexts/Connect/ExternalAccounts/index.tsx @@ -4,11 +4,11 @@ import { useContext, type ReactNode, createContext } from 'react'; import Keyring from '@polkadot/keyring'; import { useNetwork } from 'contexts/Network'; -import { ellipsisFn } from '@polkadot-cloud/utils'; +import { ellipsisFn } from '@w3ux/utils'; import type { ExternalAccount, ExternalAccountAddedBy, -} from '@polkadot-cloud/react/types'; +} from '@w3ux/react-connect-kit/types'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import type { AddExternalAccountResult, diff --git a/src/contexts/Connect/ExternalAccounts/types.ts b/src/contexts/Connect/ExternalAccounts/types.ts index 63d10ba8b0..e15c7bf46e 100644 --- a/src/contexts/Connect/ExternalAccounts/types.ts +++ b/src/contexts/Connect/ExternalAccounts/types.ts @@ -7,7 +7,7 @@ import type { ExternalAccount, ExternalAccountAddedBy, -} from '@polkadot-cloud/react/types'; +} from '@w3ux/react-connect-kit/types'; export interface ExternalAccountsContextInterface { addExternalAccount: ( diff --git a/src/contexts/Connect/ImportedAccounts/index.tsx b/src/contexts/Connect/ImportedAccounts/index.tsx index c5abdcc349..a0f83bbed9 100644 --- a/src/contexts/Connect/ImportedAccounts/index.tsx +++ b/src/contexts/Connect/ImportedAccounts/index.tsx @@ -7,12 +7,10 @@ import type { MaybeAddress } from 'types'; import type { ExternalAccount, ImportedAccount, -} from '@polkadot-cloud/react/types'; +} from '@w3ux/react-connect-kit/types'; import { ManualSigners } from 'consts'; -import { - useEffectIgnoreInitial, - useExtensionAccounts, -} from '@polkadot-cloud/react/hooks'; +import { useExtensionAccounts } from '@w3ux/react-connect-kit'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { defaultImportedAccountsContext } from './defaults'; import type { ImportedAccountsContextInterface } from './types'; import { useOtherAccounts } from '../OtherAccounts'; diff --git a/src/contexts/Connect/ImportedAccounts/types.ts b/src/contexts/Connect/ImportedAccounts/types.ts index a8d507504f..3c52efc64b 100644 --- a/src/contexts/Connect/ImportedAccounts/types.ts +++ b/src/contexts/Connect/ImportedAccounts/types.ts @@ -4,7 +4,7 @@ import type { ExtensionAccount, ImportedAccount, -} from '@polkadot-cloud/react/types'; +} from '@w3ux/react-connect-kit/types'; import type { MaybeAddress } from 'types'; export interface ImportedAccountsContextInterface { diff --git a/src/contexts/Connect/OtherAccounts/index.tsx b/src/contexts/Connect/OtherAccounts/index.tsx index 92d9c36dea..77a084d0f2 100644 --- a/src/contexts/Connect/OtherAccounts/index.tsx +++ b/src/contexts/Connect/OtherAccounts/index.tsx @@ -3,20 +3,14 @@ import type { ReactNode } from 'react'; import { createContext, useContext, useEffect, useRef, useState } from 'react'; -import { - useEffectIgnoreInitial, - useExtensions, - useExtensionAccounts, -} from '@polkadot-cloud/react/hooks'; import { getLocalLedgerAccounts, getLocalVaultAccounts, } from 'contexts/Hardware/Utils'; import type { MaybeAddress, NetworkName } from 'types'; -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; -import type { ImportedAccount } from '@polkadot-cloud/react/types'; import { getActiveAccountLocal } from '../Utils'; import type { OtherAccountsContextInterface } from './types'; import { defaultOtherAccountsContext } from './defaults'; @@ -25,6 +19,9 @@ import type { ExternalAccountImportType } from '../ExternalAccounts/types'; import { isCustomEvent } from 'static/utils'; import { useExternalAccounts } from '../ExternalAccounts'; import { useEventListener } from 'usehooks-ts'; +import { useExtensionAccounts, useExtensions } from '@w3ux/react-connect-kit'; +import type { ImportedAccount } from '@w3ux/react-connect-kit/types'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; export const OtherAccountsContext = createContext(defaultOtherAccountsContext); @@ -218,7 +215,7 @@ export const OtherAccountsProvider = ({ importLocalOtherAccounts, forgetOtherAccounts, accountsInitialised, - otherAccounts: otherAccountsRef.current, + otherAccounts, }} > {children} diff --git a/src/contexts/Connect/OtherAccounts/types.ts b/src/contexts/Connect/OtherAccounts/types.ts index d3b31a44c4..8fa2002147 100644 --- a/src/contexts/Connect/OtherAccounts/types.ts +++ b/src/contexts/Connect/OtherAccounts/types.ts @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { ImportedAccount } from '@polkadot-cloud/react/types'; +import type { ImportedAccount } from '@w3ux/react-connect-kit/types'; import type { MaybeAddress, NetworkName } from 'types'; import type { ExternalAccountImportType } from '../ExternalAccounts/types'; diff --git a/src/contexts/Connect/Utils.ts b/src/contexts/Connect/Utils.ts index 1c251ac337..2a659f62c2 100644 --- a/src/contexts/Connect/Utils.ts +++ b/src/contexts/Connect/Utils.ts @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import Keyring from '@polkadot/keyring'; -import { localStorageOrDefault } from '@polkadot-cloud/utils'; +import { localStorageOrDefault } from '@w3ux/utils'; import type { NetworkName } from 'types'; // Gets local `activeAccount` for a network. diff --git a/src/contexts/FastUnstake/index.tsx b/src/contexts/FastUnstake/index.tsx index eba366b530..e2986fff96 100644 --- a/src/contexts/FastUnstake/index.tsx +++ b/src/contexts/FastUnstake/index.tsx @@ -6,15 +6,15 @@ import { isNotZero, rmCommas, setStateWithRef, -} from '@polkadot-cloud/utils'; +} from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { ReactNode } from 'react'; -import { createContext, useContext, useRef, useState } from 'react'; +import { createContext, useContext, useEffect, useRef, useState } from 'react'; import { useApi } from 'contexts/Api'; import { useStaking } from 'contexts/Staking'; import type { AnyApi, AnyJson, MaybeAddress } from 'types'; import Worker from 'workers/stakers?worker'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useNominationStatus } from 'hooks/useNominationStatus'; import { validateLocalExposure } from 'contexts/Validators/Utils'; import { useNetwork } from 'contexts/Network'; @@ -81,6 +81,30 @@ export const FastUnstakeProvider = ({ children }: { children: ReactNode }) => { // check until bond duration eras surpasssed. const checkToEra = activeEra.index.minus(bondDuration); + // Reset state on network or active account change. + useEffect(() => { + setStateWithRef(false, setChecking, checkingRef); + setStateWithRef(null, setqueueDeposit, queueDepositRef); + setStateWithRef(null, setCounterForQueue, counterForQueueRef); + setStateWithRef(null, setIsExposed, isExposedRef); + setStateWithRef(defaultMeta, setMeta, metaRef); + unsubs.current = []; + + // cancel fast unstake check on network change or account change. + for (const unsub of unsubs.current) { + unsub(); + } + + // Resubscribe to fast unstake queue. + }, [activeAccount, network]); + + // Subscribe to fast unstake queue as soon as api is ready. + useEffect(() => { + if (isReady) { + subscribeToFastUnstakeQueue(); + } + }, [isReady]); + // initiate fast unstake check for accounts that are nominating but not active. useEffectIgnoreInitial(() => { if ( @@ -90,16 +114,6 @@ export const FastUnstakeProvider = ({ children }: { children: ReactNode }) => { fastUnstakeErasToCheckPerBlock > 0 && isNominating() ) { - // cancel fast unstake check on network change or account change. - for (const unsub of unsubs.current) { - unsub(); - } - - setStateWithRef(false, setChecking, checkingRef); - setStateWithRef(null, setqueueDeposit, queueDepositRef); - setStateWithRef(null, setCounterForQueue, counterForQueueRef); - unsubs.current = []; - // get any existing localStorage records for account. const localMeta: LocalMeta | null = getLocalMeta(); @@ -121,7 +135,6 @@ export const FastUnstakeProvider = ({ children }: { children: ReactNode }) => { } // Initial local meta: localMeta - setStateWithRef(initialMeta, setMeta, metaRef); setStateWithRef(initialIsExposed, setIsExposed, isExposedRef); @@ -140,14 +153,8 @@ export const FastUnstakeProvider = ({ children }: { children: ReactNode }) => { : activeEra.index; // Check from the possible next era `maybeNextEra`. - processEligibility(activeAccount, maybeNextEra); } - - // subscribe to fast unstake queue immediately if synced in localStorage and still up to date. - if (initialIsExposed === false) { - subscribeToFastUnstakeQueue(); - } } return () => { @@ -158,8 +165,6 @@ export const FastUnstakeProvider = ({ children }: { children: ReactNode }) => { }, [ inSetup(), isReady, - network, - activeAccount, activeEra.index, fastUnstakeErasToCheckPerBlock, isNominating(), @@ -220,9 +225,6 @@ export const FastUnstakeProvider = ({ children }: { children: ReactNode }) => { setStateWithRef(false, setIsExposed, isExposedRef); // Finished, not exposed. - - // subscribe to fast unstake queue for user and queue counter. - subscribeToFastUnstakeQueue(); } else { // continue checking the next era. checkEra(new BigNumber(era).minus(1)); @@ -269,7 +271,7 @@ export const FastUnstakeProvider = ({ children }: { children: ReactNode }) => { // subscribe to fastUnstake queue const subscribeToFastUnstakeQueue = async () => { - if (!api || !activeAccount) { + if (!api) { return; } const subscribeQueue = async (a: MaybeAddress) => { @@ -339,12 +341,12 @@ export const FastUnstakeProvider = ({ children }: { children: ReactNode }) => { {children} diff --git a/src/contexts/Hardware/Ledger/LedgerHardware.tsx b/src/contexts/Hardware/Ledger/LedgerHardware.tsx index 33445bc474..4e27017821 100644 --- a/src/contexts/Hardware/Ledger/LedgerHardware.tsx +++ b/src/contexts/Hardware/Ledger/LedgerHardware.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -29,7 +29,7 @@ export const LedgerHardwareProvider = ({ children: ReactNode; }) => { const { t } = useTranslation('modals'); - const { specVersion } = useApi().chainState.version; + const { transactionVersion } = useApi().chainState.version; // Store whether a Ledger device task is in progress. const [isExecuting, setIsExecutingState] = useState(false); @@ -97,7 +97,7 @@ export const LedgerHardwareProvider = ({ setIsExecuting(false); resetFeedback(); - if (result.minor < specVersion) { + if (result.major < transactionVersion) { runtimesInconsistent.current = true; } setIntegrityChecked(true); @@ -227,6 +227,13 @@ export const LedgerHardwareProvider = ({ code: 'TransactionRejected', }); break; + // Occurs when submitted extrinsic(s) are not supported. + case 'txVersionNotSupported': + setStatusFeedback({ + message: t('txVersionNotSupported'), + code: 'TransactionVersionNotSupported', + }); + break; // Occurs when a user rejects a transaction. case 'transactionRejected': setStatusFeedback({ diff --git a/src/contexts/Hardware/Ledger/static/ledger.ts b/src/contexts/Hardware/Ledger/static/ledger.ts index d43b97d6a9..6d563ab099 100644 --- a/src/contexts/Hardware/Ledger/static/ledger.ts +++ b/src/contexts/Hardware/Ledger/static/ledger.ts @@ -2,10 +2,10 @@ // SPDX-License-Identifier: GPL-3.0-only import TransportWebHID from '@ledgerhq/hw-transport-webhid'; -import type { AnyJson } from '@polkadot-cloud/react/types'; import { newSubstrateApp, type SubstrateApp } from '@zondax/ledger-substrate'; -import { withTimeout } from '@polkadot-cloud/utils'; +import { withTimeout } from '@w3ux/utils'; import { u8aToBuffer } from '@polkadot/util'; +import type { AnyJson } from 'types'; const LEDGER_DEFAULT_ACCOUNT = 0x80000000; const LEDGER_DEFAULT_CHANGE = 0x80000000; diff --git a/src/contexts/Hardware/Ledger/types.ts b/src/contexts/Hardware/Ledger/types.ts index 486d3ea6ab..51ec495300 100644 --- a/src/contexts/Hardware/Ledger/types.ts +++ b/src/contexts/Hardware/Ledger/types.ts @@ -47,6 +47,7 @@ export type LedgerStatusCode = | 'WrongTransaction' | 'DeviceNotConnected' | 'DeviceLocked' + | 'TransactionVersionNotSupported' | 'TransactionRejected' | 'AppNotOpenContinue' | 'AppNotOpen'; diff --git a/src/contexts/Hardware/Utils.tsx b/src/contexts/Hardware/Utils.tsx index a2ea9e2b8c..d564ed465a 100644 --- a/src/contexts/Hardware/Utils.tsx +++ b/src/contexts/Hardware/Utils.tsx @@ -1,10 +1,13 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { localStorageOrDefault } from '@polkadot-cloud/utils'; +import { localStorageOrDefault } from '@w3ux/utils'; import { LedgerApps } from 'config/ledger'; import type { MaybeString } from 'types'; -import type { LedgerAccount, VaultAccount } from '@polkadot-cloud/react/types'; +import type { + LedgerAccount, + VaultAccount, +} from '@w3ux/react-connect-kit/types'; import type { LedgerAddress } from './Ledger/types'; // Ledger error keyed by type of error. @@ -17,6 +20,7 @@ const LedgerErrorsByType = { deviceBusy: ['Error: Ledger Device is busy', 'InvalidStateError'], deviceLocked: ['Error: LockedDeviceError'], transactionRejected: ['Error: Transaction rejected'], + txVersionNotSupported: ['Error: Txn version not supported'], appNotOpen: ['Error: Unknown Status Code: 28161'], }; diff --git a/src/contexts/Hardware/Vault/VaultAccounts.tsx b/src/contexts/Hardware/Vault/VaultAccounts.tsx index 732444eb46..de3842ff51 100644 --- a/src/contexts/Hardware/Vault/VaultAccounts.tsx +++ b/src/contexts/Hardware/Vault/VaultAccounts.tsx @@ -1,10 +1,10 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ellipsisFn, setStateWithRef } from '@polkadot-cloud/utils'; +import { ellipsisFn, setStateWithRef } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useEffect, useRef, useState } from 'react'; -import type { VaultAccount } from '@polkadot-cloud/react/types'; +import type { VaultAccount } from '@w3ux/react-connect-kit/types'; import { useNetwork } from 'contexts/Network'; import { getLocalVaultAccounts, isLocalNetworkAddress } from '../Utils'; import type { VaultAccountsContextInterface } from './types'; diff --git a/src/contexts/Hardware/Vault/types.ts b/src/contexts/Hardware/Vault/types.ts index 480e96c2bb..01add5b199 100644 --- a/src/contexts/Hardware/Vault/types.ts +++ b/src/contexts/Hardware/Vault/types.ts @@ -1,7 +1,10 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { LedgerAccount, VaultAccount } from '@polkadot-cloud/react/types'; +import type { + LedgerAccount, + VaultAccount, +} from '@w3ux/react-connect-kit/types'; export interface VaultAccountsContextInterface { vaultAccountExists: (address: string) => boolean; diff --git a/src/contexts/Help/index.tsx b/src/contexts/Help/index.tsx index 6fa4a748ff..3c2d90de46 100644 --- a/src/contexts/Help/index.tsx +++ b/src/contexts/Help/index.tsx @@ -3,7 +3,7 @@ import { createContext, useContext, useState } from 'react'; import type { MaybeString } from 'types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import * as defaults from './defaults'; import type { HelpContextInterface, diff --git a/src/contexts/Migrate/index.tsx b/src/contexts/Migrate/index.tsx index dbc162bf1b..73d0a82b56 100644 --- a/src/contexts/Migrate/index.tsx +++ b/src/contexts/Migrate/index.tsx @@ -5,9 +5,9 @@ import type { ReactNode } from 'react'; import { createContext, useState } from 'react'; import { AppVersion } from 'consts'; import { useApi } from 'contexts/Api'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; -import { localStorageOrDefault } from '@polkadot-cloud/utils'; -import type { ExternalAccount } from '@polkadot-cloud/react/types'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; +import { localStorageOrDefault } from '@w3ux/utils'; +import type { ExternalAccount } from '@w3ux/react-connect-kit/types'; import { useSyncing } from 'hooks/useSyncing'; export const MigrateContext = createContext(null); diff --git a/src/contexts/Network/index.tsx b/src/contexts/Network/index.tsx index b2ed8ad024..3dbfd7646e 100644 --- a/src/contexts/Network/index.tsx +++ b/src/contexts/Network/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { extractUrlValue, varToUrlHash } from '@polkadot-cloud/utils'; +import { extractUrlValue, varToUrlHash } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useState } from 'react'; import { NetworkList } from 'config/networks'; diff --git a/src/contexts/Payouts/index.tsx b/src/contexts/Payouts/index.tsx index d5806401ea..9ae3339990 100644 --- a/src/contexts/Payouts/index.tsx +++ b/src/contexts/Payouts/index.tsx @@ -7,7 +7,7 @@ import { useStaking } from 'contexts/Staking'; import { useApi } from 'contexts/Api'; import type { AnyApi, AnyJson, Sync } from 'types'; import Worker from 'workers/stakers?worker'; -import { rmCommas, setStateWithRef } from '@polkadot-cloud/utils'; +import { rmCommas, setStateWithRef } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; diff --git a/src/contexts/Plugins/Utils.ts b/src/contexts/Plugins/Utils.ts index b4be4a1042..6bc5d09696 100644 --- a/src/contexts/Plugins/Utils.ts +++ b/src/contexts/Plugins/Utils.ts @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { localStorageOrDefault } from '@polkadot-cloud/utils'; +import { localStorageOrDefault } from '@w3ux/utils'; import type { Plugin } from 'config/plugins'; import { PluginsList } from 'config/plugins'; diff --git a/src/contexts/Plugins/index.tsx b/src/contexts/Plugins/index.tsx index c0c9e35ce3..11a7e8d6de 100644 --- a/src/contexts/Plugins/index.tsx +++ b/src/contexts/Plugins/index.tsx @@ -1,13 +1,13 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { isNotZero, setStateWithRef } from '@polkadot-cloud/utils'; +import { isNotZero, setStateWithRef } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useRef, useState } from 'react'; import type { Plugin } from 'config/plugins'; import * as defaults from './defaults'; import type { PluginsContextInterface } from './types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useApi } from 'contexts/Api'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; diff --git a/src/contexts/Pools/ActivePool/index.tsx b/src/contexts/Pools/ActivePool/index.tsx index 5ebe5d5bef..e359c0b82a 100644 --- a/src/contexts/Pools/ActivePool/index.tsx +++ b/src/contexts/Pools/ActivePool/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, @@ -12,7 +12,7 @@ import { useState, } from 'react'; import type { Sync } from 'types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { usePlugins } from 'contexts/Plugins'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; diff --git a/src/contexts/Pools/ActivePool/types.ts b/src/contexts/Pools/ActivePool/types.ts index b82c2f77ce..bf30385589 100644 --- a/src/contexts/Pools/ActivePool/types.ts +++ b/src/contexts/Pools/ActivePool/types.ts @@ -3,7 +3,7 @@ import type BigNumber from 'bignumber.js'; import type { PoolAddresses } from '../BondedPools/types'; -import type { MaybeAddress } from '@polkadot-cloud/react/types'; +import type { MaybeAddress } from '@w3ux/react-connect-kit/types'; import type { Identity, SuperIdentity } from 'contexts/Validators/types'; import type { Nominations } from 'contexts/Balances/types'; diff --git a/src/contexts/Pools/BondedPools/index.tsx b/src/contexts/Pools/BondedPools/index.tsx index a3d13cb2e0..d3d22677f8 100644 --- a/src/contexts/Pools/BondedPools/index.tsx +++ b/src/contexts/Pools/BondedPools/index.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { u8aToString, u8aUnwrapBytes } from '@polkadot/util'; -import { rmCommas, setStateWithRef, shuffle } from '@polkadot-cloud/utils'; +import { rmCommas, setStateWithRef, shuffle } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useRef, useState } from 'react'; import type { @@ -14,10 +14,9 @@ import type { PoolNominations, } from './types'; import { useStaking } from 'contexts/Staking'; -import type { AnyApi, MaybeAddress, Sync } from 'types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import type { AnyApi, AnyJson, MaybeAddress, Sync } from 'types'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useNetwork } from 'contexts/Network'; -import type { AnyJson } from '@polkadot-cloud/react/types'; import { useApi } from '../../Api'; import { defaultBondedPoolsContext } from './defaults'; import { useCreatePoolAccounts } from 'hooks/useCreatePoolAccounts'; diff --git a/src/contexts/Pools/PoolMembers/index.tsx b/src/contexts/Pools/PoolMembers/index.tsx index d18d968b21..9c8154e9ab 100644 --- a/src/contexts/Pools/PoolMembers/index.tsx +++ b/src/contexts/Pools/PoolMembers/index.tsx @@ -1,12 +1,12 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useRef, useState } from 'react'; import { usePlugins } from 'contexts/Plugins'; import type { AnyApi, AnyMetaBatch, Fn, MaybeAddress, Sync } from 'types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useApi } from '../../Api'; diff --git a/src/contexts/Pools/PoolPerformance/index.tsx b/src/contexts/Pools/PoolPerformance/index.tsx index 1fd239c4a8..304c30bc51 100644 --- a/src/contexts/Pools/PoolPerformance/index.tsx +++ b/src/contexts/Pools/PoolPerformance/index.tsx @@ -4,19 +4,19 @@ import type { ReactNode } from 'react'; import { createContext, useContext, useState } from 'react'; import { MaxEraRewardPointsEras } from 'consts'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import Worker from 'workers/poolPerformance?worker'; import { useNetwork } from 'contexts/Network'; import { useValidators } from 'contexts/Validators/ValidatorEntries'; import { useBondedPools } from 'contexts/Pools/BondedPools'; import { useApi } from 'contexts/Api'; -import type { Sync } from '@polkadot-cloud/react/types'; import BigNumber from 'bignumber.js'; -import { mergeDeep } from '@polkadot-cloud/utils'; +import { mergeDeep } from '@w3ux/utils'; import { useStaking } from 'contexts/Staking'; import { formatRawExposures } from 'contexts/Staking/Utils'; import type { PoolPerformanceContextInterface } from './types'; import { defaultPoolPerformanceContext } from './defaults'; +import type { Sync } from 'types'; const worker = new Worker(); diff --git a/src/contexts/Pools/PoolPerformance/types.ts b/src/contexts/Pools/PoolPerformance/types.ts index 31ff74494e..16ce7f6272 100644 --- a/src/contexts/Pools/PoolPerformance/types.ts +++ b/src/contexts/Pools/PoolPerformance/types.ts @@ -1,8 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { AnyJson } from '@polkadot-cloud/react/types'; -import type { Sync } from 'types'; +import type { AnyJson, Sync } from 'types'; export interface PoolPerformanceContextInterface { poolRewardPointsFetched: Sync; diff --git a/src/contexts/Proxies/index.tsx b/src/contexts/Proxies/index.tsx index 41f375e007..d2ea8dd3d9 100644 --- a/src/contexts/Proxies/index.tsx +++ b/src/contexts/Proxies/index.tsx @@ -10,14 +10,14 @@ import { removedFrom, rmCommas, setStateWithRef, -} from '@polkadot-cloud/utils'; +} from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { ReactNode } from 'react'; import { createContext, useContext, useRef, useState } from 'react'; import { isSupportedProxy } from 'config/proxies'; import { useApi } from 'contexts/Api'; -import type { AnyApi, MaybeAddress } from 'types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import type { AnyApi, MaybeAddress, NetworkName } from 'types'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; @@ -32,6 +32,7 @@ import type { Proxy, ProxyDelegate, } from './types'; +import { defaultNetwork } from 'contexts/Network/defaults'; export const ProxiesContext = createContext( defaults.defaultProxiesContext @@ -52,6 +53,10 @@ export const ProxiesProvider = ({ children }: { children: ReactNode }) => { const proxiesRef = useRef(proxies); const unsubs = useRef>({}); + // Store the last network proxies were synced on. + const [lastSyncedNetwork, setLastSyncedNetwork] = + useState(defaultNetwork); + // Reformats proxies into a list of delegates. const formatProxiesToDelegates = () => { // Reformat proxies into a list of delegates. @@ -126,9 +131,16 @@ export const ProxiesProvider = ({ children }: { children: ReactNode }) => { proxiesRef ); }; - handleRemovedAccounts(); - handleAddedAccounts(); - handleExistingAccounts(); + + // Ensure that accounts from a previous network are not being synced. + if (lastSyncedNetwork === network) { + handleRemovedAccounts(); + handleAddedAccounts(); + handleExistingAccounts(); + } + + // Update the last network proxies were synced on. + setLastSyncedNetwork(network); }; const subscribeToProxies = async (address: string) => { @@ -234,13 +246,6 @@ export const ProxiesProvider = ({ children }: { children: ReactNode }) => { .find((p) => p.delegator === delegator) ?.delegates.find((d) => d.delegate === delegate) ?? null; - // Subscribe new accounts to proxies, and remove accounts that are no longer imported. - useEffectIgnoreInitial(() => { - if (isReady) { - handleSyncAccounts(); - } - }, [accounts, isReady, network]); - // If active proxy has not yet been set, check local storage `activeProxy` & set it as active // proxy if it is the delegate of `activeAccount`. useEffectIgnoreInitial(() => { @@ -281,8 +286,16 @@ export const ProxiesProvider = ({ children }: { children: ReactNode }) => { } }, [accounts, activeAccount, proxies, network]); + // Subscribe new accounts to proxies, and remove accounts that are no longer imported. + useEffectIgnoreInitial(() => { + if (isReady) { + handleSyncAccounts(); + } + }, [accounts, isReady]); + // Reset active proxy state, unsubscribe from subscriptions on network change & unmount. useEffectIgnoreInitial(() => { + setStateWithRef([], setProxies, proxiesRef); setActiveProxy(null, false); unsubAll(); return () => unsubAll(); diff --git a/src/contexts/Setup/index.tsx b/src/contexts/Setup/index.tsx index 9e1ad6d34e..2da627cb08 100644 --- a/src/contexts/Setup/index.tsx +++ b/src/contexts/Setup/index.tsx @@ -5,11 +5,11 @@ import { greaterThanZero, localStorageOrDefault, unitToPlanck, -} from '@polkadot-cloud/utils'; +} from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useState } from 'react'; import type { BondFor, MaybeAddress } from 'types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; diff --git a/src/contexts/Staking/Utils.ts b/src/contexts/Staking/Utils.ts index a16da7e0c8..c768b27ad0 100644 --- a/src/contexts/Staking/Utils.ts +++ b/src/contexts/Staking/Utils.ts @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import type { AnyApi, NetworkName } from 'types'; -import { rmCommas } from '@polkadot-cloud/utils'; +import { rmCommas } from '@w3ux/utils'; import type { Exposure, LocalExposure, LocalExposuresData } from './types'; // Get local `erasStakers` entries for an era. diff --git a/src/contexts/Staking/index.tsx b/src/contexts/Staking/index.tsx index 3590b9c76e..7f9352dec8 100644 --- a/src/contexts/Staking/index.tsx +++ b/src/contexts/Staking/index.tsx @@ -1,16 +1,12 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { - greaterThanZero, - rmCommas, - setStateWithRef, -} from '@polkadot-cloud/utils'; +import { greaterThanZero, rmCommas, setStateWithRef } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { ReactNode } from 'react'; import { createContext, useContext, useRef, useState } from 'react'; import { useBalances } from 'contexts/Balances'; -import type { ExternalAccount } from '@polkadot-cloud/react/types'; +import type { ExternalAccount } from '@w3ux/react-connect-kit/types'; import type { EraStakers, Exposure, @@ -20,7 +16,7 @@ import type { import type { AnyApi, MaybeAddress } from 'types'; import Worker from 'workers/stakers?worker'; import type { ProcessExposuresResponse } from 'workers/types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; diff --git a/src/contexts/Themes/index.tsx b/src/contexts/Themes/index.tsx index 502862e00d..c6c8fe0052 100644 --- a/src/contexts/Themes/index.tsx +++ b/src/contexts/Themes/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useRef, useState } from 'react'; import { defaultThemeContext } from './defaults'; diff --git a/src/contexts/Tooltip/index.tsx b/src/contexts/Tooltip/index.tsx index 8a196c2710..d7fe502c2b 100644 --- a/src/contexts/Tooltip/index.tsx +++ b/src/contexts/Tooltip/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useRef, useState } from 'react'; import { defaultTooltipContext } from './defaults'; diff --git a/src/contexts/TransferOptions/Utils.ts b/src/contexts/TransferOptions/Utils.ts index 9f1900edcd..1c53f600a7 100644 --- a/src/contexts/TransferOptions/Utils.ts +++ b/src/contexts/TransferOptions/Utils.ts @@ -1,8 +1,8 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { MaybeAddress } from '@polkadot-cloud/react/types'; -import { unitToPlanck } from '@polkadot-cloud/utils'; +import type { MaybeAddress } from '@w3ux/react-connect-kit/types'; +import { unitToPlanck } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { NetworkName } from 'types'; diff --git a/src/contexts/TransferOptions/index.tsx b/src/contexts/TransferOptions/index.tsx index 3a9b7ded7e..eda547083f 100644 --- a/src/contexts/TransferOptions/index.tsx +++ b/src/contexts/TransferOptions/index.tsx @@ -7,7 +7,7 @@ import { createContext, useContext, useState } from 'react'; import { useApi } from 'contexts/Api'; import { useBalances } from 'contexts/Balances'; import type { MaybeAddress } from 'types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import type { TransferOptions, TransferOptionsContextInterface } from './types'; diff --git a/src/contexts/TxMeta/index.tsx b/src/contexts/TxMeta/index.tsx index d3c2fa0506..c5491a2cfe 100644 --- a/src/contexts/TxMeta/index.tsx +++ b/src/contexts/TxMeta/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { ReactNode } from 'react'; import { createContext, useContext, useRef, useState } from 'react'; @@ -12,7 +12,7 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import * as defaults from './defaults'; import type { TxMetaContextInterface } from './types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useActiveBalances } from 'hooks/useActiveBalances'; import { useApi } from 'contexts/Api'; diff --git a/src/contexts/UI/index.tsx b/src/contexts/UI/index.tsx index a91db0f97a..84b3e5072f 100644 --- a/src/contexts/UI/index.tsx +++ b/src/contexts/UI/index.tsx @@ -1,11 +1,11 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { localStorageOrDefault, setStateWithRef } from '@polkadot-cloud/utils'; +import { localStorageOrDefault, setStateWithRef } from '@w3ux/utils'; import type { ReactNode, RefObject } from 'react'; import { createContext, useContext, useEffect, useRef, useState } from 'react'; import { PageWidthMediumThreshold } from 'consts'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import type { AnyJson } from 'types'; import * as defaults from './defaults'; import type { UIContextInterface } from './types'; diff --git a/src/contexts/Validators/FavoriteValidators/index.tsx b/src/contexts/Validators/FavoriteValidators/index.tsx index e3c3160439..e386f62117 100644 --- a/src/contexts/Validators/FavoriteValidators/index.tsx +++ b/src/contexts/Validators/FavoriteValidators/index.tsx @@ -3,7 +3,7 @@ import type { ReactNode } from 'react'; import { createContext, useContext, useState } from 'react'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useNetwork } from 'contexts/Network'; import { useApi } from 'contexts/Api'; import type { Validator, FavoriteValidatorsContextInterface } from '../types'; diff --git a/src/contexts/Validators/ValidatorEntries/index.tsx b/src/contexts/Validators/ValidatorEntries/index.tsx index fdbde80424..a997d67602 100644 --- a/src/contexts/Validators/ValidatorEntries/index.tsx +++ b/src/contexts/Validators/ValidatorEntries/index.tsx @@ -1,12 +1,12 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { greaterThanZero, rmCommas, shuffle } from '@polkadot-cloud/utils'; +import { greaterThanZero, rmCommas, shuffle } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { ReactNode } from 'react'; import { createContext, useContext, useEffect, useRef, useState } from 'react'; import type { AnyApi, AnyJson, Fn, Sync } from 'types'; -import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useNetwork } from 'contexts/Network'; import { useApi } from 'contexts/Api'; import { MaxEraRewardPointsEras } from 'consts'; diff --git a/src/hooks/useActiveBalances/index.tsx b/src/hooks/useActiveBalances/index.tsx index 1e9b2b8eac..e9ccdfe68e 100644 --- a/src/hooks/useActiveBalances/index.tsx +++ b/src/hooks/useActiveBalances/index.tsx @@ -1,9 +1,9 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { useEffectIgnoreInitial } from '@polkadot-cloud/react'; -import type { MaybeAddress } from '@polkadot-cloud/react/types'; -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; +import type { MaybeAddress } from '@w3ux/react-connect-kit/types'; +import { setStateWithRef } from '@w3ux/utils'; import type { ActiveBalancesState, ActiveLedgerSource, @@ -164,19 +164,17 @@ export const useActiveBalances = ({ // has not yet synced or the provided account is still `null`. In these cases a // `new-account-balance` event will be emitted when the balance is ready to be sycned with the UI. useEffect(() => { - // Adds an active balance record if it exists in `BalancesController`. - const getBalances = (account: MaybeAddress) => { + // Construct new active balances state. + const newActiveBalances: ActiveBalancesState = {}; + + for (const account of uniqueAccounts) { + // Adds an active balance record if it exists in `BalancesController`. if (account) { const accountBalances = BalancesController.getAccountBalances(account); if (accountBalances) { newActiveBalances[account] = accountBalances; } } - }; - // Construct new active balances state. - const newActiveBalances: ActiveBalancesState = {}; - for (const account of uniqueAccounts) { - getBalances(account); } // Commit new active balances to state. setStateWithRef(newActiveBalances, setActiveBalances, activeBalancesRef); diff --git a/src/hooks/useActivePools/index.tsx b/src/hooks/useActivePools/index.tsx index 4b661fc2ac..ff4e3e71ea 100644 --- a/src/hooks/useActivePools/index.tsx +++ b/src/hooks/useActivePools/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import { useEffect, useRef, useState } from 'react'; import { ActivePoolsController } from 'static/ActivePoolsController'; import { isCustomEvent } from 'static/utils'; diff --git a/src/hooks/useAverageRewardRate/index.tsx b/src/hooks/useAverageRewardRate/index.tsx index b2b99f42ca..2f3bd93531 100644 --- a/src/hooks/useAverageRewardRate/index.tsx +++ b/src/hooks/useAverageRewardRate/index.tsx @@ -7,7 +7,7 @@ import { useValidators } from 'contexts/Validators/ValidatorEntries'; import type { AverageRewardRate, UseAverageRewardRate } from './types'; import { defaultAverageRewardRate } from './defaults'; import { useNetwork } from 'contexts/Network'; -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import { useApi } from 'contexts/Api'; export const useAverageRewardRate = (): UseAverageRewardRate => { diff --git a/src/hooks/useErasToTimeLeft/index.tsx b/src/hooks/useErasToTimeLeft/index.tsx index e3688d11c4..514c79cd74 100644 --- a/src/hooks/useErasToTimeLeft/index.tsx +++ b/src/hooks/useErasToTimeLeft/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { greaterThanZero } from '@polkadot-cloud/utils'; +import { greaterThanZero } from '@w3ux/utils'; import type BigNumber from 'bignumber.js'; import { useApi } from 'contexts/Api'; diff --git a/src/hooks/useFillVariables/index.tsx b/src/hooks/useFillVariables/index.tsx index 809dfb43cc..e2e0feae22 100644 --- a/src/hooks/useFillVariables/index.tsx +++ b/src/hooks/useFillVariables/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { capitalizeFirstLetter, planckToUnit } from '@polkadot-cloud/utils'; +import { capitalizeFirstLetter, planckToUnit } from '@w3ux/utils'; import { useApi } from 'contexts/Api'; import { useNetwork } from 'contexts/Network'; import type { AnyJson } from 'types'; diff --git a/src/hooks/useNominationStatus/index.tsx b/src/hooks/useNominationStatus/index.tsx index 18f72f7933..ea0567e7b0 100644 --- a/src/hooks/useNominationStatus/index.tsx +++ b/src/hooks/useNominationStatus/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useTranslation } from 'react-i18next'; import { useActivePool } from 'contexts/Pools/ActivePool'; diff --git a/src/hooks/useSubmitExtrinsic/index.tsx b/src/hooks/useSubmitExtrinsic/index.tsx index 90abe4cc01..08dbbd1a90 100644 --- a/src/hooks/useSubmitExtrinsic/index.tsx +++ b/src/hooks/useSubmitExtrinsic/index.tsx @@ -7,7 +7,6 @@ import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { DappName, ManualSigners } from 'consts'; import { useApi } from 'contexts/Api'; -import { useExtensions } from '@polkadot-cloud/react/hooks'; import { useLedgerHardware } from 'contexts/Hardware/Ledger/LedgerHardware'; import { useTxMeta } from 'contexts/TxMeta'; import type { AnyApi, AnyJson } from 'types'; @@ -18,6 +17,7 @@ import { useBuildPayload } from '../useBuildPayload'; import { useProxySupported } from '../useProxySupported'; import type { UseSubmitExtrinsic, UseSubmitExtrinsicProps } from './types'; import { NotificationsController } from 'static/NotificationsController'; +import { useExtensions } from '@w3ux/react-connect-kit'; export const useSubmitExtrinsic = ({ tx, diff --git a/src/hooks/useSubscanData/index.tsx b/src/hooks/useSubscanData/index.tsx index 9698c39ce8..a0b3edb1dc 100644 --- a/src/hooks/useSubscanData/index.tsx +++ b/src/hooks/useSubscanData/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import { usePlugins } from 'contexts/Plugins'; import { useEffect, useRef, useState } from 'react'; import { SubscanController } from 'static/SubscanController'; diff --git a/src/hooks/useSyncing/index.tsx b/src/hooks/useSyncing/index.tsx index d1aa4b84c9..3132382d89 100644 --- a/src/hooks/useSyncing/index.tsx +++ b/src/hooks/useSyncing/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import { useEffect, useRef, useState } from 'react'; import { SyncController } from 'static/SyncController'; import type { SyncID, SyncIDConfig } from 'static/SyncController/types'; diff --git a/src/hooks/useTimeLeft/index.tsx b/src/hooks/useTimeLeft/index.tsx index 70dd4eae30..f16fd725a9 100644 --- a/src/hooks/useTimeLeft/index.tsx +++ b/src/hooks/useTimeLeft/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNetwork } from 'contexts/Network'; diff --git a/src/kits/Buttons/ButtonHelp.tsx b/src/kits/Buttons/ButtonHelp.tsx index 7cd52d3f8c..67e2f89469 100644 --- a/src/kits/Buttons/ButtonHelp.tsx +++ b/src/kits/Buttons/ButtonHelp.tsx @@ -4,7 +4,7 @@ import InfoSVG from './svg/help.svg?react'; import type { ComponentBaseWithClassName } from 'types'; import type { ButtonCommonProps } from './types'; -import { appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOrEmpty } from '@w3ux/utils'; import { onMouseHandlers } from './Utils'; export type ButtonHelpProps = ComponentBaseWithClassName & diff --git a/src/kits/Buttons/ButtonMono.tsx b/src/kits/Buttons/ButtonMono.tsx index caf27ca628..2be22df9c4 100644 --- a/src/kits/Buttons/ButtonMono.tsx +++ b/src/kits/Buttons/ButtonMono.tsx @@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { motion } from 'framer-motion'; import type { ComponentBaseWithClassName } from 'types'; import type { ButtonCommonProps, ButtonIconProps } from './types'; -import { appendOr, appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOr, appendOrEmpty } from '@w3ux/utils'; import { onMouseHandlers } from './Utils'; export type ButtonMonoProps = ComponentBaseWithClassName & diff --git a/src/kits/Buttons/ButtonMonoInvert.tsx b/src/kits/Buttons/ButtonMonoInvert.tsx index f6bf1522ec..94bcd25568 100644 --- a/src/kits/Buttons/ButtonMonoInvert.tsx +++ b/src/kits/Buttons/ButtonMonoInvert.tsx @@ -6,7 +6,7 @@ import { motion } from 'framer-motion'; import type { ComponentBaseWithClassName } from 'types'; import type { ButtonCommonProps, ButtonIconProps } from './types'; import { onMouseHandlers } from './Utils'; -import { appendOr, appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOr, appendOrEmpty } from '@w3ux/utils'; export type ButtonMonoProps = ComponentBaseWithClassName & ButtonIconProps & diff --git a/src/kits/Buttons/ButtonOption.tsx b/src/kits/Buttons/ButtonOption.tsx index 9e35ca0fcd..74de54fc0e 100644 --- a/src/kits/Buttons/ButtonOption.tsx +++ b/src/kits/Buttons/ButtonOption.tsx @@ -5,7 +5,7 @@ import { faChevronRight } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import type { ComponentBaseWithClassName } from 'types'; import type { ButtonCommonProps } from './types'; -import { appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOrEmpty } from '@w3ux/utils'; import { onMouseHandlers } from './Utils'; export type ButtonOptionProps = ComponentBaseWithClassName & diff --git a/src/kits/Buttons/ButtonPrimary.tsx b/src/kits/Buttons/ButtonPrimary.tsx index 4c08c5f17d..6853e32b01 100644 --- a/src/kits/Buttons/ButtonPrimary.tsx +++ b/src/kits/Buttons/ButtonPrimary.tsx @@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { motion } from 'framer-motion'; import type { ComponentBaseWithClassName } from 'types'; -import { appendOr, appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOr, appendOrEmpty } from '@w3ux/utils'; import type { ButtonCommonProps, ButtonIconProps } from './types'; import { onMouseHandlers } from './Utils'; diff --git a/src/kits/Buttons/ButtonPrimaryInvert.tsx b/src/kits/Buttons/ButtonPrimaryInvert.tsx index f77acd67c5..5330d0858e 100644 --- a/src/kits/Buttons/ButtonPrimaryInvert.tsx +++ b/src/kits/Buttons/ButtonPrimaryInvert.tsx @@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import type { ComponentBaseWithClassName } from 'types'; import type { ButtonCommonProps, ButtonIconProps } from './types'; import { onMouseHandlers } from './Utils'; -import { appendOr, appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOr, appendOrEmpty } from '@w3ux/utils'; export type ButtonPrimaryInvertProps = ComponentBaseWithClassName & ButtonIconProps & diff --git a/src/kits/Buttons/ButtonSecondary.tsx b/src/kits/Buttons/ButtonSecondary.tsx index 7617c82aba..aae3e0bd3d 100644 --- a/src/kits/Buttons/ButtonSecondary.tsx +++ b/src/kits/Buttons/ButtonSecondary.tsx @@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import type { ComponentBaseWithClassName } from 'types'; import type { ButtonCommonProps, ButtonIconProps } from './types'; import { onMouseHandlers } from './Utils'; -import { appendOr, appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOr, appendOrEmpty } from '@w3ux/utils'; export type ButtonSecondaryProps = ComponentBaseWithClassName & ButtonIconProps & diff --git a/src/kits/Buttons/ButtonSubmit.tsx b/src/kits/Buttons/ButtonSubmit.tsx index 7981e4480b..f54e689e2f 100644 --- a/src/kits/Buttons/ButtonSubmit.tsx +++ b/src/kits/Buttons/ButtonSubmit.tsx @@ -6,7 +6,7 @@ import { motion } from 'framer-motion'; import type { ComponentBaseWithClassName } from 'types'; import type { ButtonCommonProps, ButtonIconProps } from './types'; import { onMouseHandlers } from './Utils'; -import { appendOr, appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOr, appendOrEmpty } from '@w3ux/utils'; export type ButtonSubmitProps = ComponentBaseWithClassName & ButtonIconProps & diff --git a/src/kits/Buttons/ButtonSubmitInvert.tsx b/src/kits/Buttons/ButtonSubmitInvert.tsx index 6eb533f1f2..4765e8759a 100644 --- a/src/kits/Buttons/ButtonSubmitInvert.tsx +++ b/src/kits/Buttons/ButtonSubmitInvert.tsx @@ -6,7 +6,7 @@ import { motion } from 'framer-motion'; import type { ComponentBaseWithClassName } from 'types'; import type { ButtonCommonProps, ButtonIconProps } from './types'; import { onMouseHandlers } from './Utils'; -import { appendOr, appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOr, appendOrEmpty } from '@w3ux/utils'; export type ButtonSubmitInvertProps = ComponentBaseWithClassName & ButtonIconProps & diff --git a/src/kits/Buttons/ButtonTab.tsx b/src/kits/Buttons/ButtonTab.tsx index 9ffb19c51e..c8c5f82e5e 100644 --- a/src/kits/Buttons/ButtonTab.tsx +++ b/src/kits/Buttons/ButtonTab.tsx @@ -3,7 +3,7 @@ import type { ComponentBaseWithClassName } from 'types'; import type { ButtonCommonProps } from './types'; -import { appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOrEmpty } from '@w3ux/utils'; import { onMouseHandlers } from './Utils'; export type ButtonTabProps = ComponentBaseWithClassName & diff --git a/src/kits/Buttons/ButtonTertiary.tsx b/src/kits/Buttons/ButtonTertiary.tsx index d1573adb36..8771d9f890 100644 --- a/src/kits/Buttons/ButtonTertiary.tsx +++ b/src/kits/Buttons/ButtonTertiary.tsx @@ -6,7 +6,7 @@ import { motion } from 'framer-motion'; import type { ComponentBaseWithClassName } from 'types'; import type { ButtonCommonProps, ButtonIconProps } from './types'; import { onMouseHandlers } from './Utils'; -import { appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOrEmpty } from '@w3ux/utils'; export type ButtonTertiaryProps = ComponentBaseWithClassName & ButtonIconProps & diff --git a/src/kits/Buttons/ButtonText.tsx b/src/kits/Buttons/ButtonText.tsx index f5de8b6691..34444abeec 100644 --- a/src/kits/Buttons/ButtonText.tsx +++ b/src/kits/Buttons/ButtonText.tsx @@ -6,7 +6,7 @@ import { motion } from 'framer-motion'; import type { ComponentBaseWithClassName } from 'types'; import type { ButtonCommonProps, ButtonIconProps } from './types'; import { onMouseHandlers } from './Utils'; -import { appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOrEmpty } from '@w3ux/utils'; export type ButtonMonoProps = ComponentBaseWithClassName & ButtonIconProps & diff --git a/src/kits/Overlay/Background.tsx b/src/kits/Overlay/Background.tsx new file mode 100644 index 0000000000..02240492a9 --- /dev/null +++ b/src/kits/Overlay/Background.tsx @@ -0,0 +1,65 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { useAnimation } from 'framer-motion'; +import { useEffect } from 'react'; +import type { CanvasStatus } from './Provider/types'; +import { ModalOverlay } from './structure/ModalOverlay'; +import { useOverlay } from './Provider'; + +export const Background = ({ + externalOverlayStatus, +}: { + externalOverlayStatus?: CanvasStatus; +}) => { + const controls = useAnimation(); + const { + modal: { status: modalStatus }, + canvas: { status: canvasStatus }, + } = useOverlay(); + + let { openOverlayInstances } = useOverlay(); + if (externalOverlayStatus === 'open') { + openOverlayInstances++; + } + + const onIn = async () => await controls.start('visible'); + + const onOut = async () => await controls.start('hidden'); + + useEffect(() => { + if (openOverlayInstances > 0) { + onIn(); + } + if (openOverlayInstances === 0) { + onOut(); + } + }, [openOverlayInstances]); + + return modalStatus === 'closed' && + canvasStatus === 'closed' && + externalOverlayStatus === 'closed' ? null : ( + + ); +}; diff --git a/src/kits/Overlay/Canvas.tsx b/src/kits/Overlay/Canvas.tsx new file mode 100644 index 0000000000..179dd1a608 --- /dev/null +++ b/src/kits/Overlay/Canvas.tsx @@ -0,0 +1,104 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { useAnimation } from 'framer-motion'; +import type { FC } from 'react'; +import { useEffect } from 'react'; +import type { CanvasProps } from './Provider/types'; +import { ErrorBoundary } from 'react-error-boundary'; +import { CanvasContainer } from './structure/CanvasContainer'; +import { CanvasScroll } from './structure/CanvasScroll'; +import { ModalContent } from './structure/ModalContent'; +import { CanvasContent } from './structure/CanvasContent'; +import { useOverlay } from './Provider'; + +export const Canvas = ({ + canvas, + externalOverlayStatus, + fallback: Fallback, +}: CanvasProps) => { + const controls = useAnimation(); + const { + setOpenOverlayInstances, + activeOverlayInstance, + setActiveOverlayInstance, + modal: { status: modalStatus }, + canvas: { + status, + setCanvasStatus, + config: { key, size, scroll }, + }, + } = useOverlay(); + + const onIn = async () => { + await controls.start('visible'); + }; + + const onOut = async (closing: boolean) => { + if (closing) { + setOpenOverlayInstances('dec', 'canvas'); + setActiveOverlayInstance(modalStatus === 'open' ? 'modal' : null); + } + await controls.start('hidden'); + + if (closing) { + setCanvasStatus('closed'); + } + }; + + // Control dim help status change. + useEffect(() => { + if (externalOverlayStatus === 'open' && status === 'open') { + onOut(false); + } + + if (externalOverlayStatus === 'closing') { + if (activeOverlayInstance === 'canvas') { + setCanvasStatus('open'); + onIn(); + } + } + }, [externalOverlayStatus]); + + // Control fade in and out on opening and closing states. + useEffect(() => { + if (status === 'open') { + onIn(); + } + if (status === 'closing') { + onOut(true); + } + }, [status]); + + const ActiveCanvas: FC | null = canvas?.[key] || null; + + return status === 'closed' ? null : ( + + + + + + {ActiveCanvas && } + + + + + + ); +}; diff --git a/src/kits/Overlay/Modal.tsx b/src/kits/Overlay/Modal.tsx new file mode 100644 index 0000000000..fb588f518c --- /dev/null +++ b/src/kits/Overlay/Modal.tsx @@ -0,0 +1,181 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { useAnimation } from 'framer-motion'; +import type { FC } from 'react'; +import { useEffect, useRef } from 'react'; +import type { ModalProps } from './Provider/types'; +import { ErrorBoundary } from 'react-error-boundary'; +import { ModalContainer } from './structure/ModalContainer'; +import { ModalScroll } from './structure/ModalScroll'; +import { ModalCard } from './structure/ModalCard'; +import { useOverlay } from './Provider'; + +export const Modal = ({ + modals, + externalOverlayStatus, + fallback: Fallback, +}: ModalProps) => { + const { + activeOverlayInstance, + setOpenOverlayInstances, + setActiveOverlayInstance, + modal: { + config: { key, size, options }, + status, + modalHeight, + modalResizeCounter, + setModalRef, + modalMaxHeight, + setModalHeight, + setModalStatus, + setModalHeightRef, + }, + } = useOverlay(); + const controls = useAnimation(); + const { status: canvasStatus } = useOverlay().canvas; + const modalRef = useRef(null); + const heightRef = useRef(null); + + const onOutClose = async () => { + setOpenOverlayInstances('dec', 'modal'); + setActiveOverlayInstance(null); + await controls.start('out'); + setModalStatus('closed'); + }; + const onIn = async () => await controls.start('in'); + + const onOut = async () => await controls.start('out'); + + const windowResize = () => { + if (!options?.disableWindowResize) { + window.addEventListener('resize', handleResize); + } + }; + + const handleResize = () => { + if (status !== 'open' || options?.disableWindowResize) { + return; + } + setModalHeight(modalRef.current?.clientHeight || 0); + }; + + // Control on modal status change. + useEffect(() => { + if (activeOverlayInstance === 'modal' && status === 'open') { + onIn(); + } + if (status === 'closing') { + onOutClose(); + } + }, [status]); + + // Control on canvas status change. + useEffect(() => { + // fade out modal if canvas has been opened. + if (canvasStatus === 'open' && status === 'open') { + onOut(); + } + // fade in modal if its open & canvas is closing. + if (canvasStatus === 'closing') { + if (status === 'open') { + onIn(); + } + } + }, [canvasStatus]); + + // Control dim external overlay change. + useEffect(() => { + // fade out modal if external overlay has been opened. + if (externalOverlayStatus === 'open' && status === 'open') { + onOut(); + } + // fade in modal if its open & external overlay is closing. + if ( + externalOverlayStatus === 'closing' && + activeOverlayInstance === 'modal' + ) { + onIn(); + } + }, [externalOverlayStatus]); + + // Resize modal on status or resize change. + useEffect(() => handleResize(), [modalResizeCounter, status]); + + // Resize modal on window size change. + useEffect(() => { + windowResize(); + return () => { + window.removeEventListener('resize', handleResize); + }; + }); + + // Update the modal's content ref as they are initialised. + useEffect(() => { + setModalRef(modalRef); + setModalHeightRef(heightRef); + }, [modalRef?.current, heightRef?.current]); + + const ActiveModal: FC | null = modals?.[key] || null; + + return status === 'closed' ? null : status !== 'replacing' ? ( + +
+ = modalMaxHeight + ? 'scroll' + : 'hidden', + }} + > + + + {ActiveModal && } + + + + +
+ + ) : null; +}; diff --git a/src/kits/Overlay/Provider/defaults.ts b/src/kits/Overlay/Provider/defaults.ts new file mode 100644 index 0000000000..b9a5a64375 --- /dev/null +++ b/src/kits/Overlay/Provider/defaults.ts @@ -0,0 +1,50 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only +/* eslint-disable @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function, no-unused-vars */ + +import { unimplemented } from '@w3ux/utils'; +import type { + CanvasConfig, + ModalConfig, + OverlayContextInterface, +} from './types'; + +export const defaultModalConfig: ModalConfig = { + key: '', + size: 'lg', + options: {}, +}; + +export const defaultCanvasConfig: CanvasConfig = { + key: '', + options: {}, + scroll: true, +}; + +export const defaultOverlayContext: OverlayContextInterface = { + openOverlayInstances: 0, + activeOverlayInstance: null, + setOpenOverlayInstances: (direction, instanceType) => unimplemented, + setActiveOverlayInstance: (instance) => unimplemented, + canvas: { + status: 'closed', + config: defaultCanvasConfig, + openCanvas: (config) => unimplemented, + closeCanvas: () => unimplemented, + setCanvasStatus: (s) => unimplemented, + }, + modal: { + status: 'closed', + config: defaultModalConfig, + modalHeight: 0, + modalMaxHeight: 0, + modalResizeCounter: 0, + openModal: (config) => unimplemented, + replaceModal: (config) => unimplemented, + setModalHeight: (height) => unimplemented, + setModalResize: () => unimplemented, + setModalStatus: (status) => unimplemented, + setModalRef: (modalRef) => unimplemented, + setModalHeightRef: (heightRef) => unimplemented, + }, +}; diff --git a/src/kits/Overlay/Provider/index.tsx b/src/kits/Overlay/Provider/index.tsx new file mode 100644 index 0000000000..a14e2ed42a --- /dev/null +++ b/src/kits/Overlay/Provider/index.tsx @@ -0,0 +1,238 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { RefObject, ReactNode } from 'react'; +import { useRef, useState, createContext, useContext } from 'react'; +import { setStateWithRef } from '@w3ux/utils'; +import type { + ModalConfig, + CanvasConfig, + ModalStatus, + OverlayContextInterface, + CanvasStatus, + ActiveOverlayInstance, + OverlayInstanceDirection, +} from './types'; +import { + defaultCanvasConfig, + defaultModalConfig, + defaultOverlayContext, +} from './defaults'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; + +export const OverlayContext = createContext( + defaultOverlayContext +); + +export const useOverlay = () => useContext(OverlayContext); + +export const OverlayProvider = ({ children }: { children: ReactNode }) => { + // Store the modal status. + const [openOverlayInstances, setOpenOverlayInstancesState] = + useState(0); + + const setOpenOverlayInstances = ( + direction: OverlayInstanceDirection, + instanceType: 'modal' | 'canvas' + ) => { + if (direction === 'inc') { + setOpenOverlayInstancesState(openOverlayInstances + 1); + setActiveOverlayInstance(instanceType); + } else { + setOpenOverlayInstancesState(Math.max(openOverlayInstances - 1, 0)); + } + }; + + // Store the currently active overlay instance. + const [activeOverlayInstance, setActiveOverlayInstance] = + useState(null); + + // Store the modal status. + const [modalStatus, setModalStatusState] = useState('closed'); + const modalStatusRef = useRef(modalStatus); + + // Store modal configuration. + const [modalConfig, setModalConfigState] = + useState(defaultModalConfig); + const modalConfigRef = useRef(modalConfig); + + // Store the modal's current height. + const [modalHeight, setModalHeightState] = useState(0); + + // Store the modal's resize counter. + const [modalResizeCounter, setModalResizeCounterState] = useState(0); + + // Store the ref to the modal height container. Used for controlling whether height is transitionable. + const [modalRef, setModalRef] = useState>(); + + // Store the ref to the modal height container. Used for controlling whether height is transitionable. + const [modalHeightRef, setModalHeightRef] = + useState>(); + + // The maximum allowed height for the modal. + const modalMaxHeight = window.innerHeight * 0.8; + + const setModalConfig = (config: ModalConfig) => { + setStateWithRef(config, setModalConfigState, modalConfigRef); + }; + + const setModalStatus = (newStatus: ModalStatus) => { + setStateWithRef(newStatus, setModalStatusState, modalStatusRef); + }; + + const openModal = ({ key, size = 'lg', options = {} }: ModalConfig) => { + if (canvasStatus !== 'closed') { + return; + } + + setModalConfig({ key, size, options }); + setModalStatus('opening'); + if (!options?.replacing) { + setOpenOverlayInstances('inc', 'modal'); + } + }; + + // Closes one modal and opens another. + const replaceModal = ({ key, size = 'lg', options = {} }: ModalConfig) => { + setModalStatus('replacing'); + setTimeout(() => { + openModal({ + key, + size, + options: { + ...options, + replacing: true, + }, + }); + }, 10); + }; + + const setModalHeight = (height: number, transition = true) => { + if (modalStatusRef.current === 'closed') { + return; + } + + // Ensure transition class is removed if not transitioning. Otherwise, ensure class exists. + if (transition) { + transitionOn(); + } else { + transitionOff(); + } + + // Limit maximum height to 80% of window height, or 90% if window width <= 600. + const maxHeight = + window.innerWidth <= 600 + ? window.innerHeight * 0.9 + : window.innerHeight * 0.8; + if (height > maxHeight) { + height = maxHeight; + } + + // Update height state. + setModalHeightState(height); + + // If transitioning, remove after enough time to finish transition. + if (transition) { + setTimeout(() => transitionOff(), 500); + } + }; + + // Increments modal resize to trigger a height transition. + const setModalResize = () => { + transitionOn(); + setModalResizeCounterState(modalResizeCounter + 1); + setTimeout(() => transitionOff(), 500); + }; + + // Helper to set the transition height class of the modal. + const transitionOn = () => + modalHeightRef?.current?.classList.add('transition-height'); + + // Helper to remove the transition height class of the modal. + const transitionOff = () => + modalHeightRef?.current?.classList.remove('transition-height'); + + // Store canvas status + const [canvasStatus, setCanvasStatus] = useState('closed'); + + // Store config options of the canvas. + const [canvasConfig, setCanvasConfig] = useState({ + key: '', + scroll: true, + options: {}, + }); + + // Open the canvas. + const openCanvas = ({ + key, + size = 'lg', + scroll = true, + options, + }: CanvasConfig) => { + setCanvasStatus('open'); + setOpenOverlayInstances('inc', 'canvas'); + setCanvasConfig({ + key, + size, + scroll, + options: options || {}, + }); + }; + + // Close the canvas. + const closeCanvas = () => { + setCanvasStatus('closing'); + }; + + // Update modal height and open modal once refs are initialised. + useEffectIgnoreInitial(() => { + const height = modalRef?.current?.clientHeight || 0; + if (modalStatusRef.current === 'opening') { + setModalHeight(height, false); + if (height > 0) { + setModalStatus('open'); + } + } + }, [modalStatusRef.current, modalRef?.current]); + + // When canvas fade out completes, reset config. + useEffectIgnoreInitial(() => { + if (canvasStatus === 'closed') { + setCanvasConfig(defaultCanvasConfig); + } + }, [canvasStatus]); + + return ( + + {children} + + ); +}; diff --git a/src/kits/Overlay/Provider/types.ts b/src/kits/Overlay/Provider/types.ts new file mode 100644 index 0000000000..4005bda16f --- /dev/null +++ b/src/kits/Overlay/Provider/types.ts @@ -0,0 +1,84 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { RefObject, FC } from 'react'; +import type { AnyJson } from 'types'; + +export interface OverlayContextInterface { + openOverlayInstances: number; + setOpenOverlayInstances: ( + direction: OverlayInstanceDirection, + instanceType: OverlayType + ) => void; + activeOverlayInstance: ActiveOverlayInstance; + setActiveOverlayInstance: (instance: ActiveOverlayInstance) => void; + canvas: { + status: CanvasStatus; + config: CanvasConfig; + openCanvas: (config: CanvasConfig) => void; + closeCanvas: () => void; + setCanvasStatus: (status: CanvasStatus) => void; + }; + modal: { + status: ModalStatus; + config: AnyJson; + modalHeight: number; + modalResizeCounter: number; + modalMaxHeight: number; + openModal: (config: ModalConfig) => void; + replaceModal: (config: ModalConfig) => void; + setModalHeight: (height: number) => void; + setModalResize: () => void; + setModalStatus: (status: ModalStatus) => void; + setModalRef: (modalRef: RefObject) => void; + setModalHeightRef: (heightRef: RefObject) => void; + }; +} +export interface Fallback { + fallback: FC; +} + +export type CanvasProps = Fallback & { + canvas?: Record; + externalOverlayStatus: CanvasStatus; +}; + +export type ModalProps = Fallback & { + modals?: Record; + externalOverlayStatus: CanvasStatus; +}; +export type OverlayProps = ModalProps & CanvasProps; + +export type OverlayInstanceDirection = 'inc' | 'dec'; + +export type ActiveOverlayInstance = 'modal' | 'canvas' | null; + +export type OverlayType = 'modal' | 'canvas'; + +export type CanvasStatus = 'open' | 'closing' | 'closed'; + +export type ModalStatus = + | 'opening' + | 'open' + | 'closing' + | 'closed' + | 'replacing'; + +export type ConfigOptions = Record; + +export type ModalSize = 'sm' | 'lg' | 'xl'; + +export interface ModalConfig { + key: string; + options?: ConfigOptions; + size?: ModalSize; +} + +export interface CanvasConfig { + key: string; + scroll?: boolean; + size?: CanvasSize; + options?: ConfigOptions; +} + +export type CanvasSize = 'lg' | 'xl'; diff --git a/src/kits/Overlay/index.scss b/src/kits/Overlay/index.scss new file mode 100644 index 0000000000..690c115895 --- /dev/null +++ b/src/kits/Overlay/index.scss @@ -0,0 +1,503 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +/* Mixins */ + +@mixin modal-position { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +@mixin modal-motion-sections { + display: flex; + height: auto; + position: relative; + overflow: hidden auto; +} + +@mixin modal-scrollbar { + scrollbar-width: thin; + scrollbar-color: inherit transparent; + + ::-webkit-scrollbar { + width: 0.1rem; + } + + ::-webkit-scrollbar-track { + background-color: transparent; + border: 0; + } + + ::-webkit-scrollbar-thumb { + background-color: transparent; /* color of the scroll thumb */ + border-radius: 2rem; /* roundness of the scroll thumb */ + border: 0.1rem solid transparent; /* creates padding around scroll thumb */ + } +} + +/* Component styles */ + +.modal-canvas-card { + background: var(--background-floating-card); + border-radius: 1.5rem; + display: flex; + flex-flow: row wrap; + align-items: center; + position: relative; + overflow: hidden; + margin-bottom: 1.25rem; + padding: 1rem; + width: 100%; + + h2 { + color: var(--text-color-primary); + padding: 0 0.75rem; + margin: 0.5rem 0; + width: 100%; + } +} + +.modal-canvas { + @include modal-position; + + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 3rem; + position: fixed; + z-index: 10; + + /* click anywhere behind modal content to close */ + .close { + @include modal-position; + + z-index: 8; + cursor: default; + } +} + +.modal-canvas-content { + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; +} + +.canvas-scroll { + width: 100%; + height: 100%; + position: relative; + overflow: hidden auto; + z-index: 9; + max-width: 800px; + -ms-overflow-style: none; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + + &.xl { + max-width: 1250px; + } +} + +.modal-card { + background: var(--background-modal); + transition: opacity 0.15s; + + &.dimmed { + opacity: 0; + } + + h2 { + margin: 1rem 0; + + &.unbounded { + font-family: Unbounded, sans-serif; + font-weight: 700; + } + + &.title { + font-size: 1.35rem; + margin: 1.25rem 0 0; + } + } + + a { + color: var(--accent-color-primary); + } + + .header { + display: flex; + align-items: center; + padding: 1rem 1rem 0; + width: 100%; + } + + .body { + padding: 1rem; + } +} + +.modal-connect-item { + padding: 0.5rem; + flex-grow: 0; + width: 50%; + + @media (max-width: 800px) { + width: 100%; + } + + &.can-connect { + > .inner { + transition: transform 0.15s; + + &:hover { + transform: scale(1.015); + } + } + } + + .foot { + padding: 0.85rem; + + .link { + color: var(--text-color-secondary); + transition: color 0.15s; + + &:hover { + color: var(--accent-color-primary); + } + + > svg { + margin-left: 0.35rem; + margin-top: 0.3rem; + } + } + } +} + +.modal-container { + @include modal-position; + + z-index: 9; + + > div { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 1rem 2rem; + + /* click anywhere behind modal content to close */ + .close { + position: fixed; + width: 100%; + height: 100%; + z-index: 8; + cursor: default; + } + } +} + +.modal-content { + width: 100%; + height: auto; + overflow: hidden; + position: relative; + padding: 5rem 0; + + > .buttons { + width: 100%; + display: flex; + flex-flow: row wrap; + margin-bottom: 2rem; + position: relative; + + > button { + border: 1px solid var(--accent-color-primary); + color: var(--accent-color-primary); + border-radius: 1.5rem; + padding: 0.4rem 0.8rem; + + > svg { + margin-right: 0.5rem; + } + } + } + + &.canvas { + padding: 0; + min-height: 100vh; + } + + h1 { + font-family: Unbounded, sans-serif; + margin-bottom: 1.75rem; + } + + h3 { + font-family: InterBold, sans-serif; + margin: 2rem 0.5rem 1rem; + } +} + +.modal-custom-header { + width: 100%; + display: flex; + flex-wrap: wrap; + align-items: center; + margin-top: 0.5rem; + position: relative; + + > div { + &.first { + display: flex; + flex-grow: 1; + + h1 { + color: var(--text-color-primary); + font-size: 1.4rem; + font-family: Unbounded, sans-serif; + font-weight: 700; + padding: 0 0.5rem; + display: flex; + align-items: center; + + > button { + margin-left: 1.25rem; + } + } + } + } + + .close-modal { + position: absolute; + top: 0; + right: 1.5rem; + opacity: 0.25; + + &:hover { + opacity: 1; + } + } +} + +.modal-fixed-title { + width: 100%; + background: transparent; + padding: 1rem 0 0; + + &.with-style { + background: var(--background-default); + padding: 1rem 1rem 0; + } +} + +.modal-footer { + display: flex; + align-items: center; + width: 100%; + + h3 { + color: var(--text-color-secondary); + opacity: 0.5; + position: relative; + top: 1.25rem; + + &.active { + color: var(--accent-color-primary); + opacity: 1; + } + } +} + +.modal-hardware-item { + background: var(--button-primary-background); + border-radius: 1rem; + position: relative; + overflow: hidden; + width: 100%; + + .body { + padding: 0.5rem 0.85rem; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + + .row { + display: flex; + justify-content: center; + + p { + margin-bottom: 0; + } + + &.margin { + margin-top: 0.75rem; + } + + .logo { + color: var(--text-color-secondary); + height: 3rem; + margin: 0.75rem 0.5rem 0.5rem; + } + } + + .status { + position: absolute; + top: 0.9rem; + right: 0.9rem; + } + } +} + +.modal-motion-three-sections { + @include modal-motion-sections; + + width: 300%; + + > .section { + @include modal-scrollbar; + + border-radius: 1rem; + display: flex; + flex-direction: column; + flex-basis: 33.33%; + min-width: 33.33%; + height: auto; + overflow: hidden auto; + flex-grow: 1; + } +} + +.modal-motion-two-sections { + @include modal-motion-sections; + + width: 200%; + + > .section { + @include modal-scrollbar; + + border-radius: 1rem; + display: flex; + flex-direction: column; + flex-basis: 50%; + min-width: 50%; + height: auto; + overflow: hidden auto; + flex-grow: 1; + } +} + +.modal-notes { + width: 100%; + padding: 0; + + &.with-padding { + padding: 0.75rem 0; + } + + > p { + color: var(--text-color-secondary); + } +} + +.modal-overlay { + @include modal-position; + + background: var(--modal-background-color); + transition: backdrop-filter 0.5s; + backdrop-filter: blur(4px); + z-index: 9; +} + +.modal-padding { + display: flex; + flex-flow: column wrap; + padding: 1rem; + + &.vertical-only { + padding: 1rem 0 0.25rem; + } + + &.horizontal-only { + padding: 0 1rem; + } +} + +.modal-scroll { + @include modal-scrollbar; + + border-radius: 1.5rem; + position: relative; + z-index: 9; + max-height: 100%; + width: 100%; + max-width: 600px; + + &.lg { + max-width: 800px; + } + + &.xl { + max-width: 1250px; + } + + &.transition-height { + transition: height 0.5s cubic-bezier(0.1, 1, 0.2, 1); + } + + ::-webkit-scrollbar { + width: 0.1rem; + } + + ::-webkit-scrollbar-track { + background-color: transparent; + border: 0; + } + + ::-webkit-scrollbar-thumb { + background-color: transparent; /* color of the scroll thumb */ + border-radius: 2rem; /* roundness of the scroll thumb */ + border: 0.1rem solid transparent; /* creates padding around scroll thumb */ + } +} + +.modal-carousel { + display: flex; + flex-flow: column wrap; + padding: 0; + position: relative; + overflow: hidden auto; + width: 100%; +} + +.modal-tabs { + width: 100%; + display: flex; + margin: 1.25rem 0 0.25rem; +} + +.modal-separator { + border-top: 1px solid var(--text-color-secondary); + width: 100%; + opacity: 0.1; + margin: 0.8rem 0; +} + +.modal-warnings { + margin-top: 0; + width: 100%; + + &.with-margin { + margin-top: 0.75rem; + } +} diff --git a/src/kits/Overlay/index.tsx b/src/kits/Overlay/index.tsx new file mode 100644 index 0000000000..933463de72 --- /dev/null +++ b/src/kits/Overlay/index.tsx @@ -0,0 +1,28 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { OverlayProps } from './Provider/types'; +import { Modal } from './Modal'; +import { Canvas } from './Canvas'; +import { Background } from './Background'; + +export const Overlay = ({ + modals = {}, + canvas = {}, + fallback, + externalOverlayStatus, +}: OverlayProps) => ( + <> + + + + +); diff --git a/src/kits/Overlay/structure/CanvasCard.tsx b/src/kits/Overlay/structure/CanvasCard.tsx new file mode 100644 index 0000000000..de103982f0 --- /dev/null +++ b/src/kits/Overlay/structure/CanvasCard.tsx @@ -0,0 +1,21 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ComponentBaseWithClassName } from 'types'; + +/** + * @name CanvasCard + * @summary Modal canvas card wrapper. + */ +export const CanvasCard = ({ + children, + style, + className, +}: ComponentBaseWithClassName) => ( +
+ {children} +
+); diff --git a/src/kits/Overlay/structure/CanvasContainer.tsx b/src/kits/Overlay/structure/CanvasContainer.tsx new file mode 100644 index 0000000000..027f12e2d4 --- /dev/null +++ b/src/kits/Overlay/structure/CanvasContainer.tsx @@ -0,0 +1,16 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { motion } from 'framer-motion'; +import type { ModalAnimationProps } from '../types'; + +/** + * @name CanvasContainer + * @summary Modal background wrapper with a thick blurred backround, suitable for text content to + * overlay it. + */ +export const CanvasContainer = ({ children, ...rest }: ModalAnimationProps) => ( + + {children} + +); diff --git a/src/kits/Overlay/structure/CanvasContent.tsx b/src/kits/Overlay/structure/CanvasContent.tsx new file mode 100644 index 0000000000..3b85cdc9cc --- /dev/null +++ b/src/kits/Overlay/structure/CanvasContent.tsx @@ -0,0 +1,21 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ComponentBaseWithClassName } from 'types'; + +/** + * @name CanvasContent + * @summary Modal canvas content wrapper. + */ +export const CanvasContent = ({ + children, + style, + className, +}: ComponentBaseWithClassName) => ( +
+ {children} +
+); diff --git a/src/kits/Overlay/structure/CanvasScroll.tsx b/src/kits/Overlay/structure/CanvasScroll.tsx new file mode 100644 index 0000000000..8e5b980ee6 --- /dev/null +++ b/src/kits/Overlay/structure/CanvasScroll.tsx @@ -0,0 +1,27 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { motion } from 'framer-motion'; +import { appendOrEmpty } from '@w3ux/utils'; +import type { CanvasScrollProps } from '../types'; + +/** + * @name CanvasScroll + * @summary Canvas scrollable container. + */ +export const CanvasScroll = ({ + children, + size, + scroll = true, + ...rest +}: CanvasScrollProps) => ( + + {children} + +); diff --git a/src/kits/Overlay/structure/ModalCard.tsx b/src/kits/Overlay/structure/ModalCard.tsx new file mode 100644 index 0000000000..2b40e4b355 --- /dev/null +++ b/src/kits/Overlay/structure/ModalCard.tsx @@ -0,0 +1,26 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ForwardedRef } from 'react'; +import { forwardRef } from 'react'; +import type { ComponentBaseWithClassName } from 'types'; + +/** + * @name ModalCard + * @summary Modal card wrapper. + */ +export const ModalCard = forwardRef( + ( + { children, style, className }: ComponentBaseWithClassName, + ref?: ForwardedRef + ) => ( +
+ {children} +
+ ) +); +ModalCard.displayName = 'ModalCard'; diff --git a/src/kits/Overlay/structure/ModalConnectItem.tsx b/src/kits/Overlay/structure/ModalConnectItem.tsx new file mode 100644 index 0000000000..60075850d7 --- /dev/null +++ b/src/kits/Overlay/structure/ModalConnectItem.tsx @@ -0,0 +1,22 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { appendOrEmpty } from '@w3ux/utils'; +import type { ModalConnectItemProps } from '../types'; + +/** + * @name ModalConnectItem + * @summary Wrapper for a modal connect item. + */ +export const ModalConnectItem = ({ + children, + style, + canConnect, +}: ModalConnectItemProps) => ( +
+ {children} +
+); diff --git a/src/kits/Overlay/structure/ModalContainer.tsx b/src/kits/Overlay/structure/ModalContainer.tsx new file mode 100644 index 0000000000..5745b39f80 --- /dev/null +++ b/src/kits/Overlay/structure/ModalContainer.tsx @@ -0,0 +1,15 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { motion } from 'framer-motion'; +import type { ModalAnimationProps } from '../types'; + +/** + * @name ModalContainer + * @summary Modal container wrapper. + */ +export const ModalContainer = ({ children, ...rest }: ModalAnimationProps) => ( + + {children} + +); diff --git a/src/kits/Overlay/structure/ModalContent.tsx b/src/kits/Overlay/structure/ModalContent.tsx new file mode 100644 index 0000000000..738927e30e --- /dev/null +++ b/src/kits/Overlay/structure/ModalContent.tsx @@ -0,0 +1,23 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { motion } from 'framer-motion'; +import type { ModalContentProps } from '../types'; +import { appendOrEmpty } from '@w3ux/utils'; + +/** + * @name ModalContent + * @summary Modal content wrapper for `ModalContainer` and `CanvasContainer`. + */ +export const ModalContent = ({ + children, + canvas, + ...rest +}: ModalContentProps) => ( + + {children} + +); diff --git a/src/kits/Overlay/structure/ModalCustomHeader.tsx b/src/kits/Overlay/structure/ModalCustomHeader.tsx new file mode 100644 index 0000000000..acca8e5a8b --- /dev/null +++ b/src/kits/Overlay/structure/ModalCustomHeader.tsx @@ -0,0 +1,14 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ComponentBase } from 'types'; + +/** + * @name ModalCustomHeader + * @summary The header section along with the title. + */ +export const ModalCustomHeader = ({ children, style }: ComponentBase) => ( +
+ {children} +
+); diff --git a/src/kits/Overlay/structure/ModalFixedTitle.tsx b/src/kits/Overlay/structure/ModalFixedTitle.tsx new file mode 100644 index 0000000000..048741e120 --- /dev/null +++ b/src/kits/Overlay/structure/ModalFixedTitle.tsx @@ -0,0 +1,27 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ForwardedRef } from 'react'; +import { forwardRef } from 'react'; +import type { ModalFixedTitleProps } from '../types'; +import { appendOrEmpty } from '@w3ux/utils'; + +/** + * @name ModalFixedTitle + * @summary Fixed the title. + */ +export const ModalFixedTitle = forwardRef( + ( + { children, style, withStyle }: ModalFixedTitleProps, + ref?: ForwardedRef + ) => ( +
+ {children} +
+ ) +); +ModalFixedTitle.displayName = 'ModalFixedTitle'; diff --git a/src/kits/Overlay/structure/ModalFooter.tsx b/src/kits/Overlay/structure/ModalFooter.tsx new file mode 100644 index 0000000000..d82685c5cf --- /dev/null +++ b/src/kits/Overlay/structure/ModalFooter.tsx @@ -0,0 +1,14 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ComponentBase } from 'types'; + +/** + * @name ModalFooter + * @summary Used for extrinsics forms. + */ +export const ModalFooter = ({ children, style }: ComponentBase) => ( +
+ {children} +
+); diff --git a/src/kits/Overlay/structure/ModalHardwareItem.tsx b/src/kits/Overlay/structure/ModalHardwareItem.tsx new file mode 100644 index 0000000000..094d7f56ed --- /dev/null +++ b/src/kits/Overlay/structure/ModalHardwareItem.tsx @@ -0,0 +1,14 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ComponentBase } from 'types'; + +/** + * @name ModalHardwareItem + * @summary Inner wrapper for a hardware connect item. + */ +export const ModalHardwareItem = ({ children, style }: ComponentBase) => ( +
+ {children} +
+); diff --git a/src/kits/Overlay/structure/ModalMotionThreeSection.tsx b/src/kits/Overlay/structure/ModalMotionThreeSection.tsx new file mode 100644 index 0000000000..ba0e182739 --- /dev/null +++ b/src/kits/Overlay/structure/ModalMotionThreeSection.tsx @@ -0,0 +1,18 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { motion } from 'framer-motion'; +import type { ModalAnimationProps } from '../types'; + +/** + * @name ModalMotionThreeSection + * @summary Three section wrapper with motion animation. + */ +export const ModalMotionThreeSection = ({ + children, + ...rest +}: ModalAnimationProps) => ( + + {children} + +); diff --git a/src/kits/Overlay/structure/ModalMotionTwoSection.tsx b/src/kits/Overlay/structure/ModalMotionTwoSection.tsx new file mode 100644 index 0000000000..b20e9b6f4d --- /dev/null +++ b/src/kits/Overlay/structure/ModalMotionTwoSection.tsx @@ -0,0 +1,18 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { motion } from 'framer-motion'; +import type { ModalAnimationProps } from '../types'; + +/** + * @name ModalMotionTwoSection + * @summary Two section wrapper with motion animation. + */ +export const ModalMotionTwoSection = ({ + children, + ...rest +}: ModalAnimationProps) => ( + + {children} + +); diff --git a/src/kits/Overlay/structure/ModalNotes.tsx b/src/kits/Overlay/structure/ModalNotes.tsx new file mode 100644 index 0000000000..3dc959e2b9 --- /dev/null +++ b/src/kits/Overlay/structure/ModalNotes.tsx @@ -0,0 +1,22 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ModalNotesProps } from '../types'; +import { appendOrEmpty } from '@w3ux/utils'; + +/** + * @name ModalNotes + * @summary Note styling. + */ +export const ModalNotes = ({ + children, + style, + withPadding, +}: ModalNotesProps) => ( +
+ {children} +
+); diff --git a/src/kits/Overlay/structure/ModalOverlay.tsx b/src/kits/Overlay/structure/ModalOverlay.tsx new file mode 100644 index 0000000000..d0bc7a58f8 --- /dev/null +++ b/src/kits/Overlay/structure/ModalOverlay.tsx @@ -0,0 +1,23 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { motion } from 'framer-motion'; +import type { ModalOverlayProps } from '../types'; + +/** + * @name ModalOverlay + * @summary Modal overlay wrapper, providing a transparent background to overlaying content. + */ +export const ModalOverlay = ({ + children, + blur, + ...rest +}: ModalOverlayProps) => ( + + {children} + +); diff --git a/src/kits/Overlay/structure/ModalPadding.tsx b/src/kits/Overlay/structure/ModalPadding.tsx new file mode 100644 index 0000000000..876458aca9 --- /dev/null +++ b/src/kits/Overlay/structure/ModalPadding.tsx @@ -0,0 +1,30 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ForwardedRef } from 'react'; +import { forwardRef } from 'react'; +import type { ModalPaddingProps } from '../types'; +import { appendOrEmpty } from '@w3ux/utils'; + +/** + * @name ModalPadding + * @summary Generic wrapper for modal padding. + */ +export const ModalPadding = forwardRef( + ( + { children, style, verticalOnly, horizontalOnly }: ModalPaddingProps, + ref?: ForwardedRef + ) => ( +
+ {children} +
+ ) +); +ModalPadding.displayName = 'ModalPadding'; diff --git a/src/kits/Overlay/structure/ModalScroll.tsx b/src/kits/Overlay/structure/ModalScroll.tsx new file mode 100644 index 0000000000..947be1eb95 --- /dev/null +++ b/src/kits/Overlay/structure/ModalScroll.tsx @@ -0,0 +1,30 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { appendOrEmpty } from '@w3ux/utils'; +import type { ForwardedRef } from 'react'; +import { forwardRef } from 'react'; +import type { ModalScrollProps } from '../types'; + +/** + * @name ModalScroll + * @summary Used for modal window height. + */ +export const ModalScroll = forwardRef( + ( + { size, children, style }: ModalScrollProps, + ref?: ForwardedRef + ) => ( +
+ {children} +
+ ) +); +ModalScroll.displayName = 'ModalScroll'; diff --git a/src/kits/Overlay/structure/ModalSection.tsx b/src/kits/Overlay/structure/ModalSection.tsx new file mode 100644 index 0000000000..34c9b6871c --- /dev/null +++ b/src/kits/Overlay/structure/ModalSection.tsx @@ -0,0 +1,21 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { appendOrEmpty } from '@w3ux/utils'; +import type { ModalSectionProps } from '../types'; + +/** + * @name ModalSection + * @summary Section wrapper. + */ +export const ModalSection = ({ children, style, type }: ModalSectionProps) => ( +
+ {children} +
+); diff --git a/src/kits/Overlay/structure/ModalSeparator.tsx b/src/kits/Overlay/structure/ModalSeparator.tsx new file mode 100644 index 0000000000..abd1038791 --- /dev/null +++ b/src/kits/Overlay/structure/ModalSeparator.tsx @@ -0,0 +1,8 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +/** + * @name ModalSeparator + * @summary A line to separate the content. + */ +export const ModalSeparator = () =>
; diff --git a/src/kits/Overlay/structure/ModalWarnings.tsx b/src/kits/Overlay/structure/ModalWarnings.tsx new file mode 100644 index 0000000000..6ae91cf604 --- /dev/null +++ b/src/kits/Overlay/structure/ModalWarnings.tsx @@ -0,0 +1,22 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { appendOrEmpty } from '@w3ux/utils'; +import type { ModalWarningsProps } from '../types'; + +/** + * @name ModalWarnings + * @summary Warnings styling. + */ +export const ModalWarnings = ({ + children, + style, + withMargin, +}: ModalWarningsProps) => ( +
+ {children} +
+); diff --git a/src/kits/Overlay/types.ts b/src/kits/Overlay/types.ts new file mode 100644 index 0000000000..5a54e3b5d0 --- /dev/null +++ b/src/kits/Overlay/types.ts @@ -0,0 +1,61 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { AnimationProps } from 'framer-motion'; +import type { ComponentBase } from 'types'; + +export type ModalAnimationProps = ComponentBase & AnimationProps; + +export type CanvasScrollProps = ModalAnimationProps & { + // the maximum width of the canvas. + size?: 'lg' | 'xl'; + // allow scrolling. + scroll?: boolean; +}; + +export type ModalConnectItemProps = ComponentBase & { + // whether the item can be connected to. + canConnect?: boolean; +}; + +export type ModalContentProps = ModalAnimationProps & { + // include canvas styling. + canvas?: boolean; +}; + +export type ModalFixedTitleProps = ComponentBase & { + // whether there is customized css. + withStyle?: boolean; +}; + +export type ModalNotesProps = ComponentBase & { + // whether there is padding vertically. + withPadding?: boolean; +}; + +export type ModalOverlayProps = ModalAnimationProps & { + // the amount of blur to apply to the backdrop. + blur?: string; +}; + +export type ModalPaddingProps = ComponentBase & { + // whether there is only vertical padding. + verticalOnly?: boolean; + // whether there is only horizontal padding. + horizontalOnly?: boolean; +}; + +export type ModalScrollProps = ComponentBase & { + // the maximum width. + size: string; +}; + +export type ModalSectionProps = ComponentBase & { + // the type of window (tab | carousel). + type: 'tab' | 'carousel'; +}; + +export type ModalWarningsProps = ComponentBase & { + // whether there is margin on top. + withMargin?: boolean; +}; diff --git a/src/kits/Structure/ButtonRow/index.tsx b/src/kits/Structure/ButtonRow/index.tsx index bc1bac6808..ed0368e41a 100644 --- a/src/kits/Structure/ButtonRow/index.tsx +++ b/src/kits/Structure/ButtonRow/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { ComponentBase } from '@polkadot-cloud/react/types'; +import type { ComponentBase } from 'types'; import { Wrapper } from './Wrapper'; export type RowProps = ComponentBase & { diff --git a/src/kits/Structure/PageRow/index.tsx b/src/kits/Structure/PageRow/index.tsx index 6bd24172aa..56e9cf817e 100644 --- a/src/kits/Structure/PageRow/index.tsx +++ b/src/kits/Structure/PageRow/index.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import type { RowProps } from '../ButtonRow'; -import { appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOrEmpty } from '@w3ux/utils'; import { Wrapper } from './Wrapper'; /** diff --git a/src/kits/Structure/PageTitle/index.tsx b/src/kits/Structure/PageTitle/index.tsx index 3e3614ec21..59f42febbc 100644 --- a/src/kits/Structure/PageTitle/index.tsx +++ b/src/kits/Structure/PageTitle/index.tsx @@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from 'react'; import { faBars } from '@fortawesome/free-solid-svg-icons'; import { PageTitleTabs } from '../PageTitleTabs'; import { ButtonSecondary } from 'kits/Buttons/ButtonSecondary'; -import { appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOrEmpty } from '@w3ux/utils'; import type { PageTitleProps } from './types'; import { PageTitleWrapper, ScrollableWrapper } from './Wrappers'; diff --git a/src/kits/Structure/PageTitleTabs/index.tsx b/src/kits/Structure/PageTitleTabs/index.tsx index 21d166469a..180de7132a 100644 --- a/src/kits/Structure/PageTitleTabs/index.tsx +++ b/src/kits/Structure/PageTitleTabs/index.tsx @@ -4,7 +4,7 @@ import { ButtonTab } from 'kits/Buttons/ButtonTab'; import type { PageTitleProps } from '../PageTitle/types'; import type { PageTitleTabProps } from './types'; -import { appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOrEmpty } from '@w3ux/utils'; import { Wrapper } from './Wrapper'; /** diff --git a/src/kits/Structure/RowSection/index.tsx b/src/kits/Structure/RowSection/index.tsx index 456f6ed6a9..ee4299655d 100644 --- a/src/kits/Structure/RowSection/index.tsx +++ b/src/kits/Structure/RowSection/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { appendOr, appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOr, appendOrEmpty } from '@w3ux/utils'; import type { ComponentBase } from 'types'; import { RowPrimaryWrapper, RowSecondaryWrapper } from './Wrappers'; diff --git a/src/kits/Structure/Side/index.tsx b/src/kits/Structure/Side/index.tsx index d8c52b449f..74a1516106 100644 --- a/src/kits/Structure/Side/index.tsx +++ b/src/kits/Structure/Side/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOrEmpty } from '@w3ux/utils'; import type { CSSProperties } from 'react'; import type { ComponentBase } from 'types'; import { Wrapper } from './Wrapper'; diff --git a/src/kits/Structure/Tx/index.tsx b/src/kits/Structure/Tx/index.tsx index 28312b8795..8c93b9f4b2 100644 --- a/src/kits/Structure/Tx/index.tsx +++ b/src/kits/Structure/Tx/index.tsx @@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import type { ReactElement } from 'react'; import type { DisplayFor } from 'types'; import { Wrapper } from './Wrapper'; -import { appendOrEmpty } from '@polkadot-cloud/utils'; +import { appendOrEmpty } from '@w3ux/utils'; export interface TxProps { // whether there is margin on top. diff --git a/src/library/Account/DefaultAccount.tsx b/src/library/Account/DefaultAccount.tsx index fba2498527..49b70ce0d3 100644 --- a/src/library/Account/DefaultAccount.tsx +++ b/src/library/Account/DefaultAccount.tsx @@ -3,9 +3,9 @@ import { faGlasses } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ellipsisFn, remToUnit } from '@polkadot-cloud/utils'; +import { ellipsisFn, remToUnit } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { memo } from 'react'; import { Wrapper } from './Wrapper'; diff --git a/src/library/Account/PoolAccount.tsx b/src/library/Account/PoolAccount.tsx index 97e9c236c5..f88d0941bf 100644 --- a/src/library/Account/PoolAccount.tsx +++ b/src/library/Account/PoolAccount.tsx @@ -2,10 +2,10 @@ // SPDX-License-Identifier: GPL-3.0-only import { u8aToString, u8aUnwrapBytes } from '@polkadot/util'; -import { ellipsisFn, remToUnit } from '@polkadot-cloud/utils'; +import { ellipsisFn, remToUnit } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; import { useBondedPools } from 'contexts/Pools/BondedPools'; -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { memo } from 'react'; import { Wrapper } from './Wrapper'; import type { PoolAccountProps } from './types'; diff --git a/src/library/AccountInput/index.tsx b/src/library/AccountInput/index.tsx index d92465e1d3..0146224240 100644 --- a/src/library/AccountInput/index.tsx +++ b/src/library/AccountInput/index.tsx @@ -3,12 +3,12 @@ import { faCheck } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Polkicon } from '@polkadot-cloud/react'; -import { isValidAddress } from '@polkadot-cloud/utils'; +import { Polkicon } from '@w3ux/react-polkicon'; +import { isValidAddress } from '@w3ux/utils'; import type { FormEvent } from 'react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { useNetwork } from 'contexts/Network'; import { formatAccountSs58 } from 'contexts/Connect/Utils'; diff --git a/src/library/ActionItem/Wrapper.ts b/src/library/ActionItem/Wrapper.ts new file mode 100644 index 0000000000..758a4ab236 --- /dev/null +++ b/src/library/ActionItem/Wrapper.ts @@ -0,0 +1,36 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import styled from 'styled-components'; + +export const Wrapper = styled.h3` + border-bottom: 1px solid var(--border-primary-color); + color: var(--text-color-primary); + font-family: InterSemiBold, sans-serif; + font-weight: 600; + display: flex; + align-items: center; + margin: 1.25rem 0 0; + padding-bottom: 0.75rem; + width: 100%; + + > svg { + margin-right: 0.65rem; + } + + .toggle { + background: var(--background-input); + border: 1px solid var(--border-primary-color); + border-radius: 0.4rem; + margin-right: 0.65rem; + width: 1.75rem; + height: 1.75rem; + display: flex; + justify-content: center; + align-items: center; + } + + span { + margin-left: 0.5rem; + } +`; diff --git a/src/library/ActionItem/index.tsx b/src/library/ActionItem/index.tsx new file mode 100644 index 0000000000..203cf6d637 --- /dev/null +++ b/src/library/ActionItem/index.tsx @@ -0,0 +1,55 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { faCheck, faChevronRight } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { useEffect, useState } from 'react'; +import type { ActionItemProps } from './types'; +import { Wrapper } from './Wrapper'; + +/** + * @name ActionItem + * @summary A call to action item as a header. + * @param {string} text - The text to display. + */ +export const ActionItem = ({ + style, + text, + toggled, + disabled, + onToggle, + inactive = false, + inlineButton, +}: ActionItemProps) => { + const [toggle, setToggle] = useState(toggled); + + useEffect(() => setToggle(toggled), [toggled]); + return ( + + {toggled === undefined ? ( + + ) : ( + + )} + {text} + {inlineButton && {inlineButton}} + + ); +}; diff --git a/src/library/ActionItem/types.ts b/src/library/ActionItem/types.ts new file mode 100644 index 0000000000..f2254c902a --- /dev/null +++ b/src/library/ActionItem/types.ts @@ -0,0 +1,20 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ReactNode } from 'react'; +import type { ComponentBase } from 'types'; + +export type ActionItemProps = ComponentBase & { + // the title. + text: string; + // the state of the item. + toggled?: boolean; + // whether the item is disabled. + disabled?: boolean; + // the switch action. + onToggle?: (val: boolean) => void; + // whether the item should be inactive. + inactive?: boolean; + // optional inline button. + inlineButton?: ReactNode; +}; diff --git a/src/library/BarChart/BondedChart.tsx b/src/library/BarChart/BondedChart.tsx index 394acc4b6b..6adaf92b27 100644 --- a/src/library/BarChart/BondedChart.tsx +++ b/src/library/BarChart/BondedChart.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { greaterThanZero } from '@polkadot-cloud/utils'; +import { greaterThanZero } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useTranslation } from 'react-i18next'; import { BarSegment } from 'library/BarChart/BarSegment'; diff --git a/src/library/EstimatedTxFee/index.tsx b/src/library/EstimatedTxFee/index.tsx index 90a16510ca..76f730d6dd 100644 --- a/src/library/EstimatedTxFee/index.tsx +++ b/src/library/EstimatedTxFee/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import type { Context } from 'react'; import { Component, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/src/library/Form/Bond/BondFeedback.tsx b/src/library/Form/Bond/BondFeedback.tsx index e9710f316d..06ccbfb027 100644 --- a/src/library/Form/Bond/BondFeedback.tsx +++ b/src/library/Form/Bond/BondFeedback.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { planckToUnit, unitToPlanck } from '@polkadot-cloud/utils'; +import { planckToUnit, unitToPlanck } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/src/library/Form/ClaimPermissionInput/index.tsx b/src/library/Form/ClaimPermissionInput/index.tsx index bc5873e743..9915509d6a 100644 --- a/src/library/Form/ClaimPermissionInput/index.tsx +++ b/src/library/Form/ClaimPermissionInput/index.tsx @@ -1,12 +1,12 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ActionItem } from '@polkadot-cloud/react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { TabWrapper, TabsWrapper } from 'library/Filter/Wrappers'; import type { ClaimPermission } from 'contexts/Pools/types'; import type { ClaimPermissionConfig } from '../types'; +import { ActionItem } from 'library/ActionItem'; export interface ClaimPermissionInputProps { current: ClaimPermission | undefined; diff --git a/src/library/Form/CreatePoolStatusBar/index.tsx b/src/library/Form/CreatePoolStatusBar/index.tsx index cb02864d92..b347a9c966 100644 --- a/src/library/Form/CreatePoolStatusBar/index.tsx +++ b/src/library/Form/CreatePoolStatusBar/index.tsx @@ -3,7 +3,7 @@ import { faFlag } from '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; import { useNetwork } from 'contexts/Network'; import type { NominateStatusBarProps } from '../types'; diff --git a/src/library/Form/NominateStatusBar/index.tsx b/src/library/Form/NominateStatusBar/index.tsx index aedd936287..97774105bc 100644 --- a/src/library/Form/NominateStatusBar/index.tsx +++ b/src/library/Form/NominateStatusBar/index.tsx @@ -3,7 +3,7 @@ import { faFlag } from '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; import { useHelp } from 'contexts/Help'; import { useNetwork } from 'contexts/Network'; diff --git a/src/library/Form/Unbond/UnbondFeedback.tsx b/src/library/Form/Unbond/UnbondFeedback.tsx index 861c23fb6b..6f82845d57 100644 --- a/src/library/Form/Unbond/UnbondFeedback.tsx +++ b/src/library/Form/Unbond/UnbondFeedback.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { isNotZero, planckToUnit, unitToPlanck } from '@polkadot-cloud/utils'; +import { isNotZero, planckToUnit, unitToPlanck } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/src/library/Form/Unbond/UnbondInput.tsx b/src/library/Form/Unbond/UnbondInput.tsx index 370c5e7a99..1114711408 100644 --- a/src/library/Form/Unbond/UnbondInput.tsx +++ b/src/library/Form/Unbond/UnbondInput.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { ChangeEvent } from 'react'; import { useEffect, useState } from 'react'; diff --git a/src/library/Form/types.ts b/src/library/Form/types.ts index 4444de901b..3222f067f7 100644 --- a/src/library/Form/types.ts +++ b/src/library/Form/types.ts @@ -6,7 +6,7 @@ import type { Balance } from 'contexts/Balances/types'; import type { ExtensionAccount, ExternalAccount, -} from '@polkadot-cloud/react/types'; +} from '@w3ux/react-connect-kit/types'; import type { BondFor, MaybeAddress } from 'types'; import type { ClaimPermission } from 'contexts/Pools/types'; diff --git a/src/library/GenerateNominations/index.tsx b/src/library/GenerateNominations/index.tsx index 11f1a5b2d3..aef66eaca6 100644 --- a/src/library/GenerateNominations/index.tsx +++ b/src/library/GenerateNominations/index.tsx @@ -29,8 +29,7 @@ import { FavoritesPrompt } from 'canvas/ManageNominations/Prompts/FavoritesPromp import { usePrompt } from 'contexts/Prompt'; import { useFetchMehods } from './useFetchMethods'; import type { AddNominationsType, GenerateNominationsProps } from './types'; -import type { AnyFunction } from '@polkadot-cloud/react/types'; -import type { AnyJson } from 'types'; +import type { AnyJson, AnyFunction } from 'types'; import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; import { ButtonMonoInvert } from 'kits/Buttons/ButtonMonoInvert'; diff --git a/src/library/GenerateNominations/useFetchMethods.tsx b/src/library/GenerateNominations/useFetchMethods.tsx index 52f5f685bd..75b9538c7d 100644 --- a/src/library/GenerateNominations/useFetchMethods.tsx +++ b/src/library/GenerateNominations/useFetchMethods.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { shuffle } from '@polkadot-cloud/utils'; +import { shuffle } from '@w3ux/utils'; import { useFavoriteValidators } from 'contexts/Validators/FavoriteValidators'; import { useValidators } from 'contexts/Validators/ValidatorEntries'; import type { Validator } from 'contexts/Validators/types'; diff --git a/src/library/Graphs/GeoDonut.tsx b/src/library/Graphs/GeoDonut.tsx index 731b1b3c35..3dd8904e45 100644 --- a/src/library/Graphs/GeoDonut.tsx +++ b/src/library/Graphs/GeoDonut.tsx @@ -6,7 +6,7 @@ import { Doughnut } from 'react-chartjs-2'; import { useTheme } from 'contexts/Themes'; import { graphColors } from 'theme/graphs'; import chroma from 'chroma-js'; -import { ellipsisFn } from '@polkadot-cloud/utils'; +import { ellipsisFn } from '@w3ux/utils'; import { useNetwork } from 'contexts/Network'; import type { GeoDonutProps } from './types'; import type { AnyJson } from 'types'; diff --git a/src/library/Graphs/Utils.ts b/src/library/Graphs/Utils.ts index e982d68c34..81369098b2 100644 --- a/src/library/Graphs/Utils.ts +++ b/src/library/Graphs/Utils.ts @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { greaterThanZero, planckToUnit } from '@polkadot-cloud/utils'; +import { greaterThanZero, planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { addDays, diff --git a/src/library/Hardware/HardwareAddress/index.tsx b/src/library/Hardware/HardwareAddress/index.tsx index 0d7ffd56e9..e0fe8d8c7c 100644 --- a/src/library/Hardware/HardwareAddress/index.tsx +++ b/src/library/Hardware/HardwareAddress/index.tsx @@ -10,7 +10,7 @@ import { import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import type { FormEvent } from 'react'; import { useState } from 'react'; -import { ellipsisFn, unescape } from '@polkadot-cloud/utils'; +import { ellipsisFn, unescape } from '@w3ux/utils'; import { Wrapper } from './Wrapper'; import { ButtonText } from '../../../kits/Buttons/ButtonText'; import type { HardwareAddressProps } from './types'; diff --git a/src/library/Headers/Connect.tsx b/src/library/Headers/Connect.tsx index ee7c1f5116..157b487dbd 100644 --- a/src/library/Headers/Connect.tsx +++ b/src/library/Headers/Connect.tsx @@ -3,7 +3,7 @@ import { faPlug, faWallet } from '@fortawesome/free-solid-svg-icons'; import { useTranslation } from 'react-i18next'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { ConnectedAccount, HeadingWrapper } from './Wrappers'; import { ButtonText } from 'kits/Buttons/ButtonText'; diff --git a/src/library/Headers/Sync.tsx b/src/library/Headers/Sync.tsx index 769842873d..a6f4f63c1c 100644 --- a/src/library/Headers/Sync.tsx +++ b/src/library/Headers/Sync.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { pageFromUri } from '@polkadot-cloud/utils'; +import { pageFromUri } from '@w3ux/utils'; import { useLocation } from 'react-router-dom'; import { usePlugins } from 'contexts/Plugins'; import { useBondedPools } from 'contexts/Pools/BondedPools'; diff --git a/src/library/Help/index.tsx b/src/library/Help/index.tsx index c9da85f5fb..48eea33e43 100644 --- a/src/library/Help/index.tsx +++ b/src/library/Help/index.tsx @@ -2,12 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { faTimes } from '@fortawesome/free-solid-svg-icons'; -import { - CanvasContainer, - ModalContent, - CanvasScroll, -} from '@polkadot-cloud/react'; -import { camelize } from '@polkadot-cloud/utils'; +import { camelize } from '@w3ux/utils'; import { useAnimation } from 'framer-motion'; import { useCallback, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; @@ -24,6 +19,9 @@ import { Definition } from './Items/Definition'; import { External } from './Items/External'; import { ActiveDefinition } from './Items/ActiveDefinition'; import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; +import { CanvasContainer } from 'kits/Overlay/structure/CanvasContainer'; +import { CanvasScroll } from 'kits/Overlay/structure/CanvasScroll'; +import { ModalContent } from 'kits/Overlay/structure/ModalContent'; export const Help = () => { const { t, i18n } = useTranslation('help'); diff --git a/src/library/Import/Confirm.tsx b/src/library/Import/Confirm.tsx index e872380ac0..e09145fd76 100644 --- a/src/library/Import/Confirm.tsx +++ b/src/library/Import/Confirm.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { registerSaEvent } from 'Utils'; -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { useTranslation } from 'react-i18next'; import { usePrompt } from 'contexts/Prompt'; import { ConfirmWrapper } from 'library/Import/Wrappers'; @@ -10,7 +10,7 @@ import { useOtherAccounts } from 'contexts/Connect/OtherAccounts'; import { useNetwork } from 'contexts/Network'; import type { ConfirmProps } from './types'; import { NotificationsController } from 'static/NotificationsController'; -import { ellipsisFn } from '@polkadot-cloud/utils'; +import { ellipsisFn } from '@w3ux/utils'; import { ButtonMonoInvert } from 'kits/Buttons/ButtonMonoInvert'; import { ButtonMono } from 'kits/Buttons/ButtonMono'; diff --git a/src/library/Import/NoAccounts.tsx b/src/library/Import/NoAccounts.tsx index 315cf368a3..c93a33e54f 100644 --- a/src/library/Import/NoAccounts.tsx +++ b/src/library/Import/NoAccounts.tsx @@ -3,7 +3,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { useTranslation } from 'react-i18next'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { NoAccountsWrapper } from './Wrappers'; import type { FunctionComponent, ReactNode, SVGProps } from 'react'; import { ButtonSecondary } from 'kits/Buttons/ButtonSecondary'; diff --git a/src/library/Import/Remove.tsx b/src/library/Import/Remove.tsx index 32b8b19205..f1e2acd484 100644 --- a/src/library/Import/Remove.tsx +++ b/src/library/Import/Remove.tsx @@ -2,14 +2,14 @@ // SPDX-License-Identifier: GPL-3.0-only import { registerSaEvent } from 'Utils'; -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { useTranslation } from 'react-i18next'; import { usePrompt } from 'contexts/Prompt'; import { ConfirmWrapper } from 'library/Import/Wrappers'; import { useOtherAccounts } from 'contexts/Connect/OtherAccounts'; import { useNetwork } from 'contexts/Network'; import type { RemoveProps } from './types'; -import { ellipsisFn } from '@polkadot-cloud/utils'; +import { ellipsisFn } from '@w3ux/utils'; import { NotificationsController } from 'static/NotificationsController'; import { ButtonMonoInvert } from 'kits/Buttons/ButtonMonoInvert'; import { ButtonMono } from 'kits/Buttons/ButtonMono'; diff --git a/src/library/Import/types.ts b/src/library/Import/types.ts index e63d5101e1..616caad403 100644 --- a/src/library/Import/types.ts +++ b/src/library/Import/types.ts @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { ImportedAccount } from '@polkadot-cloud/react/types'; +import type { ImportedAccount } from '@w3ux/react-connect-kit/types'; import type { FunctionComponent, SVGProps } from 'react'; import type { AnyFunction } from 'types'; diff --git a/src/library/List/types.ts b/src/library/List/types.ts index 508a9504a0..a4823568e7 100644 --- a/src/library/List/types.ts +++ b/src/library/List/types.ts @@ -1,10 +1,9 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { AnyJson } from '@polkadot-cloud/react/types'; import type { ListFormat } from 'library/PoolList/types'; import type { FormEvent, ReactNode } from 'react'; -import type { DisplayFor } from 'types'; +import type { AnyJson, DisplayFor } from 'types'; export interface PaginationWrapperProps { $next: boolean; diff --git a/src/library/ListItem/Labels/EraStatus.tsx b/src/library/ListItem/Labels/EraStatus.tsx index b17afba48a..b3256cf61d 100644 --- a/src/library/ListItem/Labels/EraStatus.tsx +++ b/src/library/ListItem/Labels/EraStatus.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { capitalizeFirstLetter, planckToUnit } from '@polkadot-cloud/utils'; +import { capitalizeFirstLetter, planckToUnit } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; import { ValidatorStatusWrapper } from 'library/ListItem/Wrappers'; import { useNetwork } from 'contexts/Network'; diff --git a/src/library/ListItem/Labels/Identity.tsx b/src/library/ListItem/Labels/Identity.tsx index 1710a359c9..18d8bea768 100644 --- a/src/library/ListItem/Labels/Identity.tsx +++ b/src/library/ListItem/Labels/Identity.tsx @@ -1,11 +1,11 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ellipsisFn } from '@polkadot-cloud/utils'; +import { ellipsisFn } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { useEffect, useState } from 'react'; import { useValidators } from 'contexts/Validators/ValidatorEntries'; -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { IdentityWrapper } from 'library/ListItem/Wrappers'; import { getIdentityDisplay } from '../../ValidatorList/ValidatorItem/Utils'; import type { IdentityProps } from '../types'; diff --git a/src/library/ListItem/Labels/JoinPool.tsx b/src/library/ListItem/Labels/JoinPool.tsx index c1bb957f68..0bb9e9e6ff 100644 --- a/src/library/ListItem/Labels/JoinPool.tsx +++ b/src/library/ListItem/Labels/JoinPool.tsx @@ -4,7 +4,7 @@ import { faCaretRight } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useTranslation } from 'react-i18next'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; export const JoinPool = ({ id, diff --git a/src/library/ListItem/Labels/Metrics.tsx b/src/library/ListItem/Labels/Metrics.tsx index 14cbdf6fab..38e1d88c68 100644 --- a/src/library/ListItem/Labels/Metrics.tsx +++ b/src/library/ListItem/Labels/Metrics.tsx @@ -3,7 +3,7 @@ import { faChartLine } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import type { MetricsProps } from '../types'; export const Metrics = ({ display, address }: MetricsProps) => { diff --git a/src/library/ListItem/Labels/NominationStatus.tsx b/src/library/ListItem/Labels/NominationStatus.tsx index 6fd9f53dd1..90216bd346 100644 --- a/src/library/ListItem/Labels/NominationStatus.tsx +++ b/src/library/ListItem/Labels/NominationStatus.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { greaterThanZero, planckToUnit } from '@polkadot-cloud/utils'; +import { greaterThanZero, planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useTranslation } from 'react-i18next'; import { useStaking } from 'contexts/Staking'; diff --git a/src/library/ListItem/Labels/PoolBonded.tsx b/src/library/ListItem/Labels/PoolBonded.tsx index d75fae8500..71a05e59de 100644 --- a/src/library/ListItem/Labels/PoolBonded.tsx +++ b/src/library/ListItem/Labels/PoolBonded.tsx @@ -1,11 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { - capitalizeFirstLetter, - planckToUnit, - rmCommas, -} from '@polkadot-cloud/utils'; +import { capitalizeFirstLetter, planckToUnit, rmCommas } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/src/library/ListItem/Labels/PoolIdentity.tsx b/src/library/ListItem/Labels/PoolIdentity.tsx index 304a677648..d89d7e0196 100644 --- a/src/library/ListItem/Labels/PoolIdentity.tsx +++ b/src/library/ListItem/Labels/PoolIdentity.tsx @@ -1,9 +1,9 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ellipsisFn, determinePoolDisplay } from '@polkadot-cloud/utils'; +import { ellipsisFn, determinePoolDisplay } from '@w3ux/utils'; import { useBondedPools } from 'contexts/Pools/BondedPools'; -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { IdentityWrapper } from 'library/ListItem/Wrappers'; import type { PoolIdentityProps } from '../types'; diff --git a/src/library/ListItem/Labels/PoolMemberBonded.tsx b/src/library/ListItem/Labels/PoolMemberBonded.tsx index c00057fec0..6bfee2f462 100644 --- a/src/library/ListItem/Labels/PoolMemberBonded.tsx +++ b/src/library/ListItem/Labels/PoolMemberBonded.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { greaterThanZero, planckToUnit, rmCommas } from '@polkadot-cloud/utils'; +import { greaterThanZero, planckToUnit, rmCommas } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useTranslation } from 'react-i18next'; import { ValidatorStatusWrapper } from 'library/ListItem/Wrappers'; diff --git a/src/library/Modal/Close.tsx b/src/library/Modal/Close.tsx index b07d389736..af6fa9a2fc 100644 --- a/src/library/Modal/Close.tsx +++ b/src/library/Modal/Close.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import CrossSVG from 'img/cross.svg?react'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { CloseWrapper } from './Wrappers'; export const Close = () => { diff --git a/src/library/Modal/Title.tsx b/src/library/Modal/Title.tsx index 29c2e3e8ee..f7bc1c8cf2 100644 --- a/src/library/Modal/Title.tsx +++ b/src/library/Modal/Title.tsx @@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import type { FunctionComponent, SVGProps } from 'react'; import { useHelp } from 'contexts/Help'; import CrossSVG from 'img/cross.svg?react'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { TitleWrapper } from './Wrappers'; import type { AnyJson } from 'types'; import type { CSSProperties } from 'styled-components'; diff --git a/src/library/NetworkBar/Disclaimer.tsx b/src/library/NetworkBar/Disclaimer.tsx index e54cfdd8b1..da1d1456a2 100644 --- a/src/library/NetworkBar/Disclaimer.tsx +++ b/src/library/NetworkBar/Disclaimer.tsx @@ -1,6 +1,6 @@ // Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors -import { ModalPadding } from '@polkadot-cloud/react'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; import { Title } from 'library/Prompt/Title'; export const Disclaimer = () => ( diff --git a/src/library/NetworkBar/index.tsx b/src/library/NetworkBar/index.tsx index 5110f94ed0..ed77fce707 100644 --- a/src/library/NetworkBar/index.tsx +++ b/src/library/NetworkBar/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { capitalizeFirstLetter } from '@polkadot-cloud/utils'; +import { capitalizeFirstLetter } from '@w3ux/utils'; import { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; @@ -14,10 +14,11 @@ import { Status } from './Status'; import { Summary, Wrapper } from './Wrappers'; import { isCustomEvent } from 'static/utils'; import { useEventListener } from 'usehooks-ts'; -import { Odometer, useEffectIgnoreInitial } from '@polkadot-cloud/react'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import BigNumber from 'bignumber.js'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faHive } from '@fortawesome/free-brands-svg-icons'; +import { Odometer } from '@w3ux/react-odometer'; export const NetworkBar = () => { const { t } = useTranslation('library'); diff --git a/src/library/Nominations/index.tsx b/src/library/Nominations/index.tsx index 459574afd5..98d0398fb2 100644 --- a/src/library/Nominations/index.tsx +++ b/src/library/Nominations/index.tsx @@ -11,7 +11,7 @@ import { CardHeaderWrapper } from 'library/Card/Wrappers'; import { useUnstaking } from 'hooks/useUnstaking'; import { ValidatorList } from 'library/ValidatorList'; import type { MaybeAddress } from 'types'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { ListStatusHeader } from 'library/List'; diff --git a/src/library/Nominations/types.ts b/src/library/Nominations/types.ts index 59daad602b..9b20d140ba 100644 --- a/src/library/Nominations/types.ts +++ b/src/library/Nominations/types.ts @@ -1,9 +1,9 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { AnyJson } from '@polkadot-cloud/react/types'; import type { ListFormat } from 'library/PoolList/types'; import type { Validator } from 'contexts/Validators/types'; +import type { AnyJson } from 'types'; export interface ManageNominationsInterface { addToSelected: (item: AnyJson) => void; diff --git a/src/library/Notifications/index.tsx b/src/library/Notifications/index.tsx index e3477b46e6..227606c161 100644 --- a/src/library/Notifications/index.tsx +++ b/src/library/Notifications/index.tsx @@ -9,7 +9,7 @@ import type { } from 'static/NotificationsController/types'; import { Wrapper } from './Wrapper'; import { useRef, useState } from 'react'; -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import { isCustomEvent } from 'static/utils'; import { useEventListener } from 'usehooks-ts'; diff --git a/src/library/PayeeInput/index.tsx b/src/library/PayeeInput/index.tsx index 7c1d09a5a2..f0df4a1ba2 100644 --- a/src/library/PayeeInput/index.tsx +++ b/src/library/PayeeInput/index.tsx @@ -3,12 +3,12 @@ import { faCheck } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { isValidAddress, remToUnit } from '@polkadot-cloud/utils'; +import { isValidAddress, remToUnit } from '@w3ux/utils'; import type { ChangeEvent } from 'react'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useBonded } from 'contexts/Bonded'; -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { useNetwork } from 'contexts/Network'; diff --git a/src/library/PluginLabel/index.tsx b/src/library/PluginLabel/index.tsx index b50e9657ce..bbbf293bbf 100644 --- a/src/library/PluginLabel/index.tsx +++ b/src/library/PluginLabel/index.tsx @@ -4,7 +4,7 @@ import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { usePlugins } from 'contexts/Plugins'; -import { capitalizeFirstLetter } from '@polkadot-cloud/utils'; +import { capitalizeFirstLetter } from '@w3ux/utils'; import { Wrapper } from './Wrapper'; import type { PluginLabelProps } from './types'; diff --git a/src/library/Pool/Rewards.tsx b/src/library/Pool/Rewards.tsx index de2db08c61..f461ac0b71 100644 --- a/src/library/Pool/Rewards.tsx +++ b/src/library/Pool/Rewards.tsx @@ -14,10 +14,10 @@ import { normaliseEraPoints, prefillEraPoints, } from 'library/ValidatorList/ValidatorItem/Utils'; -import type { AnyJson } from '@polkadot-cloud/react/types'; import { usePoolPerformance } from 'contexts/Pools/PoolPerformance'; import { useTranslation } from 'react-i18next'; import type { RewardProps, RewardsGraphProps } from './types'; +import type { AnyJson } from 'types'; export const Rewards = ({ address, displayFor = 'default' }: RewardProps) => { const { t } = useTranslation('library'); diff --git a/src/library/Pool/index.tsx b/src/library/Pool/index.tsx index 4bb4dfdc84..c2080939d3 100644 --- a/src/library/Pool/index.tsx +++ b/src/library/Pool/index.tsx @@ -17,7 +17,7 @@ import { PoolCommission } from 'library/ListItem/Labels/PoolCommission'; import { PoolIdentity } from 'library/ListItem/Labels/PoolIdentity'; import { Labels, Separator, Wrapper } from 'library/ListItem/Wrappers'; import { usePoolsTabs } from 'pages/Pools/Home/context'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { JoinPool } from '../ListItem/Labels/JoinPool'; diff --git a/src/library/PoolList/Default.tsx b/src/library/PoolList/Default.tsx index 5fe575e9aa..19d01cc3e6 100644 --- a/src/library/PoolList/Default.tsx +++ b/src/library/PoolList/Default.tsx @@ -3,7 +3,7 @@ import { faBars, faGripVertical } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { isNotZero } from '@polkadot-cloud/utils'; +import { isNotZero } from '@w3ux/utils'; import { motion } from 'framer-motion'; import type { FormEvent } from 'react'; import { useEffect, useRef, useState } from 'react'; diff --git a/src/library/SideMenu/Main.tsx b/src/library/SideMenu/Main.tsx index 49e79a048b..46d7471cd6 100644 --- a/src/library/SideMenu/Main.tsx +++ b/src/library/SideMenu/Main.tsx @@ -12,14 +12,13 @@ import type { SetupContextInterface } from 'contexts/Setup/types'; import { useStaking } from 'contexts/Staking'; import { useUi } from 'contexts/UI'; import type { UIContextInterface } from 'contexts/UI/types'; -import type { PageCategory, PageItem, PagesConfigItems } from 'types'; +import type { AnyJson, PageCategory, PageItem, PagesConfigItems } from 'types'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { Heading } from './Heading/Heading'; import { Primary } from './Primary'; import { LogoWrapper } from './Wrapper'; -import type { AnyJson } from '@polkadot-cloud/react/types'; import { useBalances } from 'contexts/Balances'; import { useSyncing } from 'hooks/useSyncing'; diff --git a/src/library/SideMenu/index.tsx b/src/library/SideMenu/index.tsx index a35bfa5795..572f77da27 100644 --- a/src/library/SideMenu/index.tsx +++ b/src/library/SideMenu/index.tsx @@ -3,7 +3,7 @@ import { faCompressAlt, faExpandAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { capitalizeFirstLetter } from '@polkadot-cloud/utils'; +import { capitalizeFirstLetter } from '@w3ux/utils'; import throttle from 'lodash.throttle'; import { useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; @@ -20,7 +20,7 @@ import LanguageSVG from 'img/language.svg?react'; import LogoGithubSVG from 'img/logo-github.svg?react'; import MoonOutlineSVG from 'img/moon-outline.svg?react'; import SunnyOutlineSVG from 'img/sunny-outline.svg?react'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { Heading } from './Heading/Heading'; import { Main } from './Main'; diff --git a/src/library/Stat/index.tsx b/src/library/Stat/index.tsx index a8e8a6b58c..67ed265f2a 100644 --- a/src/library/Stat/index.tsx +++ b/src/library/Stat/index.tsx @@ -3,8 +3,8 @@ import { faCopy } from '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Polkicon, Odometer } from '@polkadot-cloud/react'; -import { applyWidthAsPadding, minDecimalPlaces } from '@polkadot-cloud/utils'; +import { Polkicon } from '@w3ux/react-polkicon'; +import { applyWidthAsPadding, minDecimalPlaces } from '@w3ux/utils'; import { Fragment, useEffect, useLayoutEffect, useRef } from 'react'; import { useHelp } from 'contexts/Help'; import { useNetwork } from 'contexts/Network'; @@ -15,6 +15,7 @@ import type { AnyJson } from 'types'; import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary'; import { ButtonSecondary } from 'kits/Buttons/ButtonSecondary'; import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; +import { Odometer } from '@w3ux/react-odometer'; export const Stat = ({ label, diff --git a/src/library/StatBoxList/Item.tsx b/src/library/StatBoxList/Item.tsx index 5d12192cac..9a3cdf0962 100644 --- a/src/library/StatBoxList/Item.tsx +++ b/src/library/StatBoxList/Item.tsx @@ -6,7 +6,7 @@ import { Number } from './Number'; import { Pie } from './Pie'; import { Text } from './Text'; import { StatBoxWrapper } from './Wrapper'; -import type { AnyJson } from '@polkadot-cloud/react/types'; +import type { AnyJson } from 'types'; export const StatBox = ({ children }: { children: ReactNode }) => ( { const help = helpKey !== undefined; diff --git a/src/library/SubmitTx/ManualSign/Ledger/Submit.tsx b/src/library/SubmitTx/ManualSign/Ledger/Submit.tsx index 6eae1f2292..04a9fb1500 100644 --- a/src/library/SubmitTx/ManualSign/Ledger/Submit.tsx +++ b/src/library/SubmitTx/ManualSign/Ledger/Submit.tsx @@ -3,7 +3,7 @@ import { faUsb } from '@fortawesome/free-brands-svg-icons'; import { faSquarePen } from '@fortawesome/free-solid-svg-icons'; -import type { LedgerAccount } from '@polkadot-cloud/react/types'; +import type { LedgerAccount } from '@w3ux/react-connect-kit/types'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { useLedgerHardware } from 'contexts/Hardware/Ledger/LedgerHardware'; diff --git a/src/library/SubmitTx/ManualSign/Ledger/index.tsx b/src/library/SubmitTx/ManualSign/Ledger/index.tsx index 6cc612010b..3011f06e19 100644 --- a/src/library/SubmitTx/ManualSign/Ledger/index.tsx +++ b/src/library/SubmitTx/ManualSign/Ledger/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { useEffectIgnoreInitial } from '@polkadot-cloud/react'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import type { ReactNode } from 'react'; import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; @@ -10,7 +10,7 @@ import type { LedgerResponse } from 'contexts/Hardware/Ledger/types'; import { useHelp } from 'contexts/Help'; import { useTxMeta } from 'contexts/TxMeta'; import { EstimatedTxFee } from 'library/EstimatedTxFee'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'; @@ -137,21 +137,12 @@ export const Ledger = ({
{valid ? (

- {!valid ? ( - '...' - ) : ( - <> - - {feedback?.message - ? feedback.message - : !integrityChecked - ? t('ledgerConnectAndConfirm') - : `${t('deviceVerified')}. ${t('submitTransaction')}`} - - )} + + {feedback?.message + ? feedback.message + : !integrityChecked + ? t('ledgerConnectAndConfirm') + : `${t('deviceVerified')}. ${t('submitTransaction')}`} {feedback?.helpKey && ( { + const { t } = useTranslation('modals'); + const { mode } = useTheme(); + const { consts } = useApi(); + const { openModal } = useOverlay().modal; + const { colors } = useNetwork().networkData; + const { syncing } = useSyncing(['balances']); + const { activeAccount } = useActiveAccounts(); + const { erasToSeconds } = useErasToTimeLeft(); + const { getTransferOptions } = useTransferOptions(); + + const { bondDuration } = consts; + const allTransferOptions = getTransferOptions(activeAccount); + + const totalUnlockChunks = + bondFor === 'nominator' + ? allTransferOptions.nominate.totalUnlockChunks + : allTransferOptions.pool.totalUnlockChunks; + + const bondDurationFormatted = timeleftAsString( + t, + getUnixTime(new Date()) + 1, + erasToSeconds(bondDuration), + true + ); + + // Check whether there are active unlock chunks. + const displayPrompt = totalUnlockChunks > 0; + + return ( + displayPrompt && ( + + +

+

{t('unlocksInProgress')}

+

{t('youHaveActiveUnlocks', { bondDurationFormatted })}

+ + + openModal({ + key: 'UnlockChunks', + options: { + bondFor, + disableWindowResize: true, + disableScroll: true, + // NOTE: This will always be false as a different prompt is displayed when a + // pool is being destroyed. + poolClosure: false, + }, + size: 'sm', + }) + } + /> + +
+ + + ) + ); +}; diff --git a/src/locale/cn/modals.json b/src/locale/cn/modals.json index b701b0e709..072a5b891c 100644 --- a/src/locale/cn/modals.json +++ b/src/locale/cn/modals.json @@ -136,6 +136,7 @@ "manageCommission": "管理佣金值", "manageNominations": "提名管理", "managePool": "管理池", + "manageUnlocks": "管理解锁", "maxCommission": "最高佣金值", "maximumCommissionUpdated": "最高佣金值最新值", "methodNotSupported": "调用方法不受支持,无法签署交易", @@ -244,6 +245,7 @@ "total": "总共", "transactionRejectedPending": "交易被拒后等待处理中", "tryAgain": "请重试一次", + "txVersionNotSupported": "不支持交易版本。 请更新 Ledger 应用程序.", "unbond": "解除质押", "unbondAll": "解除所有质押", "unbondErrorBelowMinimum": "无法取消质押.您的债券资金低于{{bond}} {{unit}}", @@ -266,6 +268,7 @@ "unlocks": "解锁", "unlocksAfter": "解锁于", "unlocksInEra": "解锁于Era", + "unlocksInProgress": "解锁中", "unstake": "解除抵押", "unstakeStopNominating": "停止提名 {{count}} 个验证人", "unstakeUnbond": "解除质押 {{bond}} {{unit}}", @@ -288,6 +291,7 @@ "withdrawRemoveNote": "取款后将从提名池中删除此成员", "withdrawSubtitle": "资金将在取款后立即转作可用余额", "withdrawUnlocked": "取出己解锁", - "years": "年" + "years": "年", + "youHaveActiveUnlocks": "您有资金在解锁中, {{bondDurationFormatted}} 的解锁期过后，可取出资金" } } diff --git a/src/locale/en/modals.json b/src/locale/en/modals.json index 301a7abb0d..60dcdb0bf8 100644 --- a/src/locale/en/modals.json +++ b/src/locale/en/modals.json @@ -146,6 +146,7 @@ "manageCommission": "Manage Commission", "manageNominations": "Manage Nominations", "managePool": "Manage Pool", + "manageUnlocks": "Manage Unlocks", "maxCommission": "Max Commission", "maximumCommissionUpdated": "Maximum Commission Updated", "methodNotSupported": "Call method not supported, cannot sign.", @@ -257,6 +258,7 @@ "total": "Total", "transactionRejectedPending": "Transaction was rejected and is still pending.", "tryAgain": "Try Again", + "txVersionNotSupported": "Transaction version not supported. Please update Ledger app.", "unbond": "Unbond", "unbondAll": "Unbond All", "unbondErrorBelowMinimum": "Unable to unbond. Your bonded funds are below the minumum of {{bond}} {{unit}}.", @@ -279,6 +281,7 @@ "unlocks": "Unlocks", "unlocksAfter": "Unlocks after", "unlocksInEra": "Unlocks in Era", + "unlocksInProgress": "Unlocks in Progress", "unstake": "Unstake", "unstakeStopNominating_one": "Stop Nominating {{count}} Validator", "unstakeStopNominating_other": "Stop Nominating {{count}} Validators", @@ -303,6 +306,7 @@ "withdrawRemoveNote": "Withdrawing will remove this member from the pool.", "withdrawSubtitle": "Funds will be immediately available as free balance after withdrawing.", "withdrawUnlocked": "Withdraw Unlocked", - "years": "Years" + "years": "Years", + "youHaveActiveUnlocks": "You have active unlocks. Unlocks can be withdrawn once the unlock period of {{bondDurationFormatted}} has passed." } } diff --git a/src/locale/utils.ts b/src/locale/utils.ts index bb3953e52a..fdd502a859 100644 --- a/src/locale/utils.ts +++ b/src/locale/utils.ts @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { registerSaEvent } from 'Utils'; -import { extractUrlValue, varToUrlHash } from '@polkadot-cloud/utils'; +import { extractUrlValue, varToUrlHash } from '@w3ux/utils'; import { DefaultLocale, availableLanguages, diff --git a/src/main.tsx b/src/main.tsx index c51c78f0cb..b3641f5a05 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -5,9 +5,9 @@ import { createRoot } from 'react-dom/client'; import { App } from 'App'; // Network styles. -import '@polkadot-cloud/core/accent/polkadot-relay.css'; -import '@polkadot-cloud/core/accent/kusama-relay.css'; -import '@polkadot-cloud/core/accent/westend-relay.css'; +import 'theme/accents/polkadot-relay.css'; +import 'theme/accents/kusama-relay.css'; +import 'theme/accents/westend-relay.css'; // App styles. import 'theme/fonts.scss'; @@ -17,6 +17,7 @@ import 'theme/index.scss'; // Library styles. import 'kits/Buttons/index.scss'; import 'kits/Structure/index.scss'; +import 'kits/Overlay/index.scss'; const rootElement = document.getElementById('root'); if (!rootElement) { diff --git a/src/modals/AccountPoolRoles/index.tsx b/src/modals/AccountPoolRoles/index.tsx index 41908f2315..a9a65f77f1 100644 --- a/src/modals/AccountPoolRoles/index.tsx +++ b/src/modals/AccountPoolRoles/index.tsx @@ -2,17 +2,18 @@ // SPDX-License-Identifier: GPL-3.0-only import { faBars } from '@fortawesome/free-solid-svg-icons'; -import { ModalPadding, Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { useTranslation } from 'react-i18next'; import { useActivePool } from 'contexts/Pools/ActivePool'; import { Title } from 'library/Modal/Title'; import { useStatusButtons } from 'pages/Pools/Home/Status/useStatusButtons'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { ContentWrapper } from './Wrappers'; import { useBalances } from 'contexts/Balances'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import type { ActivePool } from 'contexts/Pools/ActivePool/types'; import { ButtonOption } from 'kits/Buttons/ButtonOption'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const AccountPoolRoles = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/Accounts/Account.tsx b/src/modals/Accounts/Account.tsx index a903445afa..6deb6853e0 100644 --- a/src/modals/Accounts/Account.tsx +++ b/src/modals/Accounts/Account.tsx @@ -3,13 +3,13 @@ import { faGlasses } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ellipsisFn, planckToUnit } from '@polkadot-cloud/utils'; +import { ellipsisFn, planckToUnit } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; -import { ExtensionIcons } from '@polkadot-cloud/assets/extensions'; -import LedgerSVG from '@polkadot-cloud/assets/extensions/svg/ledgersquare.svg?react'; -import PolkadotVaultSVG from '@polkadot-cloud/assets/extensions/svg/polkadotvault.svg?react'; -import { Polkicon } from '@polkadot-cloud/react'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { ExtensionIcons } from '@w3ux/extension-assets/util'; +import LedgerSVG from '@w3ux/extension-assets/LedgerSquare.svg?react'; +import PolkadotVaultSVG from '@w3ux/extension-assets/PolkadotVault.svg?react'; +import { Polkicon } from '@w3ux/react-polkicon'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; diff --git a/src/modals/Accounts/index.tsx b/src/modals/Accounts/index.tsx index 02233f6a2b..5a7e1a592d 100644 --- a/src/modals/Accounts/index.tsx +++ b/src/modals/Accounts/index.tsx @@ -2,19 +2,8 @@ // SPDX-License-Identifier: GPL-3.0-only import { faChevronLeft, faLinkSlash } from '@fortawesome/free-solid-svg-icons'; -import { - ActionItem, - ModalCustomHeader, - ModalPadding, -} from '@polkadot-cloud/react'; -import { Fragment, useEffect, useState } from 'react'; +import { Fragment, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { useBonded } from 'contexts/Bonded'; -import { - useExtensions, - useEffectIgnoreInitial, - useOverlay, -} from '@polkadot-cloud/react/hooks'; import { useProxies } from 'contexts/Proxies'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; @@ -27,7 +16,6 @@ import type { AccountNominatingAndInPool, AccountNotStaking, } from './types'; -import type { ImportedAccount } from '@polkadot-cloud/react/types'; import { useActiveBalances } from 'hooks/useActiveBalances'; import type { MaybeAddress } from 'types'; import { useTransferOptions } from 'contexts/TransferOptions'; @@ -35,6 +23,10 @@ import BigNumber from 'bignumber.js'; import { useApi } from 'contexts/Api'; import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; import { ButtonText } from 'kits/Buttons/ButtonText'; +import { useOverlay } from 'kits/Overlay/Provider'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalCustomHeader } from 'kits/Overlay/structure/ModalCustomHeader'; +import { ActionItem } from 'library/ActionItem'; export const Accounts = () => { const { t } = useTranslation('modals'); @@ -42,8 +34,6 @@ export const Accounts = () => { consts: { existentialDeposit }, } = useApi(); const { getDelegates } = useProxies(); - const { bondedAccounts } = useBonded(); - const { extensionsStatus } = useExtensions(); const { replaceModal, status: modalStatus, @@ -54,14 +44,10 @@ export const Accounts = () => { const { activeAccount, setActiveAccount, setActiveProxy } = useActiveAccounts(); - // Store local copy of accounts. - const [localAccounts, setLocalAccounts] = - useState(accounts); - // Listen to balance updates for entire accounts list. const { getLocks, getBalance, getEdReserved, getPoolMembership } = useActiveBalances({ - accounts: localAccounts.map(({ address }) => address), + accounts: accounts.map(({ address }) => address), }); // Calculate transferrable balance of an address. @@ -81,7 +67,7 @@ export const Accounts = () => { const stashes: string[] = []; // accumulate imported stash accounts - for (const { address } of localAccounts) { + for (const { address } of accounts) { const { locks } = getLocks(address); // account is a stash if they have an active `staking` lock @@ -96,7 +82,7 @@ export const Accounts = () => { const nominatingAndPool: AccountNominatingAndInPool[] = []; const notStaking: AccountNotStaking[] = []; - for (const { address } of localAccounts) { + for (const { address } of accounts) { let isNominating = false; let isInPool = false; const isStash = stashes[stashes.indexOf(address)] ?? null; @@ -165,15 +151,19 @@ export const Accounts = () => { } } - // Refresh local accounts state when context accounts change. - useEffect(() => setLocalAccounts(accounts), [accounts]); - // Resize if modal open upon state changes. - useEffectIgnoreInitial(() => { + useEffect(() => { if (modalStatus === 'open') { setModalResize(); } - }, [activeAccount, accounts, bondedAccounts, extensionsStatus]); + }, [ + accounts, + activeAccount, + JSON.stringify(nominating), + JSON.stringify(inPool), + JSON.stringify(nominatingAndPool), + JSON.stringify(notStaking), + ]); return ( diff --git a/src/modals/BalanceTest/index.tsx b/src/modals/BalanceTest/index.tsx index 6e2988b622..15928587ec 100644 --- a/src/modals/BalanceTest/index.tsx +++ b/src/modals/BalanceTest/index.tsx @@ -1,10 +1,9 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding } from '@polkadot-cloud/react'; -import { unitToPlanck } from '@polkadot-cloud/utils'; +import { unitToPlanck } from '@w3ux/utils'; import { useApi } from 'contexts/Api'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useTxMeta } from 'contexts/TxMeta'; import { useBatchCall } from 'hooks/useBatchCall'; import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; @@ -13,6 +12,7 @@ import { SubmitTx } from 'library/SubmitTx'; import { useEffect } from 'react'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const BalanceTest = () => { const { api } = useApi(); diff --git a/src/modals/Bio/index.tsx b/src/modals/Bio/index.tsx index 61b7ab6c20..4332ae4a98 100644 --- a/src/modals/Bio/index.tsx +++ b/src/modals/Bio/index.tsx @@ -1,10 +1,10 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding } from '@polkadot-cloud/react'; import { Title } from 'library/Modal/Title'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { Wrapper } from './Wrapper'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const Bio = () => { const { name, bio } = useOverlay().modal.config.options; diff --git a/src/modals/Bond/index.tsx b/src/modals/Bond/index.tsx index 29e16a99ca..c4acac8ab0 100644 --- a/src/modals/Bond/index.tsx +++ b/src/modals/Bond/index.tsx @@ -1,8 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; -import { planckToUnit, unitToPlanck } from '@polkadot-cloud/utils'; +import { planckToUnit, unitToPlanck } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -17,9 +16,11 @@ import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { Close } from 'library/Modal/Close'; import { SubmitTx } from 'library/SubmitTx'; import { useTxMeta } from 'contexts/TxMeta'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; export const Bond = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/ChangePoolRoles/RoleChange.tsx b/src/modals/ChangePoolRoles/RoleChange.tsx index f015fef970..2a8a76086a 100644 --- a/src/modals/ChangePoolRoles/RoleChange.tsx +++ b/src/modals/ChangePoolRoles/RoleChange.tsx @@ -3,8 +3,8 @@ import { faAnglesRight } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ellipsisFn, remToUnit } from '@polkadot-cloud/utils'; -import { Polkicon } from '@polkadot-cloud/react'; +import { ellipsisFn, remToUnit } from '@w3ux/utils'; +import { Polkicon } from '@w3ux/react-polkicon'; import { RoleChangeWrapper } from './Wrapper'; import type { RoleChangeProps } from './types'; diff --git a/src/modals/ChangePoolRoles/index.tsx b/src/modals/ChangePoolRoles/index.tsx index ca4006c2ed..148966f58f 100644 --- a/src/modals/ChangePoolRoles/index.tsx +++ b/src/modals/ChangePoolRoles/index.tsx @@ -1,7 +1,6 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding } from '@polkadot-cloud/react'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; import { useBondedPools } from 'contexts/Pools/BondedPools'; @@ -10,10 +9,11 @@ import { Close } from 'library/Modal/Close'; import { SubmitTx } from 'library/SubmitTx'; import { useTxMeta } from 'contexts/TxMeta'; import { useEffect } from 'react'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { RoleChange } from './RoleChange'; import { Wrapper } from './Wrapper'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const ChangePoolRoles = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/ChooseLanguage/index.tsx b/src/modals/ChooseLanguage/index.tsx index 7ddd301f01..807acd9006 100644 --- a/src/modals/ChooseLanguage/index.tsx +++ b/src/modals/ChooseLanguage/index.tsx @@ -1,14 +1,14 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding } from '@polkadot-cloud/react'; import { useTranslation } from 'react-i18next'; import LanguageSVG from 'img/language.svg?react'; import { Title } from 'library/Modal/Title'; import { availableLanguages } from 'locale'; import { changeLanguage } from 'locale/utils'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { ContentWrapper, LocaleButton } from './Wrapper'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const ChooseLanguage = () => { const { i18n, t } = useTranslation('modals'); diff --git a/src/modals/ClaimPayouts/Forms.tsx b/src/modals/ClaimPayouts/Forms.tsx index fed6b8da9e..fbf09d6b55 100644 --- a/src/modals/ClaimPayouts/Forms.tsx +++ b/src/modals/ClaimPayouts/Forms.tsx @@ -2,8 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; -import { ActionItem, ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { ForwardedRef } from 'react'; import { forwardRef, useEffect, useState } from 'react'; @@ -13,7 +12,7 @@ import { Warning } from 'library/Form/Warning'; import { useSignerWarnings } from 'hooks/useSignerWarnings'; import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { SubmitTx } from 'library/SubmitTx'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useBatchCall } from 'hooks/useBatchCall'; import type { AnyApi } from 'types'; import { usePayouts } from 'contexts/Payouts'; @@ -23,6 +22,9 @@ import type { FormProps, ActivePayout } from './types'; import { ContentWrapper } from './Wrappers'; import { SubscanController } from 'static/SubscanController'; import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ActionItem } from 'library/ActionItem'; export const Forms = forwardRef( ( diff --git a/src/modals/ClaimPayouts/Item.tsx b/src/modals/ClaimPayouts/Item.tsx index ac6660cbdb..5316f1d48e 100644 --- a/src/modals/ClaimPayouts/Item.tsx +++ b/src/modals/ClaimPayouts/Item.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { useTranslation } from 'react-i18next'; -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import { useNetwork } from 'contexts/Network'; import { ItemWrapper } from './Wrappers'; import type { ItemProps } from './types'; diff --git a/src/modals/ClaimPayouts/Overview.tsx b/src/modals/ClaimPayouts/Overview.tsx index 57c27bea1e..8be990b6f7 100644 --- a/src/modals/ClaimPayouts/Overview.tsx +++ b/src/modals/ClaimPayouts/Overview.tsx @@ -1,7 +1,6 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalNotes, ModalPadding } from '@polkadot-cloud/react'; import type { Ref } from 'react'; import { Fragment, forwardRef } from 'react'; import { usePayouts } from 'contexts/Payouts'; @@ -10,6 +9,8 @@ import { Item } from './Item'; import { ContentWrapper } from './Wrappers'; import type { OverviewProps } from './types'; import { getTotalPayout } from './Utils'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'; export const Overview = forwardRef( ({ setSection, setPayouts }: OverviewProps, ref: Ref) => { diff --git a/src/modals/ClaimPayouts/index.tsx b/src/modals/ClaimPayouts/index.tsx index ef31de0f89..d44212e8e0 100644 --- a/src/modals/ClaimPayouts/index.tsx +++ b/src/modals/ClaimPayouts/index.tsx @@ -1,21 +1,19 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { - ModalFixedTitle, - ModalMotionTwoSection, - ModalSection, -} from '@polkadot-cloud/react'; -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import { useEffect, useRef, useState } from 'react'; import { Title } from 'library/Modal/Title'; import { useTxMeta } from 'contexts/TxMeta'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { usePayouts } from 'contexts/Payouts'; import { useTranslation } from 'react-i18next'; import { Forms } from './Forms'; import { Overview } from './Overview'; import type { ActivePayout } from './types'; +import { ModalFixedTitle } from 'kits/Overlay/structure/ModalFixedTitle'; +import { ModalMotionTwoSection } from 'kits/Overlay/structure/ModalMotionTwoSection'; +import { ModalSection } from 'kits/Overlay/structure/ModalSection'; export const ClaimPayouts = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/ClaimReward/index.tsx b/src/modals/ClaimReward/index.tsx index adab628865..6f0c90790e 100644 --- a/src/modals/ClaimReward/index.tsx +++ b/src/modals/ClaimReward/index.tsx @@ -1,8 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ActionItem, ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; -import { greaterThanZero, planckToUnit } from '@polkadot-cloud/utils'; +import { greaterThanZero, planckToUnit } from '@w3ux/utils'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; @@ -13,9 +12,12 @@ import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { Close } from 'library/Modal/Close'; import { SubmitTx } from 'library/SubmitTx'; import { useTxMeta } from 'contexts/TxMeta'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ActionItem } from 'library/ActionItem'; export const ClaimReward = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/Connect/Extension.tsx b/src/modals/Connect/Extension.tsx index a4f10914cd..e417c9cb61 100644 --- a/src/modals/Connect/Extension.tsx +++ b/src/modals/Connect/Extension.tsx @@ -3,17 +3,14 @@ import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ModalConnectItem } from '@polkadot-cloud/react'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { - useExtensions, - useExtensionAccounts, -} from '@polkadot-cloud/react/hooks'; -import { getExtensionIcon } from '@polkadot-cloud/assets/extensions'; +import { ExtensionIcons } from '@w3ux/extension-assets/util'; import { ExtensionInner } from './Wrappers'; import type { ExtensionProps } from './types'; import { NotificationsController } from 'static/NotificationsController'; +import { ModalConnectItem } from 'kits/Overlay/structure/ModalConnectItem'; +import { useExtensionAccounts, useExtensions } from '@w3ux/react-connect-kit'; export const Extension = ({ meta, size, flag }: ExtensionProps) => { const { t } = useTranslation('modals'); @@ -43,7 +40,12 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => { } }; - const Icon = getExtensionIcon(id); + // Get the correct icon id for the extension. + const iconId = + window?.walletExtension?.isNovaWallet && id === 'polkadot-js' + ? 'nova-wallet' + : id; + const Icon = ExtensionIcons[iconId]; // determine message to be displayed based on extension status. let statusJsx; @@ -63,8 +65,9 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => { ); } - const shortUrl = Array.isArray(website) ? website[0] : website; - const longUrl = Array.isArray(website) ? website[1] : website; + const websiteText = typeof website === 'string' ? website : website.text; + const websiteUrl = typeof website === 'string' ? website : website.url; + const disabled = extensionsStatus[id] === 'connected' || !isInstalled; return ( @@ -96,11 +99,11 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => { diff --git a/src/modals/Connect/Ledger.tsx b/src/modals/Connect/Ledger.tsx index 050df36a31..561cf3eb38 100644 --- a/src/modals/Connect/Ledger.tsx +++ b/src/modals/Connect/Ledger.tsx @@ -7,15 +7,16 @@ import { faExternalLinkAlt, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ModalConnectItem, ModalHardwareItem } from '@polkadot-cloud/react'; -import { inChrome } from '@polkadot-cloud/utils'; +import { inChrome } from '@w3ux/utils'; import { useHelp } from 'contexts/Help'; -import LedgerLogoSVG from '@polkadot-cloud/assets/extensions/svg/ledger.svg?react'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import LedgerLogoSVG from '@w3ux/extension-assets/Ledger.svg?react'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; import { ButtonText } from 'kits/Buttons/ButtonText'; +import { ModalConnectItem } from 'kits/Overlay/structure/ModalConnectItem'; +import { ModalHardwareItem } from 'kits/Overlay/structure/ModalHardwareItem'; export const Ledger = () => { const { openHelp } = useHelp(); diff --git a/src/modals/Connect/Proxies.tsx b/src/modals/Connect/Proxies.tsx index ef7656a5d2..73a0102f5c 100644 --- a/src/modals/Connect/Proxies.tsx +++ b/src/modals/Connect/Proxies.tsx @@ -7,7 +7,7 @@ import { faPlus, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; import { useHelp } from 'contexts/Help'; diff --git a/src/modals/Connect/ReadOnly.tsx b/src/modals/Connect/ReadOnly.tsx index 0c1bbf68e6..bfd7e37ebe 100644 --- a/src/modals/Connect/ReadOnly.tsx +++ b/src/modals/Connect/ReadOnly.tsx @@ -7,14 +7,14 @@ import { faPlus, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { useTranslation } from 'react-i18next'; import { useHelp } from 'contexts/Help'; import { AccountInput } from 'library/AccountInput'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { useOtherAccounts } from 'contexts/Connect/OtherAccounts'; -import type { ExternalAccount } from '@polkadot-cloud/react/types'; +import type { ExternalAccount } from '@w3ux/react-connect-kit/types'; import { useExternalAccounts } from 'contexts/Connect/ExternalAccounts'; import { ActionWithButton, diff --git a/src/modals/Connect/Utils.ts b/src/modals/Connect/Utils.ts new file mode 100644 index 0000000000..36dfa623cb --- /dev/null +++ b/src/modals/Connect/Utils.ts @@ -0,0 +1,25 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only +/* eslint-disable no-useless-escape */ + +// Checks if in mobile browser. +// +// NOTE: taken from `http://detectmobilebrowsers.com/`. +export const mobileCheck = () => { + let check = false; + ((a) => { + if ( + /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( + a + ) || + /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( + a.substring(0, 4) + ) + ) { + check = true; + } + })( + navigator.userAgent || navigator.vendor || (window.opera && 'opera m') || '' + ); + return check; +}; diff --git a/src/modals/Connect/Vault.tsx b/src/modals/Connect/Vault.tsx index 6a50491a0d..10185e0a7c 100644 --- a/src/modals/Connect/Vault.tsx +++ b/src/modals/Connect/Vault.tsx @@ -3,15 +3,16 @@ import { faExternalLinkAlt, faQrcode } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ModalConnectItem, ModalHardwareItem } from '@polkadot-cloud/react'; import type { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; import { useHelp } from 'contexts/Help'; -import PolkadotVaultSVG from '@polkadot-cloud/assets/extensions/svg/polkadotvault.svg?react'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import PolkadotVaultSVG from '@w3ux/extension-assets/PolkadotVault.svg?react'; +import { useOverlay } from 'kits/Overlay/Provider'; import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; import { ButtonText } from 'kits/Buttons/ButtonText'; +import { ModalHardwareItem } from 'kits/Overlay/structure/ModalHardwareItem'; +import { ModalConnectItem } from 'kits/Overlay/structure/ModalConnectItem'; export const Vault = (): ReactElement => { const { t } = useTranslation('modals'); diff --git a/src/modals/Connect/index.tsx b/src/modals/Connect/index.tsx index c3c16bd0d9..861d558a23 100644 --- a/src/modals/Connect/index.tsx +++ b/src/modals/Connect/index.tsx @@ -2,22 +2,9 @@ // SPDX-License-Identifier: GPL-3.0-only import { faChevronRight } from '@fortawesome/free-solid-svg-icons'; -import { - ActionItem, - ModalCustomHeader, - ModalFixedTitle, - ModalMotionThreeSection, - ModalPadding, - ModalSection, -} from '@polkadot-cloud/react'; -import { ExtensionsArray } from '@polkadot-cloud/assets/extensions'; +import extensions from '@w3ux/extension-assets'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { - useExtensions, - useEffectIgnoreInitial, - useOverlay, -} from '@polkadot-cloud/react/hooks'; import { Close } from 'library/Modal/Close'; import { SelectItems } from 'library/SelectItems'; import type { AnyFunction } from 'types'; @@ -29,19 +16,51 @@ import { Vault } from './Vault'; import { ExtensionsWrapper } from './Wrappers'; import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; import { ButtonTab } from 'kits/Buttons/ButtonTab'; +import { mobileCheck } from './Utils'; +import { useOverlay } from 'kits/Overlay/Provider'; +import { ActionItem } from 'library/ActionItem'; +import { ModalFixedTitle } from 'kits/Overlay/structure/ModalFixedTitle'; +import { ModalCustomHeader } from 'kits/Overlay/structure/ModalCustomHeader'; +import { ModalSection } from 'kits/Overlay/structure/ModalSection'; +import { ModalMotionThreeSection } from 'kits/Overlay/structure/ModalMotionThreeSection'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { useExtensions } from '@w3ux/react-connect-kit'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; export const Connect = () => { const { t } = useTranslation('modals'); const { extensionsStatus } = useExtensions(); const { replaceModal, setModalHeight, modalMaxHeight } = useOverlay().modal; + // Whether the app is running on mobile. + const isMobile = mobileCheck(); + + // Whether the app is running in Nova Wallet. const inNova = !!window?.walletExtension?.isNovaWallet || false; - // If in Nova Wallet, only display it in extension options, otherwise, remove developer tool extensions from web options. - const developerTools = ['polkadot-js']; - const web = !inNova - ? ExtensionsArray.filter((a) => !developerTools.includes(a.id)) - : ExtensionsArray.filter((a) => a.id === 'polkadot-js'); + // Whether the app is running in a SubWallet Mobile. + const inSubWallet = !!window.injectedWeb3?.['subwallet-js'] && isMobile; + + // Whether the app is running on of mobile wallets. + const inMobileWallet = inNova || inSubWallet; + + // If in SubWallet Mobile, keep `subwallet-js` only. + const extensionsAsArray = Object.entries(extensions).map(([key, value]) => ({ + id: key, + ...value, + })); + + const web = inSubWallet + ? extensionsAsArray.filter((a) => a.id === 'subwallet-js') + : // If in Nova Wallet, fetch nova wallet metadata and replace its id with `polkadot-js`. + inNova + ? extensionsAsArray + .filter((a) => a.id === 'nova-wallet') + .map((a) => ({ ...a, id: 'polkadot-js' })) + : // Otherwise, keep all extensions except `polkadot-js`. + extensionsAsArray.filter( + (a) => a.id !== 'polkadot-js' && a.category === 'web-extension' + ); const installed = web.filter((a) => Object.keys(extensionsStatus).find((key) => key === a.id) @@ -114,9 +133,9 @@ export const Connect = () => { ); - // Display hardware before extensions. - // If in Nova Wallet, display extensions before hardware. - const ConnectCombinedJSX = !inNova ? ( + // Display hardware before extensions. If in Nova Wallet or SubWallet Mobile, display extension + // before hardware. + const ConnectCombinedJSX = !inMobileWallet ? ( <> {ConnectHardwareJSX} {ConnectExtensionsJSX} @@ -190,19 +209,19 @@ export const Connect = () => {
{ConnectCombinedJSX} - {!inNova && ( + {!inMobileWallet && ( <> - {ExtensionsArray.filter((a) => a.id === 'polkadot-js').map( - (extension, i) => ( + {extensionsAsArray + .filter((a) => a.id === 'polkadot-js') + .map((extension, i) => ( - ) - )} + ))} diff --git a/src/modals/Connect/types.ts b/src/modals/Connect/types.ts index ddbc161073..935e3dc83f 100644 --- a/src/modals/Connect/types.ts +++ b/src/modals/Connect/types.ts @@ -7,13 +7,19 @@ export interface ExtensionProps { meta: ExtensionMetaProps; size?: string; flag?: boolean; + inNova?: boolean; } export interface ExtensionMetaProps { id: string; title: string; status?: string; - website: string | [string, string]; + website: + | string + | { + url: string; + text: string; + }; } export interface ListWithInputProps { diff --git a/src/modals/DismissTips/index.tsx b/src/modals/DismissTips/index.tsx index 20598398e9..c1825178b0 100644 --- a/src/modals/DismissTips/index.tsx +++ b/src/modals/DismissTips/index.tsx @@ -1,12 +1,12 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding } from '@polkadot-cloud/react'; import { useTranslation } from 'react-i18next'; import { usePlugins } from 'contexts/Plugins'; import { Title } from 'library/Modal/Title'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { ButtonSubmit } from 'kits/Buttons/ButtonSubmit'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const DismissTips = () => { const { t } = useTranslation('tips'); diff --git a/src/modals/GoToFeedback/index.tsx b/src/modals/GoToFeedback/index.tsx index 567fe3ddf4..4127f7c6e5 100644 --- a/src/modals/GoToFeedback/index.tsx +++ b/src/modals/GoToFeedback/index.tsx @@ -3,10 +3,10 @@ import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ModalPadding } from '@polkadot-cloud/react'; import { useTranslation } from 'react-i18next'; import ForumSVG from 'img/forum.svg?react'; import { Title } from 'library/Modal/Title'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const GoToFeedback = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/ImportLedger/Addresses.tsx b/src/modals/ImportLedger/Addresses.tsx index ab8019f0d3..8883342979 100644 --- a/src/modals/ImportLedger/Addresses.tsx +++ b/src/modals/ImportLedger/Addresses.tsx @@ -2,8 +2,8 @@ // SPDX-License-Identifier: GPL-3.0-only import { faArrowDown } from '@fortawesome/free-solid-svg-icons'; -import { Polkicon } from '@polkadot-cloud/react'; -import { ellipsisFn, unescape } from '@polkadot-cloud/utils'; +import { Polkicon } from '@w3ux/react-polkicon'; +import { ellipsisFn, unescape } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; import { useLedgerHardware } from 'contexts/Hardware/Ledger/LedgerHardware'; import { getLocalLedgerAddresses } from 'contexts/Hardware/Utils'; @@ -14,9 +14,9 @@ import { AddressesWrapper } from 'library/Import/Wrappers'; import type { AnyJson } from 'types'; import { useNetwork } from 'contexts/Network'; import { useOtherAccounts } from 'contexts/Connect/OtherAccounts'; -import { useLedgerAccounts } from '@polkadot-cloud/react/hooks'; import { ButtonText } from 'kits/Buttons/ButtonText'; import { HardwareAddress } from 'library/Hardware/HardwareAddress'; +import { useLedgerAccounts } from '@w3ux/react-connect-kit'; export const Addresess = ({ addresses, onGetAddress }: AnyJson) => { const { t } = useTranslation('modals'); diff --git a/src/modals/ImportLedger/Manage.tsx b/src/modals/ImportLedger/Manage.tsx index c0b7655186..9cd881e452 100644 --- a/src/modals/ImportLedger/Manage.tsx +++ b/src/modals/ImportLedger/Manage.tsx @@ -6,10 +6,10 @@ import { useLedgerHardware } from 'contexts/Hardware/Ledger/LedgerHardware'; import { getLedgerApp } from 'contexts/Hardware/Utils'; import { useHelp } from 'contexts/Help'; import { usePrompt } from 'contexts/Prompt'; -import LedgerSVG from '@polkadot-cloud/assets/extensions/svg/ledgersquare.svg?react'; +import LedgerSVG from '@w3ux/extension-assets/LedgerSquare.svg?react'; import { Heading } from 'library/Import/Heading'; import type { AnyJson } from 'types'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { Addresess } from './Addresses'; import { Reset } from './Reset'; diff --git a/src/modals/ImportLedger/Reset.tsx b/src/modals/ImportLedger/Reset.tsx index df4d8ff454..e033df3667 100644 --- a/src/modals/ImportLedger/Reset.tsx +++ b/src/modals/ImportLedger/Reset.tsx @@ -8,12 +8,13 @@ import type { LedgerAddress } from 'contexts/Hardware/Ledger/types'; import { usePrompt } from 'contexts/Prompt'; import { ConfirmWrapper } from 'library/Import/Wrappers'; import type { AnyJson } from 'types'; -import { useOverlay, useLedgerAccounts } from '@polkadot-cloud/react/hooks'; import { useOtherAccounts } from 'contexts/Connect/OtherAccounts'; -import type { LedgerAccount } from '@polkadot-cloud/react/types'; import { useNetwork } from 'contexts/Network'; +import type { LedgerAccount } from '@w3ux/react-connect-kit/types'; import { ButtonMono } from 'kits/Buttons/ButtonMono'; import { ButtonMonoInvert } from 'kits/Buttons/ButtonMonoInvert'; +import { useOverlay } from 'kits/Overlay/Provider'; +import { useLedgerAccounts } from '@w3ux/react-connect-kit'; export const Reset = ({ removeLedgerAddress }: AnyJson) => { const { t } = useTranslation('modals'); diff --git a/src/modals/ImportLedger/Splash.tsx b/src/modals/ImportLedger/Splash.tsx index b54381b054..253e3afd1a 100644 --- a/src/modals/ImportLedger/Splash.tsx +++ b/src/modals/ImportLedger/Splash.tsx @@ -7,9 +7,9 @@ import { useTranslation } from 'react-i18next'; import { useLedgerHardware } from 'contexts/Hardware/Ledger/LedgerHardware'; import { useHelp } from 'contexts/Help'; import { useTheme } from 'contexts/Themes'; -import LedgerLogoSvg from '@polkadot-cloud/assets/extensions/svg/ledger.svg?react'; +import LedgerLogoSvg from '@w3ux/extension-assets/Ledger.svg?react'; import type { AnyFunction } from 'types'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { SplashWrapper } from './Wrappers'; import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; import { ButtonSecondary } from 'kits/Buttons/ButtonSecondary'; diff --git a/src/modals/ImportLedger/index.tsx b/src/modals/ImportLedger/index.tsx index 61f398143e..8f22f9e440 100644 --- a/src/modals/ImportLedger/index.tsx +++ b/src/modals/ImportLedger/index.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { registerSaEvent } from 'Utils'; -import { ellipsisFn, setStateWithRef } from '@polkadot-cloud/utils'; +import { ellipsisFn, setStateWithRef } from '@w3ux/utils'; import type { FC } from 'react'; import { useEffect, useRef, useState } from 'react'; import { useLedgerHardware } from 'contexts/Hardware/Ledger/LedgerHardware'; @@ -12,15 +12,13 @@ import type { LedgerResponse, } from 'contexts/Hardware/Ledger/types'; import type { AnyJson } from 'types'; -import { - useEffectIgnoreInitial, - useOverlay, -} from '@polkadot-cloud/react/hooks'; +import { useEffectIgnoreInitial } from '@w3ux/hooks'; import { useNetwork } from 'contexts/Network'; import { useTranslation } from 'react-i18next'; import { Manage } from './Manage'; import { Splash } from './Splash'; import { NotificationsController } from 'static/NotificationsController'; +import { useOverlay } from 'kits/Overlay/Provider'; export const ImportLedger: FC = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/ImportVault/Reader.tsx b/src/modals/ImportVault/Reader.tsx index 8a204fec03..1286940bca 100644 --- a/src/modals/ImportVault/Reader.tsx +++ b/src/modals/ImportVault/Reader.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { registerSaEvent } from 'Utils'; -import { isValidAddress } from '@polkadot-cloud/utils'; +import { isValidAddress } from '@w3ux/utils'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useVaultAccounts } from 'contexts/Hardware/Vault/VaultAccounts'; diff --git a/src/modals/ImportVault/index.tsx b/src/modals/ImportVault/index.tsx index 90b98dfd4b..09e6233e78 100644 --- a/src/modals/ImportVault/index.tsx +++ b/src/modals/ImportVault/index.tsx @@ -2,19 +2,19 @@ // SPDX-License-Identifier: GPL-3.0-only import { faQrcode } from '@fortawesome/free-solid-svg-icons'; -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { useVaultAccounts } from 'contexts/Hardware/Vault/VaultAccounts'; import { usePrompt } from 'contexts/Prompt'; -import PolkadotVaultSVG from '@polkadot-cloud/assets/extensions/svg/polkadotvault.svg?react'; +import PolkadotVaultSVG from '@w3ux/extension-assets/PolkadotVault.svg?react'; import { Confirm } from 'library/Import/Confirm'; import { Heading } from 'library/Import/Heading'; import { NoAccounts } from 'library/Import/NoAccounts'; import { Remove } from 'library/Import/Remove'; import { AddressesWrapper } from 'library/Import/Wrappers'; import type { AnyJson } from 'types'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useOtherAccounts } from 'contexts/Connect/OtherAccounts'; import { Reader } from './Reader'; import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary'; diff --git a/src/modals/JoinPool/index.tsx b/src/modals/JoinPool/index.tsx index 8ae5e79ebd..c53268a453 100644 --- a/src/modals/JoinPool/index.tsx +++ b/src/modals/JoinPool/index.tsx @@ -1,8 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding } from '@polkadot-cloud/react'; -import { planckToUnit, unitToPlanck } from '@polkadot-cloud/utils'; +import { planckToUnit, unitToPlanck } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -20,10 +19,11 @@ import { useSignerWarnings } from 'hooks/useSignerWarnings'; import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { Close } from 'library/Modal/Close'; import { SubmitTx } from 'library/SubmitTx'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import type { ClaimPermission } from 'contexts/Pools/types'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const JoinPool = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/ManageFastUnstake/index.tsx b/src/modals/ManageFastUnstake/index.tsx index 4d23234b5d..dbb7f9a8e2 100644 --- a/src/modals/ManageFastUnstake/index.tsx +++ b/src/modals/ManageFastUnstake/index.tsx @@ -1,13 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { - ActionItem, - ModalNotes, - ModalPadding, - ModalWarnings, -} from '@polkadot-cloud/react'; -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -22,9 +16,13 @@ import { useUnstaking } from 'hooks/useUnstaking'; import { Close } from 'library/Modal/Close'; import { SubmitTx } from 'library/SubmitTx'; import { useTxMeta } from 'contexts/TxMeta'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ActionItem } from 'library/ActionItem'; +import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'; export const ManageFastUnstake = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/ManagePool/Forms/ClaimCommission/index.tsx b/src/modals/ManagePool/Forms/ClaimCommission/index.tsx index dfb8a95cbd..a900bda586 100644 --- a/src/modals/ManagePool/Forms/ClaimCommission/index.tsx +++ b/src/modals/ManagePool/Forms/ClaimCommission/index.tsx @@ -2,13 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; -import { - ActionItem, - ModalNotes, - ModalPadding, - ModalWarnings, -} from '@polkadot-cloud/react'; -import { greaterThanZero, planckToUnit, rmCommas } from '@polkadot-cloud/utils'; +import { greaterThanZero, planckToUnit, rmCommas } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { Dispatch, SetStateAction } from 'react'; import { useEffect, useState } from 'react'; @@ -19,10 +13,14 @@ import { Warning } from 'library/Form/Warning'; import { useSignerWarnings } from 'hooks/useSignerWarnings'; import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { SubmitTx } from 'library/SubmitTx'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ActionItem } from 'library/ActionItem'; +import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'; export const ClaimCommission = ({ setSection, diff --git a/src/modals/ManagePool/Forms/LeavePool/index.tsx b/src/modals/ManagePool/Forms/LeavePool/index.tsx index 3db5bf5222..d2a5745b4c 100644 --- a/src/modals/ManagePool/Forms/LeavePool/index.tsx +++ b/src/modals/ManagePool/Forms/LeavePool/index.tsx @@ -2,12 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; -import { ActionItem, ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; -import { - greaterThanZero, - planckToUnit, - unitToPlanck, -} from '@polkadot-cloud/utils'; +import { greaterThanZero, planckToUnit, unitToPlanck } from '@w3ux/utils'; import { getUnixTime } from 'date-fns'; import type { Dispatch, SetStateAction } from 'react'; import { useEffect, useState } from 'react'; @@ -22,10 +17,13 @@ import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { timeleftAsString } from 'hooks/useTimeLeft/utils'; import { SubmitTx } from 'library/SubmitTx'; import { StaticNote } from 'modals/Utils/StaticNote'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ActionItem } from 'library/ActionItem'; export const LeavePool = ({ setSection, diff --git a/src/modals/ManagePool/Forms/ManageCommission/index.tsx b/src/modals/ManagePool/Forms/ManageCommission/index.tsx index 76be84a787..5ed01c176a 100644 --- a/src/modals/ManagePool/Forms/ManageCommission/index.tsx +++ b/src/modals/ManagePool/Forms/ManageCommission/index.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: GPL-3.0-only import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; -import { ActionItem, ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; import BigNumber from 'bignumber.js'; import type { Dispatch, SetStateAction } from 'react'; import { useEffect, useState } from 'react'; @@ -17,7 +16,7 @@ import { useSignerWarnings } from 'hooks/useSignerWarnings'; import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { SubmitTx } from 'library/SubmitTx'; import 'rc-slider/assets/index.css'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { usePoolCommission } from './provider'; import { CommissionCurrent } from './CommissionCurrent'; @@ -25,6 +24,9 @@ import { MaxCommission } from './MaxCommission'; import { ChangeRate } from './ChangeRate'; import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ActionItem } from 'library/ActionItem'; export const ManageCommission = ({ setSection, diff --git a/src/modals/ManagePool/Forms/ManageCommission/provider/index.tsx b/src/modals/ManagePool/Forms/ManageCommission/provider/index.tsx index 09a1fb5215..0ec54f9816 100644 --- a/src/modals/ManagePool/Forms/ManageCommission/provider/index.tsx +++ b/src/modals/ManagePool/Forms/ManageCommission/provider/index.tsx @@ -5,7 +5,7 @@ import { createContext, useContext, useEffect, useState } from 'react'; import type { MaybeAddress } from 'types'; import { useActivePool } from 'contexts/Pools/ActivePool'; import { useBondedPools } from 'contexts/Pools/BondedPools'; -import { rmCommas } from '@polkadot-cloud/utils'; +import { rmCommas } from '@w3ux/utils'; import type { ChangeRateInput, CommissionFeature, diff --git a/src/modals/ManagePool/Forms/RenamePool/index.tsx b/src/modals/ManagePool/Forms/RenamePool/index.tsx index 2af20b0508..aa20f288d7 100644 --- a/src/modals/ManagePool/Forms/RenamePool/index.tsx +++ b/src/modals/ManagePool/Forms/RenamePool/index.tsx @@ -3,7 +3,6 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { u8aToString, u8aUnwrapBytes } from '@polkadot/util'; -import { ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; import type { Dispatch, FormEvent, SetStateAction } from 'react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -14,9 +13,11 @@ import { Warning } from 'library/Form/Warning'; import { useSignerWarnings } from 'hooks/useSignerWarnings'; import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { SubmitTx } from 'library/SubmitTx'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; export const RenamePool = ({ setSection, diff --git a/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx b/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx index ecf873f663..919d3b9198 100644 --- a/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx +++ b/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: GPL-3.0-only import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; -import { ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; import type { Dispatch, SetStateAction } from 'react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -13,11 +12,13 @@ import { Warning } from 'library/Form/Warning'; import { useSignerWarnings } from 'hooks/useSignerWarnings'; import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { SubmitTx } from 'library/SubmitTx'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import type { ClaimPermission } from 'contexts/Pools/types'; import { useBalances } from 'contexts/Balances'; import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; export const SetClaimPermission = ({ setSection, diff --git a/src/modals/ManagePool/Forms/SetPoolState/index.tsx b/src/modals/ManagePool/Forms/SetPoolState/index.tsx index dc482ca9e9..19452c6004 100644 --- a/src/modals/ManagePool/Forms/SetPoolState/index.tsx +++ b/src/modals/ManagePool/Forms/SetPoolState/index.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: GPL-3.0-only import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; -import { ActionItem, ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; import type { Dispatch, SetStateAction } from 'react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -13,9 +12,12 @@ import { Warning } from 'library/Form/Warning'; import { useSignerWarnings } from 'hooks/useSignerWarnings'; import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { SubmitTx } from 'library/SubmitTx'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; +import { ActionItem } from 'library/ActionItem'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; export const SetPoolState = ({ setSection, diff --git a/src/modals/ManagePool/Tasks.tsx b/src/modals/ManagePool/Tasks.tsx index a4b094c90f..995012239a 100644 --- a/src/modals/ManagePool/Tasks.tsx +++ b/src/modals/ManagePool/Tasks.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import type { ForwardedRef } from 'react'; import { forwardRef } from 'react'; import { useTranslation } from 'react-i18next'; @@ -12,7 +12,7 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { ButtonRowWrapper, ContentWrapper } from './Wrappers'; import type { TasksProps } from './types'; import { useApi } from 'contexts/Api'; -import { ellipsisFn, remToUnit } from '@polkadot-cloud/utils'; +import { ellipsisFn, remToUnit } from '@w3ux/utils'; import { CopyAddress } from 'library/ListItem/Labels/CopyAddress'; import { ButtonOption } from 'kits/Buttons/ButtonOption'; diff --git a/src/modals/ManagePool/index.tsx b/src/modals/ManagePool/index.tsx index a497ae8dc7..3d36771cd1 100644 --- a/src/modals/ManagePool/index.tsx +++ b/src/modals/ManagePool/index.tsx @@ -1,21 +1,19 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { - ModalFixedTitle, - ModalMotionTwoSection, - ModalPadding, - ModalSection, -} from '@polkadot-cloud/react'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useActivePool } from 'contexts/Pools/ActivePool'; import { Title } from 'library/Modal/Title'; import { useTxMeta } from 'contexts/TxMeta'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useLedgerHardware } from 'contexts/Hardware/Ledger/LedgerHardware'; import { Forms } from './Forms'; import { Tasks } from './Tasks'; +import { ModalSection } from 'kits/Overlay/structure/ModalSection'; +import { ModalFixedTitle } from 'kits/Overlay/structure/ModalFixedTitle'; +import { ModalMotionTwoSection } from 'kits/Overlay/structure/ModalMotionTwoSection'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const ManagePool = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/Networks/ProvidersPrompt.tsx b/src/modals/Networks/ProvidersPrompt.tsx index 1d46c4088d..abf7840dcb 100644 --- a/src/modals/Networks/ProvidersPrompt.tsx +++ b/src/modals/Networks/ProvidersPrompt.tsx @@ -8,7 +8,7 @@ import { PromptSelectItem } from 'library/Prompt/Wrappers'; import { useNetwork } from 'contexts/Network'; import { NetworkList } from 'config/networks'; import { usePrompt } from 'contexts/Prompt'; -import { capitalizeFirstLetter } from '@polkadot-cloud/utils'; +import { capitalizeFirstLetter } from '@w3ux/utils'; export const ProvidersPrompt = () => { const { t } = useTranslation(); diff --git a/src/modals/Networks/index.tsx b/src/modals/Networks/index.tsx index de1851539a..77ba245636 100644 --- a/src/modals/Networks/index.tsx +++ b/src/modals/Networks/index.tsx @@ -3,15 +3,14 @@ import { faChevronRight, faGlobe } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ModalPadding } from '@polkadot-cloud/react'; -import { capitalizeFirstLetter } from '@polkadot-cloud/utils'; +import { capitalizeFirstLetter } from '@w3ux/utils'; import { useEffect } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { NetworkList } from 'config/networks'; import { useApi } from 'contexts/Api'; import { Title } from 'library/Modal/Title'; import type { NetworkName } from 'types'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useUi } from 'contexts/UI'; import { usePrompt } from 'contexts/Prompt'; @@ -25,6 +24,7 @@ import { } from './Wrapper'; import { ProvidersPrompt } from './ProvidersPrompt'; import { ButtonTertiary } from 'kits/Buttons/ButtonTertiary'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const Networks = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/PoolNominations/index.tsx b/src/modals/PoolNominations/index.tsx index f1ff703701..b29b23fdfd 100644 --- a/src/modals/PoolNominations/index.tsx +++ b/src/modals/PoolNominations/index.tsx @@ -1,12 +1,12 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding } from '@polkadot-cloud/react'; import { useTranslation } from 'react-i18next'; import { Title } from 'library/Modal/Title'; import { ValidatorList } from 'library/ValidatorList'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { ListWrapper } from './Wrappers'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const PoolNominations = () => { const { diff --git a/src/modals/Settings/index.tsx b/src/modals/Settings/index.tsx index dbe2f3df5e..e2a4c98ee8 100644 --- a/src/modals/Settings/index.tsx +++ b/src/modals/Settings/index.tsx @@ -1,12 +1,12 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding } from '@polkadot-cloud/react'; import { useTranslation } from 'react-i18next'; import { usePlugins } from 'contexts/Plugins'; import { Title } from 'library/Modal/Title'; import { StatusButton } from 'library/StatusButton'; import { ContentWrapper } from '../Networks/Wrapper'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const Settings = () => { const { plugins, togglePlugin } = usePlugins(); diff --git a/src/modals/StopNominations/index.tsx b/src/modals/StopNominations/index.tsx index 9e94fd6992..8541be281e 100644 --- a/src/modals/StopNominations/index.tsx +++ b/src/modals/StopNominations/index.tsx @@ -1,11 +1,6 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { - ModalPadding, - ModalSeparator, - ModalWarnings, -} from '@polkadot-cloud/react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; @@ -17,9 +12,12 @@ import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { Close } from 'library/Modal/Close'; import { SubmitTx } from 'library/SubmitTx'; import { useTxMeta } from 'contexts/TxMeta'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useBalances } from 'contexts/Balances'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ModalSeparator } from 'kits/Overlay/structure/ModalSeparator'; export const StopNominations = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/Unbond/index.tsx b/src/modals/Unbond/index.tsx index adc62cd527..431ea980e2 100644 --- a/src/modals/Unbond/index.tsx +++ b/src/modals/Unbond/index.tsx @@ -1,8 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalNotes, ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; -import { isNotZero, planckToUnit, unitToPlanck } from '@polkadot-cloud/utils'; +import { isNotZero, planckToUnit, unitToPlanck } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { getUnixTime } from 'date-fns'; import { useEffect, useState } from 'react'; @@ -21,9 +20,12 @@ import { timeleftAsString } from 'hooks/useTimeLeft/utils'; import { Close } from 'library/Modal/Close'; import { SubmitTx } from 'library/SubmitTx'; import { StaticNote } from 'modals/Utils/StaticNote'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'; export const Unbond = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/UnlockChunks/Chunk.tsx b/src/modals/UnlockChunks/Chunk.tsx index 83206d749e..e6bf0a50af 100644 --- a/src/modals/UnlockChunks/Chunk.tsx +++ b/src/modals/UnlockChunks/Chunk.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { fromUnixTime } from 'date-fns'; import { useEffect } from 'react'; diff --git a/src/modals/UnlockChunks/Forms.tsx b/src/modals/UnlockChunks/Forms.tsx index 2fed23128f..9e2a41fad9 100644 --- a/src/modals/UnlockChunks/Forms.tsx +++ b/src/modals/UnlockChunks/Forms.tsx @@ -2,8 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; -import { ActionItem, ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; -import { planckToUnit, rmCommas } from '@polkadot-cloud/utils'; +import { planckToUnit, rmCommas } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { ForwardedRef } from 'react'; import { forwardRef, useEffect, useState } from 'react'; @@ -18,13 +17,16 @@ import { Warning } from 'library/Form/Warning'; import { useSignerWarnings } from 'hooks/useSignerWarnings'; import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'; import { SubmitTx } from 'library/SubmitTx'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { ContentWrapper } from './Wrappers'; import type { FormsProps } from './types'; import { useBalances } from 'contexts/Balances'; import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ActionItem } from 'library/ActionItem'; export const Forms = forwardRef( ( diff --git a/src/modals/UnlockChunks/Overview.tsx b/src/modals/UnlockChunks/Overview.tsx index 57ce3b37bd..c75e5e9f7e 100644 --- a/src/modals/UnlockChunks/Overview.tsx +++ b/src/modals/UnlockChunks/Overview.tsx @@ -3,8 +3,7 @@ import { faCheckCircle, faClock } from '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ModalNotes, ModalPadding } from '@polkadot-cloud/react'; -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { getUnixTime } from 'date-fns'; import type { Dispatch, ForwardedRef, SetStateAction } from 'react'; @@ -22,6 +21,8 @@ import { Chunk } from './Chunk'; import { ContentWrapper } from './Wrappers'; import type { UnlockChunk } from 'contexts/Balances/types'; import { ButtonSubmit } from 'kits/Buttons/ButtonSubmit'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'; interface OverviewProps { unlocking: UnlockChunk[]; diff --git a/src/modals/UnlockChunks/index.tsx b/src/modals/UnlockChunks/index.tsx index 7ed5660f6f..29c29167b3 100644 --- a/src/modals/UnlockChunks/index.tsx +++ b/src/modals/UnlockChunks/index.tsx @@ -1,24 +1,22 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { - ModalFixedTitle, - ModalMotionTwoSection, - ModalSection, -} from '@polkadot-cloud/react'; -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useBalances } from 'contexts/Balances'; import { useActivePool } from 'contexts/Pools/ActivePool'; import { Title } from 'library/Modal/Title'; import { useTxMeta } from 'contexts/TxMeta'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useLedgerHardware } from 'contexts/Hardware/Ledger/LedgerHardware'; import { Forms } from './Forms'; import { Overview } from './Overview'; import type { UnlockChunk } from 'contexts/Balances/types'; +import { ModalSection } from 'kits/Overlay/structure/ModalSection'; +import { ModalFixedTitle } from 'kits/Overlay/structure/ModalFixedTitle'; +import { ModalMotionTwoSection } from 'kits/Overlay/structure/ModalMotionTwoSection'; export const UnlockChunks = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/Unstake/index.tsx b/src/modals/Unstake/index.tsx index 36e0ff45a5..bff721e5fa 100644 --- a/src/modals/Unstake/index.tsx +++ b/src/modals/Unstake/index.tsx @@ -1,12 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ActionItem, ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; -import { - greaterThanZero, - planckToUnit, - unitToPlanck, -} from '@polkadot-cloud/utils'; +import { greaterThanZero, planckToUnit, unitToPlanck } from '@w3ux/utils'; import { getUnixTime } from 'date-fns'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -23,10 +18,13 @@ import { Close } from 'library/Modal/Close'; import { SubmitTx } from 'library/SubmitTx'; import { StaticNote } from 'modals/Utils/StaticNote'; import { useTxMeta } from 'contexts/TxMeta'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useBalances } from 'contexts/Balances'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; +import { ActionItem } from 'library/ActionItem'; export const Unstake = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/UpdateController/Switch/index.tsx b/src/modals/UpdateController/Switch/index.tsx index 5a74f95b18..4bf013ef2d 100644 --- a/src/modals/UpdateController/Switch/index.tsx +++ b/src/modals/UpdateController/Switch/index.tsx @@ -3,8 +3,8 @@ import { faAnglesRight } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { remToUnit } from '@polkadot-cloud/utils'; -import { Polkicon } from '@polkadot-cloud/react'; +import { remToUnit } from '@w3ux/utils'; +import { Polkicon } from '@w3ux/react-polkicon'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import type { AccountDropdownProps } from '../../../library/Form/types'; import { StyledSelect } from './Wrappers'; diff --git a/src/modals/UpdateController/index.tsx b/src/modals/UpdateController/index.tsx index f4be7a060e..a8c3d98781 100644 --- a/src/modals/UpdateController/index.tsx +++ b/src/modals/UpdateController/index.tsx @@ -1,7 +1,6 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; import { useBonded } from 'contexts/Bonded'; @@ -12,11 +11,13 @@ import { Close } from 'library/Modal/Close'; import { SubmitTx } from 'library/SubmitTx'; import { useTxMeta } from 'contexts/TxMeta'; import { useEffect } from 'react'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { Switch } from './Switch'; import { Wrapper } from './Wrapper'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; export const UpdateController = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/UpdatePayee/index.tsx b/src/modals/UpdatePayee/index.tsx index 16821f68ec..466edf64d7 100644 --- a/src/modals/UpdatePayee/index.tsx +++ b/src/modals/UpdatePayee/index.tsx @@ -1,8 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding, ModalWarnings } from '@polkadot-cloud/react'; -import { isValidAddress } from '@polkadot-cloud/utils'; +import { isValidAddress } from '@w3ux/utils'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; @@ -19,9 +18,11 @@ import { SelectItem } from 'library/SelectItems/Item'; import { SubmitTx } from 'library/SubmitTx'; import type { MaybeAddress } from 'types'; import { useTxMeta } from 'contexts/TxMeta'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useBalances } from 'contexts/Balances'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; +import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'; export const UpdatePayee = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/UpdateReserve/index.tsx b/src/modals/UpdateReserve/index.tsx index bbc2ffbf91..3542ffef4a 100644 --- a/src/modals/UpdateReserve/index.tsx +++ b/src/modals/UpdateReserve/index.tsx @@ -3,8 +3,7 @@ import { faLock } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ModalPadding } from '@polkadot-cloud/react'; -import { planckToUnit, unitToPlanck } from '@polkadot-cloud/utils'; +import { planckToUnit, unitToPlanck } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -15,13 +14,14 @@ import { Close } from 'library/Modal/Close'; import { Title } from 'library/Modal/Title'; import { SliderWrapper } from 'modals/ManagePool/Wrappers'; import 'rc-slider/assets/index.css'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { StyledSlider } from 'library/StyledSlider'; import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const UpdateReserve = () => { const { t } = useTranslation('modals'); diff --git a/src/modals/ValidatorGeo/index.tsx b/src/modals/ValidatorGeo/index.tsx index ac5dc8a610..bf09e70a68 100644 --- a/src/modals/ValidatorGeo/index.tsx +++ b/src/modals/ValidatorGeo/index.tsx @@ -1,8 +1,8 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { Polkicon } from '@polkadot-cloud/react'; -import { ellipsisFn } from '@polkadot-cloud/utils'; +import { Polkicon } from '@w3ux/react-polkicon'; +import { ellipsisFn } from '@w3ux/utils'; import { useEffect, useState, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { useHelp } from 'contexts/Help'; @@ -14,7 +14,7 @@ import { useSize } from 'hooks/useSize'; import { Title } from 'library/Modal/Title'; import { StatusLabel } from 'library/StatusLabel'; import { PolkawatchApi, type ValidatorDetail } from '@polkawatch/ddp-client'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { PluginLabel } from 'library/PluginLabel'; import { usePlugins } from 'contexts/Plugins'; import { useNetwork } from 'contexts/Network'; diff --git a/src/modals/ValidatorMetrics/index.tsx b/src/modals/ValidatorMetrics/index.tsx index 501d29ed39..e28d3a5876 100644 --- a/src/modals/ValidatorMetrics/index.tsx +++ b/src/modals/ValidatorMetrics/index.tsx @@ -1,8 +1,8 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { ModalPadding, Polkicon } from '@polkadot-cloud/react'; -import { ellipsisFn, planckToUnit } from '@polkadot-cloud/utils'; +import { Polkicon } from '@w3ux/react-polkicon'; +import { ellipsisFn, planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useEffect, useState, useRef } from 'react'; import { useTranslation } from 'react-i18next'; @@ -16,7 +16,7 @@ import { useSize } from 'hooks/useSize'; import { Title } from 'library/Modal/Title'; import { StatWrapper, StatsWrapper } from 'library/Modal/Wrappers'; import { StatusLabel } from 'library/StatusLabel'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { PluginLabel } from 'library/PluginLabel'; import { useNetwork } from 'contexts/Network'; import type { AnyJson } from 'types'; @@ -24,6 +24,7 @@ import { SubscanController } from 'static/SubscanController'; import { usePlugins } from 'contexts/Plugins'; import { useApi } from 'contexts/Api'; import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; +import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const ValidatorMetrics = () => { const { t } = useTranslation('modals'); diff --git a/src/overlay/index.tsx b/src/overlay/index.tsx index 1df0d70b06..348774e0ac 100644 --- a/src/overlay/index.tsx +++ b/src/overlay/index.tsx @@ -3,7 +3,6 @@ import { useHelp } from 'contexts/Help'; import { ErrorFallbackModal } from 'library/ErrorBoundary'; -import { Overlay } from '@polkadot-cloud/react'; import { ClaimPayouts } from 'modals/ClaimPayouts'; import { AccountPoolRoles } from '../modals/AccountPoolRoles'; import { Accounts } from '../modals/Accounts'; @@ -33,6 +32,7 @@ import { ValidatorMetrics } from '../modals/ValidatorMetrics'; import { ValidatorGeo } from '../modals/ValidatorGeo'; import { ManageNominations } from '../canvas/ManageNominations'; import { PoolMembers } from 'canvas/PoolMembers'; +import { Overlay } from 'kits/Overlay'; export const Overlays = () => { const { status } = useHelp(); diff --git a/src/pages/Community/Item.tsx b/src/pages/Community/Item.tsx index 99f0f50d87..a627a01ac3 100644 --- a/src/pages/Community/Item.tsx +++ b/src/pages/Community/Item.tsx @@ -10,7 +10,7 @@ import { import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Suspense, lazy, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { ItemWrapper } from './Wrappers'; import { useCommunitySections } from './context'; @@ -25,9 +25,9 @@ export const Item = ({ item, actionable }: ItemProps) => { bio, name, email, - twitter, + x, website, - thumbnail, + icon, validators: entityAllValidators, } = item; const validatorCount = entityAllValidators[network]?.length ?? 0; @@ -55,7 +55,7 @@ export const Item = ({ item, actionable }: ItemProps) => { }; const Thumbnail = useMemo( - () => lazy(() => import(`../../config/validators/${thumbnail}.tsx`)), + () => lazy(() => import(`../../config/validators/${icon}.tsx`)), [] ); @@ -128,16 +128,16 @@ export const Item = ({ item, actionable }: ItemProps) => { /> )} - {twitter !== undefined && ( + {x !== undefined && (
) : null} - {greaterThanZero(fundsReserved) ? ( -
- - - openModal({ key: 'UpdateReserve', size: 'sm' }) - } - iconRight={ - syncing - ? undefined - : !feeReserve.isZero() && !edReserved.isZero() - ? faCheckDouble - : feeReserve.isZero() && edReserved.isZero() - ? undefined - : faCheck - } - iconTransform="shrink-1" - disabled={ - !activeAccount || - syncing || - !accountHasSigner(activeAccount) - } - /> - } - /> - - - - -
- ) : null} +
+ + + openModal({ key: 'UpdateReserve', size: 'sm' }) + } + iconRight={ + syncing + ? undefined + : !feeReserve.isZero() && !edReserved.isZero() + ? faCheckDouble + : feeReserve.isZero() && edReserved.isZero() + ? undefined + : faCheck + } + iconTransform="shrink-1" + disabled={ + !activeAccount || + syncing || + !accountHasSigner(activeAccount) + } + /> + } + /> + + + + +
diff --git a/src/pages/Overview/NetworkSats/Announcements.tsx b/src/pages/Overview/NetworkSats/Announcements.tsx index de18ccb11d..f7f127dd6d 100644 --- a/src/pages/Overview/NetworkSats/Announcements.tsx +++ b/src/pages/Overview/NetworkSats/Announcements.tsx @@ -8,7 +8,7 @@ import { planckToUnit, rmCommas, sortWithNull, -} from '@polkadot-cloud/utils'; +} from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { motion } from 'framer-motion'; import { useTranslation } from 'react-i18next'; diff --git a/src/pages/Overview/Payouts.tsx b/src/pages/Overview/Payouts.tsx index f48ff4b7dc..b9b9d8b2a3 100644 --- a/src/pages/Overview/Payouts.tsx +++ b/src/pages/Overview/Payouts.tsx @@ -13,11 +13,11 @@ import { useSize } from 'hooks/useSize'; import { StatusLabel } from 'library/StatusLabel'; import { useSubscanData } from 'hooks/useSubscanData'; import { CardHeaderWrapper } from 'library/Card/Wrappers'; -import { Odometer } from '@polkadot-cloud/react'; +import { Odometer } from '@w3ux/react-odometer'; import { locales, DefaultLocale } from 'locale'; import BigNumber from 'bignumber.js'; import { formatDistance, fromUnixTime, getUnixTime } from 'date-fns'; -import { minDecimalPlaces, planckToUnit } from '@polkadot-cloud/utils'; +import { minDecimalPlaces, planckToUnit } from '@w3ux/utils'; import { useNetwork } from 'contexts/Network'; import { useSyncing } from 'hooks/useSyncing'; diff --git a/src/pages/Overview/StakeStatus/Tips/index.tsx b/src/pages/Overview/StakeStatus/Tips/index.tsx index 57e86fc0ed..3dc748635e 100644 --- a/src/pages/Overview/StakeStatus/Tips/index.tsx +++ b/src/pages/Overview/StakeStatus/Tips/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { setStateWithRef } from '@polkadot-cloud/utils'; +import { setStateWithRef } from '@w3ux/utils'; import throttle from 'lodash.throttle'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/src/pages/Overview/Stats/SupplyStaked.tsx b/src/pages/Overview/Stats/SupplyStaked.tsx index e5db06e6cb..27358bd8ee 100644 --- a/src/pages/Overview/Stats/SupplyStaked.tsx +++ b/src/pages/Overview/Stats/SupplyStaked.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useTranslation } from 'react-i18next'; import { Pie } from 'library/StatBoxList/Pie'; diff --git a/src/pages/Payouts/PayoutList/index.tsx b/src/pages/Payouts/PayoutList/index.tsx index a6b5d42188..6e44c0c0f1 100644 --- a/src/pages/Payouts/PayoutList/index.tsx +++ b/src/pages/Payouts/PayoutList/index.tsx @@ -3,7 +3,7 @@ import { faBars, faGripVertical } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ellipsisFn, isNotZero, planckToUnit } from '@polkadot-cloud/utils'; +import { ellipsisFn, isNotZero, planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { formatDistance, fromUnixTime } from 'date-fns'; import { motion } from 'framer-motion'; diff --git a/src/pages/Payouts/Stats/LastEraPayout.tsx b/src/pages/Payouts/Stats/LastEraPayout.tsx index f7f3a273d7..5c39e36ffa 100644 --- a/src/pages/Payouts/Stats/LastEraPayout.tsx +++ b/src/pages/Payouts/Stats/LastEraPayout.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; import { Number } from 'library/StatBoxList/Number'; import { useNetwork } from 'contexts/Network'; diff --git a/src/pages/Pools/Create/Summary/index.tsx b/src/pages/Pools/Create/Summary/index.tsx index 1aa42dbcf3..8e03d57c5b 100644 --- a/src/pages/Pools/Create/Summary/index.tsx +++ b/src/pages/Pools/Create/Summary/index.tsx @@ -3,7 +3,7 @@ import { faCheckCircle } from '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { unitToPlanck } from '@polkadot-cloud/utils'; +import { unitToPlanck } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useTranslation } from 'react-i18next'; import { useBondedPools } from 'contexts/Pools/BondedPools'; diff --git a/src/pages/Pools/Home/ClosurePrompts.tsx b/src/pages/Pools/Home/ClosurePrompts.tsx index d89b009809..473506c0bd 100644 --- a/src/pages/Pools/Home/ClosurePrompts.tsx +++ b/src/pages/Pools/Home/ClosurePrompts.tsx @@ -8,7 +8,7 @@ import { useActivePool } from 'contexts/Pools/ActivePool'; import { useTheme } from 'contexts/Themes'; import { useTransferOptions } from 'contexts/TransferOptions'; import { CardWrapper } from 'library/Card/Wrappers'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useSyncing } from 'hooks/useSyncing'; diff --git a/src/pages/Pools/Home/ManageBond.tsx b/src/pages/Pools/Home/ManageBond.tsx index 713a8609c8..0d81005337 100644 --- a/src/pages/Pools/Home/ManageBond.tsx +++ b/src/pages/Pools/Home/ManageBond.tsx @@ -2,15 +2,15 @@ // SPDX-License-Identifier: GPL-3.0-only import { faLockOpen } from '@fortawesome/free-solid-svg-icons'; -import { Odometer } from '@polkadot-cloud/react'; -import { minDecimalPlaces, planckToUnit } from '@polkadot-cloud/utils'; +import { Odometer } from '@w3ux/react-odometer'; +import { minDecimalPlaces, planckToUnit } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; import { useHelp } from 'contexts/Help'; import { useActivePool } from 'contexts/Pools/ActivePool'; import { useTransferOptions } from 'contexts/TransferOptions'; import { BondedChart } from 'library/BarChart/BondedChart'; import { CardHeaderWrapper } from 'library/Card/Wrappers'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; diff --git a/src/pages/Pools/Home/ManagePool/index.tsx b/src/pages/Pools/Home/ManagePool/index.tsx index c5d4dfcd7c..a588e32963 100644 --- a/src/pages/Pools/Home/ManagePool/index.tsx +++ b/src/pages/Pools/Home/ManagePool/index.tsx @@ -8,7 +8,7 @@ import { useHelp } from 'contexts/Help'; import { useActivePool } from 'contexts/Pools/ActivePool'; import { CardHeaderWrapper, CardWrapper } from 'library/Card/Wrappers'; import { Nominations } from 'library/Nominations'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useSyncing } from 'hooks/useSyncing'; import { useValidators } from 'contexts/Validators/ValidatorEntries'; diff --git a/src/pages/Pools/Home/PoolStats/Announcements.tsx b/src/pages/Pools/Home/PoolStats/Announcements.tsx index 109ae38606..bd1677013d 100644 --- a/src/pages/Pools/Home/PoolStats/Announcements.tsx +++ b/src/pages/Pools/Home/PoolStats/Announcements.tsx @@ -3,7 +3,7 @@ import { faBullhorn as faBack } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { planckToUnit, rmCommas } from '@polkadot-cloud/utils'; +import { planckToUnit, rmCommas } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { motion } from 'framer-motion'; import { useTranslation } from 'react-i18next'; diff --git a/src/pages/Pools/Home/PoolStats/index.tsx b/src/pages/Pools/Home/PoolStats/index.tsx index 8bf77df6f8..d9861e2dca 100644 --- a/src/pages/Pools/Home/PoolStats/index.tsx +++ b/src/pages/Pools/Home/PoolStats/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { planckToUnit, rmCommas } from '@polkadot-cloud/utils'; +import { planckToUnit, rmCommas } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useTranslation } from 'react-i18next'; import { useActivePool } from 'contexts/Pools/ActivePool'; @@ -11,7 +11,7 @@ import { Header } from 'library/Announcements/Header'; import { useNetwork } from 'contexts/Network'; import { Announcements } from './Announcements'; import type { PoolStatLabel } from 'library/Announcements/types'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { Wrapper } from 'library/Announcements/Wrappers'; export const PoolStats = () => { diff --git a/src/pages/Pools/Home/Stats/MinCreateBond.tsx b/src/pages/Pools/Home/Stats/MinCreateBond.tsx index 71383077e0..b426000555 100644 --- a/src/pages/Pools/Home/Stats/MinCreateBond.tsx +++ b/src/pages/Pools/Home/Stats/MinCreateBond.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; import { Number } from 'library/StatBoxList/Number'; import { useNetwork } from 'contexts/Network'; diff --git a/src/pages/Pools/Home/Stats/MinJoinBond.tsx b/src/pages/Pools/Home/Stats/MinJoinBond.tsx index f5981663ba..5ac8ff4faa 100644 --- a/src/pages/Pools/Home/Stats/MinJoinBond.tsx +++ b/src/pages/Pools/Home/Stats/MinJoinBond.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; import { Number } from 'library/StatBoxList/Number'; import { useNetwork } from 'contexts/Network'; diff --git a/src/pages/Pools/Home/Status/MembershipStatus.tsx b/src/pages/Pools/Home/Status/MembershipStatus.tsx index e38f9c6b48..b76848427a 100644 --- a/src/pages/Pools/Home/Status/MembershipStatus.tsx +++ b/src/pages/Pools/Home/Status/MembershipStatus.tsx @@ -2,14 +2,14 @@ // SPDX-License-Identifier: GPL-3.0-only import { faCog } from '@fortawesome/free-solid-svg-icons'; -import { determinePoolDisplay } from '@polkadot-cloud/utils'; +import { determinePoolDisplay } from '@w3ux/utils'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; import { useActivePool } from 'contexts/Pools/ActivePool'; import { useBondedPools } from 'contexts/Pools/BondedPools'; import { useTransferOptions } from 'contexts/TransferOptions'; import { Stat } from 'library/Stat'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { useStatusButtons } from './useStatusButtons'; diff --git a/src/pages/Pools/Home/Status/RewardsStatus.tsx b/src/pages/Pools/Home/Status/RewardsStatus.tsx index b4eb373eaf..d9f5df9885 100644 --- a/src/pages/Pools/Home/Status/RewardsStatus.tsx +++ b/src/pages/Pools/Home/Status/RewardsStatus.tsx @@ -2,13 +2,13 @@ // SPDX-License-Identifier: GPL-3.0-only import { faCircleDown, faPlus } from '@fortawesome/free-solid-svg-icons'; -import { planckToUnit } from '@polkadot-cloud/utils'; +import { planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; import { useActivePool } from 'contexts/Pools/ActivePool'; import { Stat } from 'library/Stat'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; diff --git a/src/pages/Pools/Home/context.tsx b/src/pages/Pools/Home/context.tsx index 7c5835c794..59fe51b567 100644 --- a/src/pages/Pools/Home/context.tsx +++ b/src/pages/Pools/Home/context.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { extractUrlValue } from '@polkadot-cloud/utils'; +import { extractUrlValue } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useState } from 'react'; import type { PoolsTabsContextInterface } from '../types'; diff --git a/src/pages/Pools/Home/index.tsx b/src/pages/Pools/Home/index.tsx index 2276d72a57..7a347df83f 100644 --- a/src/pages/Pools/Home/index.tsx +++ b/src/pages/Pools/Home/index.tsx @@ -9,7 +9,7 @@ import { CardWrapper } from 'library/Card/Wrappers'; import { PoolList } from 'library/PoolList/Default'; import { StatBoxList } from 'library/StatBoxList'; import { useFavoritePools } from 'contexts/Pools/FavoritePools'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { PoolListProvider } from 'library/PoolList/context'; import { Roles } from '../Roles'; @@ -30,6 +30,7 @@ import { PageTitle } from 'kits/Structure/PageTitle'; import type { PageTitleTabProps } from 'kits/Structure/PageTitleTabs/types'; import { PageRow } from 'kits/Structure/PageRow'; import { RowSection } from 'kits/Structure/RowSection'; +import { WithdrawPrompt } from 'library/WithdrawPrompt'; export const HomeInner = () => { const { t } = useTranslation('pages'); @@ -41,7 +42,9 @@ export const HomeInner = () => { const { activeTab, setActiveTab } = usePoolsTabs(); const { getPoolRoles, activePool } = useActivePool(); const { counterForBondedPools } = useApi().poolsConfig; + const membership = getPoolMembership(activeAccount); + const { state } = activePool?.bondedPool || {}; const { activePools } = useActivePools({ poolIds: '*', @@ -108,7 +111,11 @@ export const HomeInner = () => { - + {state === 'Destroying' ? ( + + ) : ( + + )} diff --git a/src/pages/Pools/PoolAccount/index.tsx b/src/pages/Pools/PoolAccount/index.tsx index 97bb3063b1..2519817f42 100644 --- a/src/pages/Pools/PoolAccount/index.tsx +++ b/src/pages/Pools/PoolAccount/index.tsx @@ -3,11 +3,11 @@ import { faCopy } from '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ellipsisFn, remToUnit } from '@polkadot-cloud/utils'; +import { ellipsisFn, remToUnit } from '@w3ux/utils'; import { motion } from 'framer-motion'; import { useTranslation } from 'react-i18next'; import type { NotificationText } from 'static/NotificationsController/types'; -import { Polkicon } from '@polkadot-cloud/react'; +import { Polkicon } from '@w3ux/react-polkicon'; import { getIdentityDisplay } from 'library/ValidatorList/ValidatorItem/Utils'; import type { PoolAccountProps } from '../types'; import { Wrapper } from './Wrapper'; diff --git a/src/pages/Pools/Roles/RoleEditInput/index.tsx b/src/pages/Pools/Roles/RoleEditInput/index.tsx index c9f3a2047c..8f6a34b6d4 100644 --- a/src/pages/Pools/Roles/RoleEditInput/index.tsx +++ b/src/pages/Pools/Roles/RoleEditInput/index.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { isValidAddress } from '@polkadot-cloud/utils'; +import { isValidAddress } from '@w3ux/utils'; import type { FormEvent } from 'react'; import { useTranslation } from 'react-i18next'; import { useNetwork } from 'contexts/Network'; diff --git a/src/pages/Pools/Roles/index.tsx b/src/pages/Pools/Roles/index.tsx index 0437b68324..af5adeb09a 100644 --- a/src/pages/Pools/Roles/index.tsx +++ b/src/pages/Pools/Roles/index.tsx @@ -12,7 +12,7 @@ import { useApi } from 'contexts/Api'; import { useHelp } from 'contexts/Help'; import { useActivePool } from 'contexts/Pools/ActivePool'; import { CardHeaderWrapper } from 'library/Card/Wrappers'; -import { useOverlay } from '@polkadot-cloud/react/hooks'; +import { useOverlay } from 'kits/Overlay/Provider'; import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; diff --git a/src/pages/Validators/Stats/ActiveValidators.tsx b/src/pages/Validators/Stats/ActiveValidators.tsx index 71145c4d9f..2edd3f3c2e 100644 --- a/src/pages/Validators/Stats/ActiveValidators.tsx +++ b/src/pages/Validators/Stats/ActiveValidators.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { greaterThanZero } from '@polkadot-cloud/utils'; +import { greaterThanZero } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useTranslation } from 'react-i18next'; import { useStaking } from 'contexts/Staking'; diff --git a/src/pages/Validators/Stats/TotalValidators.tsx b/src/pages/Validators/Stats/TotalValidators.tsx index 26b212a80f..5df4ca10b8 100644 --- a/src/pages/Validators/Stats/TotalValidators.tsx +++ b/src/pages/Validators/Stats/TotalValidators.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { greaterThanZero } from '@polkadot-cloud/utils'; +import { greaterThanZero } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useTranslation } from 'react-i18next'; import { Pie } from 'library/StatBoxList/Pie'; diff --git a/src/pages/Validators/context.tsx b/src/pages/Validators/context.tsx index d406d0bd89..b95209cc51 100644 --- a/src/pages/Validators/context.tsx +++ b/src/pages/Validators/context.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { extractUrlValue } from '@polkadot-cloud/utils'; +import { extractUrlValue } from '@w3ux/utils'; import type { ReactNode } from 'react'; import { createContext, useContext, useState } from 'react'; diff --git a/src/static/APIController/index.ts b/src/static/APIController/index.ts index 8b2e943226..295f80c94c 100644 --- a/src/static/APIController/index.ts +++ b/src/static/APIController/index.ts @@ -1,12 +1,12 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { ActiveEraInfo, BlockNumber } from '@polkadot/types/interfaces'; -import { makeCancelable, rmCommas, withTimeout } from '@polkadot-cloud/utils'; +import type { BlockNumber } from '@polkadot/types/interfaces'; +import { makeCancelable, rmCommas, withTimeout } from '@w3ux/utils'; import { ApiPromise, WsProvider } from '@polkadot/api'; import { ScProvider } from '@polkadot/rpc-provider/substrate-connect'; import { NetworkList, NetworksWithPagedRewards } from 'config/networks'; -import type { NetworkName } from 'types'; +import type { AnyApi, NetworkName } from 'types'; import type { APIConfig, ConnectionType, @@ -14,7 +14,6 @@ import type { EventStatus, SubstrateConnect, } from './types'; -import type { Option } from '@polkadot/types-codec'; import type { VoidFn } from '@polkadot/api/types'; import BigNumber from 'bignumber.js'; import { BalancesController } from 'static/BalancesController'; @@ -122,14 +121,18 @@ export class APIController { rpcEndpoint: string, options?: { initial?: boolean; + clearState?: boolean; } ) { // Only needed once: Initialize window online listeners. - if (options?.initial) { + if (options?.initial === true) { this.initOnlineEvents(); } else { - // Tidy up any previous connection. - await this.disconnect(); + // Tidy up any previous connection. If this initialization originated from an offline event, + // do not clear controller state - keep it persisted and attempt to reconnect. + await this.disconnect( + options?.clearState === undefined ? true : options.clearState + ); } // Add initial syncing items. @@ -151,8 +154,12 @@ export class APIController { if (type !== 'sc') { // Register connection attempt. this._connectAttempts++; - // Start connection attempt. + + // Start connection attempt monitoring. Attempts to re-initialize API if subscriptions are not + // instantiated. this.onMonitorConnect(config); + + // Start connection attempt with timeout. await withTimeout(this.getTimeout(), this.connect(config)); } else { // Light client: Connect without timeout logic. @@ -177,7 +184,9 @@ export class APIController { // If blocks are not being subscribed to, assume connection failed. if (!Object.keys(this._unsubs).length) { // Atempt api connection again. - this.initialize(config.network, config.type, config.rpcEndpoint); + this.initialize(config.network, config.type, config.rpcEndpoint, { + clearState: false, + }); } }, this.getTimeout()); }; @@ -277,7 +286,7 @@ export class APIController { // Fetch the active era. Needed for previous era and for queries below. const resultActiveEra = await this.api.query.staking.activeEra(); const activeEra = JSON.parse( - (resultActiveEra as Option).unwrapOrDefault().toString() + (resultActiveEra as AnyApi).unwrapOrDefault().toString() ); // Store active era. this.activeEra = { @@ -511,33 +520,31 @@ export class APIController { // // Also handles (re)subscribing to subscriptions that depend on active era. static subscribeActiveEra = async (): Promise => { - const unsub = await this.api.query.staking.activeEra( - (result: Option) => { - // determine activeEra: toString used as alternative to `toHuman`, that puts commas in - // numbers - const activeEra = JSON.parse(result.unwrapOrDefault().toString()); - // Store active era. - this.activeEra = { - index: new BigNumber(activeEra.index), - start: new BigNumber(activeEra.start), - }; - - // (Re)Subscribe to staking metrics `activeEra` has updated. - if (this._unsubs['stakingMetrics']) { - this._unsubs['stakingMetrics'](); - delete this._unsubs['stakingMetrics']; - } - this.subscribeStakingMetrics(); + const unsub = await this.api.query.staking.activeEra((result: AnyApi) => { + // determine activeEra: toString used as alternative to `toHuman`, that puts commas in + // numbers + const activeEra = JSON.parse(result.unwrapOrDefault().toString()); + // Store active era. + this.activeEra = { + index: new BigNumber(activeEra.index), + start: new BigNumber(activeEra.start), + }; - // NOTE: Sending `activeEra` to document as a strings. UI needs to parse values into - // BigNumber. - document.dispatchEvent( - new CustomEvent(`new-active-era`, { - detail: { activeEra }, - }) - ); + // (Re)Subscribe to staking metrics `activeEra` has updated. + if (this._unsubs['stakingMetrics']) { + this._unsubs['stakingMetrics'](); + delete this._unsubs['stakingMetrics']; } - ); + this.subscribeStakingMetrics(); + + // NOTE: Sending `activeEra` to document as a strings. UI needs to parse values into + // BigNumber. + document.dispatchEvent( + new CustomEvent(`new-active-era`, { + detail: { activeEra }, + }) + ); + }); this._unsubs['activeEra'] = unsub as unknown as VoidFn; }; @@ -649,7 +656,7 @@ export class APIController { ).isGreaterThanOrEqualTo(this._blockNumberVerify.minBlockNumber); if (!blocksSynced) { - await this.disconnect(); + await this.handleOfflineEvent(); } else { // Update block number verification data. this._blockNumberVerify.minBlockNumber = new BigNumber(this._blockNumber) @@ -703,13 +710,14 @@ export class APIController { }); window.addEventListener('online', () => { // Reconnect to the current API configuration. - this.initialize(this.network, this._connectionType, this._rpcEndpoint); + this.initialize(this.network, this._connectionType, this._rpcEndpoint, { + clearState: false, + }); }); } // Handle offline event static handleOfflineEvent = async () => { - await this.disconnect(); // Tell UI api has been disconnected from an offline event. this.dispatchEvent(this.ensureEventStatus('disconnected'), { err: 'offline-event', @@ -753,18 +761,24 @@ export class APIController { return 'error' as EventStatus; }; - // Disconnect gracefully from API. - static async disconnect() { + // Disconnect gracefully from API. Provide a `clearState` value to determine whether to clear all + // controller state - only should be done on network change. + static async disconnect(clearState = true) { // Clear block number verification interval. clearInterval(this._blockNumberVerify.interval); - // Clear persisted network data. - this.activeEra = defaultActiveEra; // Unsubscribe from all subscriptions. this.unsubscribe(); BalancesController.unsubscribe(); ActivePoolsController.unsubscribe(); + // Clear persisted data. + if (clearState) { + this.activeEra = defaultActiveEra; + BalancesController.resetState(); + ActivePoolsController.resetState(); + } + // Disconnect from provider and api. this.unsubscribeProvider(); this.provider?.disconnect(); diff --git a/src/static/ActivePoolsController/index.ts b/src/static/ActivePoolsController/index.ts index bd688ccf20..f56bfe4152 100644 --- a/src/static/ActivePoolsController/index.ts +++ b/src/static/ActivePoolsController/index.ts @@ -175,10 +175,13 @@ export class ActivePoolsController { Object.values(this._unsubs).forEach((unsub) => { unsub(); }); + this._unsubs = {}; + }; + + static resetState = (): void => { this.pools = []; this.activePools = {}; this.poolNominations = {}; - this._unsubs = {}; }; // ------------------------------------------------------ diff --git a/src/static/BalancesController/index.ts b/src/static/BalancesController/index.ts index abdc1d9654..be94374018 100644 --- a/src/static/BalancesController/index.ts +++ b/src/static/BalancesController/index.ts @@ -1,11 +1,10 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { VoidFn } from '@polkadot-cloud/react/types'; -import { rmCommas } from '@polkadot-cloud/utils'; +import { rmCommas } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { APIController } from 'static/APIController'; -import type { AnyApi, MaybeAddress } from 'types'; +import type { AnyApi, MaybeAddress, VoidFn } from 'types'; import type { ActiveBalance, Balances, @@ -293,9 +292,9 @@ export class BalancesController { const poolMembership = this.poolMemberships[address]; const nominations = this.nominations[address]; - // Account info has not synced yet. Note that `ledger` may not exist and therefore cannot be - // tested. if (balances === undefined) { + // Account info has not synced yet. Note that `ledger` may not exist and therefore cannot be + // tested. return undefined; } return { @@ -316,13 +315,17 @@ export class BalancesController { Object.values(this._unsubs).forEach((unsub) => { unsub(); }); + this._unsubs = {}; + }; + + // Reset all saved state. + static resetState = (): void => { this.accounts = []; this.ledgers = {}; this.balances = {}; this.payees = {}; this.poolMemberships = {}; this.nominations = {}; - this._unsubs = {}; }; // ------------------------------------------------------ diff --git a/src/static/IdentitiesController/index.ts b/src/static/IdentitiesController/index.ts index 1c3ee40096..f36876bc13 100644 --- a/src/static/IdentitiesController/index.ts +++ b/src/static/IdentitiesController/index.ts @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import type { AnyApi } from '@polkadot-cloud/react/types'; +import type { AnyApi } from 'types'; import { APIController } from '../APIController'; export class IdentitiesController { diff --git a/src/theme/accents/kusama-relay.css b/src/theme/accents/kusama-relay.css new file mode 100644 index 0000000000..4b276c9796 --- /dev/null +++ b/src/theme/accents/kusama-relay.css @@ -0,0 +1,22 @@ +/* Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +SPDX-License-Identifier: GPL-3.0-only */ + +.theme-kusama-relay { + --accent-color-primary-light: rgb(31 41 55); + --accent-color-primary-dark: rgb(126 131 141); + + --accent-color-secondary-light: #414c5c; + --accent-color-secondary-dark: rgb(141 144 150); + + --accent-color-tertiary-light: #e6e6e6; + --accent-color-tertiary-dark: #444444; + + --accent-color-stroke-light: #4c4b63; + --accent-color-stroke-dark: #d1d1db; + + --accent-color-transparent-light: rgb(51 51 51 / 5%); + --accent-color-transparent-dark: rgb(102 102 102 / 5%); + + --accent-color-pending-light: rgb(51 51 51 / 50%); + --accent-color-pending-dark: rgb(102 102 102 / 50%); +} diff --git a/src/theme/accents/polkadot-relay.css b/src/theme/accents/polkadot-relay.css new file mode 100644 index 0000000000..3d7c824141 --- /dev/null +++ b/src/theme/accents/polkadot-relay.css @@ -0,0 +1,22 @@ +/* Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +SPDX-License-Identifier: GPL-3.0-only */ + +.theme-polkadot-relay { + --accent-color-primary-light: rgb(211 48 121); + --accent-color-primary-dark: rgb(211 48 121); + + --accent-color-secondary-light: #552bbf; + --accent-color-secondary-dark: #6d39ee; + + --accent-color-tertiary-light: #dedae8; + --accent-color-tertiary-dark: #32264c; + + --accent-color-stroke-light: rgb(211 48 121); + --accent-color-stroke-dark: rgb(211 48 121); + + --accent-color-transparent-light: rgb(211 48 121 / 5%); + --accent-color-transparent-dark: rgb(211 48 121 / 5%); + + --accent-color-pending-light: rgb(211 48 121 / 50%); + --accent-color-pending-dark: rgb(211 48 121 / 50%); +} diff --git a/src/theme/accents/westend-relay.css b/src/theme/accents/westend-relay.css new file mode 100644 index 0000000000..5d53e5ff7d --- /dev/null +++ b/src/theme/accents/westend-relay.css @@ -0,0 +1,22 @@ +/* Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +SPDX-License-Identifier: GPL-3.0-only */ + +.theme-westend-relay { + --accent-color-primary-light: #da4e71; + --accent-color-primary-dark: #da4e71; + + --accent-color-secondary-light: #de6a50; + --accent-color-secondary-dark: #d7674e; + + --accent-color-tertiary-light: #e8d5d0; + --accent-color-tertiary-dark: #46302f; + + --accent-color-stroke-light: #da4e71; + --accent-color-stroke-dark: #da4e71; + + --accent-color-transparent-light: rgb(218 78 113 / 5%); + --accent-color-transparent-dark: rgb(218 78 113 / 5%); + + --accent-color-pending-light: rgb(218 78 113 / 50%); + --accent-color-pending-dark: rgb(218 78 113 / 50%); +} diff --git a/src/theme/index.scss b/src/theme/index.scss index da38eadfe2..c5041fd0a9 100644 --- a/src/theme/index.scss +++ b/src/theme/index.scss @@ -14,7 +14,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --button-spacing-small: 0.125rem; --button-spacing-large: 0.625rem; --button-font-size-small: 1rem; - --button-font-size-large: 1.15rem; + --button-font-size-large: 1.15rem; /* Transition variables. */ --transition-duration: 0.15s; diff --git a/src/types.ts b/src/types.ts index dc30705e4f..6f1737d730 100644 --- a/src/types.ts +++ b/src/types.ts @@ -3,7 +3,7 @@ import type { FC, FunctionComponent, ReactNode, SVGProps } from 'react'; import type { Theme } from 'contexts/Themes/types'; -import type { ExtensionInjected } from '@polkadot-cloud/react/types'; +import type { ExtensionInjected } from '@w3ux/react-connect-kit/types'; import type BigNumber from 'bignumber.js'; import type { NotificationItem } from 'static/NotificationsController/types'; import type { ActiveBalance } from 'contexts/Balances/types'; @@ -20,7 +20,9 @@ import type { CSSProperties } from 'styled-components'; declare global { interface Window { + walletExtension?: AnyJson; injectedWeb3?: Record; + opera?: boolean; } interface DocumentEventMap { notification: CustomEvent; diff --git a/src/workers/stakers.ts b/src/workers/stakers.ts index f28ad51a09..ee1dd2fbf3 100644 --- a/src/workers/stakers.ts +++ b/src/workers/stakers.ts @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { planckToUnit, rmCommas } from '@polkadot-cloud/utils'; +import { planckToUnit, rmCommas } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import type { ActiveAccountStaker, diff --git a/yarn.lock b/yarn.lock index 5952cd7eef..196cc2561e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -267,15 +267,6 @@ __metadata: languageName: node linkType: hard -"@chainsafe/metamask-polkadot-types@npm:^0.6.0": - version: 0.6.0 - resolution: "@chainsafe/metamask-polkadot-types@npm:0.6.0" - dependencies: - "@polkadot/api": "npm:^10.9.1" - checksum: fa1ffef61ec33bfd3020e7629efac0bfe62d164f4dcc6fa1efd9424a266f6ca94447688a1afd0d403c69b1e127082d4fd68dfedf35ef6c70fa2594dc96b6a359 - languageName: node - linkType: hard - "@dotlottie/common@npm:0.7.10": version: 0.7.10 resolution: "@dotlottie/common@npm:0.7.10" @@ -556,10 +547,10 @@ __metadata: languageName: node linkType: hard -"@eslint/js@npm:8.56.0": - version: 8.56.0 - resolution: "@eslint/js@npm:8.56.0" - checksum: 60b3a1cf240e2479cec9742424224465dc50e46d781da1b7f5ef240501b2d1202c225bd456207faac4b34a64f4765833345bc4ddffd00395e1db40fa8c426f5a +"@eslint/js@npm:8.57.0": + version: 8.57.0 + resolution: "@eslint/js@npm:8.57.0" + checksum: 9a518bb8625ba3350613903a6d8c622352ab0c6557a59fe6ff6178bf882bf57123f9d92aa826ee8ac3ee74b9c6203fe630e9ee00efb03d753962dcf65ee4bd94 languageName: node linkType: hard @@ -618,7 +609,7 @@ __metadata: languageName: node linkType: hard -"@humanwhocodes/config-array@npm:^0.11.13": +"@humanwhocodes/config-array@npm:^0.11.14": version: 0.11.14 resolution: "@humanwhocodes/config-array@npm:0.11.14" dependencies: @@ -996,7 +987,7 @@ __metadata: languageName: node linkType: hard -"@noble/hashes@npm:1.3.3, @noble/hashes@npm:^1.2.0, @noble/hashes@npm:^1.3.3": +"@noble/hashes@npm:1.3.3, @noble/hashes@npm:^1.2.0, @noble/hashes@npm:^1.3.1, @noble/hashes@npm:^1.3.3": version: 1.3.3 resolution: "@noble/hashes@npm:1.3.3" checksum: 23c020b33da4172c988e44100e33cd9f8f6250b68b43c467d3551f82070ebd9716e0d9d2347427aa3774c85934a35fa9ee6f026fca2117e3fa12db7bedae7668 @@ -1066,57 +1057,67 @@ __metadata: languageName: node linkType: hard -"@polkadot-cloud/assets@npm:^0.4.0": - version: 0.4.0 - resolution: "@polkadot-cloud/assets@npm:0.4.0" - checksum: 1dba0bae79339f74ae8244184affd1d6c2a5098de6af54c27e410b9b75c35c3c91ea6d4a302819dffbefe9061f7946f900718b508f03511744026a3056652a41 +"@polkadot-api/client@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0": + version: 0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0 + resolution: "@polkadot-api/client@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + dependencies: + "@polkadot-api/metadata-builders": "npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + "@polkadot-api/substrate-bindings": "npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + "@polkadot-api/substrate-client": "npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + "@polkadot-api/utils": "npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + peerDependencies: + rxjs: ">=7.8.0" + checksum: 7ba588f34412b3f8f4fead3053602b501451f69bce99d1fc3e62c51d326ec8f1cf93a243d935ca36cc475242c6250e8c528ff0dd446f0a0133a8cf2fe3f65553 languageName: node linkType: hard -"@polkadot-cloud/core@npm:^1.3.3": - version: 1.3.3 - resolution: "@polkadot-cloud/core@npm:1.3.3" - checksum: 9a44aac1247d8c15305bea68e306f48ccfc21d8770b590278d1bf0563a57cc6dcd3f61147695368a02a3cfe3ade8431077592f6131d717a917e31db594cc4ca9 +"@polkadot-api/json-rpc-provider-proxy@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0": + version: 0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0 + resolution: "@polkadot-api/json-rpc-provider-proxy@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + checksum: 18214275725db7c0a1aea1d1cc704e72601e3cef89f2a9a2e497d53857382433a675ce066fcba377d39570820d4e9ec305c10fa93ce287618bf117f7579d83d8 + languageName: node + linkType: hard + +"@polkadot-api/json-rpc-provider@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0": + version: 0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0 + resolution: "@polkadot-api/json-rpc-provider@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + checksum: c03d416e6b35c29b6fb4bfd3aa00b7ca7319d3053df74668a6d873ffb520985365f32907e01fcc0edb2c2083de1b64a164cc21346f3748798bac3a8d342c6414 languageName: node linkType: hard -"@polkadot-cloud/react@npm:^0.5.4": - version: 0.5.4 - resolution: "@polkadot-cloud/react@npm:0.5.4" +"@polkadot-api/metadata-builders@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0": + version: 0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0 + resolution: "@polkadot-api/metadata-builders@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" dependencies: - "@chainsafe/metamask-polkadot-adapter": "npm:^0.6.0" - "@chainsafe/metamask-polkadot-types": "npm:^0.6.0" - "@fortawesome/fontawesome-svg-core": "npm:^6.5.1" - "@fortawesome/free-brands-svg-icons": "npm:^6.5.1" - "@fortawesome/free-regular-svg-icons": "npm:^6.5.1" - "@fortawesome/free-solid-svg-icons": "npm:^6.5.1" - "@fortawesome/react-fontawesome": "npm:^0.2.0" - "@polkadot-cloud/assets": "npm:^0.4.0" - "@polkadot-cloud/core": "npm:^1.3.3" - "@polkadot-cloud/utils": "npm:^0.3.0" - "@polkadot/keyring": "npm:^12.6.2" - "@polkadot/util": "npm:^12.6.2" - "@polkadot/util-crypto": "npm:^12.6.2" - framer-motion: "npm:^11.0.5" - react-error-boundary: "npm:^4.0.12" - peerDependencies: - react: ^18.2.0 - react-dom: ^18.2.0 - checksum: b51703e950b4587392193e1bd63af359af99c5395f5cf381e29f9950465bc1359dda1638be5a6b482242c602c5fc9e20c00f44a4229df862e602faa8fb3be384 + "@polkadot-api/substrate-bindings": "npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + "@polkadot-api/utils": "npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + checksum: 3676319de74d93106a391c94d758678e034c5463e29a0b6c30f79fab5c085ddc7a86b4b142d98a16900bc3f6e02a7c326ced9179861d1c052feee67a4bd80da8 languageName: node linkType: hard -"@polkadot-cloud/utils@npm:^0.3.0": - version: 0.3.0 - resolution: "@polkadot-cloud/utils@npm:0.3.0" +"@polkadot-api/substrate-bindings@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0": + version: 0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0 + resolution: "@polkadot-api/substrate-bindings@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" dependencies: - "@polkadot/keyring": "npm:^12.6.2" - "@polkadot/util": "npm:^12.6.2" - bignumber.js: "npm:^9.1.1" - peerDependencies: - "@polkadot/keyring": ^12.6.2 - "@polkadot/util": ^12.6.2 - checksum: 82a1056dbefa5dd5f53f36efdb45fb9e269664ec9e7d31076f46ad5e5077f9ee00812d8033636dbde8a0d936f51a66798c854d338967e255e6847cb1fbf6c0cd + "@noble/hashes": "npm:^1.3.1" + "@polkadot-api/utils": "npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + "@scure/base": "npm:^1.1.1" + scale-ts: "npm:^1.4.3" + checksum: 266ce8f99e70f39a400d9b76e44879311eb73d251e68fd2dcfe31587951106b725343952282e0b85eedb8a6d3c4671aeccb59168538033e4930e76c06a850bca + languageName: node + linkType: hard + +"@polkadot-api/substrate-client@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0": + version: 0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0 + resolution: "@polkadot-api/substrate-client@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + checksum: 3b154a9906ada19c756985673663b8426464fee378dfba17be3746a5d2ac65bf07aa34a3d28c58b05fff6ab0388f3be3ecc5653b060e8d456f277c16ae7f51d5 + languageName: node + linkType: hard + +"@polkadot-api/utils@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0": + version: 0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0 + resolution: "@polkadot-api/utils@npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + checksum: 7b26956e2cd613e370531bd9a41c62bbf40d2d23e704257ca48bcf09d97bf328a8a23e55829ecc59ad8be88929360dc514bdae5e9c2192be7e79e4ecb376c4b7 languageName: node linkType: hard @@ -1135,6 +1136,21 @@ __metadata: languageName: node linkType: hard +"@polkadot/api-augment@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/api-augment@npm:10.11.3" + dependencies: + "@polkadot/api-base": "npm:10.11.3" + "@polkadot/rpc-augment": "npm:10.11.3" + "@polkadot/types": "npm:10.11.3" + "@polkadot/types-augment": "npm:10.11.3" + "@polkadot/types-codec": "npm:10.11.3" + "@polkadot/util": "npm:^12.6.2" + tslib: "npm:^2.6.2" + checksum: 07b71ba01b3e4d4a2f5bee5b32a2f646194e8190f35c301c690eb232da28c2b92e63c5e6bd91026bebf8ea07249943614dbe7ac4fb5d0da2987b901797054ead + languageName: node + linkType: hard + "@polkadot/api-base@npm:10.11.2": version: 10.11.2 resolution: "@polkadot/api-base@npm:10.11.2" @@ -1148,6 +1164,19 @@ __metadata: languageName: node linkType: hard +"@polkadot/api-base@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/api-base@npm:10.11.3" + dependencies: + "@polkadot/rpc-core": "npm:10.11.3" + "@polkadot/types": "npm:10.11.3" + "@polkadot/util": "npm:^12.6.2" + rxjs: "npm:^7.8.1" + tslib: "npm:^2.6.2" + checksum: 56185b81780c35eb0b9f24b9d1e6c1947274a20005ea4146f931c360f44a136f8a33afc4b1c304e3ce59cecb944ec1201b7339bfe3ccfc714c112ef744fc79df + languageName: node + linkType: hard + "@polkadot/api-derive@npm:10.11.2": version: 10.11.2 resolution: "@polkadot/api-derive@npm:10.11.2" @@ -1166,7 +1195,25 @@ __metadata: languageName: node linkType: hard -"@polkadot/api@npm:10.11.2, @polkadot/api@npm:^10.11.1, @polkadot/api@npm:^10.11.2, @polkadot/api@npm:^10.9.1": +"@polkadot/api-derive@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/api-derive@npm:10.11.3" + dependencies: + "@polkadot/api": "npm:10.11.3" + "@polkadot/api-augment": "npm:10.11.3" + "@polkadot/api-base": "npm:10.11.3" + "@polkadot/rpc-core": "npm:10.11.3" + "@polkadot/types": "npm:10.11.3" + "@polkadot/types-codec": "npm:10.11.3" + "@polkadot/util": "npm:^12.6.2" + "@polkadot/util-crypto": "npm:^12.6.2" + rxjs: "npm:^7.8.1" + tslib: "npm:^2.6.2" + checksum: cda92857a36cb2785fa775829f25d2812cd9260079cf9e38b57a49d86b36e980232d4be5ab78c0f55c53c50195c63f8c55fca1ef37248a9fc797069c592b6574 + languageName: node + linkType: hard + +"@polkadot/api@npm:10.11.2, @polkadot/api@npm:^10.11.1, @polkadot/api@npm:^10.9.1": version: 10.11.2 resolution: "@polkadot/api@npm:10.11.2" dependencies: @@ -1191,6 +1238,31 @@ __metadata: languageName: node linkType: hard +"@polkadot/api@npm:10.11.3, @polkadot/api@npm:^10.11.3": + version: 10.11.3 + resolution: "@polkadot/api@npm:10.11.3" + dependencies: + "@polkadot/api-augment": "npm:10.11.3" + "@polkadot/api-base": "npm:10.11.3" + "@polkadot/api-derive": "npm:10.11.3" + "@polkadot/keyring": "npm:^12.6.2" + "@polkadot/rpc-augment": "npm:10.11.3" + "@polkadot/rpc-core": "npm:10.11.3" + "@polkadot/rpc-provider": "npm:10.11.3" + "@polkadot/types": "npm:10.11.3" + "@polkadot/types-augment": "npm:10.11.3" + "@polkadot/types-codec": "npm:10.11.3" + "@polkadot/types-create": "npm:10.11.3" + "@polkadot/types-known": "npm:10.11.3" + "@polkadot/util": "npm:^12.6.2" + "@polkadot/util-crypto": "npm:^12.6.2" + eventemitter3: "npm:^5.0.1" + rxjs: "npm:^7.8.1" + tslib: "npm:^2.6.2" + checksum: abaa246f403c298164e21f39eaf8a9f632e93f1a539a1b16fb6b4cefaa5c587b0dca34a76ad3b809735c6e19502a1559373f9258cac9d618734b3094bcc7cfcf + languageName: node + linkType: hard + "@polkadot/extension-inject@npm:^0.46.5": version: 0.46.6 resolution: "@polkadot/extension-inject@npm:0.46.6" @@ -1247,6 +1319,19 @@ __metadata: languageName: node linkType: hard +"@polkadot/rpc-augment@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/rpc-augment@npm:10.11.3" + dependencies: + "@polkadot/rpc-core": "npm:10.11.3" + "@polkadot/types": "npm:10.11.3" + "@polkadot/types-codec": "npm:10.11.3" + "@polkadot/util": "npm:^12.6.2" + tslib: "npm:^2.6.2" + checksum: 0b66e3ca87d1ca111226a698456d3e3fa177cdda2435658313751bd32bce2783bff9dcc6c92897e949d53b24c7ebbd214a22417f772e535c882386be81c86804 + languageName: node + linkType: hard + "@polkadot/rpc-core@npm:10.11.2": version: 10.11.2 resolution: "@polkadot/rpc-core@npm:10.11.2" @@ -1261,7 +1346,21 @@ __metadata: languageName: node linkType: hard -"@polkadot/rpc-provider@npm:10.11.2, @polkadot/rpc-provider@npm:^10.11.1, @polkadot/rpc-provider@npm:^10.11.2": +"@polkadot/rpc-core@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/rpc-core@npm:10.11.3" + dependencies: + "@polkadot/rpc-augment": "npm:10.11.3" + "@polkadot/rpc-provider": "npm:10.11.3" + "@polkadot/types": "npm:10.11.3" + "@polkadot/util": "npm:^12.6.2" + rxjs: "npm:^7.8.1" + tslib: "npm:^2.6.2" + checksum: 673ba1b390a7cfb3a7357919be4ee0ee8ed0099580ae527395d40f60547caa6a8f3ca6b71c3480a82be7353d976252e29d066bb2593bf999c1ed40bdb420f0c7 + languageName: node + linkType: hard + +"@polkadot/rpc-provider@npm:10.11.2, @polkadot/rpc-provider@npm:^10.11.1": version: 10.11.2 resolution: "@polkadot/rpc-provider@npm:10.11.2" dependencies: @@ -1285,6 +1384,30 @@ __metadata: languageName: node linkType: hard +"@polkadot/rpc-provider@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/rpc-provider@npm:10.11.3" + dependencies: + "@polkadot/keyring": "npm:^12.6.2" + "@polkadot/types": "npm:10.11.3" + "@polkadot/types-support": "npm:10.11.3" + "@polkadot/util": "npm:^12.6.2" + "@polkadot/util-crypto": "npm:^12.6.2" + "@polkadot/x-fetch": "npm:^12.6.2" + "@polkadot/x-global": "npm:^12.6.2" + "@polkadot/x-ws": "npm:^12.6.2" + "@substrate/connect": "npm:0.8.7" + eventemitter3: "npm:^5.0.1" + mock-socket: "npm:^9.3.1" + nock: "npm:^13.5.0" + tslib: "npm:^2.6.2" + dependenciesMeta: + "@substrate/connect": + optional: true + checksum: 36876480455493f65e86172c3633d12e36032b64f01b40ada766a79c135e9ffbdbe606bab3f2ecf2e8c2195e176093649e885419d8bc4c4bfe7361a7d3cb3304 + languageName: node + linkType: hard + "@polkadot/types-augment@npm:10.11.2, @polkadot/types-augment@npm:^10.9.1": version: 10.11.2 resolution: "@polkadot/types-augment@npm:10.11.2" @@ -1297,6 +1420,18 @@ __metadata: languageName: node linkType: hard +"@polkadot/types-augment@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/types-augment@npm:10.11.3" + dependencies: + "@polkadot/types": "npm:10.11.3" + "@polkadot/types-codec": "npm:10.11.3" + "@polkadot/util": "npm:^12.6.2" + tslib: "npm:^2.6.2" + checksum: 6876cd76cfb1b663409035364059940fe4bbf7b5c641daff7b3b62e90440781978adc6f8cdba260879dffebfccc854fa4577573d3acb84130b92bd1e3fb46c78 + languageName: node + linkType: hard + "@polkadot/types-codec@npm:10.11.2": version: 10.11.2 resolution: "@polkadot/types-codec@npm:10.11.2" @@ -1308,6 +1443,17 @@ __metadata: languageName: node linkType: hard +"@polkadot/types-codec@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/types-codec@npm:10.11.3" + dependencies: + "@polkadot/util": "npm:^12.6.2" + "@polkadot/x-bigint": "npm:^12.6.2" + tslib: "npm:^2.6.2" + checksum: f0cf3adb28fdc7cee19af0748431516434a386926117a0bda5fea8eddf5b6b92576abe728ff8cf00162b67d55743c5d090e21ba80147894cace8a8dc5a96ef4a + languageName: node + linkType: hard + "@polkadot/types-create@npm:10.11.2": version: 10.11.2 resolution: "@polkadot/types-create@npm:10.11.2" @@ -1319,6 +1465,17 @@ __metadata: languageName: node linkType: hard +"@polkadot/types-create@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/types-create@npm:10.11.3" + dependencies: + "@polkadot/types-codec": "npm:10.11.3" + "@polkadot/util": "npm:^12.6.2" + tslib: "npm:^2.6.2" + checksum: 103a63d65df154a47cb9174828fe2e86169d3a99fdf402457f13b45df9a99ae3cc5705bf2aaf72a822484a9efd3336c6a80f93add5eaf77752b4713a00a00055 + languageName: node + linkType: hard + "@polkadot/types-known@npm:10.11.2": version: 10.11.2 resolution: "@polkadot/types-known@npm:10.11.2" @@ -1333,6 +1490,20 @@ __metadata: languageName: node linkType: hard +"@polkadot/types-known@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/types-known@npm:10.11.3" + dependencies: + "@polkadot/networks": "npm:^12.6.2" + "@polkadot/types": "npm:10.11.3" + "@polkadot/types-codec": "npm:10.11.3" + "@polkadot/types-create": "npm:10.11.3" + "@polkadot/util": "npm:^12.6.2" + tslib: "npm:^2.6.2" + checksum: ad0cb3edbb2ce03ea501eeffe588361d4bb4a3cc959deb8644ae506ae683468650b0982bb98c3be407d395466437e5f6eb7d02ee6ea4266f5843660bd76a5160 + languageName: node + linkType: hard + "@polkadot/types-support@npm:10.11.2": version: 10.11.2 resolution: "@polkadot/types-support@npm:10.11.2" @@ -1343,6 +1514,16 @@ __metadata: languageName: node linkType: hard +"@polkadot/types-support@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/types-support@npm:10.11.3" + dependencies: + "@polkadot/util": "npm:^12.6.2" + tslib: "npm:^2.6.2" + checksum: ff2eb5d0b835257f41c664bc4a233c5c6523c72c6e73bd05d9e52fcbc6c057ba81dee58b0ef395e67e4e723e767867a4993092e24b8c999521faed546626afa8 + languageName: node + linkType: hard + "@polkadot/types@npm:10.11.2, @polkadot/types@npm:^10.11.1": version: 10.11.2 resolution: "@polkadot/types@npm:10.11.2" @@ -1359,6 +1540,22 @@ __metadata: languageName: node linkType: hard +"@polkadot/types@npm:10.11.3": + version: 10.11.3 + resolution: "@polkadot/types@npm:10.11.3" + dependencies: + "@polkadot/keyring": "npm:^12.6.2" + "@polkadot/types-augment": "npm:10.11.3" + "@polkadot/types-codec": "npm:10.11.3" + "@polkadot/types-create": "npm:10.11.3" + "@polkadot/util": "npm:^12.6.2" + "@polkadot/util-crypto": "npm:^12.6.2" + rxjs: "npm:^7.8.1" + tslib: "npm:^2.6.2" + checksum: 498789cb10377d33f183fadc974b74b5f15f52b4a5b3c69b3a19fbc2c42d87e4298889f38321c02148047b77594d29fa2835fb2c0488d6d3d10dab870a93a175 + languageName: node + linkType: hard + "@polkadot/util-crypto@npm:12.6.2, @polkadot/util-crypto@npm:^12.6.1, @polkadot/util-crypto@npm:^12.6.2": version: 12.6.2 resolution: "@polkadot/util-crypto@npm:12.6.2" @@ -1564,10 +1761,10 @@ __metadata: languageName: node linkType: hard -"@remix-run/router@npm:1.15.1": - version: 1.15.1 - resolution: "@remix-run/router@npm:1.15.1" - checksum: 2f84d998defe9943a40fd5bf8794ee6ede521116ff24275cc2294830adb039ef86e34dbdd6555300600016fd8a58a244d4f4df73ff0b2cec7bd749f63d172587 +"@remix-run/router@npm:1.15.2": + version: 1.15.2 + resolution: "@remix-run/router@npm:1.15.2" + checksum: 7bcad98a91e8a2e822f3776360d284bee48f9ba2d3b7ee2235f95b8701da2f06de3db880a205c4fd4e78c9198eaf6272229a2e66574a8cf563befd428fdefeee languageName: node linkType: hard @@ -1745,6 +1942,20 @@ __metadata: languageName: node linkType: hard +"@substrate/connect-extension-protocol@npm:^2.0.0": + version: 2.0.0 + resolution: "@substrate/connect-extension-protocol@npm:2.0.0" + checksum: 14a7c96b49e686dbc710214abe0fe312a366011a3521952f2317684e2463d75d54080fe358bdd8ff8d972c9de7f0e7f508dfc5210cf694574943dd8ecc490e89 + languageName: node + linkType: hard + +"@substrate/connect-known-chains@npm:^1.0.7": + version: 1.0.9 + resolution: "@substrate/connect-known-chains@npm:1.0.9" + checksum: c83c2f8b5e92a0832cb6581c6f5c43c082707cf0588fd0ef337e5b305f1f3961ee75526f855585f009026af2d770ed1da89e7da49403418f5f1308b86feef1ab + languageName: node + linkType: hard + "@substrate/connect@npm:0.7.35": version: 0.7.35 resolution: "@substrate/connect@npm:0.7.35" @@ -1755,6 +1966,35 @@ __metadata: languageName: node linkType: hard +"@substrate/connect@npm:0.8.7": + version: 0.8.7 + resolution: "@substrate/connect@npm:0.8.7" + dependencies: + "@substrate/connect-extension-protocol": "npm:^2.0.0" + "@substrate/connect-known-chains": "npm:^1.0.7" + "@substrate/light-client-extension-helpers": "npm:^0.0.3" + smoldot: "npm:2.0.21" + checksum: 351e23f83e173157cbe3d89fd62d3ad353d0392a6a4e25d561ab3990db450adfbe8dffddf1359ec7e9f37059782e40b322e0e3e6b51e5e70a79cb76e7d189d66 + languageName: node + linkType: hard + +"@substrate/light-client-extension-helpers@npm:^0.0.3": + version: 0.0.3 + resolution: "@substrate/light-client-extension-helpers@npm:0.0.3" + dependencies: + "@polkadot-api/client": "npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + "@polkadot-api/json-rpc-provider": "npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + "@polkadot-api/json-rpc-provider-proxy": "npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + "@polkadot-api/substrate-client": "npm:0.0.1-12c4b0432a814086c3c1a3b8052b31c72c2c9ad3.1.0" + "@substrate/connect-extension-protocol": "npm:^2.0.0" + "@substrate/connect-known-chains": "npm:^1.0.7" + rxjs: "npm:^7.8.1" + peerDependencies: + smoldot: 2.x + checksum: a65649144656d5222a7f8bfd1d4821ec73182c6ed6beb05fbeb56ea58918034a77184acae23abb13982a76394450abf50efb5e8ebeedaebd48dfc7439bdb1b1b + languageName: node + linkType: hard + "@substrate/ss58-registry@npm:^1.44.0": version: 1.46.0 resolution: "@substrate/ss58-registry@npm:1.46.0" @@ -2155,14 +2395,14 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:^18.2.57": - version: 18.2.57 - resolution: "@types/react@npm:18.2.57" +"@types/react@npm:^18.2.61": + version: 18.2.61 + resolution: "@types/react@npm:18.2.61" dependencies: "@types/prop-types": "npm:*" "@types/scheduler": "npm:*" csstype: "npm:^3.0.2" - checksum: d5ed2f04c069c591e41ef1bea5b70f89dc7a4edff2254c4df801ddaa21b43b2aa70c106c049b9b6736f98f5afe66576d0e75a9e47c7044f2660b1744ff64f535 + checksum: a03fbb6ca8108bbccf12ac616e77e1457ae9324040c4a5d1293caaa62c187300b4eb38ec78c4724fb43d40d4c6fb909803db057c8b69ae441e2aab7b2acdc29a languageName: node linkType: hard @@ -2205,15 +2445,15 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/eslint-plugin@npm:^7.0.2": - version: 7.0.2 - resolution: "@typescript-eslint/eslint-plugin@npm:7.0.2" +"@typescript-eslint/eslint-plugin@npm:^7.1.0": + version: 7.1.0 + resolution: "@typescript-eslint/eslint-plugin@npm:7.1.0" dependencies: "@eslint-community/regexpp": "npm:^4.5.1" - "@typescript-eslint/scope-manager": "npm:7.0.2" - "@typescript-eslint/type-utils": "npm:7.0.2" - "@typescript-eslint/utils": "npm:7.0.2" - "@typescript-eslint/visitor-keys": "npm:7.0.2" + "@typescript-eslint/scope-manager": "npm:7.1.0" + "@typescript-eslint/type-utils": "npm:7.1.0" + "@typescript-eslint/utils": "npm:7.1.0" + "@typescript-eslint/visitor-keys": "npm:7.1.0" debug: "npm:^4.3.4" graphemer: "npm:^1.4.0" ignore: "npm:^5.2.4" @@ -2226,44 +2466,44 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 76727ad48f01c1bb4ef37690e7ed12754930ce3a4bbe5dcd52f24d42f4625fc0b151db8189947f3956b4a09a562eb2da683ff65b57a13a15426eee3b680f80a5 + checksum: e5644a987969cbb614bbf766b6bf51341e123c774953690548610147eae0041d70e48ef42be97b68a6e2f5ed9aae37fe040e8054d35bb0568c14194ba564b2d8 languageName: node linkType: hard -"@typescript-eslint/parser@npm:^7.0.2": - version: 7.0.2 - resolution: "@typescript-eslint/parser@npm:7.0.2" +"@typescript-eslint/parser@npm:^7.1.0": + version: 7.1.0 + resolution: "@typescript-eslint/parser@npm:7.1.0" dependencies: - "@typescript-eslint/scope-manager": "npm:7.0.2" - "@typescript-eslint/types": "npm:7.0.2" - "@typescript-eslint/typescript-estree": "npm:7.0.2" - "@typescript-eslint/visitor-keys": "npm:7.0.2" + "@typescript-eslint/scope-manager": "npm:7.1.0" + "@typescript-eslint/types": "npm:7.1.0" + "@typescript-eslint/typescript-estree": "npm:7.1.0" + "@typescript-eslint/visitor-keys": "npm:7.1.0" debug: "npm:^4.3.4" peerDependencies: eslint: ^8.56.0 peerDependenciesMeta: typescript: optional: true - checksum: acffdbea0bba24398ba8bd1ccf5b59438bc093e41d7a325019383094f39d676b5cf2f5963bfa5e332e54728e5b9e14be3984752ee91da6f0e1a3e0b613422d0e + checksum: 8fcbfc8c0c86abb750173096e7ca09e1cd44aba3f6115bdb94ffb6b409b86ee23526e9d5a44935b69a6be2385893e66d8e55d92063206028dc48f70d379afcab languageName: node linkType: hard -"@typescript-eslint/scope-manager@npm:7.0.2": - version: 7.0.2 - resolution: "@typescript-eslint/scope-manager@npm:7.0.2" +"@typescript-eslint/scope-manager@npm:7.1.0": + version: 7.1.0 + resolution: "@typescript-eslint/scope-manager@npm:7.1.0" dependencies: - "@typescript-eslint/types": "npm:7.0.2" - "@typescript-eslint/visitor-keys": "npm:7.0.2" - checksum: 60241a0dbed7605133b6242d7fc172e8ee649e1033b8a179cebe3e21c60e0c08c12679fd37644cfef57c95a5d75a3927afc9d6365a5f9684c1d043285db23c66 + "@typescript-eslint/types": "npm:7.1.0" + "@typescript-eslint/visitor-keys": "npm:7.1.0" + checksum: 2fd167730bbe984343ab94739b00bd82e8cdeea9e63674b099cc5c89b420b28dbf79f40dab48022dc717db8d14ae6ee2739e0fcbdcc0321bc9da5f2602b55788 languageName: node linkType: hard -"@typescript-eslint/type-utils@npm:7.0.2": - version: 7.0.2 - resolution: "@typescript-eslint/type-utils@npm:7.0.2" +"@typescript-eslint/type-utils@npm:7.1.0": + version: 7.1.0 + resolution: "@typescript-eslint/type-utils@npm:7.1.0" dependencies: - "@typescript-eslint/typescript-estree": "npm:7.0.2" - "@typescript-eslint/utils": "npm:7.0.2" + "@typescript-eslint/typescript-estree": "npm:7.1.0" + "@typescript-eslint/utils": "npm:7.1.0" debug: "npm:^4.3.4" ts-api-utils: "npm:^1.0.1" peerDependencies: @@ -2271,23 +2511,23 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: fa7957aa65cb0d7366c7c9be94e45cc2f1ebe9981cbf393054b505c6d555a01b2a2fe7cd1254d668f30183a275032f909186ce0b9f213f64b776bd7872144a6e + checksum: 3e3eea6c03692a643bf4ed11646b0679c6ff13baf1647d97e793f3d8c3adb83061e27a17c2a1470166a3c6c444b974bebc8096d36e0b4b3c36c289ff38bcfc9b languageName: node linkType: hard -"@typescript-eslint/types@npm:7.0.2": - version: 7.0.2 - resolution: "@typescript-eslint/types@npm:7.0.2" - checksum: 5f95266cc2cd0e6cf1239dcd36b53c7d98b01ba12c61947316f0d879df87b912b4d23f0796324e2ab0fb8780503a338da41a4695fa91d90392b6c6aca5239fa7 +"@typescript-eslint/types@npm:7.1.0": + version: 7.1.0 + resolution: "@typescript-eslint/types@npm:7.1.0" + checksum: 095cde3e773b7605c5e0c86642002768ced09e94def7f3c6f49a67863f47d7c8ae15413a4ab1a2407f779d1b5ede5fb3000bc98b1cf9ed7ec938acc38cac89e7 languageName: node linkType: hard -"@typescript-eslint/typescript-estree@npm:7.0.2": - version: 7.0.2 - resolution: "@typescript-eslint/typescript-estree@npm:7.0.2" +"@typescript-eslint/typescript-estree@npm:7.1.0": + version: 7.1.0 + resolution: "@typescript-eslint/typescript-estree@npm:7.1.0" dependencies: - "@typescript-eslint/types": "npm:7.0.2" - "@typescript-eslint/visitor-keys": "npm:7.0.2" + "@typescript-eslint/types": "npm:7.1.0" + "@typescript-eslint/visitor-keys": "npm:7.1.0" debug: "npm:^4.3.4" globby: "npm:^11.1.0" is-glob: "npm:^4.0.3" @@ -2297,34 +2537,34 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 2f6795b05fced9f2e0887f6735aa1a0b20516952792e4be13cd94c5e56db8ad013ba27aeb56f89fedff8b7af587f854482f00aac75b418611c74e42169c29aeb + checksum: 063845dc8526dfda722d1b00960443a5158d1bce2bc39bf49bd353f33f42aa30116105a87b55a04df3eaef99c0d1c13fb987c53848dff43de6152c66dd3ba41c languageName: node linkType: hard -"@typescript-eslint/utils@npm:7.0.2": - version: 7.0.2 - resolution: "@typescript-eslint/utils@npm:7.0.2" +"@typescript-eslint/utils@npm:7.1.0": + version: 7.1.0 + resolution: "@typescript-eslint/utils@npm:7.1.0" dependencies: "@eslint-community/eslint-utils": "npm:^4.4.0" "@types/json-schema": "npm:^7.0.12" "@types/semver": "npm:^7.5.0" - "@typescript-eslint/scope-manager": "npm:7.0.2" - "@typescript-eslint/types": "npm:7.0.2" - "@typescript-eslint/typescript-estree": "npm:7.0.2" + "@typescript-eslint/scope-manager": "npm:7.1.0" + "@typescript-eslint/types": "npm:7.1.0" + "@typescript-eslint/typescript-estree": "npm:7.1.0" semver: "npm:^7.5.4" peerDependencies: eslint: ^8.56.0 - checksum: b4ae9a36393c92b332e99d70219d1ee056271261f7433924db804e5f06d97ca60408b9c7a655afce8a851982e7153243a625d6cc76fea764f767f96c8f3e16da + checksum: 3fefd51307d0e294462106c57c4b12cd610bfe1bdcc5ca0142bfac6a5d0d37c18d14be5ec89740eb85515f5512f45219a6048df0efccd457e96f9d0612af4abf languageName: node linkType: hard -"@typescript-eslint/visitor-keys@npm:7.0.2": - version: 7.0.2 - resolution: "@typescript-eslint/visitor-keys@npm:7.0.2" +"@typescript-eslint/visitor-keys@npm:7.1.0": + version: 7.1.0 + resolution: "@typescript-eslint/visitor-keys@npm:7.1.0" dependencies: - "@typescript-eslint/types": "npm:7.0.2" + "@typescript-eslint/types": "npm:7.1.0" eslint-visitor-keys: "npm:^3.4.1" - checksum: 4146d1ad6ce9374e6b5a75677fc709816bdc5fe324b1a857405f21dad23bb28c79cfd0555bc2a01c4af1d9e9ee81ff5e29ec41cc9d05b0b1101cc4264e7f21d1 + checksum: 9015a10e6ee2a99fc99e0f7a3f274496a813c2c239e868f29e7c0da919c825fe192fe21d3410c43d8a801e8186b51f08ef06523d2c3010570d893a1486ac293d languageName: node linkType: hard @@ -2400,6 +2640,96 @@ __metadata: languageName: node linkType: hard +"@w3ux/extension-assets@npm:0.1.0": + version: 0.1.0 + resolution: "@w3ux/extension-assets@npm:0.1.0" + peerDependencies: + react: ^18 + checksum: c6b2d1de15322182985d1b654497ed89caccf0f440fdc7fe5ca87a64e4b4d28752ec691c2983eb0e496e81412cbb1f7114097482ccd58f89f34f29300243da96 + languageName: node + linkType: hard + +"@w3ux/extension-assets@npm:^0.0.14": + version: 0.0.14 + resolution: "@w3ux/extension-assets@npm:0.0.14" + checksum: 2080f571696ff4c4d5636b31d52a3556cc5253ca46ff3184004a4fcf2d0acf1f880b7db9675ca40bc884d4ab8c9247727c5a6209a54adec529fcd87c0d60db6e + languageName: node + linkType: hard + +"@w3ux/hooks@npm:^0.0.2": + version: 0.0.2 + resolution: "@w3ux/hooks@npm:0.0.2" + checksum: 7089247b5487d23dd5df194e1aaa2ea730c82eadf774dc55175fc1e52583ec1c94af43d0c275b1cb31c1bbe7bfd4c7844ba78258dece143c7db8e594796a1a0b + languageName: node + linkType: hard + +"@w3ux/hooks@npm:^0.0.3": + version: 0.0.3 + resolution: "@w3ux/hooks@npm:0.0.3" + peerDependencies: + react: ^18 + checksum: 11c697be0485111b91bc26cf7629c1ddc8e4f86a8c0f84f2e5d9ecff9cb3d2ddb86ddff5645f1f32b22077473981313fa1c63c0625783793f4e7e66ae20d4b2b + languageName: node + linkType: hard + +"@w3ux/react-connect-kit@npm:^0.0.4": + version: 0.0.4 + resolution: "@w3ux/react-connect-kit@npm:0.0.4" + dependencies: + "@chainsafe/metamask-polkadot-adapter": "npm:^0.6.0" + "@polkadot/util": "npm:^12.6.2" + "@w3ux/extension-assets": "npm:^0.0.14" + "@w3ux/hooks": "npm:^0.0.2" + "@w3ux/utils": "npm:^0.0.1" + checksum: 52cf5b13c198f55832b90aff32923d2de0c01582098a2cfbae4280b0b72978f1c0a564d5d179cdd55993eef2cabce4548265247ac8326cce705b73d544f89c24 + languageName: node + linkType: hard + +"@w3ux/react-odometer@npm:^0.0.3": + version: 0.0.3 + resolution: "@w3ux/react-odometer@npm:0.0.3" + checksum: 87ca9ea19ad49eaca5c22016804bbf1d1b6864c93828499a948bfeac6607bc682dfb722d476dd16e7f3d4d821807ff54420a2194643fcc8ff1bc094dd0d9506e + languageName: node + linkType: hard + +"@w3ux/react-polkicon@npm:^0.0.2": + version: 0.0.2 + resolution: "@w3ux/react-polkicon@npm:0.0.2" + dependencies: + "@polkadot/util": "npm:^12.6.2" + "@w3ux/utils": "npm:0.0.1" + framer-motion: "npm:^11.0.6" + checksum: f1566d84f9991a64bd97aabec1475a876c86017070590bf111779c6f2baa1194818d6162416758368a8902cbeb4c8da7ca8998a0a8251d161a79f75a77b952cc + languageName: node + linkType: hard + +"@w3ux/utils@npm:0.0.1, @w3ux/utils@npm:^0.0.1": + version: 0.0.1 + resolution: "@w3ux/utils@npm:0.0.1" + checksum: a14823f3f0e3776a472ccaf6838745af077191fe3a004ceea3936c4d5767189de96eba9752b9cf8eb56a1aa24e38c6a05f673748a955671be761cb713108b8c4 + languageName: node + linkType: hard + +"@w3ux/utils@npm:^0.0.2": + version: 0.0.2 + resolution: "@w3ux/utils@npm:0.0.2" + dependencies: + "@polkadot/keyring": "npm:^12.6.2" + "@polkadot/util": "npm:^12.6.2" + bignumber.js: "npm:^9.1.1" + checksum: 33ce48775fd806313363d029c11c34dbe269d2f93aa64e2bc0229ce26383277d6bc0d8e2452b4df2e31d87a41020289a8cf4bd6f3efc4b089387247455b3426d + languageName: node + linkType: hard + +"@w3ux/validator-assets@npm:^0.0.4": + version: 0.0.4 + resolution: "@w3ux/validator-assets@npm:0.0.4" + peerDependencies: + react: ^18 + checksum: 407bdafee9db47b3e1b09e09c7e0808795442f82782c5cf297c4b848a48df5b4c91c29302906169a14d74ffffd63706fcc66731dbe22d2f25bfb0133152849bb + languageName: node + linkType: hard + "@zondax/ledger-substrate@npm:^0.41.3": version: 0.41.3 resolution: "@zondax/ledger-substrate@npm:0.41.3" @@ -3000,12 +3330,12 @@ __metadata: languageName: node linkType: hard -"chart.js@npm:^4.4.1": - version: 4.4.1 - resolution: "chart.js@npm:4.4.1" +"chart.js@npm:^4.4.2": + version: 4.4.2 + resolution: "chart.js@npm:4.4.2" dependencies: "@kurkle/color": "npm:^0.3.0" - checksum: ef0cd10118bfa66695b109cbb331be99193b19f1ac2bb7f35f8c71aa45a355f17d1c87d5fa6727a2b026ace4c7fa8ab557e9f61a9f13f1f39f58500bbd0c26d1 + checksum: 4233bdc3cce9e4d5aca575f8ef9313f56867491b9eac027f3514ca807aca9a2ba2087f85ca3c68f022974f948ce688a178b0ce21d95706116abca5acf19e072f languageName: node linkType: hard @@ -3772,12 +4102,12 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-prefer-arrow-functions@npm:^3.2.4": - version: 3.2.4 - resolution: "eslint-plugin-prefer-arrow-functions@npm:3.2.4" +"eslint-plugin-prefer-arrow-functions@npm:^3.3.2": + version: 3.3.2 + resolution: "eslint-plugin-prefer-arrow-functions@npm:3.3.2" peerDependencies: eslint: ">=5.0.0" - checksum: 424e5fd61542af87355e16b71aa09a28d480c6a7754eadaaaf8370590c3d92c13f7787e12771a9c8ff90a778c2f7582383aaed52dfe6cb27a005708e02114dae + checksum: 36d16b7486dff2cf90737511306e98bc297370442e4acc3cbd8917fcfea426a2cf00902da2fb21292f4e6e89b87eb124e0daafd92a97a12695d366f9ab283c57 languageName: node linkType: hard @@ -3884,15 +4214,15 @@ __metadata: languageName: node linkType: hard -"eslint@npm:^8.56.0": - version: 8.56.0 - resolution: "eslint@npm:8.56.0" +"eslint@npm:^8.57.0": + version: 8.57.0 + resolution: "eslint@npm:8.57.0" dependencies: "@eslint-community/eslint-utils": "npm:^4.2.0" "@eslint-community/regexpp": "npm:^4.6.1" "@eslint/eslintrc": "npm:^2.1.4" - "@eslint/js": "npm:8.56.0" - "@humanwhocodes/config-array": "npm:^0.11.13" + "@eslint/js": "npm:8.57.0" + "@humanwhocodes/config-array": "npm:^0.11.14" "@humanwhocodes/module-importer": "npm:^1.0.1" "@nodelib/fs.walk": "npm:^1.2.8" "@ungap/structured-clone": "npm:^1.2.0" @@ -3928,7 +4258,7 @@ __metadata: text-table: "npm:^0.2.0" bin: eslint: bin/eslint.js - checksum: 2be598f7da1339d045ad933ffd3d4742bee610515cd2b0d9a2b8b729395a01d4e913552fff555b559fccaefd89d7b37632825789d1b06470608737ae69ab43fb + checksum: 00bb96fd2471039a312435a6776fe1fd557c056755eaa2b96093ef3a8508c92c8775d5f754768be6b1dddd09fdd3379ddb231eeb9b6c579ee17ea7d68000a529 languageName: node linkType: hard @@ -4219,9 +4549,9 @@ __metadata: languageName: node linkType: hard -"framer-motion@npm:^11.0.5": - version: 11.0.5 - resolution: "framer-motion@npm:11.0.5" +"framer-motion@npm:^11.0.6": + version: 11.0.6 + resolution: "framer-motion@npm:11.0.6" dependencies: "@emotion/is-prop-valid": "npm:^0.8.2" tslib: "npm:^2.4.0" @@ -4236,7 +4566,28 @@ __metadata: optional: true react-dom: optional: true - checksum: a7ed2c56f2d25b610a11a7056304c2ed92cb37ca448c820432db162ae05c920fb3853b703130fbaded534099d4bced8af34168bd2b464d93f5bb8897951ce057 + checksum: ba987848120847157eb2d8c7669808aa04081b753002c7d57b2adfca92da5de50470117a73e377476b3eec42d13b4c91456f649b97b7900dcc72cb980262af48 + languageName: node + linkType: hard + +"framer-motion@npm:^11.0.8": + version: 11.0.8 + resolution: "framer-motion@npm:11.0.8" + dependencies: + "@emotion/is-prop-valid": "npm:^0.8.2" + tslib: "npm:^2.4.0" + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + dependenciesMeta: + "@emotion/is-prop-valid": + optional: true + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + checksum: 098776e277b1707116c511f62261ed421381071258a6174c51bf1cdbb7ed436b5789fa114144426253d1719e6426d51e3f1812a9cbc1ca773361b63aacda8056 languageName: node linkType: hard @@ -4696,12 +5047,12 @@ __metadata: languageName: node linkType: hard -"i18next@npm:^23.9.0": - version: 23.9.0 - resolution: "i18next@npm:23.9.0" +"i18next@npm:^23.10.0": + version: 23.10.0 + resolution: "i18next@npm:23.10.0" dependencies: "@babel/runtime": "npm:^7.23.2" - checksum: 84c31a825ea75b23ca6e2da43c9a27f0fc080a02bbe88d57b90998231803fe3575763b8f5e6fbff391994dc8420df1e34e833b646fb5682940ebe2e13a1e819f + checksum: b6161075cfc2f3238e8e293306d70f173b5d5f4b7217d29ba15d4b70bd876911ccf15ca8fed238405c735c2a2e86e26658a17ea7cfd4040abd3100fef0a7c7d4 languageName: node linkType: hard @@ -5710,6 +6061,17 @@ __metadata: languageName: node linkType: hard +"nock@npm:^13.5.0": + version: 13.5.4 + resolution: "nock@npm:13.5.4" + dependencies: + debug: "npm:^4.1.0" + json-stringify-safe: "npm:^5.0.1" + propagate: "npm:^2.0.0" + checksum: 9ca47d9d7e4b1f4adf871d7ca12722f8ef1dc7d2b9610b2568f5d9264eae9f424baa24fd9d91da9920b360d641b4243e89de198bd22c061813254a99cc6252af + languageName: node + linkType: hard + "node-domexception@npm:^1.0.0": version: 1.0.0 resolution: "node-domexception@npm:1.0.0" @@ -6146,13 +6508,9 @@ __metadata: "@fortawesome/react-fontawesome": "npm:^0.2.0" "@ledgerhq/hw-transport-webhid": "npm:^6.28.4" "@ledgerhq/logs": "npm:^6.12.0" - "@polkadot-cloud/assets": "npm:^0.4.0" - "@polkadot-cloud/core": "npm:^1.3.3" - "@polkadot-cloud/react": "npm:^0.5.4" - "@polkadot-cloud/utils": "npm:^0.3.0" - "@polkadot/api": "npm:^10.11.2" + "@polkadot/api": "npm:^10.11.3" "@polkadot/keyring": "npm:^12.6.2" - "@polkadot/rpc-provider": "npm:^10.11.2" + "@polkadot/rpc-provider": "npm:10.11.2" "@polkadot/util": "npm:^12.6.2" "@polkadot/util-crypto": "npm:^12.6.2" "@polkawatch/ddp-client": "npm:^2.0.11" @@ -6160,35 +6518,42 @@ __metadata: "@types/chroma-js": "npm:^2.4.4" "@types/lodash.debounce": "npm:^4" "@types/lodash.throttle": "npm:^4.1.9" - "@types/react": "npm:^18.2.57" + "@types/react": "npm:^18.2.61" "@types/react-dom": "npm:^18.2.19" "@types/react-helmet": "npm:^6.1.11" "@types/react-scroll": "npm:^1.8.10" "@types/styled-components": "npm:^5.1.34" - "@typescript-eslint/eslint-plugin": "npm:^7.0.2" - "@typescript-eslint/parser": "npm:^7.0.2" + "@typescript-eslint/eslint-plugin": "npm:^7.1.0" + "@typescript-eslint/parser": "npm:^7.1.0" "@vitejs/plugin-react-swc": "npm:^3.6.0" + "@w3ux/extension-assets": "npm:0.1.0" + "@w3ux/hooks": "npm:^0.0.3" + "@w3ux/react-connect-kit": "npm:^0.0.4" + "@w3ux/react-odometer": "npm:^0.0.3" + "@w3ux/react-polkicon": "npm:^0.0.2" + "@w3ux/utils": "npm:^0.0.2" + "@w3ux/validator-assets": "npm:^0.0.4" "@zondax/ledger-substrate": "npm:^0.41.3" bignumber.js: "npm:^9.1.2" bn.js: "npm:^5.2.1" buffer: "npm:^6.0.3" - chart.js: "npm:^4.4.1" + chart.js: "npm:^4.4.2" chroma-js: "npm:^2.4.2" date-fns: "npm:^3.3.1" - eslint: "npm:^8.56.0" + eslint: "npm:^8.57.0" eslint-config-prettier: "npm:^9.1.0" eslint-import-resolver-typescript: "npm:^3.6.1" eslint-plugin-import: "npm:^2.29.1" eslint-plugin-prefer-arrow: "npm:^1.2.3" - eslint-plugin-prefer-arrow-functions: "npm:^3.2.4" + eslint-plugin-prefer-arrow-functions: "npm:^3.3.2" eslint-plugin-prettier: "npm:^5.1.3" eslint-plugin-react: "npm:^7.33.2" eslint-plugin-react-hooks: "npm:^4.6.0" eslint-plugin-unused-imports: "npm:^3.1.0" - framer-motion: "npm:^11.0.5" + framer-motion: "npm:^11.0.8" gh-pages: "npm:^6.1.1" html5-qrcode: "npm:^2.3.8" - i18next: "npm:^23.9.0" + i18next: "npm:^23.10.0" i18next-browser-languagedetector: "npm:^7.2.0" lodash.debounce: "npm:^4.0.8" lodash.throttle: "npm:^4.1.1" @@ -6199,15 +6564,15 @@ __metadata: react: "npm:^18.2.0" react-chartjs-2: "npm:^5.2.0" react-dom: "npm:^18.2.0" - react-error-boundary: "npm:^4.0.12" + react-error-boundary: "npm:^4.0.13" react-helmet: "npm:^6.1.0" react-i18next: "npm:^14.0.5" - react-router-dom: "npm:^6.22.1" + react-router-dom: "npm:^6.22.2" react-scroll: "npm:^1.9.0" sass: "npm:^1.71.1" styled-components: "npm:^6.1.8" typescript: "npm:^5.3.3" - usehooks-ts: "npm:2.15.0" + usehooks-ts: "npm:2.15.1" vite: "npm:^5.1.4" vite-bundle-visualizer: "npm:^1.0.1" vite-plugin-checker: "npm:^0.6.3" @@ -6416,14 +6781,14 @@ __metadata: languageName: node linkType: hard -"react-error-boundary@npm:^4.0.12": - version: 4.0.12 - resolution: "react-error-boundary@npm:4.0.12" +"react-error-boundary@npm:^4.0.13": + version: 4.0.13 + resolution: "react-error-boundary@npm:4.0.13" dependencies: "@babel/runtime": "npm:^7.12.5" peerDependencies: react: ">=16.13.1" - checksum: de599799efab78929447e11f4cfb3779e99ca87a8af1b3c56ab49ecb0bcc44fe924cfad4d2f3cc77c6cc8d992e3c47e356c70edebb825ae867aa621438035209 + checksum: 6f3e0e4d7669f680ccf49c08c9571519c6e31f04dcfc30a765a7136c7e6fbbbe93423dd5a9fce12107f8166e54133e9dd5c2079a00c7a38201ac811f7a28b8e7 languageName: node linkType: hard @@ -6480,27 +6845,27 @@ __metadata: languageName: node linkType: hard -"react-router-dom@npm:^6.22.1": - version: 6.22.1 - resolution: "react-router-dom@npm:6.22.1" +"react-router-dom@npm:^6.22.2": + version: 6.22.2 + resolution: "react-router-dom@npm:6.22.2" dependencies: - "@remix-run/router": "npm:1.15.1" - react-router: "npm:6.22.1" + "@remix-run/router": "npm:1.15.2" + react-router: "npm:6.22.2" peerDependencies: react: ">=16.8" react-dom: ">=16.8" - checksum: 1e6ec4596f134204934d4f701b8acc426867532342c8aec1b5c4ffeaf23afa0099727f58ab8687f7838db069616b8d6ed05a065570f23b3b60cbff405b3fbccd + checksum: 5dc5a54a72b0470cce571f95021516f1afbe978f9b5103a0f7de9e8585d2f5f8d084f810f3eb648b9701a941a17f3a68517b07a4827dfc4bdb5f0ff0c18920a8 languageName: node linkType: hard -"react-router@npm:6.22.1": - version: 6.22.1 - resolution: "react-router@npm:6.22.1" +"react-router@npm:6.22.2": + version: 6.22.2 + resolution: "react-router@npm:6.22.2" dependencies: - "@remix-run/router": "npm:1.15.1" + "@remix-run/router": "npm:1.15.2" peerDependencies: react: ">=16.8" - checksum: bb33c3a6457e73fa9977133be0c27b60accfc6452cc5d7b62c729cdd2d091a1345a9567cf852c651315548f1f16adac258eeab8ad193b46e4ce926c911dc857c + checksum: e0a0d1a0c8566b377cda632691a7c39d4009cbc8fced4fe06f13789a8acc38c474a366984b536b109e3685f3d7e1f839d6bec7b28fb96d311d86d02fc8999379 languageName: node linkType: hard @@ -6850,6 +7215,13 @@ __metadata: languageName: node linkType: hard +"scale-ts@npm:^1.4.3": + version: 1.6.0 + resolution: "scale-ts@npm:1.6.0" + checksum: ce4ea3559c6b6bdf2a62454aac83cc3151ae93d1a507ddb8e95e83ce1190085aed61c46901bd42d41d8f8ba58279d7e37057c68c2b674c2d39b8cf5d169e90dd + languageName: node + linkType: hard + "scheduler@npm:^0.23.0": version: 0.23.0 resolution: "scheduler@npm:0.23.0" @@ -7064,6 +7436,15 @@ __metadata: languageName: node linkType: hard +"smoldot@npm:2.0.21": + version: 2.0.21 + resolution: "smoldot@npm:2.0.21" + dependencies: + ws: "npm:^8.8.1" + checksum: 1bf4dc41af4f742748ca003613c4df7d027f6e996f8b3312373ae26cbaae75af654b8c816f99d5c5d2a869f849bba7d57296256cc31ab9e6a19b76b0578dc2c6 + languageName: node + linkType: hard + "smoldot@npm:2.0.7": version: 2.0.7 resolution: "smoldot@npm:2.0.7" @@ -7709,14 +8090,14 @@ __metadata: languageName: node linkType: hard -"usehooks-ts@npm:2.15.0": - version: 2.15.0 - resolution: "usehooks-ts@npm:2.15.0" +"usehooks-ts@npm:2.15.1": + version: 2.15.1 + resolution: "usehooks-ts@npm:2.15.1" dependencies: lodash.debounce: "npm:^4.0.8" peerDependencies: react: ^16.8.0 || ^17 || ^18 - checksum: 70a2c9b5b256681c5c82c28407bcb0444f10bef26de823d13ffa6a3d7a0e39243738ab8957f6515018f62cf98a6ec97e73677b9cd3ab4a4734977bf76b07dc21 + checksum: d0fb108a27343093bdfe447a95cd3be2f07d593ef75d61643d9c80a82407867c365295d5493ed5b1eb898c4ca9708998819b35fce1714405cf418198ab6ff7fc languageName: node linkType: hard