Merge branch 'main' into reduceIconeSize

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+# [0.22.0](https://github.com/polkagate/extension/compare/v0.21.6...v0.22.0) (2024-11-06)
+
+
+### Features
+
+* use Slider for Conviction settings ([#1629](https://github.com/polkagate/extension/issues/1629)) ([790d7a1](https://github.com/polkagate/extension/commit/790d7a1f739774778c6c1a6755f0db65c990723c))
+
 ## [0.21.6](https://github.com/polkagate/extension/compare/v0.21.5...v0.21.6) (2024-11-03)
 
 

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'); 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",
     "build:release": "polkadot-ci-ghact-build",

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<Theme>;
-  setAddress: React.Dispatch<React.SetStateAction<string | AccountId | undefined | null>> | null;
+  setAddress: React.Dispatch<React.SetStateAction<string | undefined | null>>;
   ignoreAddress?: string
   name?: string;
   helperText?: string;
   disabled?: boolean;
 }
 
-export default function AccountInputWithIdentity({ address, chain, disabled, helperText, ignoreAddress, label, name, setAddress, style }: Props): React.ReactElement<Props> {
+export default function AccountInputWithIdentity ({ address, chain, disabled, helperText, ignoreAddress, label, name, setAddress, style }: Props): React.ReactElement<Props> {
   const theme = useTheme();
   const { t } = useTranslation();
   const { hierarchy } = useContext(AccountContext);
@@ -39,9 +36,9 @@ export default function AccountInputWithIdentity({ address, chain, disabled, hel
   return (
     <Grid alignItems='flex-end' container justifyContent='space-between' sx={{ ...style }}>
       <AddressInput
-        address={address as string}
+        address={address}
         allAddresses={allAddresses}
-        chain={chain as any}
+        chain={chain}
         disabled={disabled}
         helperText={helperText}
         label={label}
@@ -53,7 +50,7 @@ export default function AccountInputWithIdentity({ address, chain, disabled, hel
         <Grid alignItems='center' container item sx={{ bgcolor: 'background.paper', border: 1, borderBottomLeftRadius: '5px', borderBottomRightRadius: '5px', borderColor: theme.palette.secondary.light, borderTop: 0, fontSize: '28px', fontWeight: 400, letterSpacing: '-0.015em', maxWidth: '100%', mt: '-4px', pl: '7px', pt: '8px' }} xs={12}>
           <Identity
             api={api}
-            chain={chain as any}
+            chain={chain}
             formatted={address}
             identiconSize={31}
             name={name}

packages/extension-polkagate/src/components/ChainLogo.tsx

@@ -15,7 +15,7 @@ import { GenesisHashOptionsContext } from './contexts';
 
 interface Props {
   chainName?: string;
-  genesisHash?: string | undefined;
+  genesisHash?: string | undefined | null;
   logo?: string;
   size?: number;
 }

packages/extension-polkagate/src/components/Checkbox2.tsx

@@ -1,6 +1,5 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 import { Checkbox, FormControlLabel, type SxProps, type Theme } from '@mui/material';
 import React from 'react';
@@ -17,7 +16,7 @@ interface Props {
   iconStyle?: React.CSSProperties | undefined
 }
 
-export default function Checkbox2({ checked = false, disabled, iconStyle, label, labelStyle = { fontSize: '14px', fontWeight: 300 }, onChange, style }: Props): React.ReactElement<Props> {
+export default function Checkbox2 ({ checked = false, disabled, iconStyle, label, labelStyle = { fontSize: '14px', fontWeight: 300 }, onChange, style }: Props): React.ReactElement<Props> {
   return (
     <FormControlLabel
       control={

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<Theme> | 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 (
-    <Grid alignContent='flex-start' alignItems='flex-start' container justifyContent='center' sx={{ '> div div div': { fontSize: '16px', fontWeight: 400 }, position: 'relative', ...style }}>
-      <Select
-        defaultValue={convictionOptions?.[0]?.value}
-        isDisabled={!convictionOptions}
-        label={t<string>('Vote Multiplier')}
+    <Grid alignContent='flex-start' alignItems='flex-start' container justifyContent='flex-start' sx={{ '> div div div': { fontSize: '16px', fontWeight: 400 }, position: 'relative', ...style }}>
+      <Typography sx={{ fontSize: '16px' }}>
+        {t('Vote Multiplier')}
+      </Typography>
+      <Slider
+        aria-label='Vote Convictions'
+        defaultValue={conviction || DEFAULT_CONVICTION}
+        disabled={!convictionOptions}
+        getAriaValueText={valuetext}
+        marks={marks}
+        max={max}
+        min={min}
         onChange={onChangeConviction}
-        options={convictionOptions || []}
-        value={conviction || convictionOptions?.[0]?.value}
+        size='small'
+        step={null}
+        sx={{
+          '& .MuiSlider-rail': {
+            color: 'action.focus' // Non-selected track color
+          },
+          '& .MuiSlider-thumb': {
+            color: 'primary.main' // Thumb color
+          },
+          '& .MuiSlider-track': {
+            color: 'secondary.light' // Selected track color
+          },
+          mx: '10px'
+        }}
+        valueLabelDisplay='auto'
       />
       {children}
+      <Grid alignItems='center' container item justifyContent='space-between' sx={{ pt: '10px' }}>
+        <Grid item>
+          <Typography sx={{ fontSize: '14px' }}>
+            {t('Tokens will be locked for')}
+          </Typography>
+        </Grid>
+        <Grid item sx={{ fontSize: '16px', fontWeight: 400 }}>
+          {info}
+        </Grid>
+      </Grid>
     </Grid>
   );
 }

packages/extension-polkagate/src/components/Identity.tsx

@@ -1,6 +1,8 @@
 // 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';
@@ -9,7 +11,7 @@ import type { Chain } from '@polkadot/extension-chains/types';
 import type { AccountId } from '@polkadot/types/interfaces/runtime';
 
 import { Email as EmailIcon, Language as LanguageIcon, X as XIcon } from '@mui/icons-material';
-import { Box, Grid, Link, Typography, useTheme } from '@mui/material';
+import { Box, Grid, Link, type SxProps, type Theme, Typography, useTheme } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import React, { type CSSProperties, useEffect, useMemo } from 'react';
 
@@ -32,12 +34,12 @@ interface Props {
   noIdenticon?: boolean;
   onClick?: () => void;
   returnIdentity?: React.Dispatch<React.SetStateAction<DeriveAccountRegistration | undefined>>;// to return back identity when needed
-  style?: CSSProperties;
   showChainLogo?: boolean;
   showShortAddress?: boolean;
   showSocial?: boolean;
-  withShortAddress?: boolean;
+  style?: SxProps<Theme> | 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<Props> {

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';
@@ -25,6 +25,8 @@ interface Props {
 }
 
 export default function MenuItem ({ children, disabled = false, fontSize, icon, iconComponent, onClick, pl = '0', py = '8px', showChevron, showSubMenu = false, text, withHoverEffect }: Props): React.ReactElement<Props> {
+  const theme = useTheme();
+
   const hoverEffectStyles: SxProps<Theme> = {
     '&:hover': { bgcolor: disabled ? 'none' : 'divider' },
     borderRadius: '5px',
@@ -59,7 +61,7 @@ export default function MenuItem ({ children, disabled = false, fontSize, icon,
           </Grid>
         </Grid>
         <Grid alignItems='center' container item sx={{ display: children || showChevron ? 'inherit' : 'none' }} xs={1}>
-          <ArrowForwardIosIcon sx={{ color: 'secondary.light', fontSize: 18, m: 'auto', stroke: '#BA2882', strokeWidth: '2px', transform: showChevron ? 'none' : (showSubMenu ? 'rotate(-90deg)' : 'rotate(90deg)'), transitionDuration: '0.3s', transitionProperty: 'transform' }} />
+          <ArrowForwardIosIcon sx={{ color: 'secondary.light', fontSize: 18, m: 'auto', stroke: theme.palette.secondary.light, strokeWidth: '2px', transform: showChevron ? 'none' : (showSubMenu ? 'rotate(-90deg)' : 'rotate(90deg)'), transitionDuration: '0.3s', transitionProperty: 'transform' }} />
         </Grid>
       </Grid>
       {

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
               <Typography fontSize='14px' fontWeight={400} sx={{ borderLeft: '1px solid', borderLeftColor: 'divider', height: 'fit-content', pl: '8px' }}>
                 {showMore ? t('Less') : t('More')}
               </Typography>
-              <ArrowDropDownIcon sx={{ color: 'secondary.light', fontSize: '20px', stroke: '#BA2882', strokeWidth: '2px', transform: showMore ? 'rotate(-180deg)' : 'rotate(0deg)', transitionDuration: '0.2s', transitionProperty: 'transform' }} />
+              <ArrowDropDownIcon sx={{ color: 'secondary.light', fontSize: '20px', stroke: theme.palette.secondary.light, strokeWidth: '2px', transform: showMore ? 'rotate(-180deg)' : 'rotate(0deg)', transitionDuration: '0.2s', transitionProperty: 'transform' }} />
             </>
             : accountAssets.length > 6 &&
             <MoreHorizIcon sx={{ color: 'secondary.light', fontSize: '27px' }} />

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(() => {

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 = () => (
   <Grid item mx='1.5%'>
-    <Divider flexItem orientation='vertical' sx={{ bgcolor: `${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.2)' : theme.palette.text.disabled}`, height: '34px' }} />
+    <Divider flexItem orientation='vertical' sx={{ bgcolor: 'divider', height: '34px' }} />
   </Grid>
 );
 
@@ -111,26 +110,26 @@ function ReferendumSummary ({ key, myVotedReferendaIndexes, refSummary }: Props)
           <Grid item sx={{ maxWidth: '22%', mb: '10px' }}>
             <Identity api={api} chain={chain} formatted={refSummary.proposer} identiconSize={25} showShortAddress showSocial={false} style={{ fontSize: '16px', fontWeight: 400, height: '38px', lineHeight: '47px', maxWidth: '100%', minWidth: '35%', width: 'fit-content' }} />
           </Grid>
-          <VerticalBar theme={theme} />
+          <VerticalBar />
           {origin &&
             <>
-              <Grid item sx={{ bgcolor: 'background.default', border: `1px solid ${theme.palette.primary.main} `, borderRadius: '30px', fontSize: '16px', fontWeight: 400, p: '0.5px 14.5px' }}>
+              <Grid item sx={{ bgcolor: 'background.default', border: `1px solid ${theme.palette.divider} `, borderRadius: '30px', fontSize: '16px', fontWeight: 400, p: '0.5px 14.5px' }}>
                 {capitalizeFirstLetter(origin.replace(/([A-Z])/g, ' $1').trim())}
               </Grid>
-              <VerticalBar theme={theme} />
+              <VerticalBar />
             </>
           }
           <Grid item sx={{ fontSize: '16px', fontWeight: 400, opacity: 0.6, maxWidth: '100px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
             {refSummary.method}
           </Grid>
-          <VerticalBar theme={theme} />
+          <VerticalBar />
           <ClockIcon sx={{ fontSize: 27 }} />
           <Grid item sx={{ fontSize: '16px', fontWeight: 400, pl: '1%' }}>
             {formatRelativeTime(refSummary.created_at)}
           </Grid>
           {newReferendum?.ayesAmount && newReferendum?.naysAmount &&
             <>
-              <VerticalBar theme={theme} />
+              <VerticalBar />
               <Grid item sx={{ width: '30px' }}>
                 <VoteChart
                   ayes={newReferendum.ayesAmount}
@@ -149,7 +148,7 @@ function ReferendumSummary ({ key, myVotedReferendaIndexes, refSummary }: Props)
           }
           {refSummary.status === 'Submitted' &&
             <>
-              <VerticalBar theme={theme} />
+              <VerticalBar />
               <Grid item sx={{ fontSize: '16px', fontWeight: 400, pl: '5px' }}>
                 <PayDecisionDeposit
                   setOpenDecisionDeposit={setOpenDecisionDeposit}

packages/extension-polkagate/src/fullscreen/governance/SearchBox.tsx

@@ -159,7 +159,7 @@ export default function SearchBox ({ address, myVotedReferendaIndexes, referenda
         <Grid alignItems='center' container fontSize='16px' fontWeight={400} item justifyContent='flex-start' onClick={onAdvanced} py='10px' sx={{ cursor: 'pointer' }} width='fit-content'>
           {t('Advanced')}
           <Grid alignItems='center' container item justifyContent='center' sx={{ cursor: 'pointer', width: '25px' }}>
-            <ArrowForwardIosIcon sx={{ color: 'secondary.light', fontSize: 18, m: 'auto', stroke: '#BA2882', strokeWidth: '2px', transform: showAdvanced ? 'rotate(-90deg)' : 'rotate(90deg)', transitionDuration: '0.3s', transitionProperty: 'transform' }} />
+            <ArrowForwardIosIcon sx={{ color: 'secondary.light', fontSize: 18, m: 'auto', stroke: theme.palette.secondary.light, strokeWidth: '2px', transform: showAdvanced ? 'rotate(-90deg)' : 'rotate(90deg)', transitionDuration: '0.3s', transitionProperty: 'transform' }} />
           </Grid>
         </Grid>
         <Grid alignItems='center' container fontSize='16px' fontWeight={400} item justifyContent='flex-start' py='10px' width='fit-content'>