fix: multisend fixes

tonkeeper · Jul 31, 2024 · 74bae5c · 74bae5c
1 parent a6d4e30
commit 74bae5c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 29 deletions.
diff --git a/packages/uikit/src/components/account/AccountAndWalletInfo.tsx b/packages/uikit/src/components/account/AccountAndWalletInfo.tsx
@@ -12,18 +12,21 @@ import styled from 'styled-components';
 import type { AllOrNone } from '@tonkeeper/core/dist/utils/types';
 
 const WalletInfoStyled = styled.div`
+    overflow: hidden;
     display: flex;
     align-items: center;
     gap: 4px;
     color: ${p => p.theme.textSecondary};
+`;
 
-    > ${Body2} {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+const NameText = styled(Body2)`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 `;
 
-const Body2Tertiary = styled(Body2)`
+const AddressText = styled(Body2)`
+    flex-shrink: 0;
     color: ${p => p.theme.textTertiary};
 `;
 
@@ -42,17 +45,17 @@ export const AccountAndWalletInfo: FC<
 
     return (
         <WalletInfoStyled>
-            <Body2>
+            <NameText>
                 {t('confirmSendModal_wallet')}&nbsp;
                 {account.name}
-            </Body2>
+            </NameText>
             <WalletEmoji emojiSize="20px" containerSize="20px" emoji={account.emoji} />
             {account.allTonWallets.length > 1 ? (
                 <>
                     <Dot />
-                    <Body2Tertiary>
+                    <AddressText>
                         {toShortValue(formatAddress(wallet.rawAddress, network))}
-                    </Body2Tertiary>
+                    </AddressText>
                     <AccountAndWalletBadgesGroup account={account} walletId={wallet.id} />
                 </>
             ) : (

diff --git a/packages/uikit/src/components/desktop/multi-send/MultiSendConfirmNotification.tsx b/packages/uikit/src/components/desktop/multi-send/MultiSendConfirmNotification.tsx
@@ -10,8 +10,6 @@ import { useRate } from '../../../state/rates';
 import { useAppContext } from '../../../hooks/appContext';
 import { formatFiatCurrency, useFormatCoinValue } from '../../../hooks/balance';
 import { ListBlock, ListItem } from '../../List';
-import { useActiveWallet } from '../../../state/wallet';
-import { WalletEmoji } from '../../shared/emoji/WalletEmoji';
 import { useTranslation } from '../../../hooks/translation';
 import { useEstimateMultiTransfer } from '../../../hooks/blockchain/useEstimateMultiTransferFee';
 import { Skeleton } from '../../shared/Skeleton';
@@ -31,6 +29,7 @@ import { useDisclosure } from '../../../hooks/useDisclosure';
 import { MultiSendReceiversNotification } from './MultiSendReceiversNotification';
 import { NotEnoughBalanceError } from '@tonkeeper/core/dist/errors/NotEnoughBalanceError';
 import { TON_ASSET } from '@tonkeeper/core/dist/entries/crypto/asset/constants';
+import { AccountAndWalletInfo } from '../../account/AccountAndWalletInfo';
 
 const ConfirmWrapper = styled.div`
     display: flex;
@@ -96,12 +95,6 @@ const ListItemStyled = styled(ListItem)`
     }
 `;
 
-const WalletNameStyled = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 6px;
-`;
-
 const RecipientsContainer = styled.div`
     display: flex;
     flex-direction: column;
@@ -165,8 +158,6 @@ const MultiSendConfirmContent: FC<{
         willBeSentBN?.multipliedBy(rate?.prices || 0)
     );
 
-    const wallet = useActiveWallet();
-
     const {
         mutateAsync: estimate,
         isLoading: estimateLoading,
@@ -200,16 +191,7 @@ const MultiSendConfirmContent: FC<{
                 <ListBlockStyled noUserSelect>
                     <ListItemStyled hover={false}>
                         <Body2>{t('send_screen_steps_comfirm_wallet')}</Body2>
-                        {wallet && (
-                            <WalletNameStyled>
-                                <WalletEmoji
-                                    emojiSize="16px"
-                                    containerSize="16px"
-                                    emoji={wallet.emoji}
-                                />
-                                <Label2>{wallet.name || t('wallet_title')}</Label2>
-                            </WalletNameStyled>
-                        )}
+                        <AccountAndWalletInfo />
                     </ListItemStyled>
                     <ListItemStyled hover={false}>
                         <Body2>{t('recipients')}</Body2>