v1.16.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mytonwallet",
-  "version": "1.16.3",
+  "version": "1.16.4",
   "description": "The most feature-rich web wallet and browser extension for TON – with support of multi-accounts, tokens (jettons), NFT, TON DNS, TON Sites, TON Proxy, and TON Magic.",
   "main": "index.js",
   "scripts": {

src/components/App.tsx

@@ -6,7 +6,7 @@ import { AppState } from '../global/types';
 import { INACTIVE_MARKER, IS_ELECTRON } from '../config';
 import { setActiveTabChangeListener } from '../util/activeTabMonitor';
 import buildClassName from '../util/buildClassName';
-import { IS_LINUX } from '../util/windowEnvironment';
+import { IS_ANDROID, IS_LINUX } from '../util/windowEnvironment';
 import { updateSizes } from '../util/windowSize';
 
 import { useDeviceScreen } from '../hooks/useDeviceScreen';
@@ -129,7 +129,7 @@ function App({
       {IS_ELECTRON && !IS_LINUX && <ElectronHeader withTitle />}
 
       <Transition
-        name={isPortrait ? 'slideLayers' : 'semiFade'}
+        name={isPortrait ? (IS_ANDROID ? 'slideFade' : 'slideLayers') : 'semiFade'}
         activeKey={renderingKey}
         shouldCleanup
         className={styles.transitionContainer}

src/components/auth/Auth.tsx

@@ -6,6 +6,7 @@ import type { GlobalState } from '../../global/types';
 import { AuthState } from '../../global/types';
 
 import { pick } from '../../util/iteratees';
+import { IS_ANDROID } from '../../util/windowEnvironment';
 
 import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
 import { useDeviceScreen } from '../../hooks/useDeviceScreen';
@@ -93,7 +94,7 @@ const Auth = ({
 
   return (
     <Transition
-      name={isPortrait ? 'slideLayers' : 'semiFade'}
+      name={isPortrait ? (IS_ANDROID ? 'slideFade' : 'slideLayers') : 'semiFade'}
       activeKey={renderingAuthState}
       renderCount={RENDER_COUNT}
       shouldCleanup

src/components/main/sections/Content/Content.tsx

@@ -9,6 +9,8 @@ import {
   selectAccountState, selectCurrentAccountTokens, selectIsHardwareAccount,
 } from '../../../../global/selectors';
 import buildClassName from '../../../../util/buildClassName';
+import { captureSwipe, SwipeDirection } from '../../../../util/captureSwipe';
+import { IS_TOUCH_ENV } from '../../../../util/windowEnvironment';
 
 import { useDeviceScreen } from '../../../../hooks/useDeviceScreen';
 import useLang from '../../../../hooks/useLang';
@@ -49,6 +51,8 @@ function Content({
   const lang = useLang();
   // eslint-disable-next-line no-null/no-null
   const containerRef = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line no-null/no-null
+  const transitionRef = useRef<HTMLDivElement>(null);
   const {
     applyTransitionFix,
     releaseTransitionFix,
@@ -92,11 +96,35 @@ function Content({
     setActiveContentTabIndex({ index: index + indexShift });
   });
 
+  useEffect(() => {
+    if (!IS_TOUCH_ENV) {
+      return undefined;
+    }
+
+    return captureSwipe(transitionRef.current!, (e, direction) => {
+      if (direction === SwipeDirection.Left) {
+        handleSwitchTab(Math.min(TABS.length - 1, activeContentTabIndex + 1));
+        return true;
+      } else if (direction === SwipeDirection.Right) {
+        handleSwitchTab(Math.max(0, activeContentTabIndex - 1 - indexShift));
+        return true;
+      }
+
+      return false;
+    });
+  }, [TABS.length, activeContentTabIndex, handleSwitchTab, indexShift]);
+
   const handleClickAssets = useLastCallback((slug: string) => {
     selectToken({ slug });
     setActiveContentTabIndex({ index: TABS.findIndex((tab) => tab.id === ContentTab.Activity) });
   });
 
+  const containerClassName = buildClassName(
+    styles.container,
+    IS_TOUCH_ENV && 'swipe-container',
+    isLandscape ? styles.landscapeContainer : styles.portraitContainer,
+  );
+
   function renderCurrentTab(isActive: boolean) {
     // When assets are shown separately, there is effectively no tab with index 0,
     // so we fall back to next tab to not break parent's component logic.
@@ -126,6 +154,7 @@ function Content({
           className={buildClassName(styles.tabs, 'content-tabslist')}
         />
         <Transition
+          ref={transitionRef}
           name={isLandscape ? 'slideFade' : 'slide'}
           activeKey={realActiveIndex}
           renderCount={TABS.length}
@@ -143,7 +172,7 @@ function Content({
   return (
     <div
       ref={containerRef}
-      className={buildClassName(styles.container, isLandscape ? styles.landscapeContainer : styles.portraitContainer)}
+      className={containerClassName}
     >
       {shouldShowSeparateAssetsPanel && (
         <div className={styles.assetsPanel}>

src/components/settings/Settings.tsx

@@ -1,5 +1,5 @@
 import React, {
-  memo, useEffect, useMemo, useState,
+  memo, useEffect, useMemo, useRef, useState,
 } from '../../lib/teact/teact';
 import { getActions, withGlobal } from '../../global';
 
@@ -23,7 +23,8 @@ import {
 } from '../../global/selectors';
 import buildClassName from '../../util/buildClassName';
 import captureEscKeyListener from '../../util/captureEscKeyListener';
-import { IS_LEDGER_SUPPORTED } from '../../util/windowEnvironment';
+import { captureSwipe, SwipeDirection } from '../../util/captureSwipe';
+import { IS_ANDROID, IS_LEDGER_SUPPORTED, IS_TOUCH_ENV } from '../../util/windowEnvironment';
 
 import useFlag from '../../hooks/useFlag';
 import useLang from '../../hooks/useLang';
@@ -129,6 +130,8 @@ function Settings({
   } = getActions();
 
   const lang = useLang();
+  // eslint-disable-next-line no-null/no-null
+  const transitionRef = useRef<HTMLDivElement>(null);
   const [clicksAmount, setClicksAmount] = useState<number>(isTestnet ? AMOUNT_OF_CLICKS_FOR_DEVELOPERS_MODE : 0);
   const [renderingKey, setRenderingKey] = useState<number>(RenderingState.Initial);
 
@@ -196,6 +199,14 @@ function Settings({
     openBackupWalletModal();
   }
 
+  const handleBackOrCloseAction = useLastCallback(() => {
+    if (renderingKey === RenderingState.Initial) {
+      closeSettings();
+    } else {
+      handleBackClick();
+    }
+  });
+
   const handleCloseLogOutModal = useLastCallback((shouldCloseSettings: boolean) => {
     closeLogOutModal();
     if (shouldCloseSettings) {
@@ -216,16 +227,25 @@ function Settings({
   };
 
   useEffect(
-    () => captureEscKeyListener(() => {
-      if (renderingKey === RenderingState.Initial) {
-        closeSettings();
-      } else {
-        handleBackClick();
-      }
-    }),
-    [handleBackClick, renderingKey],
+    () => captureEscKeyListener(handleBackOrCloseAction),
+    [handleBackOrCloseAction],
   );
 
+  useEffect(() => {
+    if (!IS_TOUCH_ENV) {
+      return undefined;
+    }
+
+    return captureSwipe(transitionRef.current!, (e, direction) => {
+      if (direction === SwipeDirection.Right) {
+        handleBackOrCloseAction();
+        return true;
+      }
+
+      return false;
+    });
+  }, [handleBackOrCloseAction]);
+
   function renderHandleDeeplinkButton() {
     return (
       <div className={styles.item} onClick={handleDeeplinkHookToggle}>
@@ -444,7 +464,8 @@ function Settings({
   return (
     <div className={styles.wrapper}>
       <Transition
-        name={isInsideModal ? 'slideFade' : 'slideLayers'}
+        ref={transitionRef}
+        name={isInsideModal || IS_ANDROID ? 'slideFade' : 'slideLayers'}
         className={buildClassName(isInsideModal ? modalStyles.transition : styles.transitionContainer, 'custom-scroll')}
         activeKey={renderingKey}
         slideClassName={modalStyles.transitionSlide}

src/components/staking/StakingInitial.tsx

@@ -72,7 +72,7 @@ function StakingInitial({
   const lang = useLang();
 
   const [isStakingInfoModalOpen, openStakingInfoModal, closeStakingInfoModal] = useFlag();
-  const [amount, setAmount] = useState<number | undefined>(0);
+  const [amount, setAmount] = useState<number | undefined>();
   const [isNotEnough, setIsNotEnough] = useState<boolean>(false);
   const [isInsufficientBalance, setIsInsufficientBalance] = useState<boolean>(false);
   const [shouldUseAllBalance, setShouldUseAllBalance] = useState<boolean>(false);

src/components/ui/Modal.tsx

@@ -7,7 +7,10 @@ import React, { useEffect, useRef } from '../../lib/teact/teact';
 import { ANIMATION_END_DELAY, IS_EXTENSION } from '../../config';
 import buildClassName from '../../util/buildClassName';
 import captureKeyboardListeners from '../../util/captureKeyboardListeners';
+import { captureSwipe, SwipeDirection } from '../../util/captureSwipe';
 import trapFocus from '../../util/trapFocus';
+import { IS_TOUCH_ENV } from '../../util/windowEnvironment';
+import windowSize from '../../util/windowSize';
 
 import { useDeviceScreen } from '../../hooks/useDeviceScreen';
 import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps';
@@ -76,9 +79,10 @@ function Modal({
     animationDuration + ANIMATION_END_DELAY,
   );
 
+  const lang = useLang();
   // eslint-disable-next-line no-null/no-null
   const modalRef = useRef<HTMLDivElement>(null);
-  const lang = useLang();
+  const isSlideUp = !isCompact && isPortrait;
 
   const handleClose = useLastCallback((e: KeyboardEvent) => {
     if (IS_EXTENSION) {
@@ -103,6 +107,21 @@ function Modal({
     [animationDuration, isOpen],
   );
 
+  useEffect(() => {
+    if (!IS_TOUCH_ENV || !isOpen || !isPortrait || !isSlideUp) {
+      return undefined;
+    }
+
+    return captureSwipe(modalRef.current!, (e, direction) => {
+      if (direction === SwipeDirection.Down && !windowSize.getIsKeyboardVisible()) {
+        onClose();
+        return true;
+      }
+
+      return false;
+    });
+  }, [isOpen, isPortrait, isSlideUp, onClose]);
+
   if (!shouldRender) {
     return undefined;
   }
@@ -132,7 +151,7 @@ function Modal({
     styles.modal,
     className,
     transitionClassNames,
-    !isCompact && isPortrait && styles.slideUpAnimation,
+    isSlideUp && styles.slideUpAnimation,
     isCompact && styles.compact,
   );