Skip to content

Commit

Permalink
feat: updated shards ui for shards select modal (#1138)
Browse files Browse the repository at this point in the history 
* feat: updated shards ui for shards select modal

* feat: added accordion for chain

* feat: updated address truncate for selectable shard

---------

Co-authored-by: Egor B <[email protected]>
  • Loading branch information
@egor0798
egor0798 and Egor B authored Oct 12, 2023
1 parent 4597d84 commit f2e81aa
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 45 deletions.
53 changes: 53 additions & 0 deletions src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Checkbox
checked={checked}
className={cnTw(
'flex items-center gap-x-2 px-2 py-1.5 hover:bg-action-background-hover group rounded',
className,
)}
semiChecked={semiChecked}
onChange={(event) => onChange(event.target?.checked)}
>
<Identicon address={address} size={20} background={false} canCopy={false} />
<div className="truncate mr-auto">
<BodyText>{name}</BodyText>
{truncate ? (
<Truncate text={address} className="text-text-tertiary text-help-text" />
) : (
<HelpText className="text-text-tertiary">{address}</HelpText>
)}
</div>
<InfoPopover data={popoverItems} className="w-[230px]" position="right-0 top-full">
<Icon name="info" size={16} className="shrink-0 group-hover:text-icon-hover" />
</InfoPopover>
</Checkbox>
);
};
1 change: 1 addition & 0 deletions src/renderer/entities/wallet/ui/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
95 changes: 50 additions & 45 deletions src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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[];
Expand Down Expand Up @@ -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}
>
<SearchInput
value={query}
placeholder={t('balances.searchPlaceholder')}
wrapperClass="mb-4"
wrapperClass="mb-4 ml-2 mr-5"
onChange={setQuery}
/>

{/* root accounts */}
<ul className="overflow-y-scroll max-h-[470px]">
<ul className="overflow-y-scroll max-h-[470px] pr-3">
{!query && (
<li key="all" className="mb-2">
<li key="all" className="p-2">
<Checkbox
checked={allShardsChecked}
semiChecked={allShardsSemiChecked}
Expand All @@ -145,58 +146,62 @@ export const SelectShardModal = ({ isOpen, activeShards, accounts, onClose }: Pr
)}
{searchedShards.rootAccounts.map((root) => (
<li key={root.id}>
<Checkbox
<SelectableShard
name={root.name}
address={toAddress(root.accountId)}
checked={root.isSelected}
className="py-0.5"
semiChecked={root.selectedAmount > 0}
onChange={(event) => selectRoot(event.target?.checked, root.accountId)}
>
<AddressWithExplorers accountId={root.accountId} name={root.name} />
</Checkbox>
onChange={(checked) => selectRoot(checked, root.accountId)}
/>

{/* chains accounts */}
{/* select all chain accounts */}
<ul>
{root.chains.map((chain) => (
<li key={chain.chainId}>
<Checkbox
checked={chain.isSelected}
className="py-1.5 ml-6"
semiChecked={chain.selectedAmount > 0 && chain.selectedAmount < chain.accounts.length}
onChange={(event) => selectChain(event.target?.checked, chain.chainId, root.accountId)}
>
<ChainTitle chain={chain} fontClass="text-text-primary" />
<FootnoteText className="text-text-tertiary">
{chain.selectedAmount}/{chain.accounts.length}
</FootnoteText>
</Checkbox>

{/* chains accounts */}
<ul>
{chain.accounts.map((account) => (
<li key={account.id}>
<Checkbox
checked={account.isSelected}
className="py-0.5 ml-12"
onChange={(event) => selectAccount(event.target?.checked, account)}
>
<AddressWithExplorers
explorers={chains[account.chainId]?.explorers}
accountId={account.accountId}
addressPrefix={chains[account.chainId]?.addressPrefix}
name={account.name}
/>
</Checkbox>
</li>
))}
</ul>
<Accordion isDefaultOpen className="ml-6 w-auto rounded">
<div className="hover:bg-action-background-hover flex">
<Checkbox
checked={chain.isSelected}
className="p-2 w-full"
semiChecked={chain.selectedAmount > 0 && chain.selectedAmount < chain.accounts.length}
onChange={(event) => selectChain(event.target?.checked, chain.chainId, root.accountId)}
>
<ChainTitle chain={chain} fontClass="text-text-primary" />
<FootnoteText className="text-text-tertiary">
{chain.selectedAmount}/{chain.accounts.length}
</FootnoteText>
</Checkbox>
<Accordion.Button buttonClass="ml-auto w-auto p-2" />
</div>
<Accordion.Content>
{/* chains accounts */}
<ul>
{chain.accounts.map((account) => (
<li key={account.id}>
<SelectableShard
className="ml-6"
truncate
name={account.name}
address={toAddress(account.accountId, {
prefix: chains[account.chainId]?.addressPrefix,
})}
checked={account.isSelected}
explorers={chains[account.chainId]?.explorers}
onChange={(checked) => selectAccount(checked, account)}
/>
</li>
))}
</ul>
</Accordion.Content>
</Accordion>
</li>
))}
</ul>
</li>
))}
</ul>

<Button className="ml-auto mt-7" onClick={handleSubmit}>
<Button className="ml-auto mt-7 mr-5" onClick={handleSubmit}>
{t('balances.shardsModalButton')}
</Button>
</BaseModal>
Expand Down

0 comments on commit f2e81aa

Please sign in to comment.