feat: update delegation track screen (#2504)

novasamatech · Oct 21, 2024 · fd23cae · fd23cae
1 parent edf1aee
commit fd23cae
Show file tree

Hide file tree

Showing 36 changed files with 577 additions and 455 deletions.
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
     "@polkadot/types": "12.4.2",
     "@polkadot/util": "13.0.2",
     "@polkadot/util-crypto": "13.0.2",
+    "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "1.1.2",
     "@radix-ui/react-dropdown-menu": "2.1.2",
     "@radix-ui/react-popover": "1.1.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/renderer/entities/governance/index.ts b/src/renderer/entities/governance/index.ts
@@ -30,6 +30,7 @@ export {
   getGroupPallet,
   getTrackIds,
   getTreasuryTrackDescription,
+  getTrackTitles,
 } from './lib/tracksService';
 
 export { createSubscriber } from './utils/createSubscriber';
@@ -43,6 +44,7 @@ export type {
   TransactionStandardVote,
 } from './types/voteTransaction';
 export type { Track } from './types/tracks';
+export type { VotesToRemove } from './types/tracks';
 export type { VoteHistoryRecord } from './model/voteHistory';
 
 export {

diff --git a/src/renderer/entities/governance/lib/tracksService.ts b/src/renderer/entities/governance/lib/tracksService.ts
@@ -34,3 +34,15 @@ export const getGroupPallet = (
 
   return tracksGroupId.length !== 0 && tracksGroupId.every((t) => tracksIds.includes(t)) ? 'primary' : 'secondary';
 };
+
+export const getTrackTitles = (trackIds: string[], allTracks: Track[], t: TFunction): string => {
+  const titles = allTracks.reduce<string[]>((titles, { id, value }) => {
+    if (trackIds.includes(id)) {
+      titles.push(t(value));
+    }
+
+    return titles;
+  }, []);
+
+  return titles.join(', ');
+};
diff --git a/src/renderer/entities/governance/types/tracks.ts b/src/renderer/entities/governance/types/tracks.ts
@@ -1,5 +1,13 @@
+import { type Address, type ReferendumId } from '@/shared/core';
+
 export type Track = {
   id: string;
   value: string;
   description: string;
 };
+
+export type VotesToRemove = {
+  referendum: ReferendumId;
+  track: string;
+  voter: Address;
+};
diff --git a/src/renderer/features/governance/components/AccountsMultiSelector/AccountsMultiSelector.tsx b/src/renderer/features/governance/components/AccountsMultiSelector/AccountsMultiSelector.tsx
@@ -3,7 +3,7 @@ import { Fragment, type ReactNode, useId } from 'react';
 
 import { useI18n } from '@/shared/i18n';
 import { cnTw } from '@/shared/lib/utils';
-import { CaptionText, Checkbox, FootnoteText, Icon, LabelText } from '@/shared/ui';
+import { CaptionText, FootnoteText, Icon, LabelText } from '@/shared/ui';
 import {
   OptionStyle,
   OptionStyleTheme,
@@ -14,6 +14,7 @@ import {
 } from '@/shared/ui/Dropdowns/common/constants';
 import { type DropdownResult, type Position, type Theme } from '@/shared/ui/Dropdowns/common/types';
 import { CommonInputStyles, CommonInputStylesTheme } from '@/shared/ui/Inputs/common/styles';
+import { Checkbox } from '@/shared/ui-kit';
 
 type DropdownOption<T = any> = {
   id: string;
@@ -147,7 +148,7 @@ export const AccountsMultiSelector = ({
                 <Checkbox
                   checked={optionsFlat.every((option) => selectedIds.includes(option.id))}
                   semiChecked={optionsFlat.some((option) => selectedIds.includes(option.id))}
-                  onChange={(event) => toggleAll(event.target.checked)}
+                  onChange={(checked) => toggleAll(checked)}
                 >
                   <FootnoteText className="text-body text-text-secondary">{t('balances.allAccounts')}</FootnoteText>
                 </Checkbox>
@@ -171,16 +172,15 @@ export const AccountsMultiSelector = ({
                   >
                     {({ selected }) => (
                       <div className="flex w-full justify-between gap-x-2">
-                        <Checkbox
-                          readOnly
-                          checked={selected}
+                        <div
                           className={cnTw(
                             'pointer-events-none w-full pl-4',
                             selected ? 'text-text-primary' : 'text-text-secondary',
                           )}
                         >
-                          {element}
-                        </Checkbox>
+                          <Checkbox checked={selected}>{element}</Checkbox>
+                        </div>
+
                         {additionalElement}
                       </div>
                     )}
@@ -242,18 +242,19 @@ const Group = ({ group, selectedIds, selectedOptions, theme, onChange }: PropsGr
           OptionStyleTheme[theme](false, isChecked),
         )}
       >
-        <Checkbox
-          className="w-full p-2 pl-6"
-          checked={isChecked}
-          semiChecked={list.some(({ id }) => selectedIds.includes(id))}
-          onChange={(event) => toggleGroup(event.target.checked)}
-        >
-          <div className="flex h-5 w-7.5 items-center justify-center rounded-2lg bg-input-background-disabled">
-            <CaptionText className="text-text-secondary">{list.length}</CaptionText>
-          </div>
-          <FootnoteText className="flex-1 text-text-tertiary">{groupName}</FootnoteText>
-          <FootnoteText className="text-text-secondary">{groupValue}</FootnoteText>
-        </Checkbox>
+        <div className="w-full p-2 pl-6">
+          <Checkbox
+            checked={isChecked}
+            semiChecked={list.some(({ id }) => selectedIds.includes(id))}
+            onChange={(checked) => toggleGroup(checked)}
+          >
+            <div className="flex h-5 w-7.5 items-center justify-center rounded-2lg bg-input-background-disabled">
+              <CaptionText className="text-text-secondary">{list.length}</CaptionText>
+            </div>
+            <FootnoteText className="flex-1 text-text-tertiary">{groupName}</FootnoteText>
+            <FootnoteText className="text-text-secondary">{groupValue}</FootnoteText>
+          </Checkbox>
+        </div>
       </div>
       <ul>
         {list.map(({ id, value, additionalElement, element }) => (
@@ -264,16 +265,14 @@ const Group = ({ group, selectedIds, selectedOptions, theme, onChange }: PropsGr
           >
             {({ selected }) => (
               <div className="flex w-full items-center justify-between gap-x-4">
-                <Checkbox
-                  readOnly
-                  checked={selected}
+                <div
                   className={cnTw(
                     'pointer-events-none w-full pl-8',
                     selected ? 'text-text-primary' : 'text-text-secondary',
                   )}
                 >
-                  {element}
-                </Checkbox>
+                  <Checkbox checked={selected}>{element}</Checkbox>
+                </div>
                 {additionalElement}
               </div>
             )}

diff --git a/src/renderer/features/staking/Validators/ui/Validators.tsx b/src/renderer/features/staking/Validators/ui/Validators.tsx
@@ -4,7 +4,8 @@ import { memo } from 'react';
 import { type Validator } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { cnTw } from '@/shared/lib/utils';
-import { BodyText, Button, Checkbox, Icon, Loader, SearchInput, Shimmering, SmallTitleText } from '@/shared/ui';
+import { BodyText, Button, Icon, Loader, SearchInput, Shimmering, SmallTitleText } from '@/shared/ui';
+import { Checkbox } from '@/shared/ui-kit';
 import { ValidatorsTable } from '@/entities/staking';
 import { validatorsModel } from '../model/validators-model';
 

diff --git a/src/renderer/features/wallets/KeyConstructor/ui/KeyForm.tsx b/src/renderer/features/wallets/KeyConstructor/ui/KeyForm.tsx
@@ -4,7 +4,8 @@ import { type FormEvent, useEffect, useMemo, useRef } from 'react';
 
 import { KeyType } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
-import { Button, Checkbox, FootnoteText, Input, InputHint, Select } from '@/shared/ui';
+import { Button, FootnoteText, Input, InputHint, Select } from '@/shared/ui';
+import { Checkbox } from '@/shared/ui-kit';
 import { ChainTitle } from '@/entities/chain';
 import { networkModel } from '@/entities/network';
 import { constructorModel } from '../model/constructor-model';
@@ -112,7 +113,7 @@ export const KeyForm = () => {
           <Checkbox
             disabled={!isKeyTypeSharded}
             checked={isSharded?.value}
-            onChange={({ target }) => isSharded?.onChange(target.checked)}
+            onChange={(checked) => isSharded?.onChange(checked)}
           >
             {t('dynamicDerivations.constructor.shardedLabel')}
           </Checkbox>

diff --git a/src/renderer/features/wallets/ShardSelectorModal/ui/SelectableShard.tsx b/src/renderer/features/wallets/ShardSelectorModal/ui/SelectableShard.tsx
@@ -1,7 +1,8 @@
 import { type BaseAccount, type ChainAccount, type Explorer, type ShardAccount, type Wallet } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { cnTw, toAddress } from '@/shared/lib/utils';
-import { BodyText, Checkbox, HelpText, IconButton, Identicon, Truncate } from '@/shared/ui';
+import { BodyText, HelpText, IconButton, Identicon, Truncate } from '@/shared/ui';
+import { Checkbox } from '@/shared/ui-kit';
 import { ExplorersPopover, accountUtils, walletUtils } from '@/entities/wallet';
 
 type Props = {
@@ -60,7 +61,7 @@ export const SelectableShard = ({
         'focus-within:bg-action-background-hover hover:bg-action-background-hover',
       )}
     >
-      <Checkbox checked={checked} semiChecked={semiChecked} onChange={(event) => onChange(event.target.checked)} />
+      <Checkbox checked={checked} semiChecked={semiChecked} onChange={(checked) => onChange(checked)} />
       <ExplorersPopover
         button={content}
         address={account.accountId}

diff --git a/src/renderer/features/wallets/ShardSelectorModal/ui/ShardedGroup.tsx b/src/renderer/features/wallets/ShardSelectorModal/ui/ShardedGroup.tsx
@@ -1,8 +1,8 @@
 import { useUnit } from 'effector-react';
-import { type ChangeEvent } from 'react';
 
 import { type Chain, type ID, type ShardAccount } from '@/shared/core';
-import { Accordion, CaptionText, Checkbox, FootnoteText } from '@/shared/ui';
+import { Accordion, CaptionText, FootnoteText } from '@/shared/ui';
+import { Checkbox } from '@/shared/ui-kit';
 import { selectorUtils } from '../lib/selector-utils';
 import { shardsModel } from '../model/shards-model';
 
@@ -18,12 +18,12 @@ export const ShardedGroup = ({ rootId, accounts, chain }: Props) => {
 
   const shardedGroup = selectedStructure[rootId][chain.chainId].sharded[accounts[0].groupId];
 
-  const toggleSharded = (event: ChangeEvent<HTMLInputElement>) => {
+  const toggleSharded = (checked: boolean) => {
     shardsModel.events.shardedToggled({
       root: rootId,
       chainId: chain.chainId,
       groupId: accounts[0].groupId,
-      value: event.target.checked,
+      value: checked,
     });
   };
 
@@ -40,17 +40,18 @@ export const ShardedGroup = ({ rootId, accounts, chain }: Props) => {
   return (
     <Accordion className="ml-6 w-auto rounded">
       <div className="flex rounded hover:bg-action-background-hover">
-        <Checkbox
-          className="w-full p-2"
-          checked={selectorUtils.isChecked(shardedGroup)}
-          semiChecked={selectorUtils.isSemiChecked(shardedGroup)}
-          onChange={toggleSharded}
-        >
-          <div className="flex h-5 w-7.5 items-center justify-center rounded-2lg bg-input-background-disabled">
-            <CaptionText className="text-text-secondary">{accounts.length}</CaptionText>
-          </div>
-          <FootnoteText className="text-text-tertiary">{accounts[0].name}</FootnoteText>
-        </Checkbox>
+        <div className="w-full p-2">
+          <Checkbox
+            checked={selectorUtils.isChecked(shardedGroup)}
+            semiChecked={selectorUtils.isSemiChecked(shardedGroup)}
+            onChange={toggleSharded}
+          >
+            <div className="flex h-5 w-7.5 items-center justify-center rounded-2lg bg-input-background-disabled">
+              <CaptionText className="text-text-secondary">{accounts.length}</CaptionText>
+            </div>
+            <FootnoteText className="text-text-tertiary">{accounts[0].name}</FootnoteText>
+          </Checkbox>
+        </div>
 
         <Accordion.Button buttonClass="ml-auto w-auto p-2" />
       </div>

diff --git a/src/renderer/features/wallets/ShardSelectorModal/ui/ShardsStructure.tsx b/src/renderer/features/wallets/ShardSelectorModal/ui/ShardsStructure.tsx
@@ -3,7 +3,8 @@ import { useUnit } from 'effector-react';
 import { type AccountId, type ChainId, type ID } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { RootExplorers } from '@/shared/lib/utils';
-import { Accordion, Checkbox, FootnoteText } from '@/shared/ui';
+import { Accordion, FootnoteText } from '@/shared/ui';
+import { Checkbox } from '@/shared/ui-kit';
 import { ChainTitle } from '@/entities/chain';
 import { networkModel } from '@/entities/network';
 import { accountUtils, walletModel, walletUtils } from '@/entities/wallet';
@@ -38,7 +39,7 @@ export const ShardsStructure = () => {
           <Checkbox
             checked={isAllChecked}
             semiChecked={isAllSemiChecked}
-            onChange={(event) => shardsModel.events.allToggled(event.target.checked)}
+            onChange={(checked) => shardsModel.events.allToggled(checked)}
           >
             {t('balances.allAccounts')}
           </Checkbox>
@@ -62,18 +63,19 @@ export const ShardsStructure = () => {
               <li key={chainId}>
                 <Accordion isDefaultOpen className="ml-6 w-auto rounded">
                   <div className="flex hover:bg-action-background-hover">
-                    <Checkbox
-                      checked={selectorUtils.isChecked(selectedStructure[root.id][chainId])}
-                      semiChecked={selectorUtils.isSemiChecked(selectedStructure[root.id][chainId])}
-                      className="w-full p-2"
-                      onChange={(value) => toggleChain(root.id, chainId, value.target.checked)}
-                    >
-                      <ChainTitle chain={chains[chainId]} fontClass="text-text-primary" />
-                      <FootnoteText className="text-text-tertiary">
-                        {/* eslint-disable-next-line i18next/no-literal-string */}
-                        {selectedStructure[root.id][chainId].checked} / {selectedStructure[root.id][chainId].total}
-                      </FootnoteText>
-                    </Checkbox>
+                    <div className="w-full p-2">
+                      <Checkbox
+                        checked={selectorUtils.isChecked(selectedStructure[root.id][chainId])}
+                        semiChecked={selectorUtils.isSemiChecked(selectedStructure[root.id][chainId])}
+                        onChange={(checked) => toggleChain(root.id, chainId, checked)}
+                      >
+                        <ChainTitle chain={chains[chainId]} fontClass="text-text-primary" />
+                        <FootnoteText className="text-text-tertiary">
+                          {/* eslint-disable-next-line i18next/no-literal-string */}
+                          {selectedStructure[root.id][chainId].checked} / {selectedStructure[root.id][chainId].total}
+                        </FootnoteText>
+                      </Checkbox>
+                    </div>
                     <Accordion.Button buttonClass="ml-auto w-auto p-2" />
                   </div>
                   <Accordion.Content as="ul">