Add support for channel and telegramGift as wallet transaction peer (#7460)

Author: Ajaxy

FRICTION_LOG.md

@@ -26,7 +26,11 @@ Contributors wanting special elements must work within these representations or
 
 [`tsconfig.json`](tsconfig.json) covers app source and excludes tests and selected GramJS generators, while [`tsconfig.script.json`](tsconfig.script.json) covers tests, development scripts, plugins, and configuration files. However, [`eslint.config.js`](eslint.config.js) applies the same broad Teact rules and both TypeScript projects to JavaScript and TypeScript files across the repository. The script config also inherits DOM/Web Worker libraries and bundler module resolution from [`tsconfig.base.json`](tsconfig.base.json). The split therefore does not clearly separate the rules and environment assumptions for browser code from tooling running locally in Node.
 
-[`check:ts`](package.json) runs `tsc` against the app config, then repository-wide ESLint; it does not explicitly type-check the script project with a separate `tsc` invocation. This makes the compiler and lint coverage harder to reason about and maintain. With lockfile dependencies installed, the compiler succeeds on Windows, but a repository-wide ESLint run exceeds 4 GB of working memory after more than six minutes and is stopped without results; linting the changed audio/video files separately succeeds. The source of this full-run memory cost is not profiled. The preference is a clear app configuration and a separate local tests/helpers configuration, retaining browser types where tests need them: [Vitest](vitest.config.ts) runs in Node with a jsdom environment, and tests import app code. Shared settings still need to stay consistent without blurring those boundaries.
+[`check:ts`](package.json) runs `tsc` against the app config, then repository-wide ESLint; it does not explicitly type-check the script project with a separate `tsc` invocation. This makes the compiler and lint coverage harder to reason about and maintain. With lockfile dependencies installed, the compiler succeeds on Windows, but a repository-wide ESLint run exceeds 4 GB of working memory after more than six minutes and is stopped without results; linting the changed audio/video files separately succeeds. On macOS with Node 26.12.1, the same full ESLint run aborts the process (`Abort trap: 6`) after `tsc` passes, while linting the changed files separately succeeds. The source of this full-run memory cost is not profiled. The preference is a clear app configuration and a separate local tests/helpers configuration, retaining browser types where tests need them: [Vitest](vitest.config.ts) runs in Node with a jsdom environment, and tests import app code. Shared settings still need to stay consistent without blurring those boundaries.
+
+## Currency symbol test depends on the Node ICU data
+
+On Node 26.12.1, [`walletAmountEntry.test.ts`](tests/walletAmountEntry.test.ts) fails in `gives no currency symbol where the code is the only one`: `getCurrencySymbol('CHF', 'en')` returns `Fr.`, while the test expects `undefined`. The test covers only currency formatting, yet it keeps the whole wallet test run failing locally. Whether other Node versions return a different symbol is not checked; the ICU data bundled with Node is the suspected cause.
 
 ## Generated icon files change line endings on Windows
 

src/api/gramjs/apiBuilders/wallet.ts

@@ -87,19 +87,23 @@ export function buildApiWalletStateResult(state: GramJs.TypeWalletState): ApiWal
 export function buildApiWalletTransaction(transaction: GramJs.WalletTransaction): ApiWalletTransaction {
   // With the flag set, `comment` holds the base64 payload
   const isCommentEncrypted = transaction.commentEncrypted;
+  const peer = buildApiWalletTransactionPeer(transaction.peer);
+  // Telegram writes a service reference such as `Ref#qpK1nO11N` into the comment of a gift it moves. The native apps
+  // do not show it.
+  const comment = peer.type === 'telegramGift' ? undefined : transaction.comment;
 
   return {
     id: transaction.id,
     isIncoming: Boolean(transaction.incoming),
     isFailed: transaction.failed,
     isGasless: transaction.gasless,
     isKeyChange: transaction.keyChange,
-    peer: buildApiWalletTransactionPeer(transaction.peer),
+    peer,
     // The server signs the amount by direction, but `ApiWalletTransaction` keeps it positive
     amount: getBigIntAbs(transaction.amount),
     fee: transaction.fee,
-    comment: isCommentEncrypted ? undefined : transaction.comment,
-    encryptedComment: isCommentEncrypted ? transaction.comment : undefined,
+    comment: isCommentEncrypted ? undefined : comment,
+    encryptedComment: isCommentEncrypted ? comment : undefined,
     txHash: transaction.txHash,
     timestamp: transaction.date,
     collectible: transaction.nft && buildApiWalletCollectible(transaction.nft),
@@ -129,6 +133,19 @@ function buildApiWalletTransactionPeer(peer: GramJs.TypeWalletTransactionPeer):
     };
   }
 
+  if (peer instanceof GramJs.WalletTransactionPeerChannel) {
+    return {
+      type: 'channel',
+      channelId: buildApiPeerId(peer.channelId, 'channel'),
+      address: toNonBounceableAddress(peer.address),
+      domain: peer.domain,
+    };
+  }
+
+  if (peer instanceof GramJs.WalletTransactionPeerTelegramGift) {
+    return { type: 'telegramGift', isOwnProfile: peer.ownProfile };
+  }
+
   return { type: 'unsupported' };
 }
 

src/api/types/wallet.ts

@@ -102,6 +102,9 @@ export type ApiWalletTransactionPeer =
   | { type: 'user'; userId: string; address: string; domain?: string }
   | { type: 'address'; address: string; domain?: string }
   | { type: 'onramp'; address: string; domain?: string; providerName: string }
+  | { type: 'channel'; channelId: string; address: string; domain?: string }
+  // The other side is Telegram itself; `isOwnProfile` marks a gift moved between the wallet and the user's profile
+  | { type: 'telegramGift'; isOwnProfile?: boolean }
   | { type: 'unsupported' };
 
 export interface ApiWalletTransaction {

src/assets/localization/fallback.strings

@@ -3255,6 +3255,8 @@
 "WalletTransactionKeyChange" = "Key Update";
 "WalletTransactionIncomingCollectible" = "Incoming collectible";
 "WalletTransactionOutgoingCollectible" = "Outgoing collectible";
+"WalletTransactionMovedToProfile" = "Moved to profile";
+"WalletTransactionMovedFromProfile" = "Moved from profile";
 "WalletCollectibleGift" = "Collectible Gift";
 "WalletCollectibleUsername" = "Collectible Username";
 "WalletCollectibleNumber" = "Collectible Number";

src/components/modals/wallet/WalletMainScreen.tsx

@@ -66,7 +66,6 @@ type StateProps = {
   transactions?: ApiWalletTransaction[];
   transferMinNanos?: bigint;
   collectibles?: ApiWalletCollectible[];
-  usersById: Record<string, ApiUser>;
   existingWaltBalanceUrl?: string;
   savedWallets?: ApiWalletSavedWallet[];
   earningsNanos?: bigint;
@@ -83,7 +82,7 @@ const WalletMainScreen = ({
   activeTab, scrollContainerClosest,
   status, hasStateError, canEnableBackup, hasCloudPassword, address, currentUser, balance, tonUsdRate, currency,
   currencyRate,
-  transactions, transferMinNanos, collectibles, usersById,
+  transactions, transferMinNanos, collectibles,
   existingWaltBalanceUrl, savedWallets, earningsNanos,
   onProtect, onProtectAccount, onOpenSettings, onOpenEarnings, onReceive, onSend, onSwitchTab,
   onTransactionClick, onCollectibleClick,
@@ -248,7 +247,6 @@ const WalletMainScreen = ({
                       <WalletTransactionItem
                         key={transaction.localId ?? id}
                         transaction={transaction}
-                        user={transaction.peer.type === 'user' ? usersById[transaction.peer.userId] : undefined}
                         className={HISTORY_ITEM_CLASS}
                         onClick={onTransactionClick}
                       />
@@ -364,7 +362,6 @@ export default memo(withGlobal<OwnProps>(
       transactions: selectWalletTransactions(global),
       transferMinNanos: global.appConfig.walletTransferMinNanos,
       collectibles: global.wallet?.collectibles,
-      usersById: global.users.byId,
       existingWaltBalanceUrl: global.wallet?.existingWaltBalanceUrl,
       savedWallets: global.wallet?.savedWallets,
       earningsNanos: global.ton?.balance.amount,

src/components/modals/wallet/WalletTransactionItem.tsx

@@ -1,19 +1,24 @@
-import { memo, useRef } from '../../../lib/teact/teact';
+import { memo, useCallback, useRef } from '../../../lib/teact/teact';
 
 import type {
-  ApiUser, ApiWalletCollectible, ApiWalletTransaction,
+  ApiPeer, ApiWalletCollectible, ApiWalletTransaction, ApiWalletTransactionPeer,
 } from '../../../api/types';
+import type { GlobalState } from '../../../global/types';
 import type { RegularLangKey } from '../../../types/language';
+import type { LangFn } from '../../../util/localization';
 
 import { requestMeasure, requestMutation } from '../../../lib/fasterdom/fasterdom';
-import { getUserFullName } from '../../../global/helpers';
+import { getPeerFullTitle } from '../../../global/helpers/peers';
+import { getWalletGiftMoveKey, getWalletPeerId } from '../../../global/helpers/wallet';
+import { selectPeer } from '../../../global/selectors';
 import buildClassName from '../../../util/buildClassName';
 import { formatDateTime, secondsToDate } from '../../../util/localization/dateFormat';
 import { shortenAddress } from '../../../util/tonAddress';
 import renderText from '../../common/helpers/renderText';
 import { sampleFrames, SETTLE_EASING } from './helpers/motion';
 import { ROW_DIAMOND_SIZE } from './helpers/sendFlight';
 
+import useSelector from '../../../hooks/data/useSelector';
 import useClickable from '../../../hooks/useClickable';
 import useFlag from '../../../hooks/useFlag';
 import useLang from '../../../hooks/useLang';
@@ -34,7 +39,6 @@ import styles from './WalletTransactionItem.module.scss';
 
 type OwnProps = {
   transaction: ApiWalletTransaction;
-  user?: ApiUser;
   className?: string;
   onClick: (transaction: ApiWalletTransaction) => void;
 };
@@ -60,14 +64,20 @@ const IMPACT_FRAMES = sampleFrames(IMPACT_DURATION, (time) => {
 });
 
 const WalletTransactionItem = ({
-  transaction, user, className, onClick,
+  transaction, className, onClick,
 }: OwnProps) => {
   const {
     isIncoming, peer, amount, comment, isPending, isFailed, timestamp, collectible,
   } = transaction;
 
   const lang = useLang();
 
+  const peerId = getWalletPeerId(peer);
+  const counterpartySelector = useCallback((global: GlobalState) => {
+    return peerId ? selectPeer(global, peerId) : undefined;
+  }, [peerId]);
+  const counterparty = useSelector(counterpartySelector);
+
   const ref = useRef<HTMLDivElement>();
   const gramIconRef = useRef<HTMLSpanElement>();
   const [isSendRow, markSendRow] = useFlag();
@@ -106,13 +116,7 @@ const WalletTransactionItem = ({
   });
 
   const onrampIcon = peer.type === 'onramp' ? getOnrampProviderIcon(peer.providerName).icon : undefined;
-  const title = user
-    ? getUserFullName(lang, user)
-    : peer.type === 'onramp'
-      ? lang(onrampIcon === 'walt' ? 'WalletTransactionTopUpCrypto' : 'WalletTransactionTopUp')
-      : peer.type !== 'unsupported'
-        ? peer.domain || shortenAddress(peer.address)
-        : lang('WalletTransactionUnsupportedPeer');
+  const title = getTitle(lang, peer, counterparty);
   const description = comment
     || (peer.type === 'onramp' ? capitalizeName(peer.providerName) : lang(getDescriptionKey(transaction)));
   const status = isPending ? lang('WalletTransactionSending') : isFailed ? lang('WalletTransactionFailed') : undefined;
@@ -137,8 +141,8 @@ const WalletTransactionItem = ({
         <WalletRowOverlay originRef={gramIconRef} onEnd={markBurstDone} />
       )}
       <div className={styles.preview}>
-        {user ? (
-          <Avatar peer={user} size={AVATAR_SIZE} />
+        {counterparty ? (
+          <Avatar peer={counterparty} size={AVATAR_SIZE} />
         ) : (
           <div className={buildClassName(styles.direction, isIncoming ? styles.directionIn : styles.directionOut)}>
             {onrampIcon ? (
@@ -223,6 +227,23 @@ const WalletTransactionItem = ({
   );
 };
 
+function getTitle(lang: LangFn, peer: ApiWalletTransactionPeer, counterparty?: ApiPeer) {
+  if (counterparty) return getPeerFullTitle(lang, counterparty);
+
+  switch (peer.type) {
+    case 'onramp':
+      return lang(getOnrampProviderIcon(peer.providerName).icon === 'walt'
+        ? 'WalletTransactionTopUpCrypto'
+        : 'WalletTransactionTopUp');
+    case 'telegramGift':
+      return lang('Telegram');
+    case 'unsupported':
+      return lang('WalletTransactionUnsupportedPeer');
+    default:
+      return peer.domain || shortenAddress(peer.address);
+  }
+}
+
 function getCollectibleTypeKey(type: ApiWalletCollectible['type']): RegularLangKey {
   switch (type) {
     case 'gift':
@@ -241,9 +262,11 @@ function capitalizeName(name: string) {
   return name.charAt(0).toUpperCase() + name.slice(1);
 }
 
-function getDescriptionKey({
-  encryptedComment, isKeyChange, collectible, peer, isIncoming,
-}: ApiWalletTransaction): RegularLangKey {
+function getDescriptionKey(transaction: ApiWalletTransaction): RegularLangKey {
+  const { encryptedComment, isKeyChange, collectible, peer, isIncoming } = transaction;
+  const giftMoveKey = getWalletGiftMoveKey(transaction);
+  if (giftMoveKey) return giftMoveKey;
+
   if (encryptedComment) return 'WalletCommentEncrypted';
 
   if (isKeyChange) return 'WalletTransactionKeyChange';

src/components/modals/wallet/WalletTransactionScreen.tsx

@@ -1,11 +1,12 @@
 import { memo, useEffect, useMemo } from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
-import type { ApiUser, ApiWalletTransaction } from '../../../api/types';
+import type { ApiPeer, ApiWalletTransaction } from '../../../api/types';
 
-import { getUserFullName } from '../../../global/helpers';
+import { getPeerFullTitle } from '../../../global/helpers/peers';
+import { getWalletGiftMoveKey } from '../../../global/helpers/wallet';
 import {
-  selectTabState, selectUser, selectWalletCurrency, selectWalletCurrencyRate, selectWalletResolvedUser,
+  selectTabState, selectWalletCounterparty, selectWalletCurrency, selectWalletCurrencyRate,
 } from '../../../global/selectors';
 import buildClassName from '../../../util/buildClassName';
 import { copyTextToClipboard } from '../../../util/clipboard';
@@ -47,7 +48,7 @@ type StateProps = {
   currency: string;
   tonUsdRate?: number;
   currencyRate?: number;
-  user?: ApiUser;
+  counterparty?: ApiPeer;
   decryptedComment?: string;
   isDecryptingComment?: boolean;
   freeTransfersPerDay?: number;
@@ -64,7 +65,7 @@ type DomainCellOwnProps = {
 const DIAMOND_SIZE = 120;
 
 const WalletTransactionScreen = ({
-  transaction, isRoot, currency, tonUsdRate, currencyRate, user, decryptedComment, isDecryptingComment,
+  transaction, isRoot, currency, tonUsdRate, currencyRate, counterparty, decryptedComment, isDecryptingComment,
   freeTransfersPerDay, onDecryptComment, onSend, onDone,
 }: OwnProps & StateProps) => {
   const { loadWalletUserAddresses } = getActions();
@@ -101,21 +102,23 @@ const WalletTransactionScreen = ({
     );
 
     const peerLabel = lang(isIncoming ? 'WalletTransactionSender' : 'WalletTransactionRecipient');
-    const domain = peer.type === 'unsupported' ? undefined : peer.domain;
+    const domain = 'address' in peer ? peer.domain : undefined;
 
-    if (user) {
+    if (counterparty) {
       rows.push([
         peerLabel,
         <span className={styles.peer}>
-          <Avatar peer={user} size="small" />
-          <span className={styles.peerText}>{renderText(getUserFullName(lang, user))}</span>
+          <Avatar peer={counterparty} size="small" />
+          <span className={styles.peerText}>{renderText(getPeerFullTitle(lang, counterparty))}</span>
           {sendToAddress && sendButton(sendToAddress, peer.type === 'user' ? peer.userId : undefined)}
         </span>,
       ]);
 
       if (domain) {
         rows.push([lang('WalletTransactionDomain'), <DomainCell domain={domain} />]);
       }
+    } else if (peer.type === 'telegramGift') {
+      rows.push([peerLabel, lang('Telegram')]);
     } else if (domain) {
       // The button sends to the address behind the domain, which the form takes without resolving it again
       rows.push([
@@ -131,12 +134,12 @@ const WalletTransactionScreen = ({
       rows.push([lang('WalletTransactionProvider'), peer.providerName]);
     }
 
-    if (peer.type !== 'unsupported') {
+    if ('address' in peer) {
       rows.push([
         lang('WalletTransactionAddress'),
         <span className={styles.peer}>
           <AddressCell address={peer.address} />
-          {sendToAddress && !user && !domain && sendButton(sendToAddress)}
+          {sendToAddress && !counterparty && !domain && sendButton(sendToAddress)}
         </span>,
       ]);
     }
@@ -194,11 +197,12 @@ const WalletTransactionScreen = ({
 
     return rows;
   }, [
-    user, peer, isIncoming, isKeyChange, fee, fiatFee, isFeeFree, timestamp, comment, lang, decryptedComment,
+    counterparty, peer, isIncoming, isKeyChange, fee, fiatFee, isFeeFree, timestamp, comment, lang, decryptedComment,
     encryptedComment, isDecryptingComment, canShowFeesInfo, onDecryptComment, onSend,
   ]);
 
   const fiatAmount = formatTonInFiat(amount, tonUsdRate, currency, currencyRate, lang.code);
+  const giftMoveKey = getWalletGiftMoveKey(transaction);
 
   const sign = amount === 0n ? '' : isIncoming ? '+' : '−';
 
@@ -215,6 +219,7 @@ const WalletTransactionScreen = ({
         <>
           <WalletCollectibleImage collectible={collectible} isFull className={styles.collectible} />
           <div className={styles.title}>{collectible.name ?? lang('WalletCollectibleTitle')}</div>
+          {giftMoveKey && <div className={styles.status}>{lang(giftMoveKey)}</div>}
         </>
       ) : (
         <>
@@ -286,8 +291,7 @@ export default memo(withGlobal<OwnProps>(
       currency: selectWalletCurrency(global),
       tonUsdRate: global.appConfig.tonUsdRate,
       currencyRate: selectWalletCurrencyRate(global),
-      user: peer.type === 'user' ? selectUser(global, peer.userId)
-        : peer.type === 'address' ? selectWalletResolvedUser(global, peer.address) : undefined,
+      counterparty: selectWalletCounterparty(global, peer),
       decryptedComment: global.wallet?.decryptedComments?.[transaction.id],
       isDecryptingComment: decryption?.transactionId === transaction.id && decryption.status === 'pending',
       freeTransfersPerDay: global.appConfig.walletGaslessDailyTransfers,

src/global/actions/api/wallet.ts

@@ -1564,7 +1564,7 @@ addActionHandler('decryptWalletComment', async (global, actions, payload): Promi
   const ownAddress = selectWalletAddress(global);
   const transaction = selectWalletTransactions(global)?.find(({ id }) => id === transactionId)
     || Object.values(global.wallet?.loadedTransactions || {}).find(({ id }) => id === transactionId);
-  if (!ownAddress || !transaction?.encryptedComment || transaction.peer.type === 'unsupported') return;
+  if (!ownAddress || !transaction?.encryptedComment || !('address' in transaction.peer)) return;
 
   // The comment is salted with the sender's address, which is ours for an outgoing transfer
   const saltAddress = transaction.isIncoming ? transaction.peer.address : ownAddress;

src/global/cache.ts

@@ -723,6 +723,10 @@ function reduceChats<T extends GlobalState>(global: T): GlobalState['chats'] {
     ...currentChatIds,
     ...messagesChatIds,
     ...topPeerIds,
+    // The cached wallet history shows its channels by name. They go before the folders, whose long lists are cut by
+    // the chat limit.
+    ...selectWalletTransactions(global)?.slice(0, WALLET_TRANSACTIONS_CACHE_LIMIT)
+      .flatMap(({ peer }) => (peer.type === 'channel' ? [peer.channelId] : [])) || [],
     ...global.recentlyFoundChatIds || [],
     ...getOrderedIds(ARCHIVED_FOLDER_ID)?.slice(0, GLOBAL_STATE_CACHE_ARCHIVED_CHAT_LIST_LIMIT) || [],
     ...getOrderedIds(ALL_FOLDER_ID) || [],