From 9f737c99b33987a46c11cc271ccb2007efcea6d3 Mon Sep 17 00:00:00 2001
From: Egor B <egor@novawallet.io>
Date: Tue, 10 Oct 2023 17:26:22 +0200
Subject: [PATCH 1/3] feat: updated shards ui for shards select modal

---
 .../ui/SelectableShard/SelectableShard.tsx    | 36 ++++++++++++++
 src/renderer/entities/wallet/ui/index.ts      |  1 +
 .../SelectShardModal/SelectShardModal.tsx     | 47 +++++++++----------
 3 files changed, 60 insertions(+), 24 deletions(-)
 create mode 100644 src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx

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..32c18a39f1
--- /dev/null
+++ b/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx
@@ -0,0 +1,36 @@
+import { cnTw } from '@renderer/shared/lib/utils';
+import { BodyText, Checkbox, HelpText, Icon, Identicon, InfoPopover } 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;
+  semiChecked?: boolean;
+  explorers?: Explorer[];
+  onChange: (value: boolean) => void;
+};
+
+export const SelectableShard = ({ className, name, address, semiChecked, checked, explorers, onChange }: Props) => {
+  const popoverItems = useAddressInfo(address, explorers, false);
+
+  return (
+    <Checkbox
+      checked={checked}
+      className={cnTw('flex items-center gap-x-2 pr-2 py-1.5 hover:bg-action-background-hover', 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>
+        <HelpText className="text-text-tertiary truncate">{address}</HelpText>
+      </div>
+      <InfoPopover data={popoverItems} className="w-[230px]">
+        <Icon name="info" size={16} className="shrink-0 group-hover:text-icon-hover" />
+      </InfoPopover>
+    </Checkbox>
+  );
+};
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..54ddede6cc 100644
--- a/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx
+++ b/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx
@@ -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}
     >
       <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}
@@ -145,22 +146,22 @@ export const SelectShardModal = ({ isOpen, activeShards, accounts, onClose }: Pr
         )}
         {searchedShards.rootAccounts.map((root) => (
           <li key={root.id}>
-            <Checkbox
+            <SelectableShard
+              className="ml-2"
+              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"
+                    className="ml-6 p-2"
                     semiChecked={chain.selectedAmount > 0 && chain.selectedAmount < chain.accounts.length}
                     onChange={(event) => selectChain(event.target?.checked, chain.chainId, root.accountId)}
                   >
@@ -174,18 +175,16 @@ export const SelectShardModal = ({ isOpen, activeShards, accounts, onClose }: Pr
                   <ul>
                     {chain.accounts.map((account) => (
                       <li key={account.id}>
-                        <Checkbox
+                        <SelectableShard
+                          className="ml-14"
+                          name={account.name}
+                          address={toAddress(account.accountId, {
+                            prefix: chains[account.chainId]?.addressPrefix,
+                          })}
                           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>
+                          explorers={chains[account.chainId]?.explorers}
+                          onChange={(checked) => selectAccount(checked, account)}
+                        />
                       </li>
                     ))}
                   </ul>

From 656945101ace8f4ba9269f1cba7279d34ac9d7a9 Mon Sep 17 00:00:00 2001
From: Egor B <egor@novawallet.io>
Date: Tue, 10 Oct 2023 19:47:30 +0200
Subject: [PATCH 2/3] feat: added accordion for chain

---
 .../ui/SelectableShard/SelectableShard.tsx    |  7 +-
 .../SelectShardModal/SelectShardModal.tsx     | 69 ++++++++++---------
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx b/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx
index 32c18a39f1..5187df79f8 100644
--- a/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx
+++ b/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx
@@ -19,7 +19,10 @@ export const SelectableShard = ({ className, name, address, semiChecked, checked
   return (
     <Checkbox
       checked={checked}
-      className={cnTw('flex items-center gap-x-2 pr-2 py-1.5 hover:bg-action-background-hover', className)}
+      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)}
     >
@@ -28,7 +31,7 @@ export const SelectableShard = ({ className, name, address, semiChecked, checked
         <BodyText>{name}</BodyText>
         <HelpText className="text-text-tertiary truncate">{address}</HelpText>
       </div>
-      <InfoPopover data={popoverItems} className="w-[230px]">
+      <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>
diff --git a/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx b/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx
index 54ddede6cc..4222199b2b 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 {
@@ -147,7 +147,6 @@ export const SelectShardModal = ({ isOpen, activeShards, accounts, onClose }: Pr
         {searchedShards.rootAccounts.map((root) => (
           <li key={root.id}>
             <SelectableShard
-              className="ml-2"
               name={root.name}
               address={toAddress(root.accountId)}
               checked={root.isSelected}
@@ -159,35 +158,41 @@ export const SelectShardModal = ({ isOpen, activeShards, accounts, onClose }: Pr
             <ul>
               {root.chains.map((chain) => (
                 <li key={chain.chainId}>
-                  <Checkbox
-                    checked={chain.isSelected}
-                    className="ml-6 p-2"
-                    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}>
-                        <SelectableShard
-                          className="ml-14"
-                          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 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"
+                              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>
@@ -195,7 +200,7 @@ export const SelectShardModal = ({ isOpen, activeShards, accounts, onClose }: Pr
         ))}
       </ul>
 
-      <Button className="ml-auto mt-7" onClick={handleSubmit}>
+      <Button className="ml-auto mt-7 mr-5" onClick={handleSubmit}>
         {t('balances.shardsModalButton')}
       </Button>
     </BaseModal>

From 054f903e43849a74eaaf41b3e1aad1786f244eb6 Mon Sep 17 00:00:00 2001
From: Egor B <egor@novawallet.io>
Date: Wed, 11 Oct 2023 20:13:14 +0200
Subject: [PATCH 3/3] feat: updated address truncate for selectable shard

---
 .../ui/SelectableShard/SelectableShard.tsx    | 20 ++++++++++++++++---
 .../SelectShardModal/SelectShardModal.tsx     |  1 +
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx b/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx
index 5187df79f8..45bff24fec 100644
--- a/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx
+++ b/src/renderer/entities/wallet/ui/SelectableShard/SelectableShard.tsx
@@ -1,5 +1,5 @@
 import { cnTw } from '@renderer/shared/lib/utils';
-import { BodyText, Checkbox, HelpText, Icon, Identicon, InfoPopover } from '@renderer/shared/ui';
+import { BodyText, Checkbox, HelpText, Icon, Identicon, InfoPopover, Truncate } from '@renderer/shared/ui';
 import { Address, Explorer } from '@renderer/shared/core';
 import { useAddressInfo } from '../../lib/useAddressInfo';
 
@@ -8,12 +8,22 @@ type Props = {
   className?: string;
   address: Address;
   checked: boolean;
+  truncate?: boolean;
   semiChecked?: boolean;
   explorers?: Explorer[];
   onChange: (value: boolean) => void;
 };
 
-export const SelectableShard = ({ className, name, address, semiChecked, checked, explorers, onChange }: Props) => {
+export const SelectableShard = ({
+  className,
+  name,
+  address,
+  semiChecked,
+  checked,
+  truncate,
+  explorers,
+  onChange,
+}: Props) => {
   const popoverItems = useAddressInfo(address, explorers, false);
 
   return (
@@ -29,7 +39,11 @@ export const SelectableShard = ({ className, name, address, semiChecked, checked
       <Identicon address={address} size={20} background={false} canCopy={false} />
       <div className="truncate mr-auto">
         <BodyText>{name}</BodyText>
-        <HelpText className="text-text-tertiary truncate">{address}</HelpText>
+        {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" />
diff --git a/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx b/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx
index 4222199b2b..f6588c3626 100644
--- a/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx
+++ b/src/renderer/pages/Assets/AssetsList/components/SelectShardModal/SelectShardModal.tsx
@@ -180,6 +180,7 @@ export const SelectShardModal = ({ isOpen, activeShards, accounts, onClose }: Pr
                           <li key={account.id}>
                             <SelectableShard
                               className="ml-6"
+                              truncate
                               name={account.name}
                               address={toAddress(account.accountId, {
                                 prefix: chains[account.chainId]?.addressPrefix,