v3.2.5

changelogs/3.2.5.txt

@@ -0,0 +1 @@
+Bug fixes and performance improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mytonwallet",
-  "version": "3.2.4",
+  "version": "3.2.5",
   "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": {

public/version.txt

@@ -1 +1 @@
-3.2.4
+3.2.5

src/components/App.tsx

@@ -1,13 +1,12 @@
 import React, { memo, useEffect, useLayoutEffect } from '../lib/teact/teact';
-import { setExtraStyles } from '../lib/teact/teact-dom';
 import { getActions, withGlobal } from '../global';
 
 import type { Theme } from '../global/types';
 import { AppState } from '../global/types';
 
 import { INACTIVE_MARKER, IS_ANDROID_DIRECT, IS_CAPACITOR } from '../config';
 import { selectCurrentAccountSettings } from '../global/selectors';
-import { ACCENT_COLORS } from '../util/accentColor';
+import { useAccentColor } from '../util/accentColor';
 import { setActiveTabChangeListener } from '../util/activeTabMonitor';
 import buildClassName from '../util/buildClassName';
 import { resolveRender } from '../util/renderPromise';
@@ -73,8 +72,6 @@ interface StateProps {
   accentColorIndex?: number;
 }
 
-const HEX_80_PERCENT = 'CC';
-const HEX_10_PERCENT = '1A';
 const APP_UPDATE_INTERVAL = (IS_ELECTRON && !IS_LINUX) || IS_ANDROID_DIRECT
   ? 5 * 60 * 1000 // 5 min
   : undefined;
@@ -149,16 +146,7 @@ function App({
   }, [accountId]);
 
   const appTheme = useAppTheme(theme);
-  const accentColor = accentColorIndex ? ACCENT_COLORS[appTheme][accentColorIndex] : undefined;
-
-  useLayoutEffect(() => {
-    setExtraStyles(document.body, {
-      '--color-accent': accentColor || 'inherit',
-      '--color-accent-10o': accentColor ? `${accentColor}${HEX_10_PERCENT}` : 'inherit',
-      '--color-accent-button-background': accentColor || 'inherit',
-      '--color-accent-button-background-hover': accentColor ? `${accentColor}${HEX_80_PERCENT}` : 'inherit',
-    });
-  });
+  useAccentColor('body', appTheme, accentColorIndex);
 
   // eslint-disable-next-line consistent-return
   function renderContent(isActive: boolean, isFrom: boolean, currentKey: number) {

src/components/main/Main.tsx

@@ -8,7 +8,13 @@ import { ActiveTab, ContentTab, type Theme } from '../../global/types';
 
 import { IS_CAPACITOR } from '../../config';
 import { getStakingStateStatus } from '../../global/helpers/staking';
-import { selectAccountStakingState, selectCurrentAccount, selectCurrentAccountState } from '../../global/selectors';
+import {
+  selectAccountStakingState,
+  selectCurrentAccount,
+  selectCurrentAccountSettings,
+  selectCurrentAccountState,
+} from '../../global/selectors';
+import { useAccentColor } from '../../util/accentColor';
 import buildClassName from '../../util/buildClassName';
 import { getStatusBarHeight } from '../../util/capacitor';
 import { captureEvents, SwipeDirection } from '../../util/captureEvents';
@@ -18,6 +24,7 @@ import {
 } from '../../util/windowEnvironment';
 import windowSize from '../../util/windowSize';
 
+import useAppTheme from '../../hooks/useAppTheme';
 import useBackgroundMode, { isBackgroundModeActive } from '../../hooks/useBackgroundMode';
 import { useOpenFromMainBottomSheet } from '../../hooks/useDelegatedBottomSheet';
 import { useDeviceScreen } from '../../hooks/useDeviceScreen';
@@ -59,6 +66,7 @@ type StateProps = {
   isOnRampDisabled?: boolean;
   isMediaViewerOpen?: boolean;
   theme: Theme;
+  accentColorIndex?: number;
 };
 
 const STICKY_CARD_INTERSECTION_THRESHOLD = -3.75 * REM;
@@ -76,6 +84,7 @@ function Main({
   isOnRampDisabled,
   isMediaViewerOpen,
   theme,
+  accentColorIndex,
 }: OwnProps & StateProps) {
   const {
     selectToken,
@@ -94,6 +103,8 @@ function Main({
   const cardRef = useRef<HTMLDivElement>(null);
   // eslint-disable-next-line no-null/no-null
   const portraitContainerRef = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line no-null/no-null
+  const landscapeContainerRef = useRef<HTMLDivElement>(null);
   const [canRenderStickyCard, setCanRenderStickyCard] = useState(false);
   const [shouldRenderDarkStatusBar, setShouldRenderDarkStatusBar] = useState(false);
   const safeAreaTop = IS_CAPACITOR ? getStatusBarHeight() : windowSize.get().safeAreaTop;
@@ -179,6 +190,9 @@ function Main({
     });
   }, [currentTokenSlug, handleTokenCardClose, isPortrait]);
 
+  const appTheme = useAppTheme(theme);
+  useAccentColor(isPortrait ? portraitContainerRef : landscapeContainerRef, appTheme, accentColorIndex);
+
   const handleEarnClick = useLastCallback((stakingId?: string) => {
     if (stakingId) changeCurrentStaking({ stakingId });
 
@@ -222,7 +236,7 @@ function Main({
 
   function renderLandscapeLayout() {
     return (
-      <div className={styles.landscapeContainer}>
+      <div ref={landscapeContainerRef} className={styles.landscapeContainer}>
         <div className={buildClassName(styles.sidebar, 'custom-scroll')}>
           <Warnings onOpenBackupWallet={openBackupWalletModal} />
           <Card onTokenCardClose={handleTokenCardClose} onYieldClick={handleEarnClick} />
@@ -275,6 +289,7 @@ export default memo(
         isSwapDisabled,
         isOnRampDisabled,
         theme: global.settings.theme,
+        accentColorIndex: selectCurrentAccountSettings(global)?.accentColorIndex,
       };
     },
     (global, _, stickToFirst) => stickToFirst(global.currentAccountId),

src/components/main/modals/QrScannerModal.module.scss

@@ -147,6 +147,7 @@
 .documentRoot {
   --color-app-background: tranparent !important;
   --color-background-second: transparent !important;
+  --color-background-window: transparent !important;
 
   visibility: hidden;
 

src/components/main/sections/Card/AccountSelector.module.scss

@@ -412,7 +412,7 @@
   }
 
   :global(.MtwCard__standard.MtwCard__lightText) & {
-    text-shadow: 0 0 1.5rem #000000B2;
+    text-shadow: 0 0 1.5rem #000;
   }
 
   :global(.MtwCard__standard.MtwCard__darkText) & {

src/components/main/sections/Content/Explore.module.scss

@@ -143,7 +143,7 @@
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1.125rem;
-  color: var(--color-white);
+  color: var(--color-accent-button-text);
 
   background: var(--color-accent);
   border-radius: 0.3125rem;

src/components/settings/SettingsSecurity.tsx

@@ -173,6 +173,11 @@ function SettingsSecurity({
   });
 
   const openBackupPage = useLastCallback(() => {
+    if (!isMultichainAccount) {
+      openSettingsSlide();
+      return;
+    }
+
     setCurrentSlide(SLIDES.backup);
     setNextKey(SLIDES.safetyRules);
   });
@@ -256,12 +261,6 @@ function SettingsSecurity({
     openNewPasswordSlide();
   });
 
-  const handleOpenBackupWallet = useLastCallback(() => {
-    setCurrentSlide(SLIDES.backup);
-    // Resetting next key to undefined unmounts and destroys components with mnemonic and private key
-    setNextKey(undefined);
-  });
-
   const handleOpenPrivateKeySafetyRules = useLastCallback(() => {
     setBackupType('key');
     setCurrentSlide(SLIDES.safetyRules);
@@ -274,6 +273,18 @@ function SettingsSecurity({
     setNextKey(SLIDES.secretWords);
   });
 
+  const handleOpenBackupWallet = useLastCallback(() => {
+    if (!isMultichainAccount) {
+      if (hasMnemonicWallet) handleOpenSecretWordsSafetyRules();
+      else handleOpenPrivateKeySafetyRules();
+      return;
+    }
+
+    setCurrentSlide(SLIDES.backup);
+    // Resetting next key to undefined unmounts and destroys components with mnemonic and private key
+    setNextKey(undefined);
+  });
+
   const handleOpenPrivateKey = useLastCallback(() => {
     setCurrentSlide(SLIDES.privateKey);
     setNextKey(SLIDES.backup);

src/components/swap/SwapDexChooser.tsx

@@ -220,7 +220,7 @@ function SwapDexChooser({
         <Modal
           isOpen={isModalOpen}
           isCompact
-          title={lang('Built-in Dex Aggregator')}
+          title={lang('Built-in DEX Aggregator')}
           onClose={closeModal}
         >
           <div className={styles.dexList}>

src/components/swap/SwapInitial.tsx

@@ -4,7 +4,10 @@ import React, {
 import { getActions, getGlobal, withGlobal } from '../../global';
 
 import type { ApiChain } from '../../api/types';
-import type { Account, GlobalState, UserSwapToken } from '../../global/types';
+import type {
+  Account, ActionPayloads, AssetPairs, GlobalState, UserSwapToken,
+} from '../../global/types';
+import type { LangFn } from '../../hooks/useLang';
 import { SwapInputSource, SwapState, SwapType } from '../../global/types';
 
 import {
@@ -109,6 +112,7 @@ function SwapInitial({
     setSwapCexAddress,
     toggleSwapSettingsModal,
     authorizeDiesel,
+    showNotification,
   } = getActions();
   const lang = useLang();
 
@@ -232,9 +236,14 @@ function SwapInitial({
   const isPriceImpactError = priceImpact >= MAX_PRICE_IMPACT_VALUE;
   const isCrosschain = swapType === SwapType.CrosschainFromWallet || swapType === SwapType.CrosschainToWallet;
 
-  const isReverseProhibited = useMemo(() => {
-    return isCrosschain || pairs?.bySlug?.[currentTokenInSlug]?.[currentTokenOutSlug]?.isReverseProhibited;
-  }, [currentTokenInSlug, currentTokenOutSlug, isCrosschain, pairs?.bySlug]);
+  const [isBuyAmountInputDisabled, handleBuyAmountInputClick] = useReverseProhibited(
+    isCrosschain,
+    pairs?.bySlug,
+    currentTokenInSlug,
+    currentTokenOutSlug,
+    showNotification,
+    lang,
+  );
 
   const handleEstimateSwap = useLastCallback((shouldBlock: boolean) => {
     if (!isActive || isBackgroundModeActive()) return;
@@ -553,9 +562,10 @@ function SwapInitial({
               className={styles.amountInputBuy}
               value={amountOutValue}
               isLoading={isEstimating && inputSource === SwapInputSource.In}
-              disabled={isReverseProhibited}
+              disabled={isBuyAmountInputDisabled}
               onChange={handleAmountOutChange}
               onPressEnter={handleSubmit}
+              onInputClick={handleBuyAmountInputClick}
               decimals={tokenOut?.decimals}
               labelClassName={styles.inputLabel}
               inputClassName={styles.amountInputInner}
@@ -640,6 +650,30 @@ function useTokenTransitionKey(tokenSlug: string) {
   return transitionKeyRef.current;
 }
 
+function useReverseProhibited(
+  isCrosschain: boolean,
+  pairsBySlug: Record<string, AssetPairs> | undefined,
+  currentTokenInSlug: string,
+  currentTokenOutSlug: string,
+  showNotification: (arg: ActionPayloads['showNotification']) => void,
+  lang: LangFn,
+) {
+  const isReverseProhibited = isCrosschain
+    || pairsBySlug?.[currentTokenInSlug]?.[currentTokenOutSlug]?.isReverseProhibited;
+  const isBuyAmountInputDisabled = isReverseProhibited;
+
+  const handleBuyAmountInputClick = useMemo(() => {
+    return isReverseProhibited
+      ? () => {
+        void vibrate();
+        showNotification({ message: lang('$swap_reverse_prohibited') });
+      }
+      : undefined;
+  }, [isReverseProhibited, lang, showNotification]);
+
+  return [isBuyAmountInputDisabled, handleBuyAmountInputClick] as const;
+}
+
 function AnimatedArrows({ onClick }: { onClick?: NoneToVoidFunction }) {
   const animationLevel = getGlobal().settings.animationLevel;
   const shouldAnimate = (animationLevel === ANIMATION_LEVEL_MAX);

src/components/ui/Input.module.scss

@@ -154,7 +154,6 @@
     }
 
     &.disabled {
-      pointer-events: none;
       cursor: default !important;
 
       opacity: 1;
@@ -166,7 +165,7 @@
 
     &:hover,
     &:focus {
-      &.isEmpty::before {
+      &.isEmpty:not(.disabled)::before {
         color: var(--color-interactive-input-text-hover-active);
       }
     }