v3.0.9

changelogs/3.0.9.txt

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mytonwallet",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "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": {
@@ -193,7 +193,7 @@
     "@ledgerhq/hw-transport-webhid": "^6.28.1",
     "@ledgerhq/hw-transport-webusb": "^6.28.1",
     "@mauricewegner/capacitor-navigation-bar": "^2.0.3",
-    "@ton-community/ton-ledger": "^7.1.0-pre.1",
+    "@ton-community/ton-ledger": "^7.2.0-pre.3",
     "@ton/core": "^0.56.3",
     "@ton/ton": "github:mytonwallet-org/tonkeeper-ton#0d0fe1cd7ccfe1b87c1083b157a158aa0f50cda8",
     "buffer": "^6.0.3",

public/version.txt

@@ -1 +1 @@
-3.0.8
+3.0.9

src/components/main/modals/TransactionModal.tsx

@@ -23,6 +23,7 @@ import buildClassName from '../../../util/buildClassName';
 import { vibrateOnSuccess } from '../../../util/capacitor';
 import { formatFullDay, formatRelativeHumanDateTime, formatTime } from '../../../util/dateFormat';
 import { toDecimal } from '../../../util/decimals';
+import { handleOpenUrl } from '../../../util/openUrl';
 import resolveModalTransitionName from '../../../util/resolveModalTransitionName';
 import { getTonExplorerTransactionUrl } from '../../../util/url';
 import { callApi } from '../../../api';
@@ -431,6 +432,7 @@ function TransactionModal({
                   rel="noreferrer noopener"
                   className={styles.tonExplorer}
                   title={tonExplorerTitle}
+                  onClick={handleOpenUrl}
                 >
                   <i className="icon-tonexplorer" aria-hidden />
                 </a>

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

@@ -18,7 +18,7 @@
   padding: 0 1rem;
 
   opacity: 0;
-  background-image: linear-gradient(125deg, #71AAEF 10.21%, #3F79CF 29.02%, #2E74B5 49.57%, #2160A1 65.77%);
+  background-image: url("../../../../assets/cards/sticky_card_bg.jpg"), linear-gradient(125deg, #71AAEF 10.21%, #3F79CF 29.02%, #2E74B5 49.57%, #2160A1 65.77%);
   background-size: cover;
 
   &::before {
@@ -32,7 +32,7 @@
     width: 100%;
     height: 100%;
 
-    background: url("../../../../assets/cards/sticky_card_bg.png") repeat-x;
+    background: url("../../../../assets/cards/sticky_card_noise.png") repeat-x;
     mix-blend-mode: multiply;
   }
 
@@ -63,7 +63,7 @@
 
   display: grid;
   grid-template: "account balance menu";
-  grid-template-columns: minmax(25%, auto) 1fr 25%;
+  grid-template-columns: minmax(33%, max-content) 1fr 1fr;
   align-items: center;
 
   max-width: 27rem;
@@ -82,15 +82,17 @@
   top: initial;
   left: initial;
 
+  display: grid;
   grid-area: account;
+  grid-template-columns: auto 1fr;
   justify-self: start;
 
+  width: 100%;
   max-width: 100%;
 
   @media not (hover: hover) {
-    left: -0.75rem;
-
     padding-right: 1rem;
+    padding-left: 0;
   }
 }
 
@@ -99,6 +101,8 @@
 
   grid-area: menu;
   justify-self: end;
+
+  margin-left: 1rem;
 }
 
 .balance {

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

@@ -85,6 +85,7 @@ function NftMenu({
         shouldTranslateOptions
         className={styles.menu}
         buttonClassName={styles.item}
+        shouldCleanup
         onClose={onClose}
         onSelect={handleMenuItemSelect}
       />

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

@@ -204,18 +204,22 @@ export default memo(Swap);
 function renderCurrency(activity: ApiSwapActivity, fromToken?: ApiSwapAsset, toToken?: ApiSwapAsset) {
   const rate = getSwapRate(activity.fromAmount, activity.toAmount, fromToken, toToken);
 
-  if (!rate) return undefined;
-
   return (
     <div
       className={styles.swapPrice}
     >
-      {rate.firstCurrencySymbol}{' ≈ '}
-      <span
-        className={styles.swapPriceValue}
-      >
-        {rate.price}{' '}{rate.secondCurrencySymbol}
-      </span>
+      {
+        rate && (
+          <>
+            {rate.firstCurrencySymbol}{' ≈ '}
+            <span
+              className={styles.swapPriceValue}
+            >
+              {rate.price}{' '}{rate.secondCurrencySymbol}
+            </span>
+          </>
+        )
+      }
     </div>
   );
 }

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

@@ -193,6 +193,8 @@
 .address,
 .swapPrice,
 .date {
+  height: 0.9375rem;
+
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--color-gray-2);

src/components/mediaViewer/MediaInfo.tsx

@@ -6,6 +6,7 @@ import { MediaType } from '../../global/types';
 import { GETGEMS_BASE_MAINNET_URL, GETGEMS_BASE_TESTNET_URL } from '../../config';
 import { selectCurrentAccountState } from '../../global/selectors';
 import buildClassName from '../../util/buildClassName';
+import { handleOpenUrl } from '../../util/openUrl';
 import { shortenAddress } from '../../util/shortenAddress';
 
 import useLang from '../../hooks/useLang';
@@ -35,6 +36,7 @@ function MediaInfo({ title, description, descriptionUrl }: OwnProps & StateProps
         aria-label={lang('Open NFT Collection')}
         className={styles.mediaInfoDescription}
         rel="noreferrer"
+        onClick={handleOpenUrl}
       >
         <span className={styles.descriptionText}>{description}</span>
         <i className={buildClassName('icon-tooltip', styles.tooltip)} aria-hidden />

src/components/settings/Settings.module.scss

@@ -428,6 +428,10 @@
   }
 }
 
+a.item:hover {
+  color: var(--color-black);
+}
+
 .itemInfo {
   display: flex;
   gap: 0.25rem;
@@ -838,6 +842,7 @@
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--color-gray-2);
+  text-wrap: nowrap;
 }
 
 .blockWalletVersionReadMore {

src/components/settings/SettingsAbout.tsx

@@ -5,6 +5,7 @@ import {
 } from '../../config';
 import renderText from '../../global/helpers/renderText';
 import buildClassName from '../../util/buildClassName';
+import { handleOpenUrl } from '../../util/openUrl';
 
 import useHistoryBack from '../../hooks/useHistoryBack';
 import useLang from '../../hooks/useLang';
@@ -159,13 +160,15 @@ function SettingsAbout({ isActive, handleBackClick, isInsideModal }: OwnProps) {
               href="https://mytonwallet.io/terms-of-use"
               target="_blank"
               rel="noreferrer"
+              onClick={handleOpenUrl}
             >{lang('Terms of Use')}
             </a>
             <i className={styles.dotLarge} aria-hidden />
             <a
               href="https://mytonwallet.io/privacy-policy"
               target="_blank"
               rel="noreferrer"
+              onClick={handleOpenUrl}
             >{lang('Privacy Policy')}
             </a>
           </div>

src/components/swap/components/SwapSubmitButton.tsx

@@ -71,7 +71,7 @@ function SwapSubmitButton({
     [SwapErrorType.ChangellyMaxSwap]: lang('Maximum amount', {
       value: formatCurrencySimple(limits?.fromMax ?? '0', tokenIn?.symbol ?? '', tokenIn?.decimals),
     }),
-    [SwapErrorType.NotEnoughForFee]: lang('Not enough %symbol%', {
+    [SwapErrorType.NotEnoughForFee]: lang('Not Enough %symbol%', {
       symbol: tokenIn?.symbol,
     }),
     [SwapErrorType.TooSmallAmount]: lang('$swap_too_small_amount'),
@@ -85,7 +85,7 @@ function SwapSubmitButton({
     text = errorMsgByType[errorType];
   } else if (isTouched && !isEnoughToncoin && swapType !== SwapType.CrosschainToToncoin) {
     if (dieselStatus === 'not-available') {
-      text = lang('Not Enough TON');
+      text = lang('Not Enough %symbol%', { symbol: 'TON' });
     } else if (dieselStatus === 'pending-previous') {
       text = lang('Awaiting Previous Fee');
     } else if (dieselStatus === 'not-authorized') {

src/components/ui/DropdownMenu.tsx

@@ -24,6 +24,7 @@ interface OwnProps {
   className?: string;
   bubbleClassName?: string;
   buttonClassName?: string;
+  shouldCleanup?: boolean;
   onSelect?: (value: string) => void;
   onClose: NoneToVoidFunction;
 }
@@ -42,6 +43,7 @@ function DropdownMenu({
   className,
   bubbleClassName,
   buttonClassName,
+  shouldCleanup,
   onSelect,
   onClose,
 }: OwnProps) {
@@ -65,6 +67,7 @@ function DropdownMenu({
       transformOriginY={transformOriginY}
       className={className}
       bubbleClassName={bubbleClassName}
+      shouldCleanup={shouldCleanup}
       onClose={onClose}
     >
       {items.map((item, index) => {

src/components/ui/IconWithTooltip.tsx

@@ -10,7 +10,9 @@ import stopEvent from '../../util/stopEvent';
 import { IS_TOUCH_ENV, REM } from '../../util/windowEnvironment';
 
 import useFlag from '../../hooks/useFlag';
+import useLastCallback from '../../hooks/useLastCallback';
 import useShowTransition from '../../hooks/useShowTransition';
+import useUniqueId from '../../hooks/useUniqueId';
 
 import Emoji from './Emoji';
 import Portal from './Portal';
@@ -44,6 +46,23 @@ const IconWithTooltip: FC<OwnProps> = ({
   const tooltipStyle = useRef<string | undefined>();
   const arrowStyle = useRef<string | undefined>();
 
+  const randomTooltipKey = useUniqueId();
+
+  const handleClickOutside = useLastCallback((event: Event) => {
+    if (!(event.target as HTMLElement).closest(`[data-tooltip-key="${randomTooltipKey}"]`)) {
+      close();
+    }
+  });
+
+  useEffect(() => {
+    if (!isOpen) return undefined;
+    document.addEventListener('touchstart', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [isOpen, close, handleClickOutside]);
+
   useEffect(() => {
     if (!iconRef.current || !tooltipRef.current) return;
 
@@ -93,7 +112,7 @@ const IconWithTooltip: FC<OwnProps> = ({
   }
 
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} data-tooltip-key={randomTooltipKey}>
       {shouldRender && (
         <Portal>
           <div

src/components/ui/InteractiveTextField.tsx

@@ -8,6 +8,7 @@ import { selectCurrentAccountState } from '../../global/selectors';
 import buildClassName from '../../util/buildClassName';
 import captureKeyboardListeners from '../../util/captureKeyboardListeners';
 import { copyTextToClipboard } from '../../util/clipboard';
+import { handleOpenUrl } from '../../util/openUrl';
 import { shortenAddress } from '../../util/shortenAddress';
 import { getTonExplorerAddressUrl } from '../../util/url';
 
@@ -232,6 +233,7 @@ function InteractiveTextField({
             title={tonExplorerTitle}
             target="_blank"
             rel="noreferrer noopener"
+            onClick={handleOpenUrl}
           >
             <i className={buildClassName(styles.icon, 'icon-tonexplorer-small')} aria-hidden />
           </a>

src/components/ui/Menu.tsx

@@ -32,6 +32,7 @@ type OwnProps = {
   noBackdrop?: boolean;
   withPortal?: boolean;
   noCloseOnBackdrop?: boolean;
+  shouldCleanup?: boolean;
   onCloseAnimationEnd?: () => void;
   onClose?: () => void;
   onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@@ -57,6 +58,7 @@ const Menu: FC<OwnProps> = ({
   noBackdrop = false,
   withPortal,
   noCloseOnBackdrop = false,
+  shouldCleanup,
   onCloseAnimationEnd,
   onClose,
   onMouseEnter,
@@ -72,6 +74,7 @@ const Menu: FC<OwnProps> = ({
   });
 
   const {
+    shouldRender,
     transitionClassNames,
   } = useShowTransition(
     isOpen,
@@ -107,6 +110,10 @@ const Menu: FC<OwnProps> = ({
   const transformOriginYStyle = transformOriginY !== undefined ? `${transformOriginY}px` : undefined;
   const transformOriginXStyle = transformOriginX !== undefined ? `${transformOriginX}px` : undefined;
 
+  if (shouldCleanup && !shouldRender) {
+    return undefined;
+  }
+
   const menu = (
     <div
       id={id}

src/components/vesting/VestingPasswordModal.tsx

@@ -157,7 +157,7 @@ function VestingPasswordModal({
             isLoading={isLoading}
             withCloseButton
             operationType="unfreeze"
-            error={hasAmountError ? lang('Insufficient Balance for Fee.') : error}
+            error={hasAmountError ? lang('Insufficient Balance for Fee') : error}
             submitLabel={lang('Confirm')}
             onSubmit={handleSubmit}
             onCancel={cancelClaimingVesting}

src/config.ts

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