3.3.1

changelogs/3.3.1.txt

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

package.json

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

src/api/chains/ton/util/metadata.ts

@@ -20,7 +20,12 @@ import type { DnsCategory } from '../constants';
 import type { ApiTransactionExtra, JettonMetadata } from '../types';
 
 import {
-  DEBUG, LIQUID_JETTON, MTW_CARDS_COLLECTION, NFT_FRAGMENT_COLLECTIONS,
+  DEBUG,
+  LIQUID_JETTON,
+  MTW_CARDS_COLLECTION,
+  NFT_FRAGMENT_COLLECTIONS,
+  NFT_FRAGMENT_GIFT_IMAGE_TO_URL_REGEX,
+  NFT_FRAGMENT_GIFT_IMAGE_URL_PREFIX,
 } from '../../../../config';
 import { omitUndefined, pick, range } from '../../../../util/iteratees';
 import { logDebugError } from '../../../../util/logs';
@@ -730,10 +735,12 @@ export function buildNft(network: ApiNetwork, rawNft: NftItem): ApiNft | undefin
     const isScam = hasScamLink || description === 'SCAM' || trust === 'blacklist';
     const isHidden = renderType === 'hidden' || isScam;
     const imageFromPreview = previews!.find((x) => x.resolution === '1500x1500')!.url;
+    const isFragmentGift = image?.startsWith(NFT_FRAGMENT_GIFT_IMAGE_URL_PREFIX);
 
     const metadata = {
       ...(isWhitelisted && { lottie }),
       ...(collectionAddress === MTW_CARDS_COLLECTION && buildMtwCardsNftMetadata(rawMetadata)),
+      ...(isFragmentGift && { fragmentUrl: image!.replace(NFT_FRAGMENT_GIFT_IMAGE_TO_URL_REGEX, 'https://$1') }),
     };
 
     return omitUndefined<ApiNft>({
@@ -750,7 +757,7 @@ export function buildNft(network: ApiNetwork, rawNft: NftItem): ApiNft | undefin
       ...(collection && {
         collectionAddress,
         collectionName: collection.name,
-        isOnFragment: NFT_FRAGMENT_COLLECTIONS.has(collection.address),
+        isOnFragment: isFragmentGift || NFT_FRAGMENT_COLLECTIONS.has(collection.address),
       }),
       metadata,
     });

src/api/tonConnect/index.ts

@@ -633,7 +633,7 @@ export async function fetchDappMetadata(manifestUrl: string, origin?: string): P
     const data = await fetchJsonMetadata(manifestUrl);
 
     const { url, name, iconUrl } = await data;
-    const safeIconUrl = iconUrl.startsWith('data:') ? BLANK_GIF_DATA_URL : iconUrl;
+    const safeIconUrl = (iconUrl.startsWith('data:') || iconUrl === '') ? BLANK_GIF_DATA_URL : iconUrl;
     if (!isValidUrl(url) || !isValidString(name) || !isValidUrl(safeIconUrl)) {
       throw new Error('Invalid data');
     }

src/api/types/misc.ts

@@ -90,6 +90,7 @@ export type ApiMtwCardBorderShineType = 'up' | 'down' | 'left' | 'right' | 'radi
 export interface ApiNftMetadata {
   lottie?: string;
   imageUrl?: string;
+  fragmentUrl?: string;
   mtwCardId?: number;
   mtwCardType?: ApiMtwCardType;
   mtwCardTextType?: ApiMtwCardTextType;

src/components/App.tsx

@@ -2,10 +2,10 @@ import React, { memo, useEffect, useLayoutEffect } from '../lib/teact/teact';
 import { getActions, withGlobal } from '../global';
 
 import type { Theme } from '../global/types';
-import { AppState, ContentTab } from '../global/types';
+import { AppState } from '../global/types';
 
 import { INACTIVE_MARKER, IS_ANDROID_DIRECT, IS_CAPACITOR } from '../config';
-import { selectCurrentAccountSettings, selectCurrentAccountState } from '../global/selectors';
+import { selectCurrentAccountSettings } from '../global/selectors';
 import { useAccentColor } from '../util/accentColor';
 import { setActiveTabChangeListener } from '../util/activeTabMonitor';
 import buildClassName from '../util/buildClassName';
@@ -261,14 +261,12 @@ function App({
 }
 
 export default memo(withGlobal((global): StateProps => {
-  const { activeContentTab } = selectCurrentAccountState(global) ?? {};
-
   return {
     appState: global.appState,
     accountId: global.currentAccountId,
     isBackupWalletModalOpen: global.isBackupWalletModalOpen,
     isHardwareModalOpen: global.isHardwareModalOpen,
-    isExploreOpen: !global.areSettingsOpen && activeContentTab === ContentTab.Explore,
+    isExploreOpen: global.isExploreOpen,
     areSettingsOpen: global.areSettingsOpen,
     isQrScannerOpen: global.isQrScannerOpen,
     theme: global.settings.theme,

src/components/auth/Auth.module.scss

@@ -10,6 +10,12 @@
 
     max-width: 31.4375rem;
     margin: 0 auto;
+
+    &:global(.Transition_slide-to),
+    &:global(.Transition_slide-from) {
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
 }
 

src/components/explore/Category.module.scss

@@ -67,7 +67,7 @@
   object-fit: contain;
 }
 
-.scaleable {
+.scalable {
   transition: transform 300ms;
 
   &:active {

src/components/explore/Category.tsx

@@ -46,7 +46,7 @@ function Category({ category, sites }: OwnProps) {
           <button
             key={`${site.url}-${site.name}`}
             type="button"
-            className={buildClassName(styles.site, styles.scaleable)}
+            className={buildClassName(styles.site, styles.scalable)}
             onClick={() => {
               openUrl(site.url, site.isExternal, site.name, getHostnameFromUrl(site.url));
             }}
@@ -59,7 +59,7 @@ function Category({ category, sites }: OwnProps) {
           </button>
         ))}
         {smallSites.length > 0 && (
-          <div className={buildClassName(styles.subfolder, styles.scaleable)} onClick={handleCategoryClick}>
+          <div className={buildClassName(styles.subfolder, styles.scalable)} onClick={handleCategoryClick}>
             {smallSites.map((site) => (
               <Image
                 key={`${site.url}-${site.name}`}

src/components/explore/DappFeed.module.scss

@@ -34,6 +34,8 @@
 }
 
 .dapp {
+  cursor: var(--custom-cursor, pointer);
+
   display: flex;
   align-items: center;
 
@@ -44,18 +46,14 @@
   border: none;
   border-radius: var(--border-radius-tiny);
 
-  &:hover {
-    cursor: var(--custom-cursor, pointer);
-  }
-
   &:first-child {
-    margin-left: 0.75rem;
+    margin-left: 1rem;
   }
 
   @media (hover: hover) {
     &:hover,
     &:focus-visible {
-      .feedItemLogoImg {
+      .icon {
         transform: scale(1.1);
       }
 

src/components/explore/DappFeedItem.tsx

@@ -4,6 +4,7 @@ import { getActions } from '../../global';
 import buildClassName from '../../util/buildClassName';
 import { SECOND } from '../../util/dateFormat';
 import { openUrl } from '../../util/openUrl';
+import { isTelegramUrl } from '../../util/url';
 
 import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
@@ -112,7 +113,3 @@ function DappFeedItem({
 }
 
 export default memo(DappFeedItem);
-
-function isTelegramUrl(url: string) {
-  return url.startsWith('https://t.me/');
-}

src/components/explore/Explore.module.scss

@@ -130,15 +130,17 @@ $imageGapSize: 0.75rem;
 
       background-color: var(--color-interactive-item-hover);
 
-      .imageWrapperScaleable {
+      .trendingImage,
+      .imageWrapperScalable {
         transform: scale(1.05);
       }
     }
   }
 
   @media (pointer: coarse) {
     &:active {
-      .imageWrapperScaleable {
+      .trendingImage,
+      .imageWrapperScalable {
         transform: scale(1.05);
       }
     }
@@ -257,6 +259,7 @@ $imageGapSize: 0.75rem;
   /* Fix for `border-radius` missing during transform on Safari. See https://stackoverflow.com/a/58283449 */
   isolation: isolate;
   position: relative;
+  transform-origin: center;
 
   overflow: hidden;
   display: block !important;
@@ -269,16 +272,6 @@ $imageGapSize: 0.75rem;
   border-radius: var(--border-radius-normal);
 }
 
-.imageWrapperScaleable {
-  transform-origin: center;
-
-  transition: transform 300ms, opacity 0.15s ease !important;
-
-  :global(html.animation-level-0) & {
-    transition: none !important;
-  }
-}
-
 .image {
   position: absolute;
   top: 0;
@@ -291,25 +284,46 @@ $imageGapSize: 0.75rem;
   border-radius: var(--border-radius-normal);
 }
 
+.imageWrapperScalable,
+.trendingImage {
+  transition: transform 300ms, opacity 0.15s ease !important;
+
+  :global(html.animation-level-0) & {
+    transition: none !important;
+  }
+}
+
 .infoWrapper {
   line-height: 1.0625rem;
 }
 
 .title {
+  font-weight: 650;
   color: var(--color-black);
   word-break: break-word;
 }
 
 .description {
   overflow: hidden;
 
+  margin-top: 0.1875rem;
+
   font-size: 0.75rem;
   font-weight: 500;
   line-height: 0.875rem;
   color: var(--color-gray-2);
   text-overflow: ellipsis;
 }
 
+.telegram {
+  margin-inline-start: 0.25rem;
+
+  font-size: 0.9375rem;
+  line-height: 1;
+  color: var(--color-gray-4);
+  vertical-align: -0.125rem;
+}
+
 .emptyList {
   display: flex;
   flex-direction: column;

src/components/explore/Explore.tsx

@@ -26,6 +26,7 @@ import useFlag from '../../hooks/useFlag';
 import useHorizontalScroll from '../../hooks/useHorizontalScroll';
 import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
+import useModalTransitionKeys from '../../hooks/useModalTransitionKeys';
 import usePrevious2 from '../../hooks/usePrevious2';
 import useScrolledState from '../../hooks/useScrolledState';
 import { useStateRef } from '../../hooks/useStateRef';
@@ -91,16 +92,17 @@ function Explore({
   const [searchValue, setSearchValue] = useState<string>('');
   const [isSearchFocused, markSearchFocused, unmarkSearchFocused] = useFlag(false);
   const [isSuggestionsVisible, showSuggestions, hideSuggestions] = useFlag(false);
-  const prevSiteCategoryIdRef = useStateRef(usePrevious2(currentSiteCategoryId));
+  const { renderingKey } = useModalTransitionKeys(currentSiteCategoryId || 0, !!isActive);
+  const prevSiteCategoryIdRef = useStateRef(usePrevious2(renderingKey));
 
   const {
     handleScroll: handleContentScroll,
     isScrolled,
   } = useScrolledState();
 
   useEffect(
-    () => (currentSiteCategoryId ? captureEscKeyListener(closeSiteCategory) : undefined),
-    [closeSiteCategory, currentSiteCategoryId],
+    () => (renderingKey ? captureEscKeyListener(closeSiteCategory) : undefined),
+    [closeSiteCategory, renderingKey],
   );
 
   const filteredSites = useMemo(() => {
@@ -143,7 +145,7 @@ function Explore({
   }, [filteredSites]);
 
   useEffect(() => {
-    if (!IS_TOUCH_ENV || !filteredSites?.length || !currentSiteCategoryId) {
+    if (!IS_TOUCH_ENV || !filteredSites?.length) {
       return undefined;
     }
 
@@ -153,7 +155,7 @@ function Explore({
         openSiteCategory({ id: prevSiteCategoryIdRef.current! });
       },
     });
-  }, [currentSiteCategoryId, filteredSites?.length, prevSiteCategoryIdRef]);
+  }, [filteredSites?.length, prevSiteCategoryIdRef]);
 
   useHorizontalScroll({
     containerRef: trendingContainerRef,
@@ -242,8 +244,11 @@ function Explore({
     stopEvent(e);
 
     handleMenuClose();
-    openSite(searchValue);
-    setSearchValue('');
+
+    if (searchValue.length > 0) {
+      openSite(searchValue);
+      setSearchValue('');
+    }
   }
 
   function renderSearch() {
@@ -256,7 +261,7 @@ function Explore({
           placeholder={lang('Search or enter address')}
           value={searchValue}
           autoCapitalize="none"
-          type="url"
+          inputMode="url"
           autoCorrect="off"
           onChange={handleSearchValueChange}
           onFocus={markSearchFocused}
@@ -348,14 +353,14 @@ function Explore({
         );
 
       case SLIDES.category: {
-        const currentSiteCategory = allSites[currentSiteCategoryId!];
+        const currentSiteCategory = allSites[renderingKey!];
         if (!currentSiteCategory) return undefined;
 
         return (
           <SiteList
-            key={currentSiteCategoryId}
+            key={renderingKey}
             isActive={isContentActive}
-            categoryId={currentSiteCategoryId!}
+            categoryId={renderingKey!}
             sites={currentSiteCategory}
           />
         );
@@ -392,7 +397,8 @@ function Explore({
     <Transition
       ref={transitionRef}
       name={resolveSlideTransitionName()}
-      activeKey={currentSiteCategoryId ? SLIDES.category : SLIDES.main}
+      activeKey={renderingKey ? SLIDES.category : SLIDES.main}
+      withSwipeControl
       className={styles.rootSlide}
     >
       {renderContent}