v1.20.12

changelogs/1.20.12.txt

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mytonwallet",
-  "version": "1.20.11",
+  "version": "1.20.12",
   "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.20.11
+1.20.12

src/components/addbuy/AddBuyModal.module.scss

@@ -79,7 +79,7 @@
   }
 
   @media (hover: hover) {
-    &:focus,
+    &:focus-visible,
     &:hover {
       background-color: var(--color-interactive-item-hover);
     }

src/components/auth/Auth.module.scss

@@ -424,7 +424,8 @@
     font-weight: 600;
     color: var(--color-gray-3);
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus-visible {
       color: var(--color-gray-1);
     }
   }

src/components/auth/AuthCheckPassword.tsx

@@ -38,12 +38,11 @@ function AuthCheckPassword({
         isLoading={isLoading}
         error={error}
         containerClassName={styles.passwordForm}
-        placeholder={lang('Enter your password')}
-        onUpdate={cleanAuthError}
-        onSubmit={handleSubmit}
         submitLabel={lang('Send')}
-        onCancel={resetAuth}
         cancelLabel={lang('Back')}
+        onSubmit={handleSubmit}
+        onCancel={resetAuth}
+        onUpdate={cleanAuthError}
       >
         <div className={styles.title}>{lang('Enter your password')}</div>
       </PasswordForm>

src/components/common/TokenSelector.tsx

@@ -45,6 +45,12 @@ import styles from './TokenSelector.module.scss';
 
 type Token = UserToken | UserSwapToken;
 
+type TokenSortFactors = {
+  tickerExactMatch: number;
+  tickerMatchLength: number;
+  nameMatchLength: number;
+};
+
 interface StateProps {
   token?: Token;
   userTokens?: Token[];
@@ -178,7 +184,7 @@ function TokenSelector({
       return [];
     }
 
-    return tokensToFilter.filter(({
+    const filteredTokens = tokensToFilter.filter(({
       name, symbol, keywords, isDisabled,
     }) => {
       if (isDisabled) {
@@ -190,7 +196,43 @@ function TokenSelector({
       const isKeyword = keywords?.some((key) => key.toLowerCase().includes(lowerCaseSearchValue));
 
       return isName || isSymbol || isKeyword;
-    }).sort((a, b) => Number(b.amount - a.amount)) ?? [];
+    }) ?? [];
+
+    const sortFactors = filteredTokens.reduce((acc, searchResultToken) => {
+      const factors = {
+        tickerExactMatch: 0,
+        tickerMatchLength: 0,
+        nameMatchLength: 0,
+      };
+
+      const tokenSymbol = searchResultToken.symbol.toLowerCase();
+      const tokenName = searchResultToken.name.toLowerCase();
+
+      if (tokenSymbol === lowerCaseSearchValue) {
+        factors.tickerExactMatch = 1;
+      }
+
+      if (tokenSymbol.includes(lowerCaseSearchValue)) {
+        factors.tickerMatchLength = lowerCaseSearchValue.length;
+      }
+
+      if (tokenName.includes(lowerCaseSearchValue)) {
+        factors.nameMatchLength = lowerCaseSearchValue.length;
+      }
+
+      acc[searchResultToken.slug] = factors;
+
+      return acc;
+    }, {} as Record<string, TokenSortFactors>);
+
+    return filteredTokens.sort((a, b) => {
+      const factorA = sortFactors[a.slug];
+      const factorB = sortFactors[b.slug];
+      const comparisonResult = compareTokens(factorA, factorB);
+      if (comparisonResult !== 0) return comparisonResult;
+
+      return Number(b.amount - a.amount);
+    });
   }, [allUnimportedTonTokens, isInsideSettings, searchValue, swapTokensWithFilter]);
 
   const resetSearch = () => {
@@ -531,3 +573,13 @@ function filterAndSortTokens(tokens: Token[], tokenInSlug?: string, pairsBySlug?
     return { ...token, canSwap };
   }).sort((a, b) => Number(b.canSwap) - Number(a.canSwap));
 }
+
+function compareTokens(a: TokenSortFactors, b: TokenSortFactors) {
+  if (a.tickerExactMatch !== b.tickerExactMatch) {
+    return b.tickerExactMatch - a.tickerExactMatch;
+  }
+  if (a.tickerMatchLength !== b.tickerMatchLength) {
+    return b.tickerMatchLength - a.tickerMatchLength;
+  }
+  return b.nameMatchLength - a.nameMatchLength;
+}

src/components/dapps/DappConnectModal.tsx

@@ -171,7 +171,7 @@ function DappConnectModal({
     );
     return (
       <>
-        <p className={styles.label}>{lang('Select wallets to use on this dapp')}</p>
+        <p className={styles.label}>{lang('Select wallet to use on this dapp')}</p>
         <div className={fullClassName}>
           {iterableAccounts.map(
             ([accountId, { title, address, isHardware }]) => renderAccount(accountId, address, title, isHardware),

src/components/dapps/DappPassword.tsx

@@ -39,13 +39,12 @@ function DappPassword({
       <PasswordForm
         isActive={isActive}
         error={error}
-        placeholder={lang('Enter your password')}
-        submitLabel={lang('Connect')}
         withCloseButton={IS_CAPACITOR}
-        onUpdate={clearDappConnectRequestError}
-        onSubmit={onSubmit}
+        submitLabel={lang('Connect')}
         cancelLabel={lang('Cancel')}
+        onSubmit={onSubmit}
         onCancel={onCancel}
+        onUpdate={clearDappConnectRequestError}
       />
     </>
   );

src/components/dapps/DappTransferModal.tsx

@@ -125,18 +125,17 @@ function DappTransferModal({
   function renderPassword(isActive: boolean) {
     return (
       <>
-        {!IS_CAPACITOR && <ModalHeader title={lang('Confirm Transaction')} onClose={closeDappTransfer} />}
+        {!IS_CAPACITOR && <ModalHeader title={lang('Confirm Operation')} onClose={closeDappTransfer} />}
         <PasswordForm
           isActive={isActive}
           isLoading={isLoading}
           error={error}
-          placeholder={lang('Enter your password')}
           withCloseButton={IS_CAPACITOR}
-          onUpdate={clearDappTransferError}
-          onSubmit={handleTransferPasswordSubmit}
           submitLabel={lang('Send')}
-          onCancel={handleBackClick}
           cancelLabel={lang('Back')}
+          onSubmit={handleTransferPasswordSubmit}
+          onCancel={handleBackClick}
+          onUpdate={clearDappTransferError}
         />
       </>
     );

src/components/ledger/LedgerModal.module.scss

@@ -237,7 +237,7 @@
   background-color: var(--color-add-wallet-background) !important;
   border-radius: 0.5rem !important;
 
-  &:focus,
+  &:focus-visible,
   &:hover {
     color: var(--color-add-wallet-text-hover) !important;
 

src/components/main/modals/AddAccountPasswordModal.tsx

@@ -41,13 +41,13 @@ function AddAccountPasswordModal({
         isActive={isActive}
         isLoading={isLoading}
         error={error}
-        placeholder={lang('Enter your password')}
+        operationType="passcode"
         withCloseButton={IS_CAPACITOR}
-        onUpdate={onClearError}
-        onSubmit={onSubmit}
         submitLabel={lang('Send')}
-        onCancel={onBack}
         cancelLabel={lang('Back')}
+        onSubmit={onSubmit}
+        onCancel={onBack}
+        onUpdate={onClearError}
       />
     </>
   );

src/components/main/modals/BackupModal.tsx

@@ -140,13 +140,12 @@ function BackupModal({
               isActive={isActive}
               isLoading={isLoading}
               error={error}
-              placeholder={lang('Enter your password')}
-              submitLabel={lang('Back Up')}
               withCloseButton={IS_CAPACITOR}
-              onUpdate={handleBackupErrorUpdate}
-              onSubmit={handlePasswordSubmit}
+              submitLabel={lang('Back Up')}
               cancelLabel={lang('Cancel')}
+              onSubmit={handlePasswordSubmit}
               onCancel={onClose}
+              onUpdate={handleBackupErrorUpdate}
             />
           </>
         );

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

@@ -107,7 +107,7 @@
   height: 1.875rem !important;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: var(--color-flashlight-button-enabled-text) !important;
 
     background-color: var(--color-flashlight-button-enabled-background) !important;

src/components/main/modals/SignatureModal.tsx

@@ -109,12 +109,11 @@ function SignatureModal({
         <PasswordForm
           isActive={isActive}
           error={error}
-          placeholder={lang('Enter your password')}
           submitLabel={lang('Sign')}
-          onUpdate={clearSignatureError}
-          onSubmit={handlePasswordSubmit}
           cancelLabel={lang('Cancel')}
+          onSubmit={handlePasswordSubmit}
           onCancel={closeModal}
+          onUpdate={clearSignatureError}
         />
       </>
     );

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

@@ -91,7 +91,7 @@
   }
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: var(--color-blue);
     text-decoration: none;
   }

src/components/main/modals/TransactionModal.tsx

@@ -446,11 +446,11 @@ function TransactionModal({
             {!IS_CAPACITOR && <ModalHeader title={lang('Enter Password')} onClose={handleClose} />}
             <PasswordForm
               isActive={isActive}
-              submitLabel={lang('Send')}
-              placeholder={lang('Enter your password')}
               error={passwordError}
               withCloseButton={IS_CAPACITOR}
+              operationType="transfer"
               containerClassName={IS_CAPACITOR ? styles.passwordFormContent : styles.passwordFormContentInModal}
+              submitLabel={lang('Send')}
               onSubmit={handlePasswordSubmit}
               onCancel={closePasswordSlide}
               onUpdate={clearPasswordError}

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

@@ -54,7 +54,7 @@ $tab-1-height: 348;
   @media (hover: hover) {
     &:not(.active) {
       &:hover,
-      &:focus {
+      &:focus-visible {
         color: var(--color-blue);
       }
     }

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

@@ -39,7 +39,7 @@
   transition: background-color 150ms, color 150ms;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: var(--color-blue);
   }
 

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

@@ -19,7 +19,7 @@
 
   transition: color 150ms;
 
-  &:focus,
+  &:focus-visible,
   &:hover {
     color: var(--color-card-text-hover);
   }
@@ -81,7 +81,7 @@
   font-size: 1.5rem;
   color: var(--color-card-second-text);
 
-  &:focus,
+  &:focus-visible,
   &:hover {
     color: var(--color-card-text);
   }
@@ -112,7 +112,7 @@
   transition: opacity 150ms;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     opacity: 1;
   }
 
@@ -165,7 +165,7 @@
   transition: background-color 150ms;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     background-color: var(--color-card-button-hover);
   }
 
@@ -356,7 +356,7 @@
   background-color: var(--color-add-wallet-background) !important;
   border-radius: 0.5rem !important;
 
-  &:focus,
+  &:focus-visible,
   &:hover {
     color: var(--color-add-wallet-text-hover) !important;
 

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

@@ -226,7 +226,7 @@
   }
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: var(--color-card-text);
   }
 
@@ -254,7 +254,7 @@
   }
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: var(--color-card-text);
   }