From c28655e84aa9eb3ef394c56a86e0725309cd7047 Mon Sep 17 00:00:00 2001 From: Nick Date: Mon, 4 Nov 2024 09:48:24 +0330 Subject: [PATCH 1/6] chore: apply version while building using semantic tags --- package.json | 3 ++- packages/extension/package.json | 2 +- packages/extension/src/packageInfo.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index ea758d676..7790bfaa0 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "packages/*" ], "scripts": { - "build": "polkadot-dev-build-ts && yarn build:zip && yarn build:rollup", + "apply-version": "node -e \"const { execSync } = require('child_process'); const fs = require('fs'); const version = execSync('git describe --tags --abbrev=0').toString().trim().replace(/^v/, ''); if (!version) { console.error('Version is empty'); process.exit(1); } console.log('Version fetched:', version); const packageJsonPath = './packages/extension/package.json'; const packageJson = JSON.parse(fs.readFileSync(packageJsonPath)); packageJson.version = version; fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));\"", + "build": "yarn apply-version && polkadot-dev-build-ts && yarn build:zip && yarn build:rollup", "build:before": "yarn build:i18n", "build:i18n": "i18next-scanner --config i18next-scanner.config.cjs", "build:release": "polkadot-ci-ghact-build", diff --git a/packages/extension/package.json b/packages/extension/package.json index 569ceaadf..0d3254569 100644 --- a/packages/extension/package.json +++ b/packages/extension/package.json @@ -15,7 +15,7 @@ }, "sideEffects": false, "type": "module", - "version": "0.47.5", + "version": "0.21.6", "dependencies": { "@polkadot/api": "^11.2.1", "@polkadot/extension-base": "^0.47.5", diff --git a/packages/extension/src/packageInfo.ts b/packages/extension/src/packageInfo.ts index 00ed1ea8d..47a4c01af 100644 --- a/packages/extension/src/packageInfo.ts +++ b/packages/extension/src/packageInfo.ts @@ -3,4 +3,4 @@ // Do not edit, auto-generated by @polkadot/dev -export const packageInfo = { name: '@polkadot/extension', path: 'auto', type: 'auto', version: '0.47.5' }; +export const packageInfo = { name: '@polkadot/extension', path: 'auto', type: 'auto', version: '0.21.6' }; From e7d174429937483a3dd682b62376adc287a6c43c Mon Sep 17 00:00:00 2001 From: Nick Date: Mon, 4 Nov 2024 10:00:17 +0330 Subject: [PATCH 2/6] chore: ignore tag fetch if fails to handle CI issue --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7790bfaa0..1d5e01b14 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "packages/*" ], "scripts": { - "apply-version": "node -e \"const { execSync } = require('child_process'); const fs = require('fs'); const version = execSync('git describe --tags --abbrev=0').toString().trim().replace(/^v/, ''); if (!version) { console.error('Version is empty'); process.exit(1); } console.log('Version fetched:', version); const packageJsonPath = './packages/extension/package.json'; const packageJson = JSON.parse(fs.readFileSync(packageJsonPath)); packageJson.version = version; fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));\"", + "apply-version": "node -e \"const { execSync } = require('child_process'); const fs = require('fs'); try { const version = execSync('git describe --tags --abbrev=0').toString().trim().replace(/^v/, ''); console.log('Version fetched:', version); const packageJsonPath = './packages/extension/package.json'; const packageJson = JSON.parse(fs.readFileSync(packageJsonPath)); packageJson.version = version; fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2)); } catch (error) { console.log('No tags found, skipping package.json update'); }\"", "build": "yarn apply-version && polkadot-dev-build-ts && yarn build:zip && yarn build:rollup", "build:before": "yarn build:i18n", "build:i18n": "i18next-scanner --config i18next-scanner.config.cjs", From 9c5368026f158838bef6bac109d7dc51a7fd41bb Mon Sep 17 00:00:00 2001 From: Nick Date: Mon, 4 Nov 2024 12:48:05 +0330 Subject: [PATCH 3/6] docs: update news --- packages/extension-polkagate/src/popup/home/news.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/extension-polkagate/src/popup/home/news.ts b/packages/extension-polkagate/src/popup/home/news.ts index b50dd634d..82bb9a454 100644 --- a/packages/extension-polkagate/src/popup/home/news.ts +++ b/packages/extension-polkagate/src/popup/home/news.ts @@ -9,6 +9,13 @@ export interface News { } export const news: News[] = [ + { + version: '0.21.6', + notes: [ + 'Show Support Us Notification: Encourage users to support us by voting for our referenda in governance.', + 'Known Issues Resolved: Removed locked amount button if no funds are locked, fixed underway votes type in the tooltip, corrected the referenda unlock modal close button, addressed vote type issues in comments, and improved the governance timeline display.' + ] + }, { version: '0.21.1', notes: [ From 39d0de1456c9b3e34d485ffa66adc812724b072b Mon Sep 17 00:00:00 2001 From: "G. Kami Ekbatanifard" <46442452+Nick-1979@users.noreply.github.com> Date: Wed, 6 Nov 2024 14:05:24 +0330 Subject: [PATCH 4/6] refactor: use theme color for static stroke color (#1627) --- .../components/AccountInputWithIdentity.tsx | 17 +- .../src/components/ChainLogo.tsx | 2 +- .../src/components/Checkbox2.tsx | 3 +- .../src/components/Identity.tsx | 8 +- .../src/components/MenuItem.tsx | 8 +- .../accountDetails/components/AOC.tsx | 4 +- .../src/fullscreen/addNewChain/utils.tsx | 2 +- .../governance/ReferendumSummary.tsx | 17 +- .../src/fullscreen/governance/SearchBox.tsx | 2 +- .../governance/components/AddressDropdown.tsx | 25 +- .../delegate/delegate/ChooseDelegator.tsx | 25 +- .../governance/delegate/delegate/Delegate.tsx | 7 +- .../fullscreen/governance/delegate/index.tsx | 2 +- .../delegate/partial/ReferendaTracks.tsx | 28 +-- .../delegate/partial/TAccountDisplay.tsx | 12 +- .../delegate/remove/RemoveDelegate.tsx | 5 +- .../fullscreen/governance/old-SupportUs.tsx | 229 ------------------ .../homeFullScreen/components/ChainList.tsx | 2 +- .../components/CurrencySwitch.tsx | 2 +- .../homeFullScreen/partials/Currency.tsx | 2 +- .../partials/FavoriteChains.tsx | 2 +- .../homeFullScreen/partials/HomeMenu.tsx | 2 +- .../partials/ImportAccSubMenuFullScreen.tsx | 2 +- .../partials/TotalBalancePieChart.tsx | 7 +- .../homeFullScreen/partials/WatchList.tsx | 7 +- .../stake/pool/commonTasks/editPool/Edit.tsx | 49 ++-- .../pool/partials/ClaimedRewardsChart.tsx | 4 +- .../stake/solo/partials/ActiveValidators.tsx | 2 +- .../stake/solo/partials/RewardsChart.tsx | 82 ++++--- .../src/partials/FullScreenChainSwitch.tsx | 4 +- .../src/partials/ImportAccSubMenu.tsx | 2 +- .../RemoteNodeSelectorWithSignals.tsx | 4 +- .../popup/history/modal/HistoryItemModal.tsx | 5 +- .../popup/history/partials/HistoryItem.tsx | 6 +- .../src/popup/home/AccountDetail.tsx | 5 +- .../popup/import/importLedger/LegacyApps.tsx | 2 +- .../import/importSeedFullScreen/index.tsx | 2 +- .../deriveAccount/AddressDropdown.tsx | 9 +- .../deriveAccount/modal/AddressDropdown.tsx | 9 +- .../AddressDropdownFullScreen.tsx | 5 +- .../popup/staking/partial/PoolMoreInfo.tsx | 12 +- .../pool/myPool/editPool/CollapseIt.tsx | 17 +- 42 files changed, 215 insertions(+), 426 deletions(-) delete mode 100644 packages/extension-polkagate/src/fullscreen/governance/old-SupportUs.tsx diff --git a/packages/extension-polkagate/src/components/AccountInputWithIdentity.tsx b/packages/extension-polkagate/src/components/AccountInputWithIdentity.tsx index 85605feb9..16b715ac6 100644 --- a/packages/extension-polkagate/src/components/AccountInputWithIdentity.tsx +++ b/packages/extension-polkagate/src/components/AccountInputWithIdentity.tsx @@ -1,34 +1,31 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ +import type { Chain } from '@polkadot/extension-chains/types'; + import { Grid, type SxProps, type Theme, useTheme } from '@mui/material'; import React, { useContext } from 'react'; import { useParams } from 'react-router'; -import type { Chain } from '@polkadot/extension-chains/types'; - - import { useApi, useTranslation } from '../hooks'; import getAllAddresses from '../util/getAllAddresses'; import { AccountContext, AddressInput, Identity } from '.'; -import type { AccountId } from '@polkadot/types/interfaces'; interface Props { address: string | null | undefined; chain: Chain | null | undefined; label: string; style?: SxProps; - setAddress: React.Dispatch> | null; + setAddress: React.Dispatch>; ignoreAddress?: string name?: string; helperText?: string; disabled?: boolean; } -export default function AccountInputWithIdentity({ address, chain, disabled, helperText, ignoreAddress, label, name, setAddress, style }: Props): React.ReactElement { +export default function AccountInputWithIdentity ({ address, chain, disabled, helperText, ignoreAddress, label, name, setAddress, style }: Props): React.ReactElement { const theme = useTheme(); const { t } = useTranslation(); const { hierarchy } = useContext(AccountContext); @@ -39,9 +36,9 @@ export default function AccountInputWithIdentity({ address, chain, disabled, hel return ( { +export default function Checkbox2 ({ checked = false, disabled, iconStyle, label, labelStyle = { fontSize: '14px', fontWeight: 300 }, onChange, style }: Props): React.ReactElement { return ( void; returnIdentity?: React.Dispatch>;// to return back identity when needed - style?: CSSProperties; showChainLogo?: boolean; showShortAddress?: boolean; showSocial?: boolean; - withShortAddress?: boolean; + style?: SxProps | CSSProperties; subIdOnly?: boolean; + withShortAddress?: boolean; } function Identity ({ accountInfo, address, api, chain, direction = 'column', formatted, identiconSize = 40, inParentheses = false, judgement, name, noIdenticon = false, onClick, returnIdentity, showChainLogo = false, showShortAddress, showSocial = true, style, subIdOnly = false, withShortAddress }: Props): React.ReactElement { diff --git a/packages/extension-polkagate/src/components/MenuItem.tsx b/packages/extension-polkagate/src/components/MenuItem.tsx index 5091e7ff0..93b638eeb 100644 --- a/packages/extension-polkagate/src/components/MenuItem.tsx +++ b/packages/extension-polkagate/src/components/MenuItem.tsx @@ -4,7 +4,7 @@ /* eslint-disable react/jsx-max-props-per-line */ import { ArrowForwardIos as ArrowForwardIosIcon } from '@mui/icons-material'; -import { Box, Grid, type SxProps, type Theme, Typography } from '@mui/material'; +import { Box, Grid, type SxProps, type Theme, Typography, useTheme } from '@mui/material'; import React, { type MouseEventHandler } from 'react'; import { noop } from '../util/utils'; @@ -24,7 +24,9 @@ interface Props { withHoverEffect?: boolean; } -export default function MenuItem({ children, disabled = false, fontSize, icon, iconComponent, onClick, pl = '0', py = '8px', showChevron, showSubMenu = false, text, withHoverEffect }: Props): React.ReactElement { +export default function MenuItem ({ children, disabled = false, fontSize, icon, iconComponent, onClick, pl = '0', py = '8px', showChevron, showSubMenu = false, text, withHoverEffect }: Props): React.ReactElement { + const theme = useTheme(); + const hoverEffectStyles: SxProps = { '&:hover': { bgcolor: disabled ? 'none' : 'divider' }, borderRadius: '5px', @@ -59,7 +61,7 @@ export default function MenuItem({ children, disabled = false, fontSize, icon, i - + { diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx index 8949fcea0..f774edfbf 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx @@ -116,6 +116,8 @@ const AssetsBoxes = ({ api, asset, hideNumbers, mode, onclick, pricesInCurrencie function AOC ({ accountAssets, address, hideNumbers, mode = 'Detail', onclick, selectedAsset }: Props) { const { t } = useTranslation(); + const theme = useTheme(); + const api = useApi(address); const pricesInCurrencies = usePrices(); @@ -164,7 +166,7 @@ function AOC ({ accountAssets, address, hideNumbers, mode = 'Detail', onclick, s {showMore ? t('Less') : t('More')} - + : accountAssets.length > 6 && diff --git a/packages/extension-polkagate/src/fullscreen/addNewChain/utils.tsx b/packages/extension-polkagate/src/fullscreen/addNewChain/utils.tsx index 27ca72ce9..63053b331 100644 --- a/packages/extension-polkagate/src/fullscreen/addNewChain/utils.tsx +++ b/packages/extension-polkagate/src/fullscreen/addNewChain/utils.tsx @@ -28,7 +28,7 @@ export function useUserAddedEndpoint (genesis: string | null | undefined): Dropd }, [endpoints, genesis]); } -export function useUserAddedChainColor (_genesisHash: string | undefined): string | undefined { +export function useUserAddedChainColor (_genesisHash: string | undefined | null): string | undefined { const endpoints = useUserAddedEndpoints(); return useMemo(() => { diff --git a/packages/extension-polkagate/src/fullscreen/governance/ReferendumSummary.tsx b/packages/extension-polkagate/src/fullscreen/governance/ReferendumSummary.tsx index cf3e9384d..d57050996 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/ReferendumSummary.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/ReferendumSummary.tsx @@ -3,7 +3,6 @@ /* eslint-disable react/jsx-max-props-per-line */ -import type { Theme } from '@mui/material'; import type { LatestReferenda, TopMenu } from './utils/types'; import { OpenInNewRounded as OpenInNewIcon, ScheduleRounded as ClockIcon } from '@mui/icons-material/'; @@ -30,9 +29,9 @@ interface Props { myVotedReferendaIndexes: number[] | null | undefined; } -const VerticalBar = ({ theme }: { theme: Theme }) => ( +const VerticalBar = () => ( - + ); @@ -111,26 +110,26 @@ function ReferendumSummary ({ key, myVotedReferendaIndexes, refSummary }: Props) - + {origin && <> - + {capitalizeFirstLetter(origin.replace(/([A-Z])/g, ' $1').trim())} - + } {refSummary.method} - + {formatRelativeTime(refSummary.created_at)} {newReferendum?.ayesAmount && newReferendum?.naysAmount && <> - + - + {t('Advanced')} - + diff --git a/packages/extension-polkagate/src/fullscreen/governance/components/AddressDropdown.tsx b/packages/extension-polkagate/src/fullscreen/governance/components/AddressDropdown.tsx index 174a7db7a..2eb8c5ae2 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/components/AddressDropdown.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/components/AddressDropdown.tsx @@ -1,15 +1,15 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ +import type { ApiPromise } from '@polkadot/api'; +import type { HexString } from '@polkadot/util/types'; + import { ArrowForwardIos as ArrowForwardIosIcon } from '@mui/icons-material'; -import { Collapse, Divider, Grid } from '@mui/material'; +import { Collapse, Divider, Grid, useTheme } from '@mui/material'; import React, { useCallback, useContext, useMemo, useRef, useState } from 'react'; -import { ApiPromise } from '@polkadot/api'; - import { AccountContext, Identity } from '../../../components'; import { useChain, useOutsideClick } from '../../../hooks'; import { tieAccount } from '../../../messaging'; @@ -22,18 +22,21 @@ interface Props { unableToChangeAccount?: boolean; } -export default function AddressDropdown({ api, chainGenesis, onSelect, selectedAddress, unableToChangeAccount = false }: Props): React.ReactElement { - const [isDropdownVisible, setDropdownVisible] = useState(false); - const ref = useRef(null); +export default function AddressDropdown ({ api, chainGenesis, onSelect, selectedAddress, unableToChangeAccount = false }: Props): React.ReactElement { + const theme = useTheme(); + const { accounts } = useContext(AccountContext); const chain = useChain(selectedAddress); + const ref = useRef(null); + + const [isDropdownVisible, setDropdownVisible] = useState(false); const addressesToDisplay = useMemo(() => accounts.map(({ address }) => address).filter((address) => address !== selectedAddress), [accounts, selectedAddress]); const hideDropdown = useCallback(() => setDropdownVisible(false), []); const toggleDropdown = useCallback(() => addressesToDisplay.length > 0 && setDropdownVisible(!isDropdownVisible), [addressesToDisplay, isDropdownVisible]); const _onSelect = useCallback((addr: string) => () => { - addr && chainGenesis && tieAccount(addr, chainGenesis).then(() => setTimeout(() => onSelect(addr), 150)).catch(console.error); + addr && chainGenesis && tieAccount(addr, chainGenesis as HexString).then(() => setTimeout(() => onSelect(addr), 150)).catch(console.error); }, [chainGenesis, onSelect]); useOutsideClick([ref], hideDropdown); @@ -51,7 +54,7 @@ export default function AddressDropdown({ api, chainGenesis, onSelect, selectedA border: 'none', fontSize: '14px', height: '40px', - m: 0, + margin: 0, maxWidth: '300px', minWidth: '150px', px: '5px', @@ -61,7 +64,7 @@ export default function AddressDropdown({ api, chainGenesis, onSelect, selectedA {!unableToChangeAccount && - + } @@ -75,7 +78,7 @@ export default function AddressDropdown({ api, chainGenesis, onSelect, selectedA >; setDelegateInformation: React.Dispatch>; } -export default function ChooseDelegator({ setDelegateInformation, setStep }: Props): React.ReactElement { +export default function ChooseDelegator ({ setDelegateInformation, setStep }: Props): React.ReactElement { const { t } = useTranslation(); + const theme = useTheme(); + const { address } = useParams<{ address: string }>(); const myFormattedAddress = useFormatted(address); - const chain = useChain(address); - const chainName = useChainName(address); - const api = useApi(address); - const theme = useTheme(); + const { api, chain, chainName } = useInfo(address); const [delegatorAddress, setDelegatorAddress] = useState(); const [selectedTrustedAddress, setSelectedTrustedAddress] = useState(); @@ -43,7 +43,8 @@ export default function ChooseDelegator({ setDelegateInformation, setStep }: Pro return response.json(); }).then((data) => { try { - const arrayData = data?.[chainName] && Object.values(data[chainName] as object); + //@ts-ignore + const arrayData = data?.[chainName] ? Object.values(data[chainName] as object) as string[] : undefined; setTrustedAccounts(arrayData); } catch (error) { @@ -74,7 +75,7 @@ export default function ChooseDelegator({ setDelegateInformation, setStep }: Pro }); }, [delegatorAddress, selectedTrustedAddress, setDelegateInformation]); - const onSelectTrustedAccount = useCallback((event: React.ChangeEvent, value: string) => { + const onSelectTrustedAccount = useCallback((_event: React.ChangeEvent, value: string) => { setSelectedTrustedAddress(value); }, []); @@ -95,7 +96,7 @@ export default function ChooseDelegator({ setDelegateInformation, setStep }: Pro ('Enter the account address that you want to delegate to')} ignoreAddress={String(myFormattedAddress)} label={t('Delegate to Account')} @@ -129,7 +130,7 @@ export default function ChooseDelegator({ setDelegateInformation, setStep }: Pro diff --git a/packages/extension-polkagate/src/fullscreen/governance/delegate/delegate/Delegate.tsx b/packages/extension-polkagate/src/fullscreen/governance/delegate/delegate/Delegate.tsx index 98387cbce..c27874475 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/delegate/delegate/Delegate.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/delegate/delegate/Delegate.tsx @@ -12,7 +12,7 @@ import type { Track } from '../../utils/types'; import type { DelegateInformation } from '..'; import { ArrowForwardIos as ArrowForwardIosIcon } from '@mui/icons-material'; -import { Grid, Typography } from '@mui/material'; +import { Grid, Typography, useTheme } from '@mui/material'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { BN, BN_ONE, BN_ZERO } from '@polkadot/util'; @@ -51,14 +51,15 @@ interface EditAdvanceProps { const EditAdvance = ({ accountLocks, checked, currentBlock, setChecked, showAdvance, toggleAdvance, tracks }: EditAdvanceProps) => { const { t } = useTranslation(); + const theme = useTheme(); return ( - + {t('Advanced')} - + {showAdvance && { +export const LoadingSkeleton = ({ skeletonsNum, withCheckBox = false }: { skeletonsNum: number, withCheckBox?: boolean }) => { const skeletonArray = []; for (let index = 0; index < skeletonsNum; index++) { @@ -51,7 +52,7 @@ export const LoadingSkeleton = ({ skeletonsNum, withCheckBox = false }: { skelet return skeletonArray; }; -export default function ReferendaTracks({ filterDelegatedTracks, filterLockedTracks, firstSelections, maximumHeight = '175px', selectedTracks, setSelectedTracks, tracks }: Props): React.ReactElement { +export default function ReferendaTracks ({ filterDelegatedTracks, filterLockedTracks, firstSelections, maximumHeight = '175px', selectedTracks, setSelectedTracks, tracks }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); @@ -71,14 +72,6 @@ export default function ReferendaTracks({ filterDelegatedTracks, filterLockedTra } }); - // const replacedKey = Object.keys(result).reduce((acc, key) => { - // const newKey = tracks.find((value) => String(value[0]) === key)?.[1].name; // Convert numeric key to track names - - // acc[newKey] = result[key]; - - // return acc; - // }, {}); - return result; } @@ -93,6 +86,7 @@ export default function ReferendaTracks({ filterDelegatedTracks, filterLockedTra let toSelect = []; if (filterLockedTracks && existingVotes) { + //@ts-ignore const availableTracks = tracks.filter((track) => !(track[0] in existingVotes)); toSelect = availableTracks.map((track) => track[0]); @@ -151,12 +145,12 @@ export default function ReferendaTracks({ filterDelegatedTracks, filterLockedTra - + {allSelected ? t('Deselect All') : t('Select All')} - + {tracks?.length ? tracks.map((value, index) => { const checked = selectedTracks.length !== 0 && !!selectedTracks.find((track) => track.eq(value[0])); diff --git a/packages/extension-polkagate/src/fullscreen/governance/delegate/partial/TAccountDisplay.tsx b/packages/extension-polkagate/src/fullscreen/governance/delegate/partial/TAccountDisplay.tsx index 2fd1aa0c2..06a297da5 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/delegate/partial/TAccountDisplay.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/delegate/partial/TAccountDisplay.tsx @@ -1,26 +1,24 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ -import { Grid, Radio } from '@mui/material'; -import React from 'react'; - -import { ApiPromise } from '@polkadot/api'; +import type { ApiPromise } from '@polkadot/api'; import type { Chain } from '@polkadot/extension-chains/types'; +import { Grid, Radio } from '@mui/material'; +import React from 'react'; import { Identity } from '../../../../components'; -export default function TAccountsDisplay({ address, api, chain, selectedTrustedAddress }: { chain: Chain | null | undefined, address: string, api: ApiPromise, selectedTrustedAddress: string | undefined }): React.ReactElement { +export default function TAccountsDisplay ({ address, api, chain, selectedTrustedAddress }: { chain: Chain | null | undefined, address: string, api: ApiPromise | undefined, selectedTrustedAddress: string | undefined }): React.ReactElement { return ( (); @@ -146,7 +147,7 @@ export default function RemoveDelegate ({ address, classicDelegateInformation, f api={api} chain={chain} direction='row' - formatted={delegateeAddress} + formatted={delegateeAddress as string | undefined} identiconSize={31} showShortAddress showSocial={false} diff --git a/packages/extension-polkagate/src/fullscreen/governance/old-SupportUs.tsx b/packages/extension-polkagate/src/fullscreen/governance/old-SupportUs.tsx deleted file mode 100644 index 31cbba70f..000000000 --- a/packages/extension-polkagate/src/fullscreen/governance/old-SupportUs.tsx +++ /dev/null @@ -1,229 +0,0 @@ -// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -/* eslint-disable react/jsx-max-props-per-line */ - -import { AccessTime as AccessTimeIcon, ArrowForward as ArrowForwardIcon, Handshake as HandshakeIcon } from '@mui/icons-material'; -import { alpha, Box, Button, Dialog, DialogContent, Paper, Slide, type Theme, Typography, useTheme } from '@mui/material'; -import { styled } from '@mui/system'; -import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; - -import { BN, BN_ZERO } from '@polkadot/util'; - -import { AccountsAssetsContext } from '../../components'; -import { getStorage, setStorage } from '../../components/Loading'; -import { useMyVote, useReferendum, useTranslation } from '../../hooks'; -import { tieAccount } from '../../messaging'; -import { POLKADOT_GENESIS_HASH } from '../../util/constants'; -import { openOrFocusTab } from '../accountDetails/components/CommonTasks'; -import { ENDED_STATUSES } from './utils/consts'; - -const PROPOSAL_NO = 1264; -const TRACK_ID = 33; -const SHOW_INTERVAL = 10 * 1000; // ms -const STORAGE_LABEL = `polkaGateVoteReminderLastShown_${PROPOSAL_NO}`; - -const StyledPaper = styled(Paper)(({ theme }: { theme: Theme }) => ({ - background: theme.palette.background.default, - borderRadius: 24, - boxShadow: '0 12px 24px rgba(0, 0, 0, 0.1)', - overflow: 'hidden', - padding: theme.spacing(4), - position: 'relative' -})); - -const BackgroundDecoration = styled(Box)(({ theme }: { theme: Theme }) => ({ - background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`, - clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 80%)', - height: '40%', - left: 0, - position: 'absolute', - right: 0, - top: 0, - zIndex: 0 -})); - -const ContentWrapper = styled(Box)(() => ({ - position: 'relative', - zIndex: 1 -})); - -const StyledImage = styled('img')({ - borderRadius: 16, - boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)', - height: 'auto', - width: '425px' -}); - -const VoteButton = styled(Button)(({ theme }: { theme: Theme }) => ({ - '&:hover': { - backgroundColor: theme.palette.secondary.main, - boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)', - transform: 'translateY(-2px)' - }, - backgroundColor: theme.palette.secondary.main, - borderRadius: 30, - boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - color: '#fff', - fontSize: '16px', - fontWeight: 500, - padding: '10px 40px', - transition: 'all 0.3s ease-in-out' -})); - -const MaybeLaterButton = styled(Button)(({ theme }: { theme: Theme }) => ({ - '&:hover': { - backgroundColor: alpha(theme.palette.text.primary, 0.1) - }, - color: theme.palette.text.primary, - padding: '10px', - textTransform: 'none' -})); - -export default function SupportUs () { - const { t } = useTranslation(); - const theme = useTheme(); - - const { accountsAssets } = useContext(AccountsAssetsContext); - - const [open, setOpen] = useState(true); - const [maxPowerAddress, setAddress] = useState(); - const [timeToNextShow, setTimeToNextShow] = useState(); - - const referendum = useReferendum(maxPowerAddress, 'Referenda', PROPOSAL_NO); - - const vote = useMyVote(maxPowerAddress, PROPOSAL_NO, TRACK_ID); - const notVoted = useMemo(() => vote === null || (vote && !('standard' in vote || 'splitAbstain' in vote || ('delegating' in vote && vote?.delegating?.voted))), [vote]); - - const isReferendumOngoing = referendum?.status && !ENDED_STATUSES.includes(referendum.status); - - const showModal = timeToNextShow && maxPowerAddress && notVoted && isReferendumOngoing; - - useEffect(() => { - getStorage(STORAGE_LABEL).then((maybeDate) => { - const isWaitingExpired = Date.now() - (maybeDate as unknown as number) > SHOW_INTERVAL; - - (!maybeDate || isWaitingExpired) && setTimeToNextShow(true); - }).catch(console.error); - }, []); - - useEffect(() => { - if (!accountsAssets) { - return; - } - - const balances = accountsAssets.balances; - let addressWithMaxVotingPower: string | undefined; - let max = BN_ZERO; - - Object.keys(balances).forEach((address) => { - const maybeAsset = balances[address]?.[POLKADOT_GENESIS_HASH]; - - if (!maybeAsset) { - return; - } - - const votingBalance = maybeAsset[0].votingBalance ? new BN(maybeAsset[0].votingBalance) : BN_ZERO; - - if (votingBalance.gt(max)) { - max = votingBalance; - addressWithMaxVotingPower = address; - } - }); - - addressWithMaxVotingPower && tieAccount(addressWithMaxVotingPower, POLKADOT_GENESIS_HASH).finally(() => { - setAddress(addressWithMaxVotingPower); - }).catch(console.error); - }, [accountsAssets]); - - const handleOnVote = useCallback(() => { - setOpen(false); - - maxPowerAddress && openOrFocusTab(`/governance/${maxPowerAddress}/referenda/${PROPOSAL_NO}`); - }, [maxPowerAddress]); - - const handleMaybeLater = useCallback(() => { - setStorage(STORAGE_LABEL, Date.now()).catch(console.error); - setOpen(false); - }, []); - - return ( - <> - {showModal && - - - - - - - - - {t('Support PolkaGate')} - - - - {t("We're seeking retroactive funding to sustain and expand PolkaGate's impact!")} - - - - - {t('Your Vote Matters')} - - - {t('Empower us to continue delivering valuable improvements and innovations.')} - - - {t("Voting won't spend your tokens—they'll just be temporarily locked based on your chosen conviction level.")} - - - - } - theme={theme} - > - {t("I'll think about it")} - - } - onClick={handleOnVote} - theme={theme} - > - {t('Vote Now')} - - - - - - - } - - ); -} diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/ChainList.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/ChainList.tsx index c0412fe30..05edc6a45 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/ChainList.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/ChainList.tsx @@ -169,7 +169,7 @@ function ChainList ({ anchorEl }: Props): React.ReactElement { onclick={onChainSelect} /> ))} - + ))} - + {!noBorderButton && - } + } {children} diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx index 4f0ff7482..c3770e7e3 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx @@ -100,7 +100,7 @@ function ImportAccSubMenuFullScreen ({ show, toggleSettingSubMenu }: Props): Rea extra={settings.camera !== 'on' ? {t('Allow QR camera access in the extension’s setting in order to use this feature')} - + : undefined } diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx index a7504536e..d04bd02c5 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx @@ -112,6 +112,7 @@ const DisplayAssetRow = ({ asset, hideNumbers }: { asset: AssetsWithUiAndPrice, function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React.ReactElement { const theme = useTheme(); const { t } = useTranslation(); + const pricesInCurrencies = usePrices(); const youHave = useYouHave(); @@ -236,10 +237,10 @@ function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React. - - {t(showMore ? t('Less tokens') : t('More tokens'))} + + {t(showMore ? t('Less') : t('More'))} - + } diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/WatchList.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/WatchList.tsx index 00a0f1d88..953047ec8 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/WatchList.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/WatchList.tsx @@ -6,7 +6,7 @@ import type { AssetsWithUiAndPrice } from './TotalBalancePieChart'; import { ArrowDropDown as ArrowDropDownIcon, ArrowDropDown as DownIcon, ArrowDropUp as UpIcon } from '@mui/icons-material'; -import { Collapse, Divider, Grid, Typography } from '@mui/material'; +import { Collapse, Divider, Grid, Typography, useTheme } from '@mui/material'; import React, { useCallback, useMemo, useState } from 'react'; import { AssetLogo } from '../../../components'; @@ -55,6 +55,7 @@ const AssetPriceChange = ({ asset }: { asset: AssetsWithUiAndPrice }) => { function WatchList ({ groupedAssets }: Props): React.ReactElement { const { t } = useTranslation(); + const theme = useTheme(); const [showMore, setShowMore] = useState(false); @@ -95,10 +96,10 @@ function WatchList ({ groupedAssets }: Props): React.ReactElement { - + {t(showMore ? t('Less') : t('More'))} - + } diff --git a/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/editPool/Edit.tsx b/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/editPool/Edit.tsx index c44bc2328..c6f8573b3 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/editPool/Edit.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/editPool/Edit.tsx @@ -1,24 +1,24 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ import type { ApiPromise } from '@polkadot/api'; +import type { Chain } from '@polkadot/extension-chains/types'; +import type { Option } from '@polkadot/types'; +import type { Perbill } from '@polkadot/types/interfaces'; +import type { MyPoolInfo } from '../../../../../util/types'; +import type { ChangesProps } from '.'; import { Grid, Typography, useTheme } from '@mui/material'; import React, { useCallback, useContext, useEffect, useState } from 'react'; -import type { Chain } from '@polkadot/extension-chains/types'; - import CollapseIt from '@polkadot/extension-polkagate/src/popup/staking/pool/myPool/editPool/CollapseIt'; import getAllAddresses from '@polkadot/extension-polkagate/src/util/getAllAddresses'; import { AccountContext, AddressInput, AutoResizeTextarea, ButtonWithCancel, Input, ShowValue } from '../../../../../components'; import { useTranslation } from '../../../../../hooks'; -import type { MyPoolInfo } from '../../../../../util/types'; import { STEPS } from '../../stake'; -import { ChangesProps } from '.'; interface Props { api: ApiPromise | undefined; @@ -30,7 +30,7 @@ interface Props { changes: ChangesProps | undefined; } -export default function Edit({ api, chain, changes, onClose, pool, setChanges, setStep }: Props): React.ReactElement { +export default function Edit ({ api, chain, changes, onClose, pool, setChanges, setStep }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); const { hierarchy } = useContext(AccountContext); @@ -38,8 +38,9 @@ export default function Edit({ api, chain, changes, onClose, pool, setChanges, s const poolName = pool?.metadata; const poolRoles = pool?.bondedPool?.roles; const depositorAddress = pool?.bondedPool?.roles?.depositor?.toString(); - + //@ts-ignore const maybeCommissionPayee = pool?.bondedPool?.commission?.current?.[1]?.toString() as string | undefined; + //@ts-ignore const maybeCommission = (pool?.bondedPool?.commission?.current?.[0] || 0) as number; const commissionValue = Number(maybeCommission) / (10 ** 7) < 1 ? 0 : Number(maybeCommission) / (10 ** 7); @@ -50,7 +51,7 @@ export default function Edit({ api, chain, changes, onClose, pool, setChanges, s const [collapsedName, setCollapsed] = useState(); const [newCommissionPayee, setNewCommissionPayee] = useState(); const [newCommissionValue, setNewCommissionValue] = useState(); - const [maxCommission, setMaxCommission] = useState(); + const [maxCommission, setMaxCommission] = useState(); const open = useCallback((title: string) => { setCollapsed(title === collapsedName ? undefined : title); @@ -72,27 +73,29 @@ export default function Edit({ api, chain, changes, onClose, pool, setChanges, s useEffect(() => { setChanges({ commission: { - payee: getChangedValue(newCommissionPayee, maybeCommissionPayee), - value: (newCommissionPayee || maybeCommissionPayee) ? getChangedValue(newCommissionValue, commissionValue) : undefined + payee: getChangedValue(newCommissionPayee, maybeCommissionPayee) as string, + value: (newCommissionPayee || maybeCommissionPayee) ? getChangedValue(newCommissionValue, commissionValue) as number : undefined }, - newPoolName: getChangedValue(newPoolName, poolName), + newPoolName: getChangedValue(newPoolName, poolName) as string, newRoles: { - newBouncer: getChangedValue(newBouncerAddress, poolRoles?.bouncer?.toString()), - newNominator: getChangedValue(newNominatorAddress, poolRoles?.nominator?.toString()), - newRoot: getChangedValue(newRootAddress, poolRoles?.root?.toString()) + newBouncer: getChangedValue(newBouncerAddress, poolRoles?.bouncer?.toString()) as string, + newNominator: getChangedValue(newNominatorAddress, poolRoles?.nominator?.toString()) as string, + newRoot: getChangedValue(newRootAddress, poolRoles?.root?.toString()) as string } }); }, [commissionValue, maybeCommissionPayee, poolName, poolRoles, newBouncerAddress, newCommissionPayee, newCommissionValue, newNominatorAddress, newPoolName, newRootAddress, setChanges]); useEffect(() => { - api && api.query.nominationPools.globalMaxCommission().then((res: Option) => { + api?.query['nominationPools']['globalMaxCommission']().then((maybeResponse) => { + const res = maybeResponse as Option; + if (res.isSome) { setMaxCommission(res.unwrap()); } - }); + }).catch(console.error); }, [api]); - const getChangedValue = (newValue: string | number | null | undefined, oldValue: number | string | null | undefined): undefined | null | string => { + const getChangedValue = (newValue: string | number | null | undefined, oldValue: number | string | null | undefined): undefined | null | string | number => { if ((newValue === null || newValue === undefined) && oldValue) { return null; } @@ -120,7 +123,7 @@ export default function Edit({ api, chain, changes, onClose, pool, setChanges, s return value === undefined; }); - const onNewCommission = useCallback((e) => { + const onNewCommission = useCallback((e: { target: { value: any; }; }) => { const value = Number(e.target.value); if (value !== commissionValue) { @@ -144,7 +147,7 @@ export default function Edit({ api, chain, changes, onClose, pool, setChanges, s <> - + {t(showDetails ? t('Less') : t('More'))} - + diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ActiveValidators.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ActiveValidators.tsx index 5e7009db5..7c0ee66e4 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ActiveValidators.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ActiveValidators.tsx @@ -97,7 +97,7 @@ export default function ActiveValidators ({ address }: Props): React.ReactElemen {t(showDetails ? t('Hide') : t('Others ({{count}})', { replace: { count: nonActiveValidators?.length } }))} - + } diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/RewardsChart.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/RewardsChart.tsx index 75347bf17..5bfb8ff5f 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/RewardsChart.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/RewardsChart.tsx @@ -1,12 +1,12 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ -//@ts-nocheck /** * @description to show rewards chart * */ +import type { RewardInfo, SubscanRewardInfo } from '../../../../util/types'; + import { faChartColumn } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ArrowDropDown as ArrowDropDownIcon, ExpandMore as ExpandMoreIcon, KeyboardDoubleArrowLeft as KeyboardDoubleArrowLeftIcon, KeyboardDoubleArrowRight as KeyboardDoubleArrowRightIcon } from '@mui/icons-material'; @@ -21,7 +21,6 @@ import { Identity, Progress } from '../../../../components'; import { useInfo, useTranslation } from '../../../../hooks'; import getRewardsSlashes from '../../../../util/api/getRewardsSlashes'; import { MAX_REWARDS_TO_SHOW } from '../../../../util/constants'; -import type { RewardInfo, SubscanRewardInfo } from '../../../../util/types'; import { amountToHuman } from '../../../../util/utils'; ChartJS.register( @@ -45,7 +44,7 @@ interface Props { rewardDestinationAddress: string | undefined; } -export default function RewardsChart({ address, rewardDestinationAddress }: Props): React.ReactElement { +export default function RewardsChart ({ address, rewardDestinationAddress }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); const { api, chain, chainName, decimal, token } = useInfo(address); @@ -59,7 +58,7 @@ export default function RewardsChart({ address, rewardDestinationAddress }: Prop const [expanded, setExpanded] = useState(-1); - const dateOptions = useMemo(() => ({ day: 'numeric', month: 'short' }), []); + const dateOptions = useMemo(() => ({ day: 'numeric', month: 'short' } as Intl.DateTimeFormatOptions), []); const weekDaysShort = ['Sun.', 'Mon.', 'Tues.', 'Wed.', 'Thurs.', 'Fri.', 'Sat.']; const formateDate = useCallback((date: number) => { @@ -136,7 +135,7 @@ export default function RewardsChart({ address, rewardDestinationAddress }: Prop } const availableDates = weeksRewards[pageIndex].map((item) => formateDate(item.timestamp)); - const filteredRewardsDetail = ascSortedRewards.filter((item) => availableDates.includes(item.date)); + const filteredRewardsDetail = ascSortedRewards.filter((item) => availableDates.includes(item.date || '')); return filteredRewardsDetail.reverse(); }, [ascSortedRewards, formateDate, pageIndex, weeksRewards]); @@ -164,7 +163,7 @@ export default function RewardsChart({ address, rewardDestinationAddress }: Prop } } - aWeekRewards.length > 0 && aWeekRewards.forEach((week, index) => { + aWeekRewards.length > 0 && aWeekRewards.forEach((week, _index) => { const aWeekRewardsAmount: string[] = []; const aWeekRewardsLabel: string[] = []; @@ -229,10 +228,10 @@ export default function RewardsChart({ address, rewardDestinationAddress }: Prop } else if (list === null) { setRewardsInfo(null); } - }); + }).catch(console.error); }, [chainName, rewardDestinationAddress]); - const handleAccordionChange = useCallback((panel: number) => (event: React.SyntheticEvent, isExpanded: boolean) => { + const handleAccordionChange = useCallback((panel: number) => (_event: React.SyntheticEvent, isExpanded: boolean) => { setExpanded(isExpanded ? panel : -1); }, []); @@ -241,8 +240,8 @@ export default function RewardsChart({ address, rewardDestinationAddress }: Prop return; } - const start = dataToShow[next ? pageIndex - 1 : pageIndex + 1] && dataToShow[next ? pageIndex - 1 : pageIndex + 1][1][0]; - const end = dataToShow[next ? pageIndex - 1 : pageIndex + 1] && dataToShow[next ? pageIndex - 1 : pageIndex + 1][1][6]; + const start = dataToShow[next ? pageIndex - 1 : pageIndex + 1]?.[1][0]; + const end = dataToShow[next ? pageIndex - 1 : pageIndex + 1]?.[1][6]; const newDate = new Date(weeksRewards[next ? 0 : weeksRewards?.length - 1][next ? 6 : 0].timestamp * 1000); const estimatedStart = next ? formateDate(new Date(newDate.setDate(newDate.getDate() + 1)).getTime() / 1000) : formateDate(new Date(newDate.setDate(newDate.getDate() - 7)).getTime() / 1000); @@ -267,21 +266,22 @@ export default function RewardsChart({ address, rewardDestinationAddress }: Prop weight: 'bold' }, callbacks: { - label: function (TooltipItem: string | { label: string }[] | undefined) { + label: function (TooltipItem: { formattedValue: string } | undefined) { if (!dataToShow || !TooltipItem) { return; } return `${TooltipItem.formattedValue} ${token}`; }, - title: function (TooltipItem: string | { label: string }[] | undefined) { + title: function (TooltipItem: { label: string }[] | undefined) { if (!dataToShow || !TooltipItem || !token) { return; } - const weekDayIndex = dataToShow[pageIndex][1].indexOf((TooltipItem[0] as any).label); + const _label = TooltipItem[0].label; + const weekDayIndex = dataToShow[pageIndex][1].indexOf(_label); - return `${weekDaysShort[weekDayIndex]} ${(TooltipItem[0] as any).label}`; + return `${weekDaysShort[weekDayIndex]} ${_label}`; } }, displayColors: false, @@ -303,9 +303,9 @@ export default function RewardsChart({ address, rewardDestinationAddress }: Prop tickColor: '' }, ticks: { - callback: function (_: any, index: number) { + callback: function (_: unknown, index: number) { const currentDay = formateDate(new Date().getTime() / 1000); - const labels = dataToShow && dataToShow[pageIndex][1]; + const labels = dataToShow?.[pageIndex][1]; const currentLabel = labels?.length ? labels[index] : undefined; if (currentLabel === currentDay) { @@ -337,11 +337,11 @@ export default function RewardsChart({ address, rewardDestinationAddress }: Prop borderColor: '#3A0B63', borderRadius: 3, borderWidth: 1, - data: dataToShow && dataToShow[pageIndex][0], + data: dataToShow?.[pageIndex][0], label: token } ], - labels: dataToShow && dataToShow[pageIndex][1] + labels: dataToShow?.[pageIndex][1] }; const toggleDetails = useCallback(() => { @@ -356,26 +356,30 @@ export default function RewardsChart({ address, rewardDestinationAddress }: Prop dataToShow && pageIndex !== (dataToShow.length - 1) && setPageIndex(pageIndex + 1); }, [dataToShow, pageIndex]); - const Arrows = ({ onNext, onPrevious }: ArrowsProps) => ( - - - - - - {t('Previous')} - {nextPrevWeek(false)} + const Arrows = ({ onNext, onPrevious }: ArrowsProps) => { + const isLatest = dataToShow && pageIndex === dataToShow.length - 1; + + return ( + + + + + + {t('Previous')} + {nextPrevWeek(false)} + - - - - {t('Next')} - {nextPrevWeek(true)} + + + {t('Next')} + {nextPrevWeek(true)} + + + - - - - ); + ); + }; return ( @@ -438,7 +442,7 @@ export default function RewardsChart({ address, rewardDestinationAddress }: Prop - + {t(showDetails ? t('Less') : t('More'))} - + diff --git a/packages/extension-polkagate/src/partials/FullScreenChainSwitch.tsx b/packages/extension-polkagate/src/partials/FullScreenChainSwitch.tsx index fac6d067b..86b03b892 100644 --- a/packages/extension-polkagate/src/partials/FullScreenChainSwitch.tsx +++ b/packages/extension-polkagate/src/partials/FullScreenChainSwitch.tsx @@ -125,7 +125,7 @@ function FullScreenChainSwitch ({ address, chains }: Props): React.ReactElement< return ( - + {selectedChainName && {t('Allow QR camera access in the extension’s setting in order to use this feature')} - + } + {isLightClient ? : { setDetailInfo(info); @@ -92,7 +93,7 @@ export default function HistoryItemModal ({ anotherDay, date, decimal, formatted onClick={goToDetail} sx={{ p: 0 }} > - + diff --git a/packages/extension-polkagate/src/popup/history/partials/HistoryItem.tsx b/packages/extension-polkagate/src/popup/history/partials/HistoryItem.tsx index 3a3707296..053edafa3 100644 --- a/packages/extension-polkagate/src/popup/history/partials/HistoryItem.tsx +++ b/packages/extension-polkagate/src/popup/history/partials/HistoryItem.tsx @@ -6,7 +6,7 @@ import type { TransactionDetail } from '../../../util/types'; import { ArrowForwardIosRounded as ArrowForwardIosRoundedIcon } from '@mui/icons-material'; -import { Container, Grid, IconButton, Typography } from '@mui/material'; +import { Container, Grid, IconButton, Typography, useTheme } from '@mui/material'; import React, { useCallback, useMemo, useState } from 'react'; import { FormatBalance2 } from '../../../components'; @@ -27,6 +27,8 @@ interface Props { export default function HistoryItem ({ anotherDay, chainName, date, decimal, formatted, info, token }: Props): React.ReactElement { const { t } = useTranslation(); + const theme = useTheme(); + const [showDetail, setShowDetail] = useState(false); const _goToDetail = useCallback(() => { @@ -92,7 +94,7 @@ export default function HistoryItem ({ anotherDay, chainName, date, decimal, for onClick={_goToDetail} sx={{ p: 0 }} > - + diff --git a/packages/extension-polkagate/src/popup/home/AccountDetail.tsx b/packages/extension-polkagate/src/popup/home/AccountDetail.tsx index c4ef777d5..47b541aa3 100644 --- a/packages/extension-polkagate/src/popup/home/AccountDetail.tsx +++ b/packages/extension-polkagate/src/popup/home/AccountDetail.tsx @@ -51,6 +51,7 @@ const EyeButton = ({ isHidden, toggleVisibility }: EyeProps) => { const NoChainAlert = ({ chain, menuOnClick }: {chain: Chain | null | undefined, menuOnClick: () => void}) => { const { t } = useTranslation(); + const theme = useTheme(); return ( <> @@ -59,7 +60,7 @@ const NoChainAlert = ({ chain, menuOnClick }: {chain: Chain | null | undefined, {t('Select a chain to view balance')} - + : } @@ -162,7 +163,7 @@ function AccountDetail ({ address, chain, goToAccount, hideNumbers, identity, is - + {identity?.display || name || t('Unknown')} diff --git a/packages/extension-polkagate/src/popup/import/importLedger/LegacyApps.tsx b/packages/extension-polkagate/src/popup/import/importLedger/LegacyApps.tsx index b1799e3f9..475e97eb1 100644 --- a/packages/extension-polkagate/src/popup/import/importLedger/LegacyApps.tsx +++ b/packages/extension-polkagate/src/popup/import/importLedger/LegacyApps.tsx @@ -142,7 +142,7 @@ export default function LegacyApps ({ setMode }: Props): React.ReactElement { {t('More ...')} - + {showMore && diff --git a/packages/extension-polkagate/src/popup/import/importSeedFullScreen/index.tsx b/packages/extension-polkagate/src/popup/import/importSeedFullScreen/index.tsx index 353fb8f34..1c61d33e8 100644 --- a/packages/extension-polkagate/src/popup/import/importSeedFullScreen/index.tsx +++ b/packages/extension-polkagate/src/popup/import/importSeedFullScreen/index.tsx @@ -223,7 +223,7 @@ export default function ImportSeed (): React.ReactElement { {t('More ...')} - + diff --git a/packages/extension-polkagate/src/popup/newAccount/deriveAccount/AddressDropdown.tsx b/packages/extension-polkagate/src/popup/newAccount/deriveAccount/AddressDropdown.tsx index 75deb9680..9b3538656 100644 --- a/packages/extension-polkagate/src/popup/newAccount/deriveAccount/AddressDropdown.tsx +++ b/packages/extension-polkagate/src/popup/newAccount/deriveAccount/AddressDropdown.tsx @@ -1,11 +1,10 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ import { ArrowForwardIos as ArrowForwardIosIcon } from '@mui/icons-material'; -import { Grid, Typography } from '@mui/material'; +import { Grid, Typography, useTheme } from '@mui/material'; import React, { useCallback, useRef, useState } from 'react'; import { Address, ChainLogo } from '../../../components'; @@ -20,8 +19,10 @@ interface Props { withoutChainLogo?: boolean; } -export default function AddressDropdown({ allAddresses, onSelect, selectedAddress, selectedGenesis, selectedName, withoutChainLogo = false }: Props): React.ReactElement { +export default function AddressDropdown ({ allAddresses, onSelect, selectedAddress, selectedGenesis, selectedName, withoutChainLogo = false }: Props): React.ReactElement { const { t } = useTranslation(); + const theme = useTheme(); + const [isDropdownVisible, setDropdownVisible] = useState(false); const ref = useRef(null); @@ -60,7 +61,7 @@ export default function AddressDropdown({ allAddresses, onSelect, selectedAddres } - + .tree:last-child': { border: 'none' }, bgcolor: 'background.paper', border: '2px solid', borderColor: 'secondary.light', borderRadius: '5px', boxShadow: '0px 3px 10px rgba(255, 255, 255, 0.25)', maxHeight: '220px', overflow: 'hidden', overflowY: 'scroll', position: 'absolute', top: '75px', transform: isDropdownVisible ? 'scaleY(1)' : 'scaleY(0)', transformOrigin: 'top', transitionDuration: '0.3s', transitionProperty: 'transform', visibility: isDropdownVisible ? 'visible' : 'hidden', zIndex: 10 }}> diff --git a/packages/extension-polkagate/src/popup/newAccount/deriveAccount/modal/AddressDropdown.tsx b/packages/extension-polkagate/src/popup/newAccount/deriveAccount/modal/AddressDropdown.tsx index 30c10a023..82bea4fa2 100644 --- a/packages/extension-polkagate/src/popup/newAccount/deriveAccount/modal/AddressDropdown.tsx +++ b/packages/extension-polkagate/src/popup/newAccount/deriveAccount/modal/AddressDropdown.tsx @@ -1,11 +1,10 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ import { ArrowForwardIos as ArrowForwardIosIcon } from '@mui/icons-material'; -import { Grid } from '@mui/material'; +import { Grid, useTheme } from '@mui/material'; import React, { useCallback, useRef, useState } from 'react'; import { Address, ChainLogo } from '../../../../components'; @@ -19,7 +18,9 @@ interface Props { selectedGenesis: string | undefined; } -export default function AddressDropdown({ allAddresses, onSelect, selectedAddress, selectedGenesis, selectedName }: Props): React.ReactElement { +export default function AddressDropdown ({ allAddresses, onSelect, selectedAddress, selectedGenesis, selectedName }: Props): React.ReactElement { + const theme = useTheme(); + const [isDropdownVisible, setDropdownVisible] = useState(false); const ref = useRef(null); @@ -48,7 +49,7 @@ export default function AddressDropdown({ allAddresses, onSelect, selectedAddres - + .tree:last-child': { border: 'none' }, bgcolor: 'background.paper', border: '2px solid', borderColor: 'secondary.light', borderRadius: '5px', boxShadow: '0px 3px 10px rgba(255, 255, 255, 0.25)', maxHeight: '220px', overflow: 'hidden', overflowY: 'scroll', position: 'absolute', top: '75px', transform: isDropdownVisible ? 'scaleY(1)' : 'scaleY(0)', transformOrigin: 'top', transitionDuration: '0.3s', transitionProperty: 'transform', visibility: isDropdownVisible ? 'visible' : 'hidden', zIndex: 10 }}> diff --git a/packages/extension-polkagate/src/popup/newAccount/deriveFromAccountsFullscreen/AddressDropdownFullScreen.tsx b/packages/extension-polkagate/src/popup/newAccount/deriveFromAccountsFullscreen/AddressDropdownFullScreen.tsx index 00ada2184..b092a7370 100644 --- a/packages/extension-polkagate/src/popup/newAccount/deriveFromAccountsFullscreen/AddressDropdownFullScreen.tsx +++ b/packages/extension-polkagate/src/popup/newAccount/deriveFromAccountsFullscreen/AddressDropdownFullScreen.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -21,7 +20,7 @@ interface Props { withoutChainLogo?: boolean; } -export default function AddressDropdownFullScreen({ allAddresses, onSelect, selectedAddress, selectedGenesis, selectedName, style, withoutChainLogo }: Props): React.ReactElement { +export default function AddressDropdownFullScreen ({ allAddresses, onSelect, selectedAddress, selectedGenesis, selectedName, style, withoutChainLogo }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); const ref = useRef(null); @@ -63,7 +62,7 @@ export default function AddressDropdownFullScreen({ allAddresses, onSelect, sele } - + diff --git a/packages/extension-polkagate/src/popup/staking/partial/PoolMoreInfo.tsx b/packages/extension-polkagate/src/popup/staking/partial/PoolMoreInfo.tsx index aa34cdb27..ac22f1999 100644 --- a/packages/extension-polkagate/src/popup/staking/partial/PoolMoreInfo.tsx +++ b/packages/extension-polkagate/src/popup/staking/partial/PoolMoreInfo.tsx @@ -9,7 +9,7 @@ import type { Balance } from '@polkadot/types/interfaces'; import type { FormattedAddressState, MemberPoints, MyPoolInfo, PoolInfo } from '../../../util/types'; import { ArrowForwardIos as ArrowForwardIosIcon, Close as CloseIcon } from '@mui/icons-material'; -import { Collapse, Grid, IconButton, Typography } from '@mui/material'; +import { Collapse, Grid, IconButton, Typography, useTheme } from '@mui/material'; // @ts-ignore import { Circle } from 'better-react-spinkit'; import React, { useCallback, useMemo, useState } from 'react'; @@ -188,18 +188,20 @@ const ShowClaimableCommission = ({ address, poolToShow, setShowClaimCommission } text={t('Claim')} /> - ) + ); }; -const CollapseData = ({ open, show, title, children }: CollapseProps) => { +const CollapseData = ({ children, open, show, title }: CollapseProps) => { + const theme = useTheme(); + return ( - + {title} - + diff --git a/packages/extension-polkagate/src/popup/staking/pool/myPool/editPool/CollapseIt.tsx b/packages/extension-polkagate/src/popup/staking/pool/myPool/editPool/CollapseIt.tsx index 4e5350e20..a7c71dfcd 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/myPool/editPool/CollapseIt.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/myPool/editPool/CollapseIt.tsx @@ -1,30 +1,33 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ import { ArrowForwardIos as ArrowForwardIosIcon } from '@mui/icons-material'; -import { Collapse, Grid, Typography } from '@mui/material'; -import React, { } from 'react'; +import { Collapse, Grid, Typography, useTheme } from '@mui/material'; +import React, { useCallback } from 'react'; interface Props { title: string; show: boolean; - open: (title: 'Roles' | 'Commission') => void; + open: (title: string) => void; children?: React.ReactElement; fullWidth?: boolean; } -export default function CollapseIt({ children, fullWidth, open, show, title }: Props): React.ReactElement { +export default function CollapseIt ({ children, fullWidth, open, show, title }: Props): React.ReactElement { + const theme = useTheme(); + + const handleClick = useCallback(() => open(title), [open, title]); + return ( - open(title)} sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.main', cursor: 'pointer' }}> + {title} - + From 790d7a1f739774778c6c1a6755f0db65c990723c Mon Sep 17 00:00:00 2001 From: "G. Kami Ekbatanifard" <46442452+Nick-1979@users.noreply.github.com> Date: Wed, 6 Nov 2024 14:19:39 +0330 Subject: [PATCH 5/6] feat: use Slider for Conviction settings (#1629) Co-authored-by: Amir Ekbatanifard --- .../src/components/Convictions.tsx | 99 +++++++++++++--- .../components/DraggableModalWithTitle.tsx | 106 ++++++++++++++++++ .../governance/delegate/delegate/Delegate.tsx | 8 +- .../fullscreen/governance/delegate/index.tsx | 17 ++- .../governance/post/castVote/Cast.tsx | 42 ++++--- .../governance/post/castVote/index.tsx | 12 +- .../partials/ModalTitleWithDrag.tsx | 71 ++++++++++++ .../src/hooks/useConvictionOptions.ts | 35 +++--- .../extension-polkagate/src/themes/dark.ts | 2 +- .../extension-polkagate/src/themes/light.ts | 2 +- .../public/locales/en/translation.json | 4 +- 11 files changed, 319 insertions(+), 79 deletions(-) create mode 100644 packages/extension-polkagate/src/fullscreen/governance/components/DraggableModalWithTitle.tsx create mode 100644 packages/extension-polkagate/src/fullscreen/partials/ModalTitleWithDrag.tsx diff --git a/packages/extension-polkagate/src/components/Convictions.tsx b/packages/extension-polkagate/src/components/Convictions.tsx index 04020acb4..00aed8ca9 100644 --- a/packages/extension-polkagate/src/components/Convictions.tsx +++ b/packages/extension-polkagate/src/components/Convictions.tsx @@ -1,14 +1,12 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ -import { Grid, type SxProps, type Theme } from '@mui/material'; -import React, { useCallback } from 'react'; +import { Grid, Slider, type SxProps, type Theme, Typography, useTheme } from '@mui/material'; +import React, { useCallback, useEffect, useMemo } from 'react'; import { useBlockInterval, useConvictionOptions, useTranslation } from '../hooks'; -import { Select } from '.'; interface Props { address: string | undefined; @@ -18,26 +16,97 @@ interface Props { style?: SxProps | undefined; } -export default function Convictions({ address, children, conviction, setConviction, style }: Props): React.ReactElement { +export const DEFAULT_CONVICTION = 1; + +export default function Convictions ({ address, children, conviction, setConviction, style }: Props): React.ReactElement { const { t } = useTranslation(); + const theme = useTheme(); + const blockTime = useBlockInterval(address); - const convictionOptions = useConvictionOptions(address, blockTime, t); + const convictionOptions = useConvictionOptions(address, blockTime); - const onChangeConviction = useCallback((conviction: number): void => { - setConviction(conviction); + const onChangeConviction = useCallback((_event: Event, newValue: number | number[], _activeThumb: number): void => { + setConviction(newValue as number); }, [setConviction]); + const { max, min } = useMemo(() => { + const min = (convictionOptions?.[0]?.value || 0) as number; + const max = (convictionOptions?.[convictionOptions.length - 1]?.value || min) as number; + + return { max, min }; + }, [convictionOptions]); + + const info = useMemo((): string => { + const newText = convictionOptions?.find(({ value }) => value === (conviction || DEFAULT_CONVICTION))?.text; + const match = newText?.match(/\(([^)]+)\)/); + + return match ? match[1] : '0 days'; + }, [conviction, convictionOptions]); + + const marks = useMemo(() => + convictionOptions?.map(({ value }) => ({ label: `${value} X`, value: value as number })) + , [convictionOptions]); + + const valuetext = useCallback((value: number) => { + return `${value} X`; + }, []); + + useEffect(() => { + // Select all mark labels and apply styles based on slider value + const markLabels = document.querySelectorAll('.MuiSlider-markLabel'); + + convictionOptions && markLabels.forEach((label, index) => { + const markValue = convictionOptions[index]?.value as number | undefined; + + if (markValue && conviction && markValue > conviction) { + (label as HTMLElement).style.color = theme.palette.text.disabled; // Untraversed color + } else { + (label as HTMLElement).style.color = theme.palette.text.primary; + } + }); + }, [conviction, convictionOptions, theme]); + return ( - div div div': { fontSize: '16px', fontWeight: 400 }, position: 'relative', ...style }}> -