fix: wallet details address (#2441)

novasamatech · Oct 10, 2024 · 18c3ae4 · 18c3ae4
1 parent 71e2bbc
commit 18c3ae4
Show file tree

Hide file tree

Showing 17 changed files with 36 additions and 42 deletions.
diff --git a/src/renderer/entities/wallet/ui/AccountsList/AccountsList.tsx b/src/renderer/entities/wallet/ui/AccountsList/AccountsList.tsx
@@ -1,9 +1,9 @@
 import { useI18n } from '@app/providers';
+import { AccountExplorers, Address } from '@/shared/ui-entities';
 import { type AccountId, type Chain } from '@shared/core';
-import { cnTw } from '@shared/lib/utils';
+import { cnTw, toAddress } from '@shared/lib/utils';
 import { FootnoteText } from '@shared/ui';
 import { ChainTitle } from '@entities/chain';
-import { AddressWithExplorers } from '@entities/wallet';
 
 type Props = {
   accountId: AccountId;
@@ -25,20 +25,17 @@ export const AccountsList = ({ accountId, chains, className }: Props) => {
 
       <ul className={cnTw('flex flex-col divide-y divide-divider overflow-y-auto overflow-x-hidden px-5', className)}>
         {chains.map((chain) => {
-          const { chainId, addressPrefix, explorers } = chain;
+          const { chainId, addressPrefix } = chain;
 
           return (
             <li key={chainId} className="flex items-center py-2">
               <ChainTitle className="flex-1" fontClass="text-text-primary" chain={chain} />
 
-              <div className="flex-1 pl-2">
-                <AddressWithExplorers
-                  type="adaptive"
-                  className="w-[166px]"
-                  accountId={accountId}
-                  addressPrefix={addressPrefix}
-                  explorers={explorers}
-                />
+              <div className="flex flex-1 pl-2">
+                <FootnoteText className="w-[180px] text-text-secondary">
+                  <Address address={toAddress(accountId, { prefix: addressPrefix })} variant="truncate" showIcon />
+                </FootnoteText>
+                <AccountExplorers accountId={accountId} chain={chain} />
               </div>
             </li>
           );

diff --git a/src/renderer/entities/wallet/ui/MultiAccountsList/MultiAccountsList.tsx b/src/renderer/entities/wallet/ui/MultiAccountsList/MultiAccountsList.tsx
@@ -1,9 +1,9 @@
 import { useI18n } from '@app/providers';
+import { AccountExplorers, Address } from '@/shared/ui-entities';
 import { type AccountId, type Chain } from '@shared/core';
-import { cnTw } from '@shared/lib/utils';
+import { cnTw, toAddress } from '@shared/lib/utils';
 import { FootnoteText } from '@shared/ui';
 import { ChainTitle } from '@entities/chain';
-import { AddressWithExplorers } from '@entities/wallet';
 
 type Props = {
   accounts: {
@@ -28,20 +28,17 @@ export const MultiAccountsList = ({ accounts, className, headerClassName }: Prop
 
       <ul className={cnTw('z-0 flex flex-col divide-y divide-divider overflow-y-auto overflow-x-hidden', className)}>
         {accounts.map(({ chain, accountId }) => {
-          const { chainId, addressPrefix, explorers } = chain;
+          const { chainId, addressPrefix } = chain;
 
           return (
             <li key={chainId} className="flex items-center px-5 py-4">
               <ChainTitle className="w-[214px]" fontClass="text-text-primary" chain={chain} />
 
-              <div className="w-[214]">
-                <AddressWithExplorers
-                  type="adaptive"
-                  className="w-[160px]"
-                  accountId={accountId}
-                  addressPrefix={addressPrefix}
-                  explorers={explorers}
-                />
+              <div className="flex w-[214px]">
+                <FootnoteText className="w-[180px] text-text-secondary">
+                  <Address address={toAddress(accountId, { prefix: addressPrefix })} variant="truncate" showIcon />
+                </FootnoteText>
+                <AccountExplorers accountId={accountId} chain={chain} />
               </div>
             </li>
           );

diff --git a/src/renderer/features/governance/components/ReferendumList/CompletedReferendums.tsx b/src/renderer/features/governance/components/ReferendumList/CompletedReferendums.tsx
@@ -26,8 +26,8 @@ const createPlaceholders = (size: number) => {
   ));
 };
 
-export const CompletedReferendums = memo<Props>(
-  ({ referendums, isLoading, isTitlesLoading, mixLoadingWithData, api, onSelect }) => {
+export const CompletedReferendums = memo(
+  ({ referendums, isLoading, isTitlesLoading, mixLoadingWithData, api, onSelect }: Props) => {
     const { t } = useI18n();
 
     const { isLoading: shouldRenderLoadingState, list: deferredReferendums } = useDeferredList({

diff --git a/src/renderer/features/governance/components/ReferendumList/OngoingReferendums.tsx b/src/renderer/features/governance/components/ReferendumList/OngoingReferendums.tsx
@@ -25,8 +25,8 @@ const createPlaceholders = (size: number) => {
   ));
 };
 
-export const OngoingReferendums = memo<Props>(
-  ({ referendums, isLoading, isTitlesLoading, mixLoadingWithData, api, onSelect }) => {
+export const OngoingReferendums = memo(
+  ({ referendums, isLoading, isTitlesLoading, mixLoadingWithData, api, onSelect }: Props) => {
     const { t } = useI18n();
 
     const placeholdersCount = isLoading ? Math.min(referendums.length || 4, 20) : Math.max(1, 4 - referendums.length);

diff --git a/src/renderer/features/governance/components/ReferendumList/ReferendumItem.tsx b/src/renderer/features/governance/components/ReferendumList/ReferendumItem.tsx
@@ -18,7 +18,7 @@ type Props = {
   onSelect: (value: AggregatedReferendum) => void;
 };
 
-export const ReferendumItem = memo<Props>(({ referendum, isTitlesLoading, api, onSelect }) => {
+export const ReferendumItem = memo(({ referendum, isTitlesLoading, api, onSelect }: Props) => {
   const { t } = useI18n();
 
   const { referendumId, approvalThreshold } = referendum;

diff --git a/src/renderer/features/governance/components/ReferendumList/VotedBy.tsx b/src/renderer/features/governance/components/ReferendumList/VotedBy.tsx
@@ -11,7 +11,7 @@ type Props = {
   address?: Address | null;
 };
 
-export const VotedBy = memo<Props>(({ address }) => {
+export const VotedBy = memo(({ address }: Props) => {
   const { t } = useI18n();
 
   const voter = useStoreMap({

diff --git a/src/renderer/features/governance/components/ReferendumList/VotedReferendumItem.tsx b/src/renderer/features/governance/components/ReferendumList/VotedReferendumItem.tsx
@@ -20,7 +20,7 @@ type Props = {
   onSelect: (value: AggregatedReferendum) => void;
 };
 
-export const VotedReferendumItem = memo<Props>(({ referendum, network, votes, onSelect }) => {
+export const VotedReferendumItem = memo(({ referendum, network, votes, onSelect }: Props) => {
   const { t } = useI18n();
 
   const { referendumId, approvalThreshold } = referendum;

diff --git a/src/renderer/features/governance/components/VotingHistory/VotingHistoryList.tsx b/src/renderer/features/governance/components/VotingHistory/VotingHistoryList.tsx
@@ -18,7 +18,7 @@ type Props = {
   loading?: boolean;
 };
 
-export const VotingHistoryList = memo<Props>(({ items, asset, chain, loading }) => {
+export const VotingHistoryList = memo(({ items, asset, chain, loading }: Props) => {
   const { t } = useI18n();
   const [query, setQuery] = useState<string>('');
 
@@ -56,7 +56,7 @@ export const VotingHistoryList = memo<Props>(({ items, asset, chain, loading })
                   <div key={`${voter}-${balance.toString()}-${conviction}`} className="flex gap-3 px-2 text-body">
                     <div className="flex min-w-0 shrink grow items-center gap-1">
                       <Address address={voter} title={name ?? ''} variant="truncate" showIcon />
-                      <AccountExplorers account={toAccountId(voter)} chain={chain} />
+                      <AccountExplorers accountId={toAccountId(voter)} chain={chain} />
                     </div>
                     <div className="flex shrink-0 basis-28 flex-col items-end gap-0.5">
                       <BodyText className="whitespace-nowrap">

diff --git a/src/renderer/pages/Onboarding/Vault/ManageMultishard/ManageMultishard.tsx b/src/renderer/pages/Onboarding/Vault/ManageMultishard/ManageMultishard.tsx
@@ -309,7 +309,7 @@ export const ManageMultishard = ({ seedInfo, onBack, onClose, onComplete }: Prop
                               <FootnoteText className="w-[150px] text-text-secondary">
                                 <Address address={address} variant="truncate" showIcon />
                               </FootnoteText>
-                              <AccountExplorers account={toAccountId(address)} chain={chain} />
+                              <AccountExplorers accountId={toAccountId(address)} chain={chain} />
                             </div>
                           </div>
                           <div className="flex items-center gap-2">

diff --git a/src/renderer/shared/ui-entities/AccountExplorer/AccountExplorers.stories.tsx b/src/renderer/shared/ui-entities/AccountExplorer/AccountExplorers.stories.tsx
@@ -33,7 +33,7 @@ const meta: Meta<typeof AccountExplorers> = {
   title: 'Design System/entities/AccountExplorers',
   component: AccountExplorers,
   args: {
-    account: testAccountId,
+    accountId: testAccountId,
     chain: testChain,
   },
   parameters: {

diff --git a/src/renderer/shared/ui-entities/AccountExplorer/AccountExplorers.tsx b/src/renderer/shared/ui-entities/AccountExplorer/AccountExplorers.tsx
@@ -8,14 +8,14 @@ import { Box, Popover } from '@/shared/ui-kit';
 import { Hash } from '../Hash/Hash';
 
 type Props = PropsWithChildren<{
-  account: AccountId;
+  accountId: AccountId;
   chain: Chain;
 }>;
 
-export const AccountExplorers = memo<Props>(({ account, chain, children }) => {
+export const AccountExplorers = memo(({ accountId, chain, children }: Props) => {
   const { t } = useI18n();
   const { explorers } = chain;
-  const address = toAddress(account, { prefix: chain.addressPrefix });
+  const address = toAddress(accountId, { prefix: chain.addressPrefix });
 
   return (
     <Popover align="end" dialog testId="AccountExplorers">

diff --git a/src/renderer/shared/ui-entities/AccountSelectModal/AccountSelectModal.tsx b/src/renderer/shared/ui-entities/AccountSelectModal/AccountSelectModal.tsx
@@ -73,7 +73,7 @@ const AccountItem = ({ asset, account, chain, title, balance, onSelect }: ItemPr
       <div className="w-full min-w-0 shrink truncate">
         <Address title={title} address={address} showIcon variant="truncate" />
       </div>
-      <AccountExplorers account={account.accountId} chain={chain} />
+      <AccountExplorers accountId={account.accountId} chain={chain} />
       {balance && asset && (
         <BodyText className="shrink-0 whitespace-nowrap text-inherit">
           {formatBalance(balance, asset.precision).formatted} {asset.symbol}

diff --git a/src/renderer/shared/ui-entities/Hash/Hash.tsx b/src/renderer/shared/ui-entities/Hash/Hash.tsx
@@ -8,7 +8,7 @@ type Props = {
   testId?: string;
 };
 
-export const Hash = memo<Props>(({ value, variant, testId = 'Hash' }) => {
+export const Hash = memo(({ value, variant, testId = 'Hash' }: Props) => {
   return (
     <span className="w-full text-inherit transition-colors" data-testid={testId}>
       {variant === 'truncate' ? <Truncate text={value} /> : <span className="break-all">{value}</span>}

diff --git a/src/renderer/shared/ui-entities/Hash/Truncate.tsx b/src/renderer/shared/ui-entities/Hash/Truncate.tsx
@@ -20,7 +20,7 @@ const containerStyle: CSSProperties = {
 const MIN_START_SYMBOLS = 5;
 const MIN_END_SYMBOLS = 5;
 
-export const Truncate = memo<Props>(({ text, ellipsis = '...' }) => {
+export const Truncate = memo(({ text, ellipsis = '...' }: Props) => {
   const [container, setContainer] = useState<HTMLElement | null>(null);
   const textRef = useRef<HTMLElement>(null);
   const ellipsisRef = useRef<HTMLElement>(null);

diff --git a/src/renderer/shared/ui-kit/Slider/StepIndicators.tsx b/src/renderer/shared/ui-kit/Slider/StepIndicators.tsx
@@ -6,7 +6,7 @@ type Props = {
   steps: number;
 };
 
-export const StepIndicators = memo<Props>(({ steps }) => {
+export const StepIndicators = memo(({ steps }: Props) => {
   const nodes = useMemo(() => {
     // for better visuals
     if (steps > maxIndicationDensity) {

diff --git a/src/renderer/shared/ui-kit/Slider/StepLabels.tsx b/src/renderer/shared/ui-kit/Slider/StepLabels.tsx
@@ -7,7 +7,7 @@ type Props = {
   renderLabel?: (value: number, index: number) => ReactNode;
 };
 
-export const StepLabels = memo<Props>(({ steps, renderLabel, min, stepSize }) => {
+export const StepLabels = memo(({ steps, renderLabel, min, stepSize }: Props) => {
   const nodes = useMemo(() => {
     if (!renderLabel) {
       return [];

diff --git a/src/renderer/shared/ui/Truncate/Truncate.tsx b/src/renderer/shared/ui/Truncate/Truncate.tsx
@@ -23,7 +23,7 @@ const containerStyle = {
  * @deprecated Truncate is used only in context of hex/hash values.\
  *   Use `import { Hash } from '@/shared/ui-entities'` instead.
  */
-export const Truncate = memo<Props>(({ text, ellipsis = '...', end = 5, start = 5, className = '' }) => {
+export const Truncate = memo(({ text, ellipsis = '...', end = 5, start = 5, className = '' }: Props) => {
   const [container, setContainer] = useState<HTMLElement | null>(null);
   const textRef = useRef<HTMLElement>(null);
   const ellipsisRef = useRef<HTMLElement>(null);