Profile: Show user balance in card (#7459)

Author: Ajaxy

FRICTION_LOG.md

@@ -26,11 +26,7 @@ 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. 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.
+[`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. In a fresh worktree without `.cache/.eslintcache` it fails with a JavaScript heap out-of-memory error after about 90 seconds. 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.
 
 ## Generated icon files change line endings on Windows
 

src/api/gramjs/apiBuilders/stories.ts

@@ -154,7 +154,7 @@ export function buildApiStealthMode(stealthMode: GramJs.TypeStoriesStealthMode):
   };
 }
 
-function buildApiMediaAreaCoordinates(coordinates: GramJs.TypeMediaAreaCoordinates): ApiMediaAreaCoordinates {
+export function buildApiMediaAreaCoordinates(coordinates: GramJs.TypeMediaAreaCoordinates): ApiMediaAreaCoordinates {
   const {
     x, y, w, h, rotation, radius,
   } = coordinates;

src/api/gramjs/apiBuilders/users.ts

@@ -28,6 +28,7 @@ import {
   buildApiProfileTab,
   buildAvatarPhotoId,
 } from './peers';
+import { buildApiWalletCard } from './wallet';
 
 export function buildApiUserFullInfo(mtpUserFull: GramJs.users.UserFull): ApiUserFullInfo {
   const {
@@ -40,7 +41,7 @@ export function buildApiUserFullInfo(mtpUserFull: GramJs.users.UserFull): ApiUse
       botCanManageEmojiStatus, settings, sendPaidMessagesStars, displayGiftsButton, disallowedGifts,
       starsRating, starsMyPendingRating, starsMyPendingRatingDate, mainTab, savedMusic, note,
       noforwardsMyEnabled, noforwardsPeerEnabled, unofficialSecurityRisk, privateForwardName,
-      ttlPeriod, botManagerId,
+      ttlPeriod, botManagerId, walletCard,
     },
     users,
   } = mtpUserFull;
@@ -88,6 +89,7 @@ export function buildApiUserFullInfo(mtpUserFull: GramJs.users.UserFull): ApiUse
     noForwardsPeerEnabled: noforwardsPeerEnabled,
     isUnofficialSecurityRisk: unofficialSecurityRisk,
     botManagerId: botManagerId !== undefined ? buildApiPeerId(botManagerId, 'user') : undefined,
+    walletCard: walletCard && buildApiWalletCard(walletCard),
   };
 }
 

src/api/gramjs/apiBuilders/wallet.ts

@@ -8,6 +8,8 @@ import type {
   ApiOnrampSession,
   ApiTonConnectRequest,
   ApiTonConnectSession,
+  ApiWalletCard,
+  ApiWalletCardSticker,
   ApiWalletCollectible,
   ApiWalletGaslessInfo,
   ApiWalletSentTransfer,
@@ -20,8 +22,10 @@ import { toNonBounceableAddress } from '../../../lib/ton/address';
 import { getBigIntAbs } from '../../../util/numbers';
 import { addWebDocumentToLocalDb } from '../helpers/localDb';
 import { serializeBytes } from '../helpers/misc';
+import { buildApiStarGift } from './gifts';
 import { buildApiWebDocument } from './messageContent';
 import { buildApiPeerId } from './peers';
+import { buildApiMediaAreaCoordinates } from './stories';
 
 const MODEL_TRAIT = 'Model';
 const FRAGMENT_NFT_HOST = 'nft.fragment.com';
@@ -217,6 +221,36 @@ export function buildApiWalletCollectible(item: GramJs.wallet.NftItem): ApiWalle
   };
 }
 
+export function buildApiWalletCard(card: GramJs.wallet.Card): ApiWalletCard {
+  const {
+    address, balance, stickers, bgNftItem,
+  } = card;
+
+  return {
+    address: toNonBounceableAddress(address),
+    balance,
+    stickers: stickers?.map(buildApiWalletCardSticker).filter(Boolean),
+    backgroundGift: bgNftItem && buildUniqueGiftFromNft(bgNftItem),
+  };
+}
+
+// A sticker shows the model of a collectible gift, so an NFT of another kind has nothing to draw
+function buildApiWalletCardSticker({ coordinates, nft }: GramJs.wallet.CardSticker): ApiWalletCardSticker | undefined {
+  const gift = buildUniqueGiftFromNft(nft);
+  if (!gift) return undefined;
+
+  return {
+    coordinates: buildApiMediaAreaCoordinates(coordinates),
+    gift,
+  };
+}
+
+function buildUniqueGiftFromNft(nft: GramJs.wallet.NftItem) {
+  const gift = nft.gift && buildApiStarGift(nft.gift);
+
+  return gift?.type === 'starGiftUnique' ? gift : undefined;
+}
+
 function getCollectibleType(metadataUrl?: string, imageUrl?: string): ApiWalletCollectible['type'] {
   for (const url of [metadataUrl, imageUrl]) {
     const type = url && FRAGMENT_TYPES.find((item) => url.startsWith(`https://${FRAGMENT_NFT_HOST}/${item}/`));

src/api/types/users.ts

@@ -11,6 +11,7 @@ import type {
   ApiTypePeerColor,
 } from './peers';
 import type { ApiSavedStarGift, ApiStarsRating } from './stars';
+import type { ApiWalletCard } from './wallet';
 
 export interface ApiUser {
   id: string;
@@ -95,6 +96,7 @@ export interface ApiUserFullInfo {
   noForwardsPeerEnabled?: boolean;
   isUnofficialSecurityRisk?: boolean;
   botManagerId?: string;
+  walletCard?: ApiWalletCard;
 }
 
 export type ApiUserType = 'userTypeBot' | 'userTypeRegular' | 'userTypeDeleted' | 'userTypeUnknown';

src/api/types/wallet.ts

@@ -1,4 +1,6 @@
 import type { ApiWebDocument } from './bots';
+import type { ApiStarGiftUnique } from './stars';
+import type { ApiMediaAreaCoordinates } from './stories';
 
 export interface ApiTonConnectManifest {
   url: string;
@@ -196,6 +198,19 @@ export type ApiWalletCollectible = {
   | { type: 'username' | 'number' | 'other' }
 );
 
+export interface ApiWalletCardSticker {
+  coordinates: ApiMediaAreaCoordinates;
+  gift: ApiStarGiftUnique;
+}
+
+export interface ApiWalletCard {
+  address: string;
+  // Nanotons
+  balance: bigint;
+  stickers?: ApiWalletCardSticker[];
+  backgroundGift?: ApiStarGiftUnique;
+}
+
 export interface ApiOnrampProvider {
   id: string;
   name: string;

src/assets/localization/fallback.strings

@@ -3166,6 +3166,8 @@
 "WalletReceiveBuy" = "Buy with cash or crypto";
 "WalletReceiveAddressCopied" = "Address copied";
 "WalletReceiveShowQr" = "Show my QR";
+"WalletReceivePeerShowQr" = "Show QR";
+"WalletReceivePeerNote" = "Send GRAM to this address or scan this QR code.";
 "WalletBuyTitle" = "Buy Grams";
 "WalletBuyPayWith" = "Pay with";
 "WalletBuyCurrency" = "Currency";

src/bundles/wallet.ts

@@ -1 +1,2 @@
 export { default as WalletModal } from '../components/modals/wallet/WalletModal';
+export { default as WalletCardModal } from '../components/modals/wallet/WalletCardModal';

src/components/common/icons/GramIcon.tsx

@@ -12,16 +12,19 @@ type OwnProps = {
   style?: string;
   isAppIcon?: boolean;
   isMono?: boolean;
+  withWhiteStar?: boolean;
   onClick?: VoidFunction;
 };
 
 /* eslint-disable @stylistic/max-len */
-// Gem combined with the inner star; `evenodd` punches the star out so the shape can be tinted via `currentColor`
-const LOGO_PATH = 'M51.09 0H25.71c-3.38 0-5.07 0-6.598.473a10.6 10.6 0 0 0-3.693 2.015c-1.224 1.03-2.138 2.452-3.966 5.296l-8.067 12.55C2.178 22.211 1.574 23.15 1.41 24.14a4.86 4.86 0 0 0 .278 2.587c.37.931 1.16 1.721 2.74 3.3l29.977 29.978c1.398 1.398 2.098 2.098 2.904 2.36.709.23 1.473.23 2.182 0 .806-.262 1.505-.962 2.904-2.36l29.978-29.978c1.579-1.579 2.368-2.369 2.739-3.3a4.86 4.86 0 0 0 .278-2.587c-.164-.989-.768-1.928-1.976-3.807l-8.067-12.55C63.519 4.94 62.605 3.52 61.38 2.489A10.6 10.6 0 0 0 57.688.473C56.16 0 54.47 0 51.09 0 M46.286 9.9c.412-1.114 1.988-1.114 2.4 0l2.85 7.7c.171.463.536.828.998 1l7.701 2.849c1.114.412 1.114 1.988 0 2.4l-7.7 2.85a1.7 1.7 0 0 0-.999.998l-2.85 7.7c-.412 1.115-1.988 1.115-2.4 0l-2.85-7.7a1.7 1.7 0 0 0-.998-.998l-7.7-2.85c-1.115-.412-1.115-1.988 0-2.4l7.7-2.85a1.7 1.7 0 0 0 .998-.998z';
+const GEM_PATH = 'M51.09 0H25.71c-3.38 0-5.07 0-6.598.473a10.6 10.6 0 0 0-3.693 2.015c-1.224 1.03-2.138 2.452-3.966 5.296l-8.067 12.55C2.178 22.211 1.574 23.15 1.41 24.14a4.86 4.86 0 0 0 .278 2.587c.37.931 1.16 1.721 2.74 3.3l29.977 29.978c1.398 1.398 2.098 2.098 2.904 2.36.709.23 1.473.23 2.182 0 .806-.262 1.505-.962 2.904-2.36l29.978-29.978c1.579-1.579 2.368-2.369 2.739-3.3a4.86 4.86 0 0 0 .278-2.587c-.164-.989-.768-1.928-1.976-3.807l-8.067-12.55C63.519 4.94 62.605 3.52 61.38 2.489A10.6 10.6 0 0 0 57.688.473C56.16 0 54.47 0 51.09 0';
+const STAR_PATH = 'M46.286 9.9c.412-1.114 1.988-1.114 2.4 0l2.85 7.7c.171.463.536.828.998 1l7.701 2.849c1.114.412 1.114 1.988 0 2.4l-7.7 2.85a1.7 1.7 0 0 0-.999.998l-2.85 7.7c-.412 1.115-1.988 1.115-2.4 0l-2.85-7.7a1.7 1.7 0 0 0-.998-.998l-7.7-2.85c-1.115-.412-1.115-1.988 0-2.4l7.7-2.85a1.7 1.7 0 0 0 .998-.998z';
 /* eslint-enable @stylistic/max-len */
+// Gem combined with the inner star; `evenodd` punches the star out so the shape can be tinted via `currentColor`
+const LOGO_PATH = `${GEM_PATH} ${STAR_PATH}`;
 
 const GramIcon = ({
-  className, style, isAppIcon, isMono, onClick,
+  className, style, isAppIcon, isMono, withWhiteStar, onClick,
 }: OwnProps) => {
   if (isMono) {
     return (
@@ -31,7 +34,8 @@ const GramIcon = ({
         style={style}
         onClick={onClick}
       >
-        <path fill="currentColor" fill-rule="evenodd" d={LOGO_PATH} />
+        <path fill="currentColor" fill-rule="evenodd" d={withWhiteStar ? GEM_PATH : LOGO_PATH} />
+        {withWhiteStar && <path fill="#fff" d={STAR_PATH} />}
       </svg>
     );
   }

src/components/common/profile/ProfileInfo.module.scss

@@ -2,6 +2,7 @@
 
 .root {
   --profile-info-bg: var(--color-background-secondary);
+  --music-band-height: 0rem;
   --rating-outline-color: #000000;
   --rating-text-color: #000000;
 
@@ -33,7 +34,7 @@
 }
 
 .plain.minimized {
-  padding-block: 1.5rem 0;
+  padding-block: 1.5rem var(--music-band-height);
   color: var(--color-text);
 
   .info {
@@ -398,11 +399,17 @@
   text-align: center;
 }
 
+// A collapsed header with the music band is taller than a narrow column is wide, and a square would end above the
+// band. The square stays otherwise, so the pattern is not redrawn while the header height animates.
 .radialPatternBackground {
   pointer-events: none;
+
   position: absolute;
   inset: 0;
+
   aspect-ratio: 1 / 1;
+  width: 100%;
+  min-height: 100%;
 }
 
 .standaloneAvatar {
@@ -420,8 +427,8 @@
 }
 
 .minimized {
-  height: 18rem;
-  padding-block: 4.25rem 1rem;
+  height: calc(18rem + var(--music-band-height));
+  padding-block: 4.25rem calc(1rem + var(--music-band-height));
 
   .status, .title, .info {
     align-self: center;
@@ -538,32 +545,136 @@
   }
 }
 
+// The music band lies along the bottom edge. The header grows by it, so everything else keeps its place above it.
+.hasMusic {
+  --music-band-height: 1.5rem;
+}
+
+.hasMusic:not(.minimized) .info {
+  padding-bottom: calc(0.5rem + var(--music-band-height));
+}
+
+.musicBand {
+  position: absolute;
+  z-index: 2;
+  inset-inline: 0;
+  bottom: 0;
+
+  height: var(--music-band-height);
+}
+
+// The music band and the balance pill share one background, as on iOS. Over a profile color the tint blends into it
+// with `overlay`, like iOS `blendOver`.
+.root {
+  --profile-button-background: rgb(255 255 255 / 10%);
+}
+
+.minimized {
+  --profile-button-tint: rgb(255 255 255 / 35%);
+  --profile-button-background: linear-gradient(var(--profile-button-tint) 0 0) var(--profile-button-base, transparent);
+}
+
+:global(.theme-dark) .minimized {
+  --profile-button-tint: rgb(0 0 0 / 25%);
+}
+
+.plain.minimized {
+  --profile-button-background: var(--color-background);
+}
+
 .hasMusic .info {
   /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
   transition: padding-bottom 0.25s;
 }
 
-.hasMusic:not(.minimized) .info {
-  padding-bottom: 2.25rem;
+.hasWalletBalance.minimized {
+  height: calc(19.75rem + var(--music-band-height));
 }
 
-.hasMusic.minimized {
-  padding-bottom: 2.75rem;
+.walletBalance {
+  pointer-events: auto;
+  cursor: var(--custom-cursor, pointer);
+
+  position: relative;
+  z-index: 1;
+
+  overflow: hidden;
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  align-self: center;
+
+  height: 1.25rem;
+  margin-top: 0.5rem;
+  padding: 0 0.5rem;
+  border: none;
+  border-radius: 0.625rem;
+
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: inherit;
+  white-space: nowrap;
+
+  background: var(--profile-button-background);
+  background-blend-mode: overlay;
+  outline: none;
+
+  transition: filter 0.15s;
+
+  &:hover,
+  &:focus-visible {
+    filter: brightness(1.1);
+  }
+
+  @include mixins.with-vt-type('profileAvatar');
 }
 
-.hasMusic.plain {
-  padding-bottom: 2.75rem;
+// Over the photo the pill lines up under the status along the start edge, with the name and the status
+.hasWalletBalance:not(.minimized) .walletBalance {
+  align-self: flex-start;
 }
 
-.hasMusic {
-  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
-  transition: height 0.25s;
+.walletLabel,
+.walletAmount {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+// The wallet card rolls the content up out of the pill while it comes out of it
+.walletLabel,
+.walletChevron {
+  translate: 0 var(--wallet-card-shutter, 0);
+}
+
+.walletAmount {
+  gap: 0.125rem;
+  font-weight: var(--font-weight-semibold);
+}
+
+// `GramIcon` is `1em` high, with side margins that make the gem box as wide as on iOS
+.walletIcon {
+  font-size: 0.5625rem;
+  color: var(--color-white);
+}
+
+.minimized .walletIcon {
+  color: rgb(255 255 255 / 30%);
 }
 
-.hasMusic.plain.minimized:not(.withBackground) .standaloneAvatar {
-  margin-top: 2.75rem;
+.plain.minimized .walletIcon {
+  color: var(--color-primary);
 }
 
-.musicOverlay {
-  bottom: 0.375rem;
+// A smaller font with the inherited line height would sit lower and make the pill taller
+.walletFraction {
+  font-size: 0.5625rem;
+  line-height: 1;
+}
+
+// The glyph sits in the middle of a wider icon box, and its empty sides would widen the gaps around it
+.walletChevron {
+  flex-shrink: 0;
+  margin-inline: -0.1875rem;
+  font-size: 0.875rem;
 }