fix: switch to the new Account component (#2687)

novasamatech · Nov 19, 2024 · a743279 · a743279
1 parent c66c692
commit a743279
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 81 deletions.
diff --git a/src/renderer/features/operations/OperationsConfirm/AddProxy/ui/Confirmation.tsx b/src/renderer/features/operations/OperationsConfirm/AddProxy/ui/Confirmation.tsx
@@ -2,14 +2,15 @@ import { useStoreMap, useUnit } from 'effector-react';
 import { type ReactNode, useState } from 'react';
 
 import { useI18n } from '@/shared/i18n';
+import { toAccountId } from '@/shared/lib/utils';
 import { Button, DetailRow, FootnoteText, Icon, Tooltip } from '@/shared/ui';
-import { TransactionDetails } from '@/shared/ui-entities';
+import { Account, TransactionDetails } from '@/shared/ui-entities';
 import { AssetBalance } from '@/entities/asset';
 import { SignButton } from '@/entities/operations';
 import { AssetFiatBalance } from '@/entities/price';
 import { proxyUtils } from '@/entities/proxy';
 import { FeeWithLabel, MultisigDepositWithLabel } from '@/entities/transaction';
-import { AddressWithExplorers, accountUtils, walletModel } from '@/entities/wallet';
+import { accountUtils, walletModel } from '@/entities/wallet';
 import { MultisigExistsAlert } from '../../common/MultisigExistsAlert';
 import { confirmModel } from '../model/confirm-model';
 
@@ -75,14 +76,8 @@ export const Confirmation = ({ id = 0, onGoBack, secondaryActionButton, hideSign
           <FootnoteText>{t(proxyUtils.getProxyTypeName(confirmStore.proxyType))}</FootnoteText>
         </DetailRow>
 
-        <DetailRow label={t('proxy.details.delegateTo')}>
-          <AddressWithExplorers
-            type="short"
-            explorers={confirmStore.chain.explorers}
-            addressFont="text-footnote text-inherit"
-            address={confirmStore.delegate}
-            wrapperClassName="text-text-secondary"
-          />
+        <DetailRow label={t('proxy.details.delegateTo')} className="text-text-secondary">
+          <Account accountId={toAccountId(confirmStore.delegate)} chain={confirmStore.chain} variant="short" />
         </DetailRow>
 
         <hr className="w-full border-filter-border pr-2" />

diff --git a/src/renderer/features/operations/OperationsConfirm/BondNominate/ui/Confirmation.tsx b/src/renderer/features/operations/OperationsConfirm/BondNominate/ui/Confirmation.tsx
@@ -3,14 +3,14 @@ import { type ReactNode } from 'react';
 
 import { useI18n } from '@/shared/i18n';
 import { useToggle } from '@/shared/lib/hooks';
-import { formatAmount } from '@/shared/lib/utils';
+import { formatAmount, toAccountId } from '@/shared/lib/utils';
 import { Button, CaptionText, DetailRow, FootnoteText, Icon, Tooltip } from '@/shared/ui';
-import { TransactionDetails } from '@/shared/ui-entities';
+import { Account, TransactionDetails } from '@/shared/ui-entities';
 import { AssetBalance } from '@/entities/asset';
 import { SignButton } from '@/entities/operations';
 import { AssetFiatBalance } from '@/entities/price';
 import { AccountsModal, SelectedValidatorsModal, StakingPopover, UnstakingDuration } from '@/entities/staking';
-import { AddressWithExplorers, accountUtils, walletModel } from '@/entities/wallet';
+import { accountUtils, walletModel } from '@/entities/wallet';
 import { type Config } from '../../../OperationsValidation';
 import { MultisigExistsAlert } from '../../common/MultisigExistsAlert';
 import { confirmModel } from '../model/confirm-model';
@@ -118,11 +118,7 @@ export const Confirmation = ({
           <hr className="w-full border-filter-border pr-2" />
           <DetailRow label={t('staking.confirmation.rewardsDestinationLabel')}>
             {confirmStore.destination ? (
-              <AddressWithExplorers
-                address={confirmStore.destination}
-                explorers={confirmStore.chain.explorers}
-                type="short"
-              />
+              <Account accountId={toAccountId(confirmStore.destination)} chain={confirmStore.chain} variant="short" />
             ) : (
               <FootnoteText>{t('staking.confirmation.restakeRewards')}</FootnoteText>
             )}

diff --git a/src/renderer/features/operations/OperationsConfirm/Delegate/ui/Confirmation.tsx b/src/renderer/features/operations/OperationsConfirm/Delegate/ui/Confirmation.tsx
@@ -4,15 +4,15 @@ import { type ReactNode } from 'react';
 import { Trans } from 'react-i18next';
 
 import { useI18n } from '@/shared/i18n';
-import { formatAmount } from '@/shared/lib/utils';
+import { formatAmount, toAccountId } from '@/shared/lib/utils';
 import { Button, DetailRow, FootnoteText, HeadlineText, Icon, LargeTitleText, Loader, Tooltip } from '@/shared/ui';
-import { TransactionDetails } from '@/shared/ui-entities';
+import { Account, TransactionDetails } from '@/shared/ui-entities';
 import { Box } from '@/shared/ui-kit';
 import { AssetBalance } from '@/entities/asset';
 import { BalanceDiff, LockPeriodDiff, LockValueDiff, TracksDetails, votingService } from '@/entities/governance';
 import { SignButton } from '@/entities/operations';
 import { AssetFiatBalance } from '@/entities/price';
-import { AddressWithExplorers, accountUtils, walletModel } from '@/entities/wallet';
+import { accountUtils, walletModel } from '@/entities/wallet';
 import { lockPeriodsModel, locksPeriodsAggregate } from '@/features/governance';
 import { type Config } from '../../../OperationsValidation';
 import { MultisigExistsAlert } from '../../common/MultisigExistsAlert';
@@ -133,7 +133,7 @@ export const Confirmation = ({
         proxied={confirmStore.proxiedAccount}
       >
         <DetailRow label={t('governance.addDelegation.confirmation.target')}>
-          <AddressWithExplorers address={confirmStore.target} explorers={confirmStore.chain.explorers} type="short" />
+          <Account variant="short" chain={confirmStore.chain} accountId={toAccountId(confirmStore.target)} />
         </DetailRow>
 
         <DetailRow label={t('governance.addDelegation.confirmation.tracks')}>

diff --git a/src/renderer/features/operations/OperationsConfirm/EditDelegation/ui/Confirmation.tsx b/src/renderer/features/operations/OperationsConfirm/EditDelegation/ui/Confirmation.tsx
@@ -4,15 +4,15 @@ import { type ReactNode } from 'react';
 import { Trans } from 'react-i18next';
 
 import { useI18n } from '@/shared/i18n';
-import { formatAmount } from '@/shared/lib/utils';
+import { formatAmount, toAccountId } from '@/shared/lib/utils';
 import { Button, DetailRow, FootnoteText, HeadlineText, Icon, LargeTitleText, Loader, Tooltip } from '@/shared/ui';
-import { TransactionDetails } from '@/shared/ui-entities';
+import { Account, TransactionDetails } from '@/shared/ui-entities';
 import { Box } from '@/shared/ui-kit';
 import { AssetBalance } from '@/entities/asset';
 import { BalanceDiff, LockPeriodDiff, LockValueDiff, TracksDetails, votingService } from '@/entities/governance';
 import { SignButton } from '@/entities/operations';
 import { AssetFiatBalance } from '@/entities/price';
-import { AddressWithExplorers, accountUtils, walletModel } from '@/entities/wallet';
+import { accountUtils, walletModel } from '@/entities/wallet';
 import { lockPeriodsModel, locksPeriodsAggregate } from '@/features/governance';
 import { type Config } from '../../../OperationsValidation';
 import { MultisigExistsAlert } from '../../common/MultisigExistsAlert';
@@ -133,7 +133,7 @@ export const Confirmation = ({
         proxied={confirmStore.proxiedAccount}
       >
         <DetailRow label={t('governance.addDelegation.confirmation.target')}>
-          <AddressWithExplorers address={confirmStore.target} explorers={confirmStore.chain.explorers} type="short" />
+          <Account variant="short" chain={confirmStore.chain} accountId={toAccountId(confirmStore.target)} />
         </DetailRow>
 
         <DetailRow label={t('governance.addDelegation.confirmation.tracks')}>

diff --git a/src/renderer/features/operations/OperationsConfirm/Payee/ui/Confirmation.tsx b/src/renderer/features/operations/OperationsConfirm/Payee/ui/Confirmation.tsx
@@ -3,13 +3,14 @@ import { type ReactNode } from 'react';
 
 import { useI18n } from '@/shared/i18n';
 import { useToggle } from '@/shared/lib/hooks';
+import { toAccountId } from '@/shared/lib/utils';
 import { Button, DetailRow, FootnoteText, Icon, Tooltip } from '@/shared/ui';
-import { TransactionDetails } from '@/shared/ui-entities';
+import { Account, TransactionDetails } from '@/shared/ui-entities';
 import { AssetBalance } from '@/entities/asset';
 import { SignButton } from '@/entities/operations';
 import { AssetFiatBalance } from '@/entities/price';
 import { AccountsModal } from '@/entities/staking';
-import { AddressWithExplorers, accountUtils, walletModel } from '@/entities/wallet';
+import { accountUtils, walletModel } from '@/entities/wallet';
 import { MultisigExistsAlert } from '../../common/MultisigExistsAlert';
 import { confirmModel } from '../model/confirm-model';
 
@@ -68,11 +69,7 @@ export const Confirmation = ({ id = 0, onGoBack, secondaryActionButton, hideSign
         >
           <DetailRow label={t('staking.confirmation.rewardsDestinationLabel')}>
             {confirmStore.destination ? (
-              <AddressWithExplorers
-                address={confirmStore.destination}
-                explorers={confirmStore.chain.explorers}
-                type="short"
-              />
+              <Account accountId={toAccountId(confirmStore.destination)} chain={confirmStore.chain} variant="short" />
             ) : (
               <FootnoteText>{t('staking.confirmation.restakeRewards')}</FootnoteText>
             )}

diff --git a/src/renderer/features/operations/OperationsConfirm/RemoveProxy/ui/Confirmation.tsx b/src/renderer/features/operations/OperationsConfirm/RemoveProxy/ui/Confirmation.tsx
@@ -2,13 +2,13 @@ import { useStoreMap, useUnit } from 'effector-react';
 import { type ReactNode, useState } from 'react';
 
 import { useI18n } from '@/shared/i18n';
-import { toAddress } from '@/shared/lib/utils';
+import { toAccountId } from '@/shared/lib/utils';
 import { Button, DetailRow, FootnoteText, Icon } from '@/shared/ui';
-import { TransactionDetails } from '@/shared/ui-entities';
+import { Account, TransactionDetails } from '@/shared/ui-entities';
 import { SignButton } from '@/entities/operations';
 import { proxyUtils } from '@/entities/proxy';
 import { FeeWithLabel, MultisigDepositWithLabel } from '@/entities/transaction';
-import { AddressWithExplorers, accountUtils, walletModel } from '@/entities/wallet';
+import { accountUtils, walletModel } from '@/entities/wallet';
 import { MultisigExistsAlert } from '../../common/MultisigExistsAlert';
 import { confirmModel } from '../model/confirm-model';
 
@@ -70,18 +70,12 @@ export const Confirmation = ({ id = 0, onGoBack, secondaryActionButton, hideSign
         signatory={confirmStore.signatory}
         proxied={confirmStore.proxiedAccount}
       >
-        <DetailRow label={t('proxy.details.accessType')} className="pr-2">
+        <DetailRow label={t('proxy.details.accessType')}>
           <FootnoteText>{t(proxyUtils.getProxyTypeName(confirmStore.proxyType))}</FootnoteText>
         </DetailRow>
 
-        <DetailRow label={t('proxy.details.revokeFor')}>
-          <AddressWithExplorers
-            type="short"
-            explorers={confirmStore.chain?.explorers}
-            addressFont="text-footnote text-inherit"
-            address={toAddress(confirmStore.delegate, { prefix: confirmStore.chain?.addressPrefix })}
-            wrapperClassName="text-text-secondary"
-          />
+        <DetailRow label={t('proxy.details.revokeFor')} className="text-text-secondary">
+          <Account accountId={toAccountId(confirmStore.delegate)} chain={confirmStore.chain} variant="short" />
         </DetailRow>
 
         <hr className="w-full border-filter-border pr-2" />

diff --git a/src/renderer/features/operations/OperationsConfirm/RemovePureProxied/ui/Confirmation.tsx b/src/renderer/features/operations/OperationsConfirm/RemovePureProxied/ui/Confirmation.tsx
@@ -3,13 +3,12 @@ import { type ReactNode, useState } from 'react';
 
 import { ProxyType } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
-import { toAddress } from '@/shared/lib/utils';
 import { Button, DetailRow, FootnoteText, Icon } from '@/shared/ui';
-import { TransactionDetails } from '@/shared/ui-entities';
+import { Account, TransactionDetails } from '@/shared/ui-entities';
 import { SignButton } from '@/entities/operations';
 import { proxyUtils } from '@/entities/proxy';
 import { FeeWithLabel, MultisigDepositWithLabel } from '@/entities/transaction';
-import { AddressWithExplorers, accountUtils, walletModel } from '@/entities/wallet';
+import { accountUtils, walletModel } from '@/entities/wallet';
 import { MultisigExistsAlert } from '../../common/MultisigExistsAlert';
 import { confirmModel } from '../model/confirm-model';
 
@@ -75,14 +74,8 @@ export const Confirmation = ({ id = 0, secondaryActionButton, hideSignButton, on
           <FootnoteText>{t(proxyUtils.getProxyTypeName(ProxyType.ANY))}</FootnoteText>
         </DetailRow>
 
-        <DetailRow label={t('proxy.details.revokeFor')}>
-          <AddressWithExplorers
-            type="short"
-            explorers={confirmStore.chain?.explorers}
-            addressFont="text-footnote text-inherit"
-            address={toAddress(confirmStore.spawner, { prefix: confirmStore.chain?.addressPrefix })}
-            wrapperClassName="text-text-secondary"
-          />
+        <DetailRow label={t('proxy.details.revokeFor')} className="text-text-secondary">
+          <Account accountId={confirmStore.spawner} chain={confirmStore.chain} variant="short" />
         </DetailRow>
 
         <hr className="w-full border-filter-border pr-2" />

diff --git a/src/renderer/features/operations/OperationsConfirm/RevokeDelegation/ui/Confirmation.tsx b/src/renderer/features/operations/OperationsConfirm/RevokeDelegation/ui/Confirmation.tsx
@@ -4,15 +4,15 @@ import { type ReactNode } from 'react';
 import { Trans } from 'react-i18next';
 
 import { useI18n } from '@/shared/i18n';
-import { formatAmount } from '@/shared/lib/utils';
+import { formatAmount, toAccountId } from '@/shared/lib/utils';
 import { Button, DetailRow, FootnoteText, HeadlineText, Icon, LargeTitleText, Loader, Tooltip } from '@/shared/ui';
-import { TransactionDetails } from '@/shared/ui-entities';
+import { Account, TransactionDetails } from '@/shared/ui-entities';
 import { Box } from '@/shared/ui-kit';
 import { AssetBalance } from '@/entities/asset';
 import { BalanceDiff, LockPeriodDiff, LockValueDiff, TracksDetails, votingService } from '@/entities/governance';
 import { SignButton } from '@/entities/operations';
 import { AssetFiatBalance } from '@/entities/price';
-import { AddressWithExplorers, accountUtils, walletModel } from '@/entities/wallet';
+import { accountUtils, walletModel } from '@/entities/wallet';
 import { lockPeriodsModel, locksPeriodsAggregate } from '@/features/governance';
 import { type Config } from '../../../OperationsValidation';
 import { MultisigExistsAlert } from '../../common/MultisigExistsAlert';
@@ -134,7 +134,7 @@ export const Confirmation = ({
         proxied={confirmStore.proxiedAccount}
       >
         <DetailRow label={t('governance.addDelegation.confirmation.target')}>
-          <AddressWithExplorers address={confirmStore.target} explorers={confirmStore.chain.explorers} type="short" />
+          <Account variant="short" chain={confirmStore.chain} accountId={toAccountId(confirmStore.target)} />
         </DetailRow>
 
         <DetailRow label={t('governance.addDelegation.confirmation.tracks')}>

diff --git a/src/renderer/features/operations/OperationsConfirm/Transfer/ui/Confirmation.tsx b/src/renderer/features/operations/OperationsConfirm/Transfer/ui/Confirmation.tsx
@@ -4,12 +4,12 @@ import { type ReactNode } from 'react';
 import { TEST_IDS } from '@/shared/constants';
 import { useI18n } from '@/shared/i18n';
 import { Button, DetailRow, FootnoteText, Icon, Tooltip } from '@/shared/ui';
-import { TransactionDetails } from '@/shared/ui-entities';
+import { Account, TransactionDetails } from '@/shared/ui-entities';
 import { AssetBalance } from '@/entities/asset';
 import { ChainTitle } from '@/entities/chain';
 import { SignButton } from '@/entities/operations';
 import { AssetFiatBalance } from '@/entities/price';
-import { AddressWithExplorers, accountUtils, walletModel } from '@/entities/wallet';
+import { accountUtils, walletModel } from '@/entities/wallet';
 import { MultisigExistsAlert } from '../../common/MultisigExistsAlert';
 import { confirmModel } from '../model/confirm-model';
 
@@ -88,15 +88,8 @@ export const Confirmation = ({ id = 0, secondaryActionButton, hideSignButton, on
           </DetailRow>
         )}
 
-        <DetailRow label={t('operation.details.recipient')}>
-          <AddressWithExplorers
-            type="short"
-            explorers={confirmStore.chain.explorers}
-            addressFont="text-footnote text-inherit"
-            address={confirmStore.destination}
-            addressPrefix={confirmStore.chain.addressPrefix}
-            wrapperClassName="text-text-secondary"
-          />
+        <DetailRow label={t('operation.details.recipient')} className="text-text-secondary">
+          <Account accountId={confirmStore.account.accountId} chain={confirmStore.chain} variant="short" />
         </DetailRow>
 
         <hr className="w-full border-filter-border pr-2" />

diff --git a/src/renderer/shared/ui-entities/Account/Account.stories.tsx b/src/renderer/shared/ui-entities/Account/Account.stories.tsx
@@ -8,7 +8,7 @@ const meta: Meta<typeof Account> = {
   title: 'Design System/entities/Account',
   component: Account,
   args: {
-    account: createBaseAccount(),
+    accountId: createBaseAccount().accountId,
     chain: polkadotChain,
   },
 };

diff --git a/src/renderer/shared/ui-entities/Account/Account.tsx b/src/renderer/shared/ui-entities/Account/Account.tsx
@@ -1,27 +1,27 @@
 import { memo } from 'react';
 
-import { type Account as AccountType, type Chain } from '@/shared/core';
+import { type AccountId, type Chain } from '@/shared/core';
 import { toAddress } from '@/shared/lib/utils';
 import { AccountExplorers } from '../AccountExplorer/AccountExplorers';
 import { Address } from '../Address/Address';
 
 type Props = {
-  account: AccountType;
+  accountId: AccountId;
   title?: string;
   chain: Chain;
   variant?: 'truncate' | 'short';
 };
 
-export const Account = memo(({ account, title, variant = 'truncate', chain }: Props) => {
+export const Account = memo(({ accountId, title, variant = 'truncate', chain }: Props) => {
   return (
     <div className="flex w-max min-w-0 max-w-full items-center gap-2">
       <Address
         showIcon
         variant={variant}
         title={title}
-        address={toAddress(account.accountId, { prefix: chain.addressPrefix })}
+        address={toAddress(accountId, { prefix: chain.addressPrefix })}
       />
-      <AccountExplorers accountId={account.accountId} chain={chain} />
+      <AccountExplorers accountId={accountId} chain={chain} />
     </div>
   );
 });
diff --git a/src/renderer/shared/ui-entities/TransactionDetails/TransactionDetails.tsx b/src/renderer/shared/ui-entities/TransactionDetails/TransactionDetails.tsx
@@ -67,7 +67,7 @@ export const TransactionDetails = memo(({ wallets, chain, proxied, initiator, si
                 <CaptionText className="text-white">{initiator.length}</CaptionText>
               </div>
             )}
-            {initiator.length === 1 && <AccountComponent account={initiator[0]!} chain={chain} />}
+            {initiator.length === 1 && <AccountComponent accountId={initiator[0]!.accountId} chain={chain} />}
             {initiator.length > 1 && (
               <button
                 type="button"
@@ -94,7 +94,7 @@ export const TransactionDetails = memo(({ wallets, chain, proxied, initiator, si
           </DetailRow>
 
           <DetailRow label={t('transfer.senderProxiedAccount')}>
-            <AccountComponent account={proxied} chain={chain} />
+            <AccountComponent accountId={proxied.accountId} chain={chain} />
           </DetailRow>
 
           <DetailRow label={t('transfer.signingWallet')}>
@@ -106,7 +106,7 @@ export const TransactionDetails = memo(({ wallets, chain, proxied, initiator, si
 
           <DetailRow label={t('transfer.signingAccount')}>
             {initiator.length === 1 ? (
-              <AccountComponent account={initiator[0]!} chain={chain} />
+              <AccountComponent accountId={initiator[0]!.accountId} chain={chain} />
             ) : (
               <button
                 type="button"

diff --git a/src/renderer/widgets/DelegateDetails/ui/YourDelegation.tsx b/src/renderer/widgets/DelegateDetails/ui/YourDelegation.tsx
@@ -50,7 +50,7 @@ export const YourDelegation = () => {
           <DetailRow label={t('governance.addDelegation.accountsLabel', { count: activeAccounts.length })}>
             {accounts.length === 1 ? (
               <div className="overflow-hidden text-text-secondary">
-                <Account account={accounts[0]} chain={chain} variant="short" />
+                <Account accountId={accounts?.[0].accountId} chain={chain} variant="short" />
               </div>
             ) : (
               <FootnoteText className="text-text-secondary">{accounts.length}</FootnoteText>