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 */} -