fix: mobile wallet settings

tonkeeper · Jan 28, 2025 · 82db165 · 82db165
1 parent 48c1258
commit 82db165
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 60 deletions.
diff --git a/packages/uikit/src/desktop-pages/manage-multisig-wallets/DesktopManageMultisigs.tsx b/packages/uikit/src/desktop-pages/manage-multisig-wallets/DesktopManageMultisigs.tsx
@@ -29,7 +29,7 @@ import {
 import { styled } from 'styled-components';
 import { Dot } from '../../components/Dot';
 import { IconButtonTransparentBackground } from '../../components/fields/IconButton';
-import { useAppSdk } from '../../hooks/appSdk';
+import { useAppSdk, useAppTargetEnv } from '../../hooks/appSdk';
 import { useAddWalletNotification } from '../../components/modals/AddWalletNotificationControlled';
 import { useRenameNotification } from '../../components/modals/RenameNotificationControlled';
 import { getFallbackAccountEmoji } from '@tonkeeper/core/dist/service/walletService';
@@ -41,7 +41,7 @@ import {
 } from '@tonkeeper/core/dist/entries/account';
 import { WalletId } from '@tonkeeper/core/dist/entries/wallet';
 import { Navigate } from '../../components/shared/Navigate';
-import { useNavigate } from "../../hooks/router/useNavigate";
+import { useNavigate } from '../../hooks/router/useNavigate';
 
 const DesktopViewPageLayoutStyled = styled(DesktopViewPageLayout)`
     height: 100%;
@@ -64,14 +64,15 @@ export const DesktopManageMultisigsPage = () => {
     const activeAccount = useActiveAccount();
     const isActiveAccountMultisigManagable = isAccountCanManageMultisigs(activeAccount);
     const { onOpen: addWallet } = useAddWalletNotification();
+    const env = useAppTargetEnv();
 
     if (!isActiveAccountMultisigManagable) {
         return <Navigate to={AppRoute.home} />;
     }
 
     return (
         <DesktopViewPageLayoutStyled ref={scrollRef}>
-            <DesktopViewHeader borderBottom={!closeTop}>
+            <DesktopViewHeader borderBottom={!closeTop} backButton={env === 'mobile'}>
                 <Label2>{t('wallet_aside_multisig_wallets')}</Label2>
                 <NewMultisigButton onClick={() => addWallet({ walletType: 'multisig' })}>
                     {t('add_wallet_new_multisig_title')}

diff --git a/packages/uikit/src/desktop-pages/multisig-orders/DesktopMultisigOrders.tsx b/packages/uikit/src/desktop-pages/multisig-orders/DesktopMultisigOrders.tsx
@@ -16,7 +16,7 @@ import React, { FC, useEffect, useMemo } from 'react';
 import { Button } from '../../components/fields/Button';
 
 import { styled } from 'styled-components';
-import { useAppSdk } from '../../hooks/appSdk';
+import { useAppSdk, useAppTargetEnv } from '../../hooks/appSdk';
 import { Multisig, type MultisigOrder, Risk } from '@tonkeeper/core/dist/tonApiV2';
 import { AppRoute } from '../../libs/routes';
 import { useSendTransferNotification } from '../../components/modals/useSendTransferNotification';
@@ -30,7 +30,7 @@ import { formatAddress } from '@tonkeeper/core/dist/utils/common';
 import { useDateTimeFormatFromNow } from '../../hooks/useDateTimeFormat';
 import { orderStatus } from '@tonkeeper/core/dist/service/ton-blockchain/encoder/multisig-encoder';
 import { useActiveConfig } from '../../state/wallet';
-import { Navigate } from "../../components/shared/Navigate";
+import { Navigate } from '../../components/shared/Navigate';
 
 const DesktopViewPageLayoutStyled = styled(DesktopViewPageLayout)`
     height: 100%;
@@ -40,14 +40,15 @@ export const DesktopMultisigOrdersPage = () => {
     const { ref: scrollRef, closeTop } = useIsScrolled();
     const { t } = useTranslation();
     const isAccountMultisig = useIsActiveAccountMultisig();
+    const env = useAppTargetEnv();
 
     if (!isAccountMultisig) {
         return <Navigate to={AppRoute.home} />;
     }
 
     return (
         <DesktopViewPageLayoutStyled ref={scrollRef}>
-            <DesktopViewHeader borderBottom={!closeTop}>
+            <DesktopViewHeader borderBottom={!closeTop} backButton={env === 'mobile'}>
                 <Label2>{t('wallet_aside_orders')}</Label2>
             </DesktopViewHeader>
             <DesktopMultisigOrdersPageBody />

diff --git a/packages/uikit/src/desktop-pages/nft/DesktopCollectables.tsx b/packages/uikit/src/desktop-pages/nft/DesktopCollectables.tsx
@@ -1,5 +1,5 @@
 import { NftsList } from '../../components/nft/Nfts';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Body2, Label2 } from '../../components/Text';
 import { Button } from '../../components/fields/Button';
 import { Link } from 'react-router-dom';
@@ -16,6 +16,7 @@ import { SlidersIcon } from '../../components/Icon';
 import { IconButtonTransparentBackground } from '../../components/fields/IconButton';
 import { useWalletFilteredNftList } from '../../state/nft';
 import { useNavigate } from '../../hooks/router/useNavigate';
+import { useAppTargetEnv } from '../../hooks/appSdk';
 
 const gap = '10px';
 const maxColumnsNumber = 4;
@@ -39,6 +40,13 @@ const NFTEmptyPage = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
+
+    ${p =>
+        p.theme.proDisplayType === 'mobile' &&
+        css`
+            height: unset;
+            flex: 1;
+        `}
 `;
 
 const NFTPageBody = styled.div`
@@ -71,6 +79,17 @@ const SettingsButtonStyled = styled(IconButtonTransparentBackground)`
     margin-left: auto;
 `;
 
+const DesktopViewPageLayoutStyled = styled(DesktopViewPageLayout)`
+    height: 100%;
+
+    ${p =>
+        p.theme.proDisplayType === 'mobile' &&
+        css`
+            display: flex;
+            flex-direction: column;
+        `}
+`;
+
 export const DesktopCollectables = () => {
     return <DesktopCollectablesContent />;
 };
@@ -79,6 +98,7 @@ export const DesktopCollectablesContent = () => {
     const { data: nfts } = useWalletFilteredNftList();
     const { t } = useTranslation();
     const navigate = useNavigate();
+    const env = useAppTargetEnv();
 
     const { ref: scrollRef, closeTop } = useIsScrolled();
 
@@ -98,7 +118,12 @@ export const DesktopCollectablesContent = () => {
 
     if (!filteredNft.length) {
         return (
-            <DesktopViewPageLayout>
+            <DesktopViewPageLayoutStyled>
+                {env === 'mobile' && (
+                    <DesktopViewHeader borderBottom={!closeTop} backButton={true}>
+                        <Label2>{t('wallet_aside_collectibles')}</Label2>
+                    </DesktopViewHeader>
+                )}
                 <NFTEmptyPage>
                     <NFTEmptyContainer>
                         <Label2>{t('collectibles_empty_header')}</Label2>
@@ -108,13 +133,13 @@ export const DesktopCollectablesContent = () => {
                         </LinkStyled>
                     </NFTEmptyContainer>
                 </NFTEmptyPage>
-            </DesktopViewPageLayout>
+            </DesktopViewPageLayoutStyled>
         );
     }
 
     return (
         <DesktopViewPageLayout ref={scrollRef}>
-            <DesktopViewHeader borderBottom={!closeTop}>
+            <DesktopViewHeader borderBottom={!closeTop} backButton={env === 'mobile'}>
                 <Label2>{t('wallet_aside_collectibles')}</Label2>
                 <SettingsButtonStyled
                     onClick={() => navigate(AppRoute.walletSettings + WalletSettingsRoute.nft)}

diff --git a/packages/uikit/src/desktop-pages/nft/DesktopDns.tsx b/packages/uikit/src/desktop-pages/nft/DesktopDns.tsx
@@ -1,5 +1,5 @@
 import { NftsList } from '../../components/nft/Nfts';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Body2, Label2 } from '../../components/Text';
 import { Button } from '../../components/fields/Button';
 import { Link } from 'react-router-dom';
@@ -17,6 +17,7 @@ import { IconButtonTransparentBackground } from '../../components/fields/IconBut
 import { useWalletFilteredNftList } from '../../state/nft';
 import { HideOnReview } from '../../components/ios/HideOnReview';
 import { useNavigate } from '../../hooks/router/useNavigate';
+import { useAppTargetEnv } from '../../hooks/appSdk';
 
 const gap = '10px';
 const maxColumnsNumber = 4;
@@ -40,6 +41,13 @@ const NFTEmptyPage = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
+
+    ${p =>
+        p.theme.proDisplayType === 'mobile' &&
+        css`
+            height: unset;
+            flex: 1;
+        `}
 `;
 
 const NFTPageBody = styled.div`
@@ -72,6 +80,17 @@ const SettingsButtonStyled = styled(IconButtonTransparentBackground)`
     margin-left: auto;
 `;
 
+const DesktopViewPageLayoutStyled = styled(DesktopViewPageLayout)`
+    height: 100%;
+
+    ${p =>
+        p.theme.proDisplayType === 'mobile' &&
+        css`
+            display: flex;
+            flex-direction: column;
+        `}
+`;
+
 export const DesktopDns = () => {
     return (
         <HideOnReview>
@@ -84,6 +103,7 @@ export const DesktopDnsContent = () => {
     const { data: nfts } = useWalletFilteredNftList();
     const { t } = useTranslation();
     const navigate = useNavigate();
+    const env = useAppTargetEnv();
 
     const { ref: scrollRef, closeTop } = useIsScrolled();
 
@@ -103,21 +123,28 @@ export const DesktopDnsContent = () => {
 
     if (!filteredNft.length) {
         return (
-            <NFTEmptyPage>
-                <NFTEmptyContainer>
-                    <Label2>{t('domains_empty_header')}</Label2>
-                    <Body2>{t('nft_empty_description')}</Body2>
-                    <LinkStyled to={AppRoute.browser}>
-                        <Button size="small">{t('nft_empty_go_discover_button')}</Button>
-                    </LinkStyled>
-                </NFTEmptyContainer>
-            </NFTEmptyPage>
+            <DesktopViewPageLayoutStyled>
+                {env === 'mobile' && (
+                    <DesktopViewHeader borderBottom={!closeTop} backButton={true}>
+                        <Label2>{t('wallet_aside_collectibles')}</Label2>
+                    </DesktopViewHeader>
+                )}
+                <NFTEmptyPage>
+                    <NFTEmptyContainer>
+                        <Label2>{t('domains_empty_header')}</Label2>
+                        <Body2>{t('nft_empty_description')}</Body2>
+                        <LinkStyled to={AppRoute.browser}>
+                            <Button size="small">{t('nft_empty_go_discover_button')}</Button>
+                        </LinkStyled>
+                    </NFTEmptyContainer>
+                </NFTEmptyPage>
+            </DesktopViewPageLayoutStyled>
         );
     }
 
     return (
         <DesktopViewPageLayout ref={scrollRef}>
-            <DesktopViewHeader borderBottom={!closeTop}>
+            <DesktopViewHeader borderBottom={!closeTop} backButton={env === 'mobile'}>
                 <Label2>{t('wallet_aside_domains')}</Label2>
                 <SettingsButtonStyled
                     onClick={() => navigate(AppRoute.walletSettings + WalletSettingsRoute.nft)}

diff --git a/packages/uikit/src/desktop-pages/settings/DesktopWalletSettingsPage.tsx b/packages/uikit/src/desktop-pages/settings/DesktopWalletSettingsPage.tsx
@@ -42,9 +42,9 @@ import {
 } from '../../state/multisig';
 import { useDeleteAccountNotification } from '../../components/modals/DeleteAccountNotificationControlled';
 import React from 'react';
-import { useAppSdk } from '../../hooks/appSdk';
+import { useAppSdk, useAppTargetEnv } from '../../hooks/appSdk';
 import { useCanViewTwoFA } from '../../state/two-fa';
-import { useNavigate } from "../../hooks/router/useNavigate";
+import { useNavigate } from '../../hooks/router/useNavigate';
 
 const SettingsListBlock = styled.div`
     padding: 0.5rem 0;
@@ -117,10 +117,11 @@ export const DesktopWalletSettingsPage = () => {
     const canViewTwoFA = useCanViewTwoFA();
 
     const notificationsAvailable = useAppSdk().notifications !== undefined;
+    const env = useAppTargetEnv();
 
     return (
         <DesktopViewPageLayout>
-            <DesktopViewHeader borderBottom>
+            <DesktopViewHeader borderBottom backButton={env === 'mobile'}>
                 <Label2>{t('settings_title')}</Label2>
             </DesktopViewHeader>
             <SettingsListBlock>

diff --git a/packages/uikit/src/desktop-pages/settings/DesktopWalletSettingsRouting.tsx b/packages/uikit/src/desktop-pages/settings/DesktopWalletSettingsRouting.tsx
@@ -2,7 +2,6 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import { WalletSettingsRoute } from '../../libs/routes';
 import { ActiveRecovery, Recovery } from '../../pages/settings/Recovery';
 import { WalletVersionPage } from '../../pages/settings/Version';
-import { JettonsSettings } from '../../pages/settings/Jettons';
 import styled from 'styled-components';
 import { DesktopWalletSettingsPage } from './DesktopWalletSettingsPage';
 import { DesktopConnectedAppsSettings } from './DesktopConnectedAppsSettings';
@@ -12,6 +11,7 @@ import { LedgerIndexesPage } from '../../pages/settings/LedgerIndexes';
 import { BatteryPage } from '../../pages/settings/Battery';
 import { Notifications } from '../../pages/settings/Notification';
 import { TwoFAPage } from '../../pages/settings/TwoFA';
+import { JettonsSettings } from '../../pages/settings/Jettons';
 
 const OldSettingsLayoutWrapper = styled.div`
     padding-top: 64px;
@@ -24,7 +24,7 @@ export const DesktopWalletSettingsRouting = () => {
     return (
         <Switch>
             <Route
-                path={[path + WalletSettingsRoute.recovery, path + WalletSettingsRoute.jettons]}
+                path={[path + WalletSettingsRoute.recovery]}
                 render={() => {
                     return (
                         <OldSettingsLayoutWrapper>
@@ -38,10 +38,6 @@ export const DesktopWalletSettingsRouting = () => {
                                     component={ActiveRecovery}
                                     exact
                                 />
-                                <Route
-                                    path={path + WalletSettingsRoute.jettons}
-                                    component={JettonsSettings}
-                                />
                             </Switch>
                         </OldSettingsLayoutWrapper>
                     );
@@ -51,6 +47,7 @@ export const DesktopWalletSettingsRouting = () => {
                 path={path + WalletSettingsRoute.connectedApps}
                 component={DesktopConnectedAppsSettings}
             />
+            <Route path={path + WalletSettingsRoute.jettons} component={JettonsSettings} />
             <Route path={path + WalletSettingsRoute.nft} component={DesktopNftSettings} />
             <Route path={path + WalletSettingsRoute.derivations} component={MAMIndexesPage} />
             <Route path={path + WalletSettingsRoute.battery} component={BatteryPage} />

diff --git a/packages/uikit/src/desktop-pages/swap/index.tsx b/packages/uikit/src/desktop-pages/swap/index.tsx
@@ -7,7 +7,7 @@ import { SwapMainForm } from '../../components/swap/SwapMainForm';
 import { SwapProviders } from '../../components/swap/SwapProviders';
 import { css, styled } from 'styled-components';
 import { useSwapsConfig } from '../../state/swap/useSwapsConfig';
-import { useAppSdk } from '../../hooks/appSdk';
+import { useAppSdk, useAppTargetEnv } from '../../hooks/appSdk';
 import { useStonfiSwapLink } from '../../state/stonfi';
 import { swapFromAsset$, swapToAsset$ } from '../../state/swap/useSwapForm';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -56,6 +56,7 @@ const DesktopSwapPageContent = () => {
     const { isSwapsEnabled } = useSwapsConfig();
     const sdk = useAppSdk();
     const swapLink = useStonfiSwapLink(swapFromAsset$.value.address, swapToAsset$.value.address);
+    const env = useAppTargetEnv();
 
     if (!isSwapsEnabled) {
         sdk.openPage(swapLink);
@@ -64,7 +65,7 @@ const DesktopSwapPageContent = () => {
 
     return (
         <SwapPageWrapper>
-            <DesktopViewHeader backButton={false}>
+            <DesktopViewHeader backButton={env === 'mobile'}>
                 <Label2>{t('wallet_swap')}</Label2>
                 <HeaderButtons>
                     <SwapRefreshButton />

diff --git a/packages/uikit/src/desktop-pages/tokens/DesktopTokens.tsx b/packages/uikit/src/desktop-pages/tokens/DesktopTokens.tsx
@@ -49,9 +49,12 @@ const AnyChainAssetStyled = styled(AnyChainAsset)`
 
 const TokensHeaderContainer = styled(DesktopViewHeader)`
     flex-shrink: 0;
-    justify-content: space-between;
     border-bottom: 1px solid ${p => p.theme.separatorCommon};
     padding-right: 0;
+
+    > *:nth-child(3) {
+        margin-left: auto;
+    }
 `;
 
 const TokensPageBody = styled.div`
@@ -151,7 +154,7 @@ const DesktopTokensPayload = () => {
 
     return (
         <DesktopViewPageLayout ref={containerRef}>
-            <TokensHeaderContainer>
+            <TokensHeaderContainer backButton={env === 'mobile'}>
                 <Label2>{t('jettons_list_title')}</Label2>
                 {canShowChart && (
                     <HideButton onClick={onToggleChart}>

diff --git a/packages/uikit/src/pages/settings/Battery.tsx b/packages/uikit/src/pages/settings/Battery.tsx
@@ -23,7 +23,7 @@ import { useTranslation } from '../../hooks/translation';
 import { ErrorBoundary } from 'react-error-boundary';
 import { fallbackRenderOver } from '../../components/Error';
 import { IconButton, IconButtonTransparentBackground } from '../../components/fields/IconButton';
-import { useAppSdk } from '../../hooks/appSdk';
+import { useAppSdk, useAppTargetEnv } from '../../hooks/appSdk';
 import { BatteryRechargeNotification } from '../../components/settings/battery/BatteryRechargeNotification';
 import { TON_ASSET } from '@tonkeeper/core/dist/entries/crypto/asset/constants';
 import { AppRoute } from '../../libs/routes';
@@ -82,11 +82,12 @@ export const BatteryPageLayout: FC = () => {
     const isFullWidth = useIsFullWidthMode();
     const { t } = useTranslation();
     const { isOpen, onClose, onOpen } = useDisclosure();
+    const env = useAppTargetEnv();
 
     if (isFullWidth) {
         return (
             <DesktopViewPageLayout>
-                <DesktopViewHeaderStyled borderBottom>
+                <DesktopViewHeaderStyled borderBottom backButton={env === 'mobile'}>
                     <Label2>{t('battery_title')}</Label2>
                     {data?.batteryUnitsBalance.gt(0) && (
                         <SettingsButton onClick={onOpen}>