v3.2.4

changelogs/3.2.4.txt

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

package.json

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

src/api/methods/dapps.ts

@@ -1,3 +1,4 @@
+import type { LangCode } from '../../global/types';
 import type {
   ApiDapp, ApiDappsState, ApiNetwork, ApiSite, OnApiUpdate,
 } from '../types';
@@ -226,6 +227,10 @@ export function setSseLastEventId(lastEventId: string) {
   return storage.setItem('sseLastEventId', lastEventId);
 }
 
-export function loadExploreSites(): Promise<ApiSite[]> {
-  return callBackendGet('/dapp/catalog');
+export function loadExploreSites({
+  isLandscape, langCode,
+}: {
+  isLandscape: boolean; langCode: LangCode;
+}): Promise<ApiSite[]> {
+  return callBackendGet('/dapp/catalog', { isLandscape, langCode });
 }

src/api/types/backend.ts

@@ -210,6 +210,9 @@ export type ApiSite = {
   description: string;
   canBeRestricted: boolean;
   isExternal: boolean;
+  extendedIcon?: string;
+  badgeText?: string;
+  withBorder?: boolean;
 };
 
 // Prices

src/components/explore/Site.tsx

@@ -1,39 +1,59 @@
 import React, { memo } from '../../lib/teact/teact';
 
+import type { ApiSite } from '../../api/types';
+
+import buildClassName from '../../util/buildClassName';
 import { vibrate } from '../../util/capacitor';
 import { openUrl } from '../../util/openUrl';
 import { getHostnameFromUrl } from '../../util/url';
 
+import { useDeviceScreen } from '../../hooks/useDeviceScreen';
+
 import Image from '../ui/Image';
 
 import styles from '../main/sections/Content/Explore.module.scss';
 
 interface OwnProps {
-  url: string;
-  icon: string;
-  title: string;
-  description: string;
-  isExternal: boolean;
+  site: ApiSite;
+  index: number;
 }
 
+const ROW_LENGTH_PORTRAIT = 2;
+const ROW_LENGTH_LANDSCAPE = 3;
+
 function Site({
-  url, icon, title, description, isExternal,
+  site: {
+    url, icon, name, description, isExternal, extendedIcon, badgeText, withBorder,
+  },
+  index,
 }: OwnProps) {
+  const { isLandscape } = useDeviceScreen();
+  const canBeExtended = index % (isLandscape ? ROW_LENGTH_LANDSCAPE : ROW_LENGTH_PORTRAIT) === 0;
+
   function handleClick() {
     vibrate();
-    openUrl(url, isExternal, title, getHostnameFromUrl(url));
+    openUrl(url, isExternal, name, getHostnameFromUrl(url));
   }
 
   return (
     <div
-      className={styles.item}
+      className={buildClassName(
+        styles.item,
+        (extendedIcon && canBeExtended) && styles.extended,
+        withBorder && styles.withBorder,
+      )}
       tabIndex={0}
       role="button"
       onClick={handleClick}
     >
-      <Image url={icon} className={styles.imageWrapper} imageClassName={styles.image} />
+      {badgeText && <div className={styles.badge}>{badgeText}</div>}
+      <Image
+        url={extendedIcon && canBeExtended ? extendedIcon : icon}
+        className={styles.imageWrapper}
+        imageClassName={styles.image}
+      />
       <div className={styles.infoWrapper}>
-        <b className={styles.title}>{title}</b>
+        <b className={styles.title}>{name}</b>
       </div>
       <div className={styles.description}>{description}</div>
     </div>

src/components/main/Main.tsx

@@ -106,13 +106,15 @@ function Main({
   useOpenFromMainBottomSheet('receive', openReceiveModal);
   usePreventPinchZoomGesture(isMediaViewerOpen);
 
-  const { isPortrait } = useDeviceScreen();
+  const { isPortrait, isLandscape } = useDeviceScreen();
   const {
     shouldRender: shouldRenderStickyCard,
     transitionClassNames: stickyCardTransitionClassNames,
   } = useShowTransition(canRenderStickyCard);
 
-  useEffectOnce(loadExploreSites);
+  useEffectOnce(() => {
+    loadExploreSites({ isLandscape });
+  });
 
   useEffect(() => {
     setStatusBarStyle({

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

@@ -88,6 +88,8 @@
 .item {
   cursor: var(--custom-cursor, pointer);
 
+  position: relative;
+
   padding-bottom: 0.125rem;
 
   font-size: 0.9375rem;
@@ -114,6 +116,37 @@
       }
     }
   }
+
+  &.extended {
+    grid-column: 1 / 3;
+
+    .imageWrapper {
+      aspect-ratio: 2;
+    }
+  }
+
+  &.withBorder {
+    .imageWrapper {
+      border: 0.125rem solid var(--color-accent);
+    }
+  }
+}
+
+.badge {
+  position: absolute;
+  z-index: 1;
+  top: -0.25rem;
+  right: -0.25rem;
+
+  padding: 0 0.25rem;
+
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.125rem;
+  color: var(--color-white);
+
+  background: var(--color-accent);
+  border-radius: 0.3125rem;
 }
 
 .imageWrapper {

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

@@ -138,8 +138,8 @@ function Explore({
     if (!isActive) return;
 
     getDapps();
-    loadExploreSites();
-  }, [isActive]);
+    loadExploreSites({ isLandscape });
+  }, [isActive, isLandscape]);
 
   function renderSearch() {
     return (
@@ -226,15 +226,8 @@ function Explore({
       {renderSearchSuggestions()}
       <DappFeed />
       <div className={buildClassName(styles.list, isLandscape && styles.landscapeList)}>
-        {sites.filter((site) => !(shouldRestrict && site.canBeRestricted)).map((site) => (
-          <Site
-            key={site.url}
-            url={site.url}
-            icon={site.icon}
-            title={site.name}
-            description={site.description}
-            isExternal={site.isExternal}
-          />
+        {sites.filter((site) => !(shouldRestrict && site.canBeRestricted)).map((site, i) => (
+          <Site key={site.url} site={site} index={i} />
         ))}
       </div>
     </div>

src/global/actions/api/dapps.ts

@@ -8,7 +8,9 @@ import { pause, waitFor } from '../../../util/schedulers';
 import { IS_DELEGATED_BOTTOM_SHEET } from '../../../util/windowEnvironment';
 import { callApi } from '../../../api';
 import {
-  ApiHardwareBlindSigningNotEnabled, ApiUnsupportedVersionError, ApiUserRejectsError,
+  ApiHardwareBlindSigningNotEnabled,
+  ApiUnsupportedVersionError,
+  ApiUserRejectsError,
 } from '../../../api/errors';
 import { addActionHandler, getGlobal, setGlobal } from '../../index';
 import {
@@ -410,7 +412,7 @@ addActionHandler('apiUpdateDappLoading', async (global, actions, { connectionTyp
     if (!(await waitFor(() => {
       global = getGlobal();
       return (connectionType === 'connect' && !!global.dappConnectRequest)
-      || (connectionType === 'sendTransaction' && global.currentDappTransfer.state !== TransferState.None);
+        || (connectionType === 'sendTransaction' && global.currentDappTransfer.state !== TransferState.None);
     }, 300, 5))) {
       return;
     }
@@ -458,8 +460,12 @@ addActionHandler('apiUpdateDappCloseLoading', async (global) => {
   setGlobal(global);
 });
 
-addActionHandler('loadExploreSites', async (global) => {
-  const sites = await callApi('loadExploreSites');
+addActionHandler('loadExploreSites', async (global, _, { isLandscape }) => {
+  const { settings: { langCode } } = global;
+  const sites = await callApi('loadExploreSites', {
+    isLandscape,
+    langCode,
+  });
   global = getGlobal();
   if (areDeepEqual(sites, global.exploreSites)) {
     return;

src/global/types.ts

@@ -955,7 +955,7 @@ export interface ActionPayloads {
   getDapps: undefined;
   deleteAllDapps: undefined;
   deleteDapp: { origin: string };
-  loadExploreSites: undefined;
+  loadExploreSites: { isLandscape: boolean };
   updateDappLastOpenedAt: { origin: string };
 
   addSiteToBrowserHistory: { url: string };