Skip to content

Commit 7820b44

Browse files
Nick-1979Nick-1979
committed
Merge branch 'main' into reduceIconeSize
2 parents 9a914cc + ff33a06 commit 7820b44

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+550
-506
lines changed

‎CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# Change Log
22

3+
# [0.22.0](https://github.com/polkagate/extension/compare/v0.21.6...v0.22.0) (2024-11-06)
4+
5+
6+
### Features
7+
8+
* use Slider for Conviction settings ([#1629](https://github.com/polkagate/extension/issues/1629)) ([790d7a1](https://github.com/polkagate/extension/commit/790d7a1f739774778c6c1a6755f0db65c990723c))
9+
310
## [0.21.6](https://github.com/polkagate/extension/compare/v0.21.5...v0.21.6) (2024-11-03)
411

512

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
"packages/*"
2424
],
2525
"scripts": {
26-
"build": "polkadot-dev-build-ts && yarn build:zip && yarn build:rollup",
26+
"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'); }\"",
27+
"build": "yarn apply-version && polkadot-dev-build-ts && yarn build:zip && yarn build:rollup",
2728
"build:before": "yarn build:i18n",
2829
"build:i18n": "i18next-scanner --config i18next-scanner.config.cjs",
2930
"build:release": "polkadot-ci-ghact-build",

‎packages/extension-polkagate/src/components/AccountInputWithIdentity.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,31 @@
11
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
22
// SPDX-License-Identifier: Apache-2.0
3-
// @ts-nocheck
43

54
/* eslint-disable react/jsx-max-props-per-line */
65

6+
import type { Chain } from '@polkadot/extension-chains/types';
7+
78
import { Grid, type SxProps, type Theme, useTheme } from '@mui/material';
89
import React, { useContext } from 'react';
910
import { useParams } from 'react-router';
1011

11-
import type { Chain } from '@polkadot/extension-chains/types';
12-
13-
1412
import { useApi, useTranslation } from '../hooks';
1513
import getAllAddresses from '../util/getAllAddresses';
1614
import { AccountContext, AddressInput, Identity } from '.';
17-
import type { AccountId } from '@polkadot/types/interfaces';
1815

1916
interface Props {
2017
address: string | null | undefined;
2118
chain: Chain | null | undefined;
2219
label: string;
2320
style?: SxProps<Theme>;
24-
setAddress: React.Dispatch<React.SetStateAction<string | AccountId | undefined | null>> | null;
21+
setAddress: React.Dispatch<React.SetStateAction<string | undefined | null>>;
2522
ignoreAddress?: string
2623
name?: string;
2724
helperText?: string;
2825
disabled?: boolean;
2926
}
3027

31-
export default function AccountInputWithIdentity({ address, chain, disabled, helperText, ignoreAddress, label, name, setAddress, style }: Props): React.ReactElement<Props> {
28+
export default function AccountInputWithIdentity ({ address, chain, disabled, helperText, ignoreAddress, label, name, setAddress, style }: Props): React.ReactElement<Props> {
3229
const theme = useTheme();
3330
const { t } = useTranslation();
3431
const { hierarchy } = useContext(AccountContext);
@@ -39,9 +36,9 @@ export default function AccountInputWithIdentity({ address, chain, disabled, hel
3936
return (
4037
<Grid alignItems='flex-end' container justifyContent='space-between' sx={{ ...style }}>
4138
<AddressInput
42-
address={address as string}
39+
address={address}
4340
allAddresses={allAddresses}
44-
chain={chain as any}
41+
chain={chain}
4542
disabled={disabled}
4643
helperText={helperText}
4744
label={label}
@@ -53,7 +50,7 @@ export default function AccountInputWithIdentity({ address, chain, disabled, hel
5350
<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}>
5451
<Identity
5552
api={api}
56-
chain={chain as any}
53+
chain={chain}
5754
formatted={address}
5855
identiconSize={31}
5956
name={name}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { GenesisHashOptionsContext } from './contexts';
1515

1616
interface Props {
1717
chainName?: string;
18-
genesisHash?: string | undefined;
18+
genesisHash?: string | undefined | null;
1919
logo?: string;
2020
size?: number;
2121
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
22
// SPDX-License-Identifier: Apache-2.0
3-
// @ts-nocheck
43

54
import { Checkbox, FormControlLabel, type SxProps, type Theme } from '@mui/material';
65
import React from 'react';
@@ -17,7 +16,7 @@ interface Props {
1716
iconStyle?: React.CSSProperties | undefined
1817
}
1918

20-
export default function Checkbox2({ checked = false, disabled, iconStyle, label, labelStyle = { fontSize: '14px', fontWeight: 300 }, onChange, style }: Props): React.ReactElement<Props> {
19+
export default function Checkbox2 ({ checked = false, disabled, iconStyle, label, labelStyle = { fontSize: '14px', fontWeight: 300 }, onChange, style }: Props): React.ReactElement<Props> {
2120
return (
2221
<FormControlLabel
2322
control={

‎packages/extension-polkagate/src/components/Convictions.tsx

Lines changed: 84 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
22
// SPDX-License-Identifier: Apache-2.0
3-
// @ts-nocheck
43

54
/* eslint-disable react/jsx-max-props-per-line */
65

7-
import { Grid, type SxProps, type Theme } from '@mui/material';
8-
import React, { useCallback } from 'react';
6+
import { Grid, Slider, type SxProps, type Theme, Typography, useTheme } from '@mui/material';
7+
import React, { useCallback, useEffect, useMemo } from 'react';
98

109
import { useBlockInterval, useConvictionOptions, useTranslation } from '../hooks';
11-
import { Select } from '.';
1210

1311
interface Props {
1412
address: string | undefined;
@@ -18,26 +16,97 @@ interface Props {
1816
style?: SxProps<Theme> | undefined;
1917
}
2018

21-
export default function Convictions({ address, children, conviction, setConviction, style }: Props): React.ReactElement {
19+
export const DEFAULT_CONVICTION = 1;
20+
21+
export default function Convictions ({ address, children, conviction, setConviction, style }: Props): React.ReactElement {
2222
const { t } = useTranslation();
23+
const theme = useTheme();
24+
2325
const blockTime = useBlockInterval(address);
24-
const convictionOptions = useConvictionOptions(address, blockTime, t);
26+
const convictionOptions = useConvictionOptions(address, blockTime);
2527

26-
const onChangeConviction = useCallback((conviction: number): void => {
27-
setConviction(conviction);
28+
const onChangeConviction = useCallback((_event: Event, newValue: number | number[], _activeThumb: number): void => {
29+
setConviction(newValue as number);
2830
}, [setConviction]);
2931

32+
const { max, min } = useMemo(() => {
33+
const min = (convictionOptions?.[0]?.value || 0) as number;
34+
const max = (convictionOptions?.[convictionOptions.length - 1]?.value || min) as number;
35+
36+
return { max, min };
37+
}, [convictionOptions]);
38+
39+
const info = useMemo((): string => {
40+
const newText = convictionOptions?.find(({ value }) => value === (conviction || DEFAULT_CONVICTION))?.text;
41+
const match = newText?.match(/\(([^)]+)\)/);
42+
43+
return match ? match[1] : '0 days';
44+
}, [conviction, convictionOptions]);
45+
46+
const marks = useMemo(() =>
47+
convictionOptions?.map(({ value }) => ({ label: `${value} X`, value: value as number }))
48+
, [convictionOptions]);
49+
50+
const valuetext = useCallback((value: number) => {
51+
return `${value} X`;
52+
}, []);
53+
54+
useEffect(() => {
55+
// Select all mark labels and apply styles based on slider value
56+
const markLabels = document.querySelectorAll('.MuiSlider-markLabel');
57+
58+
convictionOptions && markLabels.forEach((label, index) => {
59+
const markValue = convictionOptions[index]?.value as number | undefined;
60+
61+
if (markValue && conviction && markValue > conviction) {
62+
(label as HTMLElement).style.color = theme.palette.text.disabled; // Untraversed color
63+
} else {
64+
(label as HTMLElement).style.color = theme.palette.text.primary;
65+
}
66+
});
67+
}, [conviction, convictionOptions, theme]);
68+
3069
return (
31-
<Grid alignContent='flex-start' alignItems='flex-start' container justifyContent='center' sx={{ '> div div div': { fontSize: '16px', fontWeight: 400 }, position: 'relative', ...style }}>
32-
<Select
33-
defaultValue={convictionOptions?.[0]?.value}
34-
isDisabled={!convictionOptions}
35-
label={t<string>('Vote Multiplier')}
70+
<Grid alignContent='flex-start' alignItems='flex-start' container justifyContent='flex-start' sx={{ '> div div div': { fontSize: '16px', fontWeight: 400 }, position: 'relative', ...style }}>
71+
<Typography sx={{ fontSize: '16px' }}>
72+
{t('Vote Multiplier')}
73+
</Typography>
74+
<Slider
75+
aria-label='Vote Convictions'
76+
defaultValue={conviction || DEFAULT_CONVICTION}
77+
disabled={!convictionOptions}
78+
getAriaValueText={valuetext}
79+
marks={marks}
80+
max={max}
81+
min={min}
3682
onChange={onChangeConviction}
37-
options={convictionOptions || []}
38-
value={conviction || convictionOptions?.[0]?.value}
83+
size='small'
84+
step={null}
85+
sx={{
86+
'& .MuiSlider-rail': {
87+
color: 'action.focus' // Non-selected track color
88+
},
89+
'& .MuiSlider-thumb': {
90+
color: 'primary.main' // Thumb color
91+
},
92+
'& .MuiSlider-track': {
93+
color: 'secondary.light' // Selected track color
94+
},
95+
mx: '10px'
96+
}}
97+
valueLabelDisplay='auto'
3998
/>
4099
{children}
100+
<Grid alignItems='center' container item justifyContent='space-between' sx={{ pt: '10px' }}>
101+
<Grid item>
102+
<Typography sx={{ fontSize: '14px' }}>
103+
{t('Tokens will be locked for')}
104+
</Typography>
105+
</Grid>
106+
<Grid item sx={{ fontSize: '16px', fontWeight: 400 }}>
107+
{info}
108+
</Grid>
109+
</Grid>
41110
</Grid>
42111
);
43112
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
22
// SPDX-License-Identifier: Apache-2.0
33

4+
//@ts-nocheck
5+
46
/* eslint-disable react/jsx-max-props-per-line */
57

68
import type { ApiPromise } from '@polkadot/api';
@@ -9,7 +11,7 @@ import type { Chain } from '@polkadot/extension-chains/types';
911
import type { AccountId } from '@polkadot/types/interfaces/runtime';
1012

1113
import { Email as EmailIcon, Language as LanguageIcon, X as XIcon } from '@mui/icons-material';
12-
import { Box, Grid, Link, Typography, useTheme } from '@mui/material';
14+
import { Box, Grid, Link, type SxProps, type Theme, Typography, useTheme } from '@mui/material';
1315
import { grey } from '@mui/material/colors';
1416
import React, { type CSSProperties, useEffect, useMemo } from 'react';
1517

@@ -32,12 +34,12 @@ interface Props {
3234
noIdenticon?: boolean;
3335
onClick?: () => void;
3436
returnIdentity?: React.Dispatch<React.SetStateAction<DeriveAccountRegistration | undefined>>;// to return back identity when needed
35-
style?: CSSProperties;
3637
showChainLogo?: boolean;
3738
showShortAddress?: boolean;
3839
showSocial?: boolean;
39-
withShortAddress?: boolean;
40+
style?: SxProps<Theme> | CSSProperties;
4041
subIdOnly?: boolean;
42+
withShortAddress?: boolean;
4143
}
4244

4345
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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
/* eslint-disable react/jsx-max-props-per-line */
55

66
import { ArrowForwardIos as ArrowForwardIosIcon } from '@mui/icons-material';
7-
import { Box, Grid, type SxProps, type Theme, Typography } from '@mui/material';
7+
import { Box, Grid, type SxProps, type Theme, Typography, useTheme } from '@mui/material';
88
import React, { type MouseEventHandler } from 'react';
99

1010
import { noop } from '../util/utils';
@@ -25,6 +25,8 @@ interface Props {
2525
}
2626

2727
export default function MenuItem ({ children, disabled = false, fontSize, icon, iconComponent, onClick, pl = '0', py = '8px', showChevron, showSubMenu = false, text, withHoverEffect }: Props): React.ReactElement<Props> {
28+
const theme = useTheme();
29+
2830
const hoverEffectStyles: SxProps<Theme> = {
2931
'&:hover': { bgcolor: disabled ? 'none' : 'divider' },
3032
borderRadius: '5px',
@@ -59,7 +61,7 @@ export default function MenuItem ({ children, disabled = false, fontSize, icon,
5961
</Grid>
6062
</Grid>
6163
<Grid alignItems='center' container item sx={{ display: children || showChevron ? 'inherit' : 'none' }} xs={1}>
62-
<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' }} />
64+
<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' }} />
6365
</Grid>
6466
</Grid>
6567
{

‎packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@ const AssetsBoxes = ({ api, asset, hideNumbers, mode, onclick, pricesInCurrencie
116116

117117
function AOC ({ accountAssets, address, hideNumbers, mode = 'Detail', onclick, selectedAsset }: Props) {
118118
const { t } = useTranslation();
119+
const theme = useTheme();
120+
119121
const api = useApi(address);
120122
const pricesInCurrencies = usePrices();
121123

@@ -164,7 +166,7 @@ function AOC ({ accountAssets, address, hideNumbers, mode = 'Detail', onclick, s
164166
<Typography fontSize='14px' fontWeight={400} sx={{ borderLeft: '1px solid', borderLeftColor: 'divider', height: 'fit-content', pl: '8px' }}>
165167
{showMore ? t('Less') : t('More')}
166168
</Typography>
167-
<ArrowDropDownIcon sx={{ color: 'secondary.light', fontSize: '20px', stroke: '#BA2882', strokeWidth: '2px', transform: showMore ? 'rotate(-180deg)' : 'rotate(0deg)', transitionDuration: '0.2s', transitionProperty: 'transform' }} />
169+
<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' }} />
168170
</>
169171
: accountAssets.length > 6 &&
170172
<MoreHorizIcon sx={{ color: 'secondary.light', fontSize: '27px' }} />

‎packages/extension-polkagate/src/fullscreen/addNewChain/utils.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function useUserAddedEndpoint (genesis: string | null | undefined): Dropd
2828
}, [endpoints, genesis]);
2929
}
3030

31-
export function useUserAddedChainColor (_genesisHash: string | undefined): string | undefined {
31+
export function useUserAddedChainColor (_genesisHash: string | undefined | null): string | undefined {
3232
const endpoints = useUserAddedEndpoints();
3333

3434
return useMemo(() => {

‎packages/extension-polkagate/src/fullscreen/governance/ReferendumSummary.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33

44
/* eslint-disable react/jsx-max-props-per-line */
55

6-
import type { Theme } from '@mui/material';
76
import type { LatestReferenda, TopMenu } from './utils/types';
87

98
import { OpenInNewRounded as OpenInNewIcon, ScheduleRounded as ClockIcon } from '@mui/icons-material/';
@@ -30,9 +29,9 @@ interface Props {
3029
myVotedReferendaIndexes: number[] | null | undefined;
3130
}
3231

33-
const VerticalBar = ({ theme }: { theme: Theme }) => (
32+
const VerticalBar = () => (
3433
<Grid item mx='1.5%'>
35-
<Divider flexItem orientation='vertical' sx={{ bgcolor: `${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.2)' : theme.palette.text.disabled}`, height: '34px' }} />
34+
<Divider flexItem orientation='vertical' sx={{ bgcolor: 'divider', height: '34px' }} />
3635
</Grid>
3736
);
3837

@@ -111,26 +110,26 @@ function ReferendumSummary ({ key, myVotedReferendaIndexes, refSummary }: Props)
111110
<Grid item sx={{ maxWidth: '22%', mb: '10px' }}>
112111
<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' }} />
113112
</Grid>
114-
<VerticalBar theme={theme} />
113+
<VerticalBar />
115114
{origin &&
116115
<>
117-
<Grid item sx={{ bgcolor: 'background.default', border: `1px solid ${theme.palette.primary.main} `, borderRadius: '30px', fontSize: '16px', fontWeight: 400, p: '0.5px 14.5px' }}>
116+
<Grid item sx={{ bgcolor: 'background.default', border: `1px solid ${theme.palette.divider} `, borderRadius: '30px', fontSize: '16px', fontWeight: 400, p: '0.5px 14.5px' }}>
118117
{capitalizeFirstLetter(origin.replace(/([A-Z])/g, ' $1').trim())}
119118
</Grid>
120-
<VerticalBar theme={theme} />
119+
<VerticalBar />
121120
</>
122121
}
123122
<Grid item sx={{ fontSize: '16px', fontWeight: 400, opacity: 0.6, maxWidth: '100px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
124123
{refSummary.method}
125124
</Grid>
126-
<VerticalBar theme={theme} />
125+
<VerticalBar />
127126
<ClockIcon sx={{ fontSize: 27 }} />
128127
<Grid item sx={{ fontSize: '16px', fontWeight: 400, pl: '1%' }}>
129128
{formatRelativeTime(refSummary.created_at)}
130129
</Grid>
131130
{newReferendum?.ayesAmount && newReferendum?.naysAmount &&
132131
<>
133-
<VerticalBar theme={theme} />
132+
<VerticalBar />
134133
<Grid item sx={{ width: '30px' }}>
135134
<VoteChart
136135
ayes={newReferendum.ayesAmount}
@@ -149,7 +148,7 @@ function ReferendumSummary ({ key, myVotedReferendaIndexes, refSummary }: Props)
149148
}
150149
{refSummary.status === 'Submitted' &&
151150
<>
152-
<VerticalBar theme={theme} />
151+
<VerticalBar />
153152
<Grid item sx={{ fontSize: '16px', fontWeight: 400, pl: '5px' }}>
154153
<PayDecisionDeposit
155154
setOpenDecisionDeposit={setOpenDecisionDeposit}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export default function SearchBox ({ address, myVotedReferendaIndexes, referenda
159159
<Grid alignItems='center' container fontSize='16px' fontWeight={400} item justifyContent='flex-start' onClick={onAdvanced} py='10px' sx={{ cursor: 'pointer' }} width='fit-content'>
160160
{t('Advanced')}
161161
<Grid alignItems='center' container item justifyContent='center' sx={{ cursor: 'pointer', width: '25px' }}>
162-
<ArrowForwardIosIcon sx={{ color: 'secondary.light', fontSize: 18, m: 'auto', stroke: '#BA2882', strokeWidth: '2px', transform: showAdvanced ? 'rotate(-90deg)' : 'rotate(90deg)', transitionDuration: '0.3s', transitionProperty: 'transform' }} />
162+
<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' }} />
163163
</Grid>
164164
</Grid>
165165
<Grid alignItems='center' container fontSize='16px' fontWeight={400} item justifyContent='flex-start' py='10px' width='fit-content'>

0 commit comments

Comments
 (0)