fix: polkadot vault layout issues when popover is shown (#3012)

novasamatech · Jan 21, 2025 · 6d80603 · 6d80603
1 parent 7e5cff5
commit 6d80603
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 81 deletions.
diff --git a/src/renderer/entities/wallet/ui/Cards/DerivedAccount.tsx b/src/renderer/entities/wallet/ui/Cards/DerivedAccount.tsx
@@ -1,29 +1,26 @@
-import { type MouseEvent } from 'react';
+import { type MouseEvent, type PropsWithChildren } from 'react';
 
 import { type VaultChainAccount, type VaultShardAccount } from '@/shared/core';
 import { SS58_PUBLIC_KEY_PREFIX, cnTw, toAddress } from '@/shared/lib/utils';
-import { BodyText, CaptionText, FootnoteText, HelpText, Icon, IconButton, Identicon } from '@/shared/ui';
+import { BodyText, CaptionText, FootnoteText, HelpText, Icon, Identicon } from '@/shared/ui';
 import { accountUtils } from '../../lib/account-utils';
 import { KeyIcon } from '../../lib/constants';
 
-type Props = {
+type Props = PropsWithChildren<{
   account: VaultChainAccount | VaultShardAccount[];
   addressPrefix?: number;
-  showInfoButton?: boolean;
   showSuffix?: boolean;
   className?: string;
   onClick?: () => void;
-  onInfoClick?: () => void;
-};
+}>;
 
 export const DerivedAccount = ({
   account,
   addressPrefix = SS58_PUBLIC_KEY_PREFIX,
-  showInfoButton = true,
   showSuffix,
   className,
+  children,
   onClick,
-  onInfoClick,
 }: Props) => {
   const isShardedAccount = accountUtils.isAccountWithShards(account);
   const chainWithAccountId = !isShardedAccount && account.accountId;
@@ -93,16 +90,16 @@ export const DerivedAccount = ({
       </button>
 
       <div className="absolute right-2 flex items-center">
-        {showInfoButton && (
-          <IconButton
+        {children && (
+          <div
             className={cnTw(
-              'absolute right-0 opacity-0 transition-opacity',
+              'absolute right-0 z-10 opacity-0 transition-opacity',
               'focus:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100',
               showSuffix && 'hidden',
             )}
-            name="details"
-            onClick={onInfoClick}
-          />
+          >
+            {children}
+          </div>
         )}
 
         <div

diff --git a/src/renderer/entities/wallet/ui/Cards/RootAccountLg.tsx b/src/renderer/entities/wallet/ui/Cards/RootAccountLg.tsx
@@ -1,17 +1,16 @@
-import { type MouseEvent } from 'react';
+import { type MouseEvent, type PropsWithChildren } from 'react';
 
 import { SS58_PUBLIC_KEY_PREFIX, cnTw, toAddress } from '@/shared/lib/utils';
 import { type AccountId } from '@/shared/polkadotjs-schemas';
-import { BodyText, IconButton, Identicon } from '@/shared/ui';
+import { BodyText, Identicon } from '@/shared/ui';
 
-type Props = {
+type Props = PropsWithChildren<{
   name: string;
   accountId: AccountId;
   className?: string;
-  onInfoClick?: () => void;
-};
+}>;
 
-export const RootAccountLg = ({ name, accountId, className, onInfoClick }: Props) => {
+export const RootAccountLg = ({ name, accountId, className, children }: Props) => {
   const handleClick = (event: MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
   };
@@ -29,7 +28,7 @@ export const RootAccountLg = ({ name, accountId, className, onInfoClick }: Props
         <BodyText className="truncate text-text-secondary">{name}</BodyText>
       </div>
 
-      <IconButton name="details" className="mx-1.5" onClick={onInfoClick} />
+      {children ? <div className="mx-1.5 flex gap-2">{children}</div> : null}
     </div>
   );
 };
diff --git a/src/renderer/entities/wallet/ui/VaultAccountsList/VaultAccountsList.tsx b/src/renderer/entities/wallet/ui/VaultAccountsList/VaultAccountsList.tsx
@@ -1,11 +1,11 @@
 import { type Chain, type ChainId, type VaultChainAccount, type VaultShardAccount } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { cnTw } from '@/shared/lib/utils';
-import { Accordion, FootnoteText, HelpText } from '@/shared/ui';
+import { FootnoteText, HelpText, IconButton } from '@/shared/ui';
+import { Accordion, Box, Popover } from '@/shared/ui-kit';
 import { ChainTitle } from '@/entities/chain';
 import { accountUtils } from '../../lib/account-utils';
 import { DerivedAccount } from '../Cards/DerivedAccount';
-import { ExplorersPopover } from '../ExplorersPopover/ExplorersPopover';
 
 type Props = {
   chains: Chain[];
@@ -19,51 +19,57 @@ export const VaultAccountsList = ({ chains, accountsMap, className, onShardClick
 
   return (
     <div className={cnTw('flex flex-col overflow-y-auto', className)}>
-      <FootnoteText className="pl-10 text-text-tertiary">{t('accountList.addressColumn')}</FootnoteText>
+      <FootnoteText className="mb-1 pl-10 text-text-tertiary">{t('accountList.addressColumn')}</FootnoteText>
 
       {chains.map((chain) => {
         if (!accountsMap[chain.chainId]) return;
 
         return (
-          <Accordion key={chain.chainId} isDefaultOpen className="pl-8 pr-1">
-            <Accordion.Button buttonClass="p-2">
-              <div className="flex gap-x-2">
-                <ChainTitle fontClass="text-text-primary" chain={chain} />
+          <div key={chain.chainId} className="pe-1 ps-8">
+            <Accordion initialOpen>
+              <Accordion.Trigger>
+                <span className="normal-case">
+                  <ChainTitle fontClass="text-text-primary" chain={chain} />
+                </span>
                 <FootnoteText className="text-text-tertiary">{accountsMap[chain.chainId].length}</FootnoteText>
-              </div>
-            </Accordion.Button>
-            <Accordion.Content as="ul">
-              {accountsMap[chain.chainId].map((account) => {
-                const isSharded = accountUtils.isAccountWithShards(account);
+              </Accordion.Trigger>
+              <Accordion.Content>
+                <ul>
+                  {accountsMap[chain.chainId].map((account) => {
+                    const isSharded = accountUtils.isAccountWithShards(account);
 
-                return (
-                  <li className="mb-2 last:mb-0" key={accountUtils.getDerivationPath(account)}>
-                    <ExplorersPopover
-                      address={isSharded ? account[0].accountId : account.accountId}
-                      explorers={chain.explorers || []}
-                      addressPrefix={chain.addressPrefix}
-                      button={
+                    return (
+                      <li className="mb-2 last:mb-0" key={accountUtils.getDerivationPath(account)}>
                         <DerivedAccount
                           account={account}
                           addressPrefix={chain.addressPrefix}
-                          showInfoButton={false}
                           onClick={isSharded ? () => onShardClick?.(account) : undefined}
-                        />
-                      }
-                    >
-                      <ExplorersPopover.Group title={t('general.explorers.derivationTitle')}>
-                        <HelpText className="break-all text-text-secondary">
-                          {accountUtils.getDerivationPath(account)}
-                        </HelpText>
-                      </ExplorersPopover.Group>
-                    </ExplorersPopover>
-                  </li>
-                );
-              })}
+                        >
+                          <Popover side="bottom" align="end">
+                            <Popover.Trigger>
+                              <IconButton name="details" />
+                            </Popover.Trigger>
+                            <Popover.Content>
+                              <Box gap={0.5} padding={4} width="230px">
+                                <FootnoteText className="text-text-tertiary">
+                                  {t('general.explorers.derivationTitle')}
+                                </FootnoteText>
+                                <HelpText className="break-all text-text-secondary">
+                                  {accountUtils.getDerivationPath(account)}
+                                </HelpText>
+                              </Box>
+                            </Popover.Content>
+                          </Popover>
+                        </DerivedAccount>
+                      </li>
+                    );
+                  })}
+                </ul>
 
-              <hr className="my-1 w-full border-divider" />
-            </Accordion.Content>
-          </Accordion>
+                <hr className="my-1 w-full border-divider" />
+              </Accordion.Content>
+            </Accordion>
+          </div>
         );
       })}
     </div>

diff --git a/src/renderer/features/wallet-details/ui/wallets/VaultWalletDetails.tsx b/src/renderer/features/wallet-details/ui/wallets/VaultWalletDetails.tsx
@@ -13,9 +13,10 @@ import { KeyType } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { useModalClose, useToggle } from '@/shared/lib/hooks';
 import { copyToClipboard, nullable, toAddress } from '@/shared/lib/utils';
-import { ContextMenu, HelpText, Icon, IconButton, StatusModal } from '@/shared/ui';
+import { FootnoteText, HelpText, Icon, IconButton, StatusModal } from '@/shared/ui';
 import { type IconNames } from '@/shared/ui/Icon/data';
-import { Box, Dropdown, Modal, ScrollArea, Tabs } from '@/shared/ui-kit';
+import { Hash } from '@/shared/ui-entities';
+import { Box, Dropdown, Modal, Popover, ScrollArea, Tabs } from '@/shared/ui-kit';
 import { networkModel } from '@/entities/network';
 import { RootAccountLg, VaultAccountsList, WalletCardLg, accountUtils, permissionUtils } from '@/entities/wallet';
 import { proxyAddFeature } from '@/features/proxy-add';
@@ -199,24 +200,33 @@ export const VaultWalletDetails = ({ wallet, onClose }: Props) => {
             </Box>
             <Tabs.Content value="accounts">
               <ScrollArea>
-                <ContextMenu button={<RootAccountLg name={wallet.name} accountId={root.accountId} className="px-5" />}>
-                  <ContextMenu.Group title={t('general.explorers.publicKeyTitle')}>
-                    <div className="flex items-center gap-x-2">
-                      <HelpText className="break-all text-text-secondary">
-                        {toAddress(root.accountId, { prefix: 1 })}
-                      </HelpText>
-                      <IconButton
-                        className="shrink-0"
-                        name="copy"
-                        size={20}
-                        onClick={() => copyToClipboard(root.accountId)}
-                      />
-                    </div>
-                  </ContextMenu.Group>
-                </ContextMenu>
+                <RootAccountLg name={wallet.name} accountId={root.accountId} className="mt-3 px-5">
+                  <Popover side="bottom" align="end">
+                    <Popover.Trigger>
+                      <IconButton name="details" />
+                    </Popover.Trigger>
+                    <Popover.Content>
+                      <Box gap={0.5} padding={4} width="230px">
+                        <FootnoteText className="text-text-tertiary">
+                          {t('general.explorers.publicKeyTitle')}
+                        </FootnoteText>
+                        <Box direction="row" verticalAlign="center" gap={3}>
+                          <HelpText className="text-text-secondary">
+                            <Hash value={toAddress(root.accountId, { prefix: 1 })} variant="full" />
+                          </HelpText>
+                          <IconButton
+                            className="shrink-0 text-icon-default"
+                            name="copy"
+                            onClick={() => copyToClipboard(root.accountId)}
+                          />
+                        </Box>
+                      </Box>
+                    </Popover.Content>
+                  </Popover>
+                </RootAccountLg>
 
                 <VaultAccountsList
-                  className="mt-4 h-[321px] px-5 pb-4"
+                  className="mt-4 px-5 pb-4"
                   chains={Object.values(chains)}
                   accountsMap={accountsMap}
                   onShardClick={vaultDetailsModel.events.shardsSelected}
@@ -226,7 +236,7 @@ export const VaultWalletDetails = ({ wallet, onClose }: Props) => {
             <Tabs.Content value="proxies">
               <ScrollArea>
                 {hasProxies ? (
-                  <ProxiesList className="mt-4 h-[371px]" wallet={wallet} canCreateProxy={canCreateProxy} />
+                  <ProxiesList className="mt-4" wallet={wallet} canCreateProxy={canCreateProxy} />
                 ) : (
                   <NoProxiesAction
                     className="mt-4 h-[371px]"

diff --git a/src/renderer/features/wallet-pairing-polkadot-vault/components/ManageVault/ManageVault.tsx b/src/renderer/features/wallet-pairing-polkadot-vault/components/ManageVault/ManageVault.tsx
@@ -268,12 +268,7 @@ export const ManageVault = ({ seedInfo, onBack, onClose, onComplete }: Props) =>
                             <Popover key={derivationPath} align="end">
                               <Popover.Trigger>
                                 <div className="w-full pt-2">
-                                  <DerivedAccount
-                                    key={derivationPath}
-                                    account={account}
-                                    showInfoButton={false}
-                                    showSuffix={isAltPressed}
-                                  />
+                                  <DerivedAccount key={derivationPath} account={account} showSuffix={isAltPressed} />
                                 </div>
                               </Popover.Trigger>
                               <Popover.Content>