Merge pull request #309 from tonkeeper/fix/PRO-135

Minor battery and layout updates
tonkeeper · Nov 21, 2024 · a98a208 · a98a208
2 parents e858dd0 + 44f6cc4
commit a98a208
Show file tree

Hide file tree

Showing 14 changed files with 126 additions and 55 deletions.
diff --git a/apps/extension/src/App.tsx b/apps/extension/src/App.tsx
@@ -88,6 +88,7 @@ const PairKeystoneNotification = React.lazy(
 const queryClient = new QueryClient({
     defaultOptions: {
         queries: {
+            staleTime: 30000,
             refetchOnWindowFocus: false
         }
     }

diff --git a/apps/twa/src/components/transfer/SendNotifications.tsx b/apps/twa/src/components/transfer/SendNotifications.tsx
@@ -36,7 +36,7 @@ import { useTranslation } from '@tonkeeper/uikit/dist/hooks/translation';
 import { useJettonList } from '@tonkeeper/uikit/dist/state/jetton';
 import { useTronBalances } from '@tonkeeper/uikit/dist/state/tron/tron';
 import BigNumber from 'bignumber.js';
-import { FC, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import styled from 'styled-components';
 import { FavoriteView, useFavoriteNotification } from './FavoriteNotification';
@@ -246,6 +246,18 @@ const SendContent: FC<{
         confirm: confirmRef
     }[view];
 
+
+    const assetAmount = useMemo(() => {
+        if (!amountViewState?.token || !amountViewState?.coinValue) {
+            return null;
+        }
+
+        return AssetAmount.fromRelativeAmount({
+            asset: amountViewState!.token!,
+            amount: amountViewState!.coinValue!
+        });
+    }, [amountViewState?.token, amountViewState?.coinValue]);
+
     return (
         <Wrapper standalone={false} extension={true}>
             <HideTwaMainButton />
@@ -295,10 +307,7 @@ const SendContent: FC<{
                                 onBack={backToAmount}
                                 recipient={recipient!}
                                 fitContent
-                                assetAmount={AssetAmount.fromRelativeAmount({
-                                    asset: amountViewState!.token!,
-                                    amount: amountViewState!.coinValue!
-                                })}
+                                assetAmount={assetAmount!}
                                 isMax={amountViewState!.isMax!}
                             >
                                 <ConfirmViewTitleSlot>

diff --git a/packages/uikit/src/components/SubHeader.tsx b/packages/uikit/src/components/SubHeader.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, PropsWithChildren, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled, { createGlobalStyle, css, useTheme } from 'styled-components';
 import { useAppSdk } from '../hooks/appSdk';
@@ -96,7 +96,10 @@ const SubHeaderBackButton = () => {
     }
 };
 
-export const SubHeader: FC<SubHeaderProps & { hideBackButton?: boolean }> = ({ title }) => {
+export const SubHeader: FC<PropsWithChildren<SubHeaderProps & { hideBackButton?: boolean }>> = ({
+    title,
+    children
+}) => {
     const theme = useTheme();
 
     if (theme.displayType === 'full-width') {
@@ -112,6 +115,7 @@ export const SubHeader: FC<SubHeaderProps & { hideBackButton?: boolean }> = ({ t
         <Block>
             <SubHeaderBackButton />
             <Title>{title}</Title>
+            {children}
         </Block>
     );
 };
diff --git a/packages/uikit/src/components/activity/NotificationCommon.tsx b/packages/uikit/src/components/activity/NotificationCommon.tsx
@@ -370,6 +370,7 @@ const FeeLabelColumn = styled.div`
 `;
 
 const TransparentButton = styled.button`
+    text-align: start;
     ${Body2Class};
     color: ${p => p.theme.accentBlue};
     border: none;

diff --git a/packages/uikit/src/components/create/AddressInput.tsx b/packages/uikit/src/components/create/AddressInput.tsx
@@ -8,7 +8,7 @@ import { TonRecipientInput } from '../fields/TonRecipientInput';
 import { TonRecipient } from '@tonkeeper/core/dist/entries/send';
 import { Address } from '@ton/core';
 
-const Block = styled.form`
+const Block = styled.div`
     display: flex;
     text-align: center;
     gap: 1rem;
@@ -46,7 +46,7 @@ export const AddressInput: FC<{
 
     return (
         <CenterContainer className={className}>
-            <Block onSubmit={() => afterInput(Address.parse(recipient!.address).toRawString())}>
+            <Block>
                 <div>
                     <H2Label2Responsive>{t('add_watch_only_title')}</H2Label2Responsive>
                     <Body>{t('add_wallet_modal_watch_only_subtitle')}</Body>
@@ -64,7 +64,7 @@ export const AddressInput: FC<{
                     marginTop
                     loading={isLoading || isDataLoading}
                     disabled={error || !recipient}
-                    type="submit"
+                    onClick={() => afterInput(Address.parse(recipient!.address).toRawString())}
                 >
                     {t('continue')}
                 </ButtonResponsiveSize>

diff --git a/packages/uikit/src/components/desktop/aside/WalletAsideMenu.tsx b/packages/uikit/src/components/desktop/aside/WalletAsideMenu.tsx
@@ -2,9 +2,10 @@ import { NavLink, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { useTranslation } from '../../../hooks/translation';
 import { hexToRGBA } from '../../../libs/css';
-import { AppRoute } from '../../../libs/routes';
+import { AppRoute, WalletSettingsRoute } from '../../../libs/routes';
 import { useActiveAccount, useIsActiveWalletWatchOnly } from '../../../state/wallet';
 import {
+    BatteryIcon,
     ClockSmoothIcon,
     CoinsIcon,
     InboxIcon,
@@ -14,14 +15,15 @@ import {
     SparkIcon,
     SwapIcon
 } from '../../Icon';
-import { Label2 } from '../../Text';
+import { Body3, Label2 } from '../../Text';
 import { AsideMenuItem } from '../../shared/AsideItem';
 import {
     useIsActiveAccountMultisig,
     useUnviewedAccountOrdersNumber
 } from '../../../state/multisig';
 import { isAccountCanManageMultisigs } from '@tonkeeper/core/dist/entries/account';
 import { RoundedBadge } from '../../shared/Badge';
+import { useBatteryBalance, useBatteryEnabledConfig } from '../../../state/battery';
 
 const WalletAsideContainer = styled.div`
     padding: 0.5rem;
@@ -42,6 +44,7 @@ const WalletAsideContainer = styled.div`
 const AsideMenuItemStyled = styled(AsideMenuItem)`
     background: ${p => (p.isSelected ? p.theme.backgroundContentTint : 'unset')};
     padding-right: 50px;
+    height: unset;
 
     > svg {
         color: ${p => p.theme.iconSecondary};
@@ -62,6 +65,10 @@ export const WalletAsideMenu = () => {
 
     const isCoinPageOpened = location.pathname.startsWith(AppRoute.coins);
 
+    const { disableWhole: disableWholeBattery } = useBatteryEnabledConfig();
+    const canUseBattery =
+        (account.type === 'mnemonic' || account.type === 'mam') && !disableWholeBattery;
+
     return (
         <WalletAsideContainer>
             <NavLink to={AppRoute.home}>
@@ -117,7 +124,8 @@ export const WalletAsideMenu = () => {
                     )}
                 </NavLink>
             )}
-            <NavLink to={AppRoute.walletSettings}>
+            {canUseBattery && <BatterySettingsListItem />}
+            <NavLink to={AppRoute.walletSettings} end>
                 {({ isActive }) => (
                     <AsideMenuItemStyled isSelected={isActive}>
                         <SettingsSmoothIcon />
@@ -150,3 +158,36 @@ const MultisigOrdersMenuItem = () => {
         </NavLink>
     );
 };
+
+const SettingsListText = styled.div`
+    display: flex;
+    flex-direction: column;
+    ${Body3} {
+        color: ${p => p.theme.textSecondary};
+    }
+`;
+
+const BatterySettingsListItem = () => {
+    const { t } = useTranslation();
+    const { data: batteryBalance } = useBatteryBalance();
+
+    return (
+        <NavLink to={AppRoute.walletSettings + WalletSettingsRoute.battery}>
+            {({ isActive }) => (
+                <AsideMenuItemStyled isSelected={isActive}>
+                    <BatteryIcon />
+                    <SettingsListText>
+                        <Label2>{t('battery_title')}</Label2>
+                        {batteryBalance?.batteryUnitsBalance.gt(0) && (
+                            <Body3>
+                                {t('battery_charges', {
+                                    charges: batteryBalance.batteryUnitsBalance.toString()
+                                })}
+                            </Body3>
+                        )}
+                    </SettingsListText>
+                </AsideMenuItemStyled>
+            )}
+        </NavLink>
+    );
+};
diff --git a/packages/uikit/src/components/settings/battery/BatterySettingsNotification.tsx b/packages/uikit/src/components/settings/battery/BatterySettingsNotification.tsx
@@ -79,7 +79,11 @@ const ListItemText = styled.div`
 `;
 
 const ListBlockStyled = styled(ListBlockDesktopAdaptive)<{ $hideSelection?: boolean }>`
-    margin: 0 -1rem;
+    ${p =>
+        p.theme.displayType === 'full-width' &&
+        css`
+            margin: 0 -1rem;
+        `}
 
     > * {
         cursor: ${p => (p.$hideSelection ? 'auto' : 'pointer')};

diff --git a/packages/uikit/src/components/settings/battery/BuyBatteryMethods.tsx b/packages/uikit/src/components/settings/battery/BuyBatteryMethods.tsx
@@ -127,7 +127,7 @@ const GiftIcon = () => {
             height="40"
             viewBox="0 0 40 40"
             fill="none"
-            style={{ borderRadius: '10px' }}
+            style={{ borderRadius: '10px', marginRight: '12px' }}
         >
             <g clipPath="url(#clip0_45119_78795)">
                 <rect width="40" height="40" fill="url(#paint0_linear_45119_78795)" />

diff --git a/packages/uikit/src/components/swap/tokens-list/SwapTokensList.tsx b/packages/uikit/src/components/swap/tokens-list/SwapTokensList.tsx
@@ -168,6 +168,10 @@ const TokenInfoLine = styled.div`
         text-overflow: ellipsis;
     }
 
+    > ${Label2} {
+        color: ${p => p.theme.textPrimary};
+    }
+
     > *:nth-child(3) {
         margin-left: auto;
     }

diff --git a/packages/uikit/src/components/transfer/ConfirmTransferView.tsx b/packages/uikit/src/components/transfer/ConfirmTransferView.tsx
@@ -126,7 +126,7 @@ export const ConfirmTransferView: FC<
                 weiAmount: assetWeiBalance.minus(fee.weiAmount)
             })
         );
-    }, [isMax, assetAmount, selectedSenderType, assetWeiBalance]);
+    }, [isMax, assetAmount, selectedSenderType, assetWeiBalance?.toFixed(0)]);
 
     return (
         <ConfirmView

diff --git a/packages/uikit/src/components/transfer/SendNotifications.tsx b/packages/uikit/src/components/transfer/SendNotifications.tsx
@@ -10,7 +10,7 @@ import {
 } from '@tonkeeper/core/dist/service/deeplinkingService';
 import { shiftedDecimals } from '@tonkeeper/core/dist/utils/balance';
 import BigNumber from 'bignumber.js';
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { useAppContext } from '../../hooks/appContext';
 import { useAppSdk } from '../../hooks/appSdk';
@@ -252,6 +252,17 @@ const SendContent: FC<{
         confirm: confirmRef
     }[view];
 
+    const assetAmount = useMemo(() => {
+        if (!amountViewState?.token || !amountViewState?.coinValue) {
+            return null;
+        }
+
+        return AssetAmount.fromRelativeAmount({
+            asset: amountViewState!.token!,
+            amount: amountViewState!.coinValue!
+        });
+    }, [amountViewState?.token?.id, amountViewState?.coinValue]);
+
     return (
         <Wrapper standalone={standalone} extension={extension}>
             <TransitionGroup childFactory={childFactoryCreator(right)}>
@@ -361,10 +372,7 @@ const SendContent: FC<{
                                         onClose={onClose}
                                         onBack={backToAmount}
                                         recipient={recipient!}
-                                        assetAmount={AssetAmount.fromRelativeAmount({
-                                            asset: amountViewState!.token!,
-                                            amount: amountViewState!.coinValue!
-                                        })}
+                                        assetAmount={assetAmount!}
                                         isMax={amountViewState!.isMax!}
                                     >
                                         {status !== 'exiting' && isFullWidth && (

diff --git a/packages/uikit/src/desktop-pages/settings/DesktopWalletSettingsPage.tsx b/packages/uikit/src/desktop-pages/settings/DesktopWalletSettingsPage.tsx
@@ -3,7 +3,6 @@ import { Link, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import {
     AppsIcon,
-    BatteryIcon,
     CoinsIcon,
     ExitIcon,
     KeyIcon,
@@ -40,7 +39,6 @@ import {
     useMultisigTogglePinForWallet
 } from '../../state/multisig';
 import { useDeleteAccountNotification } from '../../components/modals/DeleteAccountNotificationControlled';
-import { useBatteryBalance, useBatteryEnabledConfig } from '../../state/battery';
 
 const SettingsListBlock = styled.div`
     padding: 0.5rem 0;
@@ -102,7 +100,6 @@ export const DesktopWalletSettingsPage = () => {
 
     const activeDerivation = account.type === 'mam' ? account.activeDerivation : undefined;
     const navigate = useNavigate();
-    const { disableWhole: disableWholeBattery } = useBatteryEnabledConfig();
 
     const onHide = () => {
         hideDerivation({
@@ -111,9 +108,6 @@ export const DesktopWalletSettingsPage = () => {
         }).then(() => navigate(AppRoute.home));
     };
 
-    const canUseBattery =
-        (account.type === 'mnemonic' || account.type === 'mam') && !disableWholeBattery;
-
     return (
         <DesktopViewPageLayout>
             <DesktopViewHeader borderBottom>
@@ -200,7 +194,6 @@ export const DesktopWalletSettingsPage = () => {
                         </SettingsListItem>
                     </LinkStyled>
                 )}
-                {canUseBattery && <BatterySettingsListItem />}
             </SettingsListBlock>
             <>
                 {isMultisig ? (
@@ -279,26 +272,3 @@ const UnpinMultisigSettingsListItem = () => {
         </SettingsListItem>
     );
 };
-
-const BatterySettingsListItem = () => {
-    const { t } = useTranslation();
-    const { data: batteryBalance } = useBatteryBalance();
-
-    return (
-        <LinkStyled to={AppRoute.walletSettings + WalletSettingsRoute.battery}>
-            <SettingsListItem>
-                <BatteryIcon />
-                <SettingsListText>
-                    <Label2>{t('battery_title')}</Label2>
-                    {batteryBalance?.batteryUnitsBalance.gt(0) && (
-                        <Body3>
-                            {t('battery_charges', {
-                                charges: batteryBalance.batteryUnitsBalance.toString()
-                            })}
-                        </Body3>
-                    )}
-                </SettingsListText>
-            </SettingsListItem>
-        </LinkStyled>
-    );
-};