v3.3.2

changelogs/3.3.2.txt

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mytonwallet",
-  "version": "3.3.1",
+  "version": "3.3.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 @@
-3.3.1
+3.3.2

src/api/methods/swap.ts

@@ -222,8 +222,14 @@ export function swapGetPairs(symbolOrTokenAddress: string): Promise<ApiSwapPairA
   return callBackendGet('/swap/pairs', { asset: symbolOrTokenAddress });
 }
 
-export function swapCexEstimate(request: ApiSwapCexEstimateRequest): Promise<ApiSwapCexEstimateResponse> {
-  return callBackendPost('/swap/cex/estimate', request, { isAllowBadRequest: true });
+export function swapCexEstimate(
+  request: ApiSwapCexEstimateRequest,
+): Promise<ApiSwapCexEstimateResponse | { error: string }> {
+  return callBackendPost<ApiSwapCexEstimateResponse | { error: string }>(
+    '/swap/cex/estimate',
+    request,
+    { isAllowBadRequest: true },
+  );
 }
 
 export function swapCexValidateAddress(params: { slug: string; address: string }): Promise<{

src/components/auth/AuthImportMnemonic.tsx

@@ -46,6 +46,7 @@ const AuthImportMnemonic = ({ isActive, isLoading, error }: OwnProps & StateProp
   const {
     afterImportMnemonic,
     resetAuth,
+    cleanAuthError,
   } = getActions();
 
   const lang = useLang();
@@ -87,10 +88,12 @@ const AuthImportMnemonic = ({ isActive, isLoading, error }: OwnProps & StateProp
   const isSubmitDisabled = useMemo(() => {
     const mnemonicValues = compact(Object.values(mnemonic));
 
-    return !MNEMONIC_COUNTS.includes(mnemonicValues.length) && !isMnemonicPrivateKey(mnemonicValues);
-  }, [mnemonic]);
+    return (!MNEMONIC_COUNTS.includes(mnemonicValues.length) && !isMnemonicPrivateKey(mnemonicValues))
+      || !!error;
+  }, [mnemonic, error]);
 
   const handleSetWord = useLastCallback((value: string, index: number) => {
+    cleanAuthError();
     const pastedMnemonic = parsePastedText(value);
     if (MNEMONIC_COUNTS.includes(pastedMnemonic.length)) {
       handleMnemonicSet(pastedMnemonic);

src/components/common/FeeDetailsModal.module.scss

@@ -54,7 +54,7 @@ $chartLineInnerRadius: 0.1875rem;
   }
 
   &.excessFee {
-    flex: 10 1 auto;
+    flex: 2 1 auto;
 
     padding-inline-start: $chartLineInnerPadding;
 

src/components/explore/CategoryHeader.module.scss

@@ -46,25 +46,6 @@
       bottom: -0.25px !important;
     }
   }
-
-  @include respond-above(xs) {
-    position: relative;
-
-    &::after {
-      content: "";
-
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translate(-50%, -0.03125rem);
-
-      width: 100vw;
-      height: 0.0625rem;
-
-      /* stylelint-disable-next-line plugin/whole-pixel */
-      box-shadow: 0 0.025rem 0 0 var(--color-separator);
-    }
-  }
 }
 
 .backButton {
@@ -73,7 +54,7 @@
   display: flex;
   align-items: center;
 
-  height: 2.75rem;
+  height: 3rem;
   padding: 0.125rem 0.5rem 0;
 
   font-size: 0.9375rem;
@@ -85,7 +66,7 @@
     display: flex;
     align-items: center;
 
-    height: 1.3125rem;
+    height: var(--header-title-height);
     padding: 0.0625rem 0.375rem;
 
     font-size: 1.0625rem;
@@ -103,6 +84,7 @@
 
   font-size: 1.0625rem;
   font-weight: 700;
+  line-height: var(--header-title-height);
   color: var(--color-black);
   text-overflow: ellipsis;
   white-space: nowrap;

src/components/explore/Explore.module.scss

@@ -294,6 +294,10 @@ $imageGapSize: 0.75rem;
 }
 
 .infoWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
   line-height: 1.0625rem;
 }
 
@@ -361,7 +365,7 @@ $imageGapSize: 0.75rem;
     z-index: 3;
     top: 0;
 
-    padding-top: max(0.5rem, var(--safe-area-top));
+    padding-top: calc(0.5rem + var(--safe-area-top));
 
     background-color: var(--color-background-second);
 
@@ -400,7 +404,7 @@ $imageGapSize: 0.75rem;
   @include adapt-margin-to-scrollbar(1rem);
 
   @include respond-below(xs) {
-    margin-top: 0.5rem;
+    margin-top: 0.25rem;
 
     background-color: var(--color-gray-button-background);
   }

src/components/explore/SiteList.module.scss

@@ -1,9 +1,9 @@
 @import "../../styles/mixins/index";
 
 .root {
-  --header-padding-top: 1.5rem;
-  --header-title-height: 1.1875rem;
-  --header-padding-bottom: 1.375rem;
+  --header-padding-top: 1.125rem;
+  --header-title-height: 1.0625rem;
+  --header-padding-bottom: 0.8125rem;
 
   position: relative;
 

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

@@ -8,7 +8,7 @@
   grid-template-columns: repeat(3, 1fr);
 
   width: 100%;
-  padding-bottom: max(0.375rem, var(--safe-area-bottom));
+  padding-bottom: var(--safe-area-bottom);
 
   background-color: var(--color-app-background);
   /* stylelint-disable-next-line plugin/whole-pixel */
@@ -34,9 +34,11 @@
 .button {
   display: flex;
   flex-direction: column;
+  gap: 0.1875rem;
   align-items: center;
+  justify-content: center;
 
-  height: 3.25rem;
+  height: 3.125rem;
 
   color: var(--color-gray-2);
   text-align: center;
@@ -48,9 +50,11 @@
 
 .icon {
   font-size: 2rem;
+  line-height: 2rem;
 }
 
 .label {
   font-size: 0.625rem;
+  font-weight: 600;
   line-height: 1;
 }

src/components/main/sections/Actions/BottomBar.tsx

@@ -67,13 +67,13 @@ function BottomBar({ areSettingsOpen, areAssetsActive, isExploreOpen }: StatePro
       closeSiteCategory(undefined, { forceOnHeavyAnimation: true });
     }
 
-    openExplore(undefined, { forceOnHeavyAnimation: true });
     closeSettings(undefined, { forceOnHeavyAnimation: true });
+    openExplore(undefined, { forceOnHeavyAnimation: true });
   });
 
   const handleSettingsClick = useLastCallback(() => {
-    openSettings(undefined, { forceOnHeavyAnimation: true });
     closeExplore(undefined, { forceOnHeavyAnimation: true });
+    openSettings(undefined, { forceOnHeavyAnimation: true });
   });
 
   useHistoryBack({

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

@@ -71,14 +71,8 @@
   align-items: center;
 
   max-width: 27rem;
-  height: 3.75rem;
+  height: var(--sticky-card-height);
   margin: 0 auto;
-
-  :global(html.with-safe-area-top) & {
-    box-sizing: content-box;
-    height: 1.5rem;
-    padding-bottom: 1.125rem;
-  }
 }
 
 .account {

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

@@ -34,9 +34,10 @@
 
   flex-shrink: 0;
 
-  height: 2.75rem;
+  height: 3rem;
 
   transition: background-color 150ms;
+
   :global(html.animation-level-0) & {
     transition: none !important;
   }
@@ -47,7 +48,7 @@
     position: absolute;
     bottom: 0;
     left: 50%;
-    transform: translate(-50%, -0.03125rem);
+    transform: translate(-50%, -0.0625rem);
 
     width: 100%;
     height: 0.0625rem;
@@ -56,8 +57,9 @@
     box-shadow: 0 0.025rem 0 0 var(--color-separator);
 
     @media (-webkit-max-device-pixel-ratio: 1.3) {
-      /* stylelint-disable-next-line plugin/whole-pixel */
-      box-shadow: 0 0.034375rem 0 0 var(--color-separator);
+      transform: translate(-50%, 0);
+
+      box-shadow: inset 0 0.0625rem 0 0 var(--color-separator);
     }
   }
 
@@ -68,7 +70,6 @@
     top: var(--sticky-card-height);
 
     width: 100%;
-    height: 3rem;
   }
 }
 
@@ -92,7 +93,6 @@
   .landscapeContainer & {
     justify-content: flex-start;
 
-    height: 2.75rem;
     padding: 0 0.75rem;
 
     background-color: var(--color-background-first);
@@ -101,8 +101,13 @@
 }
 
 .tab {
+  /* stylelint-disable-next-line plugin/whole-pixel */
+  --tab-platform-height: 0.15625rem;
+
   flex: 1 1 33.3%;
 
+  font-size: 1rem;
+
   .landscapeContainer & {
     flex: 0 0 auto;
 
@@ -111,12 +116,7 @@
   }
 
   .portraitContainer & {
-    /* stylelint-disable-next-line plugin/whole-pixel */
-    --tab-platform-height: 0.15625rem;
-
     padding: 0.5rem 0.25rem;
-
-    font-size: 1rem;
   }
 }
 

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

@@ -5,7 +5,9 @@
   align-items: center;
 
   width: 100%;
-  height: 2.75rem;
+  height: 3rem;
+
+  color: var(--color-black);
 
   background: var(--color-background-first);
   border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
@@ -27,10 +29,10 @@
   display: flex;
   align-items: center;
 
-  height: 2.75rem;
+  height: 3rem;
   padding: 0.125rem 0.5rem 0;
 
-  font-size: 0.9375rem;
+  font-size: 1.0625rem;
   color: var(--color-accent);
 }
 
@@ -50,7 +52,7 @@
 .title {
   overflow: hidden;
 
-  font-size: 0.9375rem;
+  font-size: 1rem;
   font-weight: 700;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -67,8 +69,8 @@
   top: 0;
   right: 0;
 
-  width: 2.75rem;
-  height: 2.75rem;
+  width: 3rem;
+  height: 3rem;
   padding-top: 0.3125rem;
   padding-right: 0.125rem;
 

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

@@ -62,6 +62,10 @@
   --offset-x-value: 0.25rem;
 }
 
+.menuBubble {
+  max-height: 60vh;
+}
+
 .item {
   > :global(.icon) {
     order: 2;

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

@@ -112,6 +112,7 @@ function NftMenu({
         items={menuItems}
         shouldTranslateOptions
         className={styles.menu}
+        bubbleClassName={styles.menuBubble}
         buttonClassName={styles.item}
         shouldCleanup
         onClose={onClose}

src/components/settings/Settings.module.scss

@@ -1,9 +1,9 @@
 @import "../../styles/mixins";
 
 .wrapper {
-  --header-padding-top: 1.5rem;
-  --header-title-height: 1.1875rem;
-  --header-padding-bottom: 1.375rem;
+  --header-padding-top: 1.125rem;
+  --header-title-height: 1.0625rem;
+  --header-padding-bottom: 0.8125rem;
 
   height: 100%;
 
@@ -110,6 +110,7 @@
   display: flex;
   align-items: center;
 
+  height: var(--header-title-height);
   padding: 0.0625rem 0.375rem;
 
   font-size: 1.0625rem;