v1.17.2

changelogs/1.17.2.txt

@@ -0,0 +1 @@
+Some hotfixes

package.json

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

src/components/common/TokenSelector.tsx

@@ -1,5 +1,5 @@
 import React, {
-  memo, useEffect, useLayoutEffect, useMemo, useRef, useState,
+  memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState,
 } from '../../lib/teact/teact';
 import { getActions, withGlobal } from '../../global';
 
@@ -130,7 +130,10 @@ function TokenSelector({
 
   const balancesBySlugPrev = usePrevious(balancesBySlug);
 
-  const filterTokens = useLastCallback((tokens: Token[]) => filterAndSortTokens(tokens, tokenInSlug, pairsBySlug));
+  // It is necessary to use useCallback instead of useLastCallback here
+  const filterTokens = useCallback((tokens: Token[]) => {
+    return filterAndSortTokens(tokens, tokenInSlug, pairsBySlug);
+  }, [pairsBySlug, tokenInSlug]);
 
   const allUnimportedTonTokens = useMemo(() => {
     const balances = balancesBySlugPrev ?? balancesBySlug ?? {};

src/components/main/modals/BackupModal.tsx

@@ -68,14 +68,14 @@ function BackupModal({
   const handlePasswordSubmit = useLastCallback(async (password: string) => {
     setIsLoading(true);
     mnemonicRef.current = await callApi('getMnemonic', currentAccountId!, password);
-    setIsLoading(false);
 
     if (!mnemonicRef.current) {
       setError('Wrong password, please try again');
       if (IS_CAPACITOR) {
         void vibrateOnError();
       }
 
+      setIsLoading(false);
       return;
     }
     if (IS_CAPACITOR) {
@@ -84,6 +84,7 @@ function BackupModal({
       clearIsPinPadPasswordAccepted();
     }
 
+    setIsLoading(false);
     setNextKey(SLIDES.check);
     setCurrentSlide(SLIDES.mnemonic);
   });

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

@@ -15,7 +15,8 @@
   align-items: center;
   justify-content: center;
 
-  margin-top: 3rem;
+  margin-top: auto;
+  padding-top: 3rem;
 }
 
 .copyButtonWrapper {

src/components/main/sections/Actions/PortraitActions.module.scss

@@ -38,11 +38,9 @@
 
   transition: background-color 150ms, color 150ms;
 
-  @media (hover: hover) {
-    &:hover,
-    &:focus {
-      color: var(--color-blue);
-    }
+  &:hover,
+  &:focus {
+    color: var(--color-blue);
   }
 
   &:active {

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

@@ -135,7 +135,7 @@ function Swap({
       // Skip the 'waiting' status for transactions from TON to account for delayed status updates from changelly.
       text = lang('Waiting for payment');
     } else if (isPending) {
-      text = lang('In progress');
+      text = lang('Waiting for payment');
     }
 
     return (

src/components/receive/ReceiveModal.module.scss

@@ -75,6 +75,13 @@
 .invoiceButton {
   max-width: 100% !important;
 
+  background-color: var(--color-gray-button-background) !important;
+
+  &:focus,
+  &:hover {
+    background-color: var(--color-gray-button-background-hover) !important;
+  }
+
   @include respond-above(xs) {
     background-color: var(--color-gray-button-background-desktop) !important;
 

src/components/swap/SwapInitial.tsx

@@ -35,7 +35,6 @@ import useFlag from '../../hooks/useFlag';
 import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
 import usePrevious from '../../hooks/usePrevious';
-import usePrevious2 from '../../hooks/usePrevious2';
 import useSyncEffect from '../../hooks/useSyncEffect';
 
 import AnimatedIconWithPreview from '../ui/AnimatedIconWithPreview';
@@ -497,9 +496,7 @@ function SwapInitial({
           </div>
 
           <div className={buildClassName(styles.swapButtonWrapper, isStatic && styles.swapButtonWrapperStatic)}>
-            <div className={styles.swapButton} onClick={handleSwitchTokens}>
-              <AnimatedArrows value={tokenIn?.slug} />
-            </div>
+            <AnimatedArrows onClick={handleSwitchTokens} />
           </div>
 
           <div ref={inputOutRef} className={styles.inputContainer}>
@@ -582,24 +579,21 @@ function useTokenTransitionKey(tokenSlug: string) {
   return transitionKeyRef.current;
 }
 
-function AnimatedArrows({ value }: { value?: string }) {
+function AnimatedArrows({ onClick }: { onClick?: NoneToVoidFunction }) {
   const animationLevel = getGlobal().settings.animationLevel;
-  const prevValue = usePrevious2(value);
-
-  const shouldAnimate = (animationLevel === ANIMATION_LEVEL_MAX) && prevValue && prevValue !== value;
-  const [hasAnimation, setHasAnimation] = useState(false);
-
-  useEffect(() => {
-    if (!shouldAnimate) return undefined;
-
-    setHasAnimation(true);
-
-    const timeoutId = window.setTimeout(() => {
-      setHasAnimation(false);
-    }, 350);
+  const shouldAnimate = (animationLevel === ANIMATION_LEVEL_MAX);
+  const [hasAnimation, startAnimation, stopAnimation] = useFlag(false);
+
+  const handleClick = useLastCallback(() => {
+    if (shouldAnimate) {
+      startAnimation();
+      window.setTimeout(() => {
+        stopAnimation();
+      }, 350);
+    }
 
-    return () => window.clearTimeout(timeoutId);
-  }, [animationLevel, prevValue, shouldAnimate, value]);
+    onClick?.();
+  });
 
   function renderArrow(isInverted?: boolean) {
     return (
@@ -618,9 +612,9 @@ function AnimatedArrows({ value }: { value?: string }) {
   }
 
   return (
-    <>
+    <div className={styles.swapButton} onClick={handleClick}>
       {renderArrow()}
       {renderArrow(true)}
-    </>
+    </div>
   );
 }

src/components/swap/SwapWaitTokens.tsx

@@ -103,7 +103,7 @@ function SwapWaitTokens({
   return (
     <>
       <ModalHeader
-        title={lang('Waiting Payment')}
+        title={lang('Waiting for Payment')}
         onClose={onClose}
       />
 

src/components/ui/PasswordForm.tsx

@@ -6,10 +6,10 @@ import { withGlobal } from '../../global';
 
 import type { AuthConfig } from '../../util/authApi/types';
 
-import { PIN_LENGTH } from '../../config';
+import { IS_CAPACITOR, PIN_LENGTH } from '../../config';
 import authApi from '../../util/authApi';
 import buildClassName from '../../util/buildClassName';
-import { getIsFaceIdAvailable, getIsNativeBiometricAuthSupported, getIsTouchIdAvailable } from '../../util/capacitor';
+import { getIsFaceIdAvailable, getIsTouchIdAvailable } from '../../util/capacitor';
 import captureKeyboardListeners from '../../util/captureKeyboardListeners';
 import { pause } from '../../util/schedulers';
 import { IS_DELEGATING_BOTTOM_SHEET } from '../../util/windowEnvironment';
@@ -160,7 +160,7 @@ function PasswordForm({
     }
   }
 
-  if (getIsNativeBiometricAuthSupported()) {
+  if (IS_CAPACITOR) {
     const hasError = Boolean(localError || error);
     const title = getPinPadTitle();
     const actionName = lang(

src/components/ui/PinPad.tsx

@@ -45,7 +45,8 @@ function PinPad({
 }: OwnProps & StateProps) {
   const isFaceId = getIsFaceIdAvailable();
   const canRenderBackspace = value.length > 0;
-  const isDisablePinButtons = value.length === length || Boolean(type);
+  const arePinButtonsDisabled = value.length === length
+    && type !== 'error'; // Allow pincode entry in case of an error
   const isSuccess = type === 'success' || isPinPadPasswordAccepted;
   const titleClassName = buildClassName(
     styles.title,
@@ -70,6 +71,13 @@ function PinPad({
   }, [length, onChange, onClearError, type, value.length]);
 
   const handleClick = useLastCallback((char: string) => {
+    if (value.length === length) {
+      onChange(char);
+      onClearError?.();
+
+      return;
+    }
+
     const newValue = `${value}${char}`;
     onChange(newValue);
 
@@ -115,21 +123,21 @@ function PinPad({
       {renderDots()}
 
       <div className={styles.grid}>
-        <PinPadButton value="1" onClick={handleClick} isDisabled={isDisablePinButtons} />
-        <PinPadButton value="2" onClick={handleClick} isDisabled={isDisablePinButtons} />
-        <PinPadButton value="3" onClick={handleClick} isDisabled={isDisablePinButtons} />
-        <PinPadButton value="4" onClick={handleClick} isDisabled={isDisablePinButtons} />
-        <PinPadButton value="5" onClick={handleClick} isDisabled={isDisablePinButtons} />
-        <PinPadButton value="6" onClick={handleClick} isDisabled={isDisablePinButtons} />
-        <PinPadButton value="7" onClick={handleClick} isDisabled={isDisablePinButtons} />
-        <PinPadButton value="8" onClick={handleClick} isDisabled={isDisablePinButtons} />
-        <PinPadButton value="9" onClick={handleClick} isDisabled={isDisablePinButtons} />
+        <PinPadButton value="1" onClick={handleClick} isDisabled={arePinButtonsDisabled} />
+        <PinPadButton value="2" onClick={handleClick} isDisabled={arePinButtonsDisabled} />
+        <PinPadButton value="3" onClick={handleClick} isDisabled={arePinButtonsDisabled} />
+        <PinPadButton value="4" onClick={handleClick} isDisabled={arePinButtonsDisabled} />
+        <PinPadButton value="5" onClick={handleClick} isDisabled={arePinButtonsDisabled} />
+        <PinPadButton value="6" onClick={handleClick} isDisabled={arePinButtonsDisabled} />
+        <PinPadButton value="7" onClick={handleClick} isDisabled={arePinButtonsDisabled} />
+        <PinPadButton value="8" onClick={handleClick} isDisabled={arePinButtonsDisabled} />
+        <PinPadButton value="9" onClick={handleClick} isDisabled={arePinButtonsDisabled} />
         {!onBiometricsClick ? <span /> : (
           <PinPadButton onClick={onBiometricsClick} isDisabled={isSuccess}>
             <i className={buildClassName('icon', isFaceId ? 'icon-face-id' : 'icon-touch-id')} aria-hidden />
           </PinPadButton>
         )}
-        <PinPadButton value="0" onClick={handleClick} isDisabled={isDisablePinButtons} />
+        <PinPadButton value="0" onClick={handleClick} isDisabled={arePinButtonsDisabled} />
         <PinPadButton
           className={!canRenderBackspace && styles.buttonHidden}
           isDisabled={!canRenderBackspace}

src/config.ts

@@ -107,7 +107,7 @@ export const PROXY_HOSTS = process.env.PROXY_HOSTS;
 
 export const TINY_TRANSFER_MAX_COST = 0.01;
 
-export const LANG_CACHE_NAME = 'mtw-lang-53';
+export const LANG_CACHE_NAME = 'mtw-lang-54';
 
 export const LANG_LIST: LangItem[] = [{
   langCode: 'en',

src/global/actions/api/auth.ts

@@ -12,14 +12,13 @@ import { parseAccountId } from '../../../util/account';
 import authApi from '../../../util/authApi';
 import webAuthn from '../../../util/authApi/webAuthn';
 import {
-  getIsBiometricAuthSupported,
   getIsNativeBiometricAuthSupported,
   vibrateOnError,
   vibrateOnSuccess,
 } from '../../../util/capacitor';
 import { cloneDeep } from '../../../util/iteratees';
 import { pause } from '../../../util/schedulers';
-import { IS_DELEGATED_BOTTOM_SHEET, IS_ELECTRON } from '../../../util/windowEnvironment';
+import { IS_BIOMETRIC_AUTH_SUPPORTED, IS_DELEGATED_BOTTOM_SHEET, IS_ELECTRON } from '../../../util/windowEnvironment';
 import { callApi } from '../../../api';
 import { addActionHandler, getGlobal, setGlobal } from '../..';
 import { INITIAL_STATE } from '../../initialState';
@@ -114,9 +113,9 @@ addActionHandler('startCreatingWallet', async (global, actions) => {
   }
 
   setGlobal(updateAuth(global, {
-    state: getIsBiometricAuthSupported()
-      ? (getIsNativeBiometricAuthSupported() ? AuthState.createPin : AuthState.createBiometrics)
-      : AuthState.createPassword,
+    state: IS_CAPACITOR
+      ? AuthState.createPin
+      : (IS_BIOMETRIC_AUTH_SUPPORTED ? AuthState.createBiometrics : AuthState.createPassword),
   }));
 
   if (isFirstAccount) {
@@ -136,10 +135,14 @@ addActionHandler('createPin', (global, actions, { pin, isImporting }) => {
 });
 
 addActionHandler('confirmPin', (global, actions, { isImporting }) => {
-  global = updateAuth(global, {
-    state: isImporting ? AuthState.importWalletCreateNativeBiometrics : AuthState.createNativeBiometrics,
-  });
-  setGlobal(global);
+  if (getIsNativeBiometricAuthSupported()) {
+    global = updateAuth(global, {
+      state: isImporting ? AuthState.importWalletCreateNativeBiometrics : AuthState.createNativeBiometrics,
+    });
+    setGlobal(global);
+  } else {
+    actions.skipCreateNativeBiometrics();
+  }
 });
 
 addActionHandler('cancelConfirmPin', (global, actions, { isImporting }) => {
@@ -151,9 +154,9 @@ addActionHandler('cancelConfirmPin', (global, actions, { isImporting }) => {
 
 addActionHandler('cancelDisclaimer', (global) => {
   setGlobal(updateAuth(global, {
-    state: getIsBiometricAuthSupported()
-      ? (getIsNativeBiometricAuthSupported() ? AuthState.createPin : AuthState.createBiometrics)
-      : AuthState.createPassword,
+    state: IS_CAPACITOR
+      ? AuthState.createPin
+      : (IS_BIOMETRIC_AUTH_SUPPORTED ? AuthState.createBiometrics : AuthState.createPassword),
   }));
 });
 
@@ -293,6 +296,7 @@ addActionHandler('createAccount', async (global, actions, { password, isImportin
     password: undefined,
     ...(isPasswordNumeric && { isPasswordNumeric: true }),
   });
+  global = clearIsPinPadPasswordAccepted(global);
 
   if (isImporting) {
     const hasAccounts = Object.keys(selectAccounts(global) || {}).length > 0;
@@ -436,12 +440,11 @@ addActionHandler('afterImportMnemonic', async (global, actions, { mnemonic }) =>
     mnemonic,
     error: undefined,
     ...(!hasAccounts && {
-      state: getIsBiometricAuthSupported()
-        ? (getIsNativeBiometricAuthSupported()
-          ? AuthState.importWalletCreatePin
-          : AuthState.importWalletCreateBiometrics
-        )
-        : AuthState.importWalletCreatePassword,
+      state: IS_CAPACITOR
+        ? AuthState.importWalletCreatePin
+        : (IS_BIOMETRIC_AUTH_SUPPORTED
+          ? AuthState.importWalletCreateBiometrics
+          : AuthState.importWalletCreatePassword),
     }),
   });
   setGlobal(global);