feat: replace old components (#2926)

* feat: replace tooltip * feat: replace Popover * feat: remove old and unused * feat: replace address
novasamatech · Jan 7, 2025 · ab320f9 · ab320f9
1 parent 67a4c0a
commit ab320f9
Show file tree

Hide file tree

Showing 67 changed files with 495 additions and 1,136 deletions.
diff --git a/src/renderer/entities/governance/ui/TracksDetails.tsx b/src/renderer/entities/governance/ui/TracksDetails.tsx
@@ -1,6 +1,7 @@
 import { useI18n } from '@/shared/i18n';
 import { nonNullable } from '@/shared/lib/utils';
-import { CaptionText, Icon, Tooltip } from '@/shared/ui';
+import { CaptionText, Icon } from '@/shared/ui';
+import { Tooltip } from '@/shared/ui-kit';
 import { allTracks } from '../constants/tracks';
 
 type Props = {
@@ -16,14 +17,18 @@ export const TracksDetails = ({ tracks }: Props) => {
         <CaptionText className="text-white">{tracks.length}</CaptionText>
       </div>
 
-      <Tooltip
-        content={tracks
-          .map((trackId) => t(allTracks.find((track) => Number(track.id) === trackId)?.value || ''))
-          .filter(nonNullable)
-          .join(', ')}
-        pointer="up"
-      >
-        <Icon className="group-hover:text-icon-hover" name="info" size={16} />
+      <Tooltip side="bottom">
+        <Tooltip.Trigger>
+          <div tabIndex={0}>
+            <Icon className="group-hover:text-icon-hover" name="info" size={16} />
+          </div>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          {tracks
+            .map((trackId) => t(allTracks.find((track) => Number(track.id) === trackId)?.value || ''))
+            .filter(nonNullable)
+            .join(', ')}
+        </Tooltip.Content>
       </Tooltip>
     </div>
   );

diff --git a/src/renderer/entities/governance/ui/VoteCharts/ReferendumVoteChart/ReferendumVoteChart.tsx b/src/renderer/entities/governance/ui/VoteCharts/ReferendumVoteChart/ReferendumVoteChart.tsx
@@ -1,7 +1,7 @@
 import { useI18n } from '@/shared/i18n';
-import { Tooltip } from '@/shared/ui/Popovers';
 import { FootnoteText, HelpText } from '@/shared/ui/Typography';
 import { VoteChart } from '@/shared/ui-entities';
+import { Tooltip } from '@/shared/ui-kit';
 
 type Props = {
   aye: number;
@@ -26,18 +26,17 @@ export const ReferendumVoteChart = ({
 
   if (descriptionPosition === 'tooltip') {
     return (
-      <Tooltip
-        offsetPx={-78}
-        wrapperClass="w-full"
-        content={
+      <Tooltip>
+        <Tooltip.Trigger>
+          <div>{chartNode}</div>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
           <div className="flex flex-col">
             <HelpText className="text-inherit">{`${t('voteChart.toPass')} ${pass.toFixed(2)}%`}</HelpText>
             <HelpText className="text-inherit">{`${t('voteChart.aye')} ${aye.toFixed(2)}%`}</HelpText>
             <HelpText className="text-inherit">{`${t('voteChart.nay')} ${nay.toFixed(2)}%`}</HelpText>
           </div>
-        }
-      >
-        {chartNode}
+        </Tooltip.Content>
       </Tooltip>
     );
   }

diff --git a/src/renderer/entities/proxy/ui/ProxyPopover.tsx b/src/renderer/entities/proxy/ui/ProxyPopover.tsx
@@ -2,7 +2,8 @@ import { type PropsWithChildren } from 'react';
 import { Trans } from 'react-i18next';
 
 import { useI18n } from '@/shared/i18n';
-import { FootnoteText, Icon, LabelHelpBox, Popover, SmallTitleText } from '@/shared/ui';
+import { FootnoteText, Icon, LabelHelpBox, SmallTitleText } from '@/shared/ui';
+import { Popover } from '@/shared/ui-kit';
 
 // const WIKI_LINK = '';
 
@@ -13,13 +14,18 @@ export const ProxyPopover = ({ children }: PropsWithChildren) => {
   // const infoLink = <InfoLink url={WIKI_LINK} className="text-footnote text-tab-text-accent" />;
 
   return (
-    <Popover
-      offsetPx={4}
-      contentClass="p-4"
-      panelClass="w-[360px]"
-      wrapperClass="w-max"
-      content={
-        <div className="flex flex-col gap-y-4">
+    <Popover>
+      <Popover.Trigger>
+        <div>
+          {children ? (
+            <LabelHelpBox className="mb-6 mt-4">{children}</LabelHelpBox>
+          ) : (
+            <Icon name="questionOutline" className="hover:text-icon-hover active:text-icon-active" size={16} />
+          )}
+        </div>
+      </Popover.Trigger>
+      <Popover.Content>
+        <div className="flex w-[360px] flex-col gap-y-4 p-4">
           <section className="flex flex-col gap-y-2">
             <SmallTitleText>{t('walletDetails.common.proxyTooltipWhatIsProxyTitle')}</SmallTitleText>
             <FootnoteText className="text-text-secondary">
@@ -34,13 +40,7 @@ export const ProxyPopover = ({ children }: PropsWithChildren) => {
             </FootnoteText>
           </section>
         </div>
-      }
-    >
-      {children ? (
-        <LabelHelpBox className="mb-6 mt-4">{children}</LabelHelpBox>
-      ) : (
-        <Icon name="questionOutline" className="hover:text-icon-hover active:text-icon-active" size={16} />
-      )}
+      </Popover.Content>
     </Popover>
   );
 };
diff --git a/src/renderer/entities/proxy/ui/PureProxyPopover.tsx b/src/renderer/entities/proxy/ui/PureProxyPopover.tsx
@@ -2,7 +2,8 @@ import { type PropsWithChildren } from 'react';
 import { Trans } from 'react-i18next';
 
 import { useI18n } from '@/shared/i18n';
-import { FootnoteText, Icon, LabelHelpBox, Popover, SmallTitleText } from '@/shared/ui';
+import { FootnoteText, Icon, LabelHelpBox, SmallTitleText } from '@/shared/ui';
+import { Popover } from '@/shared/ui-kit';
 
 // const WIKI_LINK = '';
 
@@ -13,13 +14,18 @@ export const PureProxyPopover = ({ children }: PropsWithChildren) => {
   // const infoLink = <InfoLink url={WIKI_LINK} className="text-footnote text-tab-text-accent" />;
 
   return (
-    <Popover
-      offsetPx={4}
-      contentClass="p-4"
-      panelClass="w-[360px]"
-      wrapperClass="w-max"
-      content={
-        <div className="flex flex-col gap-y-4">
+    <Popover>
+      <Popover.Trigger>
+        <div>
+          {children ? (
+            <LabelHelpBox className="mb-6 mt-4">{children}</LabelHelpBox>
+          ) : (
+            <Icon name="questionOutline" className="hover:text-icon-hover active:text-icon-active" size={16} />
+          )}
+        </div>
+      </Popover.Trigger>
+      <Popover.Content>
+        <div className="flex w-[360px] flex-col gap-y-4 p-4">
           <section className="flex flex-col gap-y-2">
             <SmallTitleText>{t('proxy.pureProxyTooltip.title1')}</SmallTitleText>
             <FootnoteText className="text-text-secondary">
@@ -34,13 +40,7 @@ export const PureProxyPopover = ({ children }: PropsWithChildren) => {
             </FootnoteText>
           </section>
         </div>
-      }
-    >
-      {children ? (
-        <LabelHelpBox className="mb-6 mt-4">{children}</LabelHelpBox>
-      ) : (
-        <Icon name="questionOutline" className="hover:text-icon-hover active:text-icon-active" size={16} />
-      )}
+      </Popover.Content>
     </Popover>
   );
 };
diff --git a/src/renderer/entities/staking/ui/StakingPopover/StakingPopover.tsx b/src/renderer/entities/staking/ui/StakingPopover/StakingPopover.tsx
@@ -1,21 +1,23 @@
 import { type PropsWithChildren, type ReactNode } from 'react';
 
-import { FootnoteText, LabelHelpBox, Popover } from '@/shared/ui';
+import { FootnoteText, LabelHelpBox } from '@/shared/ui';
+import { Popover } from '@/shared/ui-kit';
 
 type Props = {
   labelText?: string;
   children: ReactNode;
 };
 
 const StakingRoot = ({ labelText, children }: PropsWithChildren<Props>) => (
-  <Popover
-    offsetPx={1}
-    contentClass="p-4"
-    panelClass="w-[230px]"
-    wrapperClass="w-max"
-    content={<ul className="flex list-disc flex-col gap-y-1 pl-5">{children}</ul>}
-  >
-    <LabelHelpBox>{labelText}</LabelHelpBox>
+  <Popover>
+    <Popover.Trigger>
+      <div>
+        <LabelHelpBox>{labelText}</LabelHelpBox>
+      </div>
+    </Popover.Trigger>
+    <Popover.Content>
+      <ul className="flex w-[230px] list-disc flex-col gap-y-1 p-4 pl-5">{children}</ul>
+    </Popover.Content>
   </Popover>
 );
 

diff --git a/src/renderer/entities/transaction/ui/MultisigDepositWithLabel/MultisigDepositWithLabel.tsx b/src/renderer/entities/transaction/ui/MultisigDepositWithLabel/MultisigDepositWithLabel.tsx
@@ -2,7 +2,8 @@ import { type ComponentProps } from 'react';
 
 import { useI18n } from '@/shared/i18n';
 import { cnTw } from '@/shared/lib/utils';
-import { DetailRow, FootnoteText, Icon, Tooltip } from '@/shared/ui';
+import { DetailRow, FootnoteText, Icon } from '@/shared/ui';
+import { Tooltip } from '@/shared/ui-kit';
 import { MultisigDeposit } from '../MultisigDeposit/MultisigDeposit';
 
 type Props = ComponentProps<typeof MultisigDeposit> & {
@@ -18,8 +19,13 @@ export const MultisigDepositWithLabel = ({ wrapperClassName, ...depositProps }:
         <>
           <Icon className="text-text-tertiary" name="lock" size={12} />
           <FootnoteText className="text-text-tertiary">{t('staking.multisigDepositLabel')}</FootnoteText>
-          <Tooltip content={t('staking.tooltips.depositDescription')} offsetPx={-90}>
-            <Icon name="info" className="cursor-pointer hover:text-icon-hover" size={16} />
+          <Tooltip>
+            <Tooltip.Trigger>
+              <div tabIndex={0}>
+                <Icon name="info" className="cursor-pointer hover:text-icon-hover" size={16} />
+              </div>
+            </Tooltip.Trigger>
+            <Tooltip.Content>{t('staking.tooltips.depositDescription')}</Tooltip.Content>
           </Tooltip>
         </>
       }

diff --git a/src/renderer/entities/transaction/ui/ProxyDepositWithLabel/ProxyDepositWithLabel.tsx b/src/renderer/entities/transaction/ui/ProxyDepositWithLabel/ProxyDepositWithLabel.tsx
@@ -2,7 +2,8 @@ import { type ComponentProps } from 'react';
 
 import { useI18n } from '@/shared/i18n';
 import { cnTw } from '@/shared/lib/utils';
-import { DetailRow, FootnoteText, Icon, Tooltip } from '@/shared/ui';
+import { DetailRow, FootnoteText, Icon } from '@/shared/ui';
+import { Tooltip } from '@/shared/ui-kit';
 import { ProxyDeposit } from '../ProxyDeposit/ProxyDeposit';
 
 type Props = ComponentProps<typeof ProxyDeposit> & {
@@ -18,8 +19,13 @@ export const ProxyDepositWithLabel = ({ wrapperClassName, ...depositProps }: Pro
         <>
           <Icon className="text-text-tertiary" name="lock" size={12} />
           <FootnoteText className="text-text-tertiary">{t('proxy.proxyDepositLabel')}</FootnoteText>
-          <Tooltip content={t('proxy.proxyDepositHint')} offsetPx={-60}>
-            <Icon name="info" className="cursor-pointer hover:text-icon-hover" size={16} />
+          <Tooltip>
+            <Tooltip.Trigger>
+              <div tabIndex={0}>
+                <Icon name="info" className="cursor-pointer hover:text-icon-hover" size={16} />
+              </div>
+            </Tooltip.Trigger>
+            <Tooltip.Content>{t('proxy.proxyDepositHint')}</Tooltip.Content>
           </Tooltip>
         </>
       }

diff --git a/src/renderer/entities/wallet/ui/AddressWithExplorers/AddressWithExplorers.tsx b/src/renderer/entities/wallet/ui/AddressWithExplorers/AddressWithExplorers.tsx
diff --git a/src/renderer/entities/wallet/ui/AddressWithName/AddressWithName.stories.tsx b/src/renderer/entities/wallet/ui/AddressWithName/AddressWithName.stories.tsx
diff --git a/src/renderer/entities/wallet/ui/AddressWithName/AddressWithName.test.tsx b/src/renderer/entities/wallet/ui/AddressWithName/AddressWithName.test.tsx