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',