diff --git a/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx b/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx
new file mode 100644
index 0000000000..45bff24fec
--- /dev/null
+++ b/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx
@@ -0,0 +1,53 @@
+import { cnTw } from '@renderer/shared/lib/utils';
+import { BodyText, Checkbox, HelpText, Icon, Identicon, InfoPopover, Truncate } from '@renderer/shared/ui';
+import { Address, Explorer } from '@renderer/shared/core';
+import { useAddressInfo } from '../../lib/useAddressInfo';
+
+type Props = {
+ name: string;
+ className?: string;
+ address: Address;
+ checked: boolean;
+ truncate?: boolean;
+ semiChecked?: boolean;
+ explorers?: Explorer[];
+ onChange: (value: boolean) => void;
+};
+
+export const SelectableShard = ({
+ className,
+ name,
+ address,
+ semiChecked,
+ checked,
+ truncate,
+ explorers,
+ onChange,
+}: Props) => {
+ const popoverItems = useAddressInfo(address, explorers, false);
+
+ return (
+ onChange(event.target?.checked)}
+ >
+
+
+ {name}
+ {truncate ? (
+
+ ) : (
+ {address}
+ )}
+
+
+
+
+
+ );
+};
diff --git a/src/renderer/entities/wallet/ui/index.ts b/src/renderer/entities/wallet/ui/index.ts
index 687f311154..67c2ba54df 100644
--- a/src/renderer/entities/wallet/ui/index.ts
+++ b/src/renderer/entities/wallet/ui/index.ts
@@ -3,4 +3,5 @@ export { AccountsList } from './AccountsList/AccountsList';
export { AddressWithName } from './AddressWithName/AddressWithName';
export { AccountAddress, getAddress } from './AccountAddress/AccountAddress';
export { AddressWithTwoLines } from './AddressWithTwoLines/AddressWithTwoLines';
+export { SelectableShard } from './SelectableShard/SelectableShard';
export type { AccountAddressProps } from './AccountAddress/AccountAddress';
diff --git a/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx b/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx
index 07bc09286a..f6588c3626 100644
--- a/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx
+++ b/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
import { keyBy } from 'lodash';
import type { AccountId, ChainId, Account } from '@renderer/shared/core';
-import { BaseModal, Button, Checkbox, FootnoteText, SearchInput } from '@renderer/shared/ui';
+import { Accordion, BaseModal, Button, Checkbox, FootnoteText, SearchInput } from '@renderer/shared/ui';
import { useI18n } from '@renderer/app/providers';
import { chainsService } from '@renderer/entities/network';
import {
@@ -15,8 +15,9 @@ import {
SelectableAccount,
SelectableShards,
} from '@renderer/components/layout/PrimaryLayout/Wallets/common/types';
-import { AddressWithExplorers } from '@renderer/entities/wallet';
+import { SelectableShard } from '@renderer/entities/wallet';
import { ChainTitle } from '@renderer/entities/chain';
+import { toAddress } from '@renderer/shared/lib/utils';
type Props = {
accounts: Account[];
@@ -119,21 +120,21 @@ export const SelectShardModal = ({ isOpen, activeShards, accounts, onClose }: Pr
isOpen={isOpen}
title={t('balances.shardsModalTitle')}
closeButton
- contentClass="px-5 py-4"
+ contentClass="pl-3 pr-0 py-4"
headerClass="px-5 py-4"
onClose={onClose}
>
{/* root accounts */}
-
+
{!query && (
- -
+
-
(
-
- 0}
- onChange={(event) => selectRoot(event.target?.checked, root.accountId)}
- >
-
-
+ onChange={(checked) => selectRoot(checked, root.accountId)}
+ />
- {/* chains accounts */}
+ {/* select all chain accounts */}
{root.chains.map((chain) => (
-
- 0 && chain.selectedAmount < chain.accounts.length}
- onChange={(event) => selectChain(event.target?.checked, chain.chainId, root.accountId)}
- >
-
-
- {chain.selectedAmount}/{chain.accounts.length}
-
-
-
- {/* chains accounts */}
-
- {chain.accounts.map((account) => (
- -
- selectAccount(event.target?.checked, account)}
- >
-
-
-
- ))}
-
+
+
+
0 && chain.selectedAmount < chain.accounts.length}
+ onChange={(event) => selectChain(event.target?.checked, chain.chainId, root.accountId)}
+ >
+
+
+ {chain.selectedAmount}/{chain.accounts.length}
+
+
+
+
+
+ {/* chains accounts */}
+
+ {chain.accounts.map((account) => (
+ -
+ selectAccount(checked, account)}
+ />
+
+ ))}
+
+
+
))}
@@ -196,7 +201,7 @@ export const SelectShardModal = ({ isOpen, activeShards, accounts, onClose }: Pr
))}
-