feature(mobile): Support locked tokens

packages/mobile/src/core/Jetton/Jetton.tsx

@@ -29,6 +29,7 @@ import { useWallet, useWalletCurrency } from '@tonkeeper/shared/hooks';
 import { tk } from '$wallet';
 import { Chart } from '$shared/components/Chart/new/Chart';
 import { ChartPeriod } from '$store/zustand/chart';
+import { formatDate } from '@tonkeeper/shared/utils/date';
 
 const unverifiedTokenHitSlop = { top: 4, left: 4, bottom: 4, right: 4 };
 
@@ -37,6 +38,10 @@ export const Jetton: React.FC<JettonProps> = ({ route }) => {
   const jetton = useJetton(route.params.jettonAddress);
   const jettonActivityList = useJettonActivityList(jetton.jettonAddress);
   const jettonPrice = useTokenPrice(jetton.jettonAddress, jetton.balance);
+  const lockedJettonPrice = useTokenPrice(
+    jetton.jettonAddress,
+    jetton.lock?.amount.toString() ?? '0',
+  );
   const wallet = useWallet();
 
   const isWatchOnly = wallet && wallet.isWatchOnly;
@@ -95,10 +100,33 @@ export const Jetton: React.FC<JettonProps> = ({ route }) => {
             >
               {jettonPrice.formatted.totalFiat}
             </HideableAmount>
+            {jetton.lock ? (
+              <>
+                <Spacer y={12} />
+                <Text variant="body2" color="textSecondary">
+                  {formatter.format(jetton.lock.amount, {
+                    decimals: jetton.metadata.decimals,
+                    currency: jetton.metadata.symbol,
+                    currencySeparator: 'wide',
+                  })}
+                   ·
+                  {' '}
+                  {lockedJettonPrice.formatted.totalFiat}
+                </Text>
+                <Text variant="body2" color="textTertiary">
+                  {t('jetton_locked_till', {
+                    date: formatDate(jetton.lock.till * 1000, 'd MMM yyyy'),
+                  })}
+                </Text>
+              </>
+            ) : null}
             {jettonPrice.formatted.fiat ? (
-              <Text style={{ marginTop: 12 }} variant="body2" color="foregroundSecondary">
-                {t('jetton_price')} {jettonPrice.formatted.fiat}
-              </Text>
+              <>
+                <Spacer y={12} />
+                <Text variant="body2" color="foregroundSecondary">
+                  {t('jetton_price')} {jettonPrice.formatted.fiat}
+                </Text>
+              </>
             ) : null}
           </S.JettonAmountWrapper>
           {jetton.metadata.image ? (

packages/mobile/src/store/models.ts

@@ -281,6 +281,7 @@ export interface JettonBalanceModel {
   currency: CryptoCurrency;
   metadata: JettonMetadata;
   balance: string;
+  lock?: { amount: string; till: number };
   jettonAddress: string;
   walletAddress: string;
   verification: JettonVerification;

packages/mobile/src/tabs/Wallet/components/WalletContentList.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, ReactNode, useMemo } from 'react';
 import { t } from '@tonkeeper/shared/i18n';
 import {
   Screen,
@@ -55,7 +55,7 @@ type TokenItem = {
   onPress?: () => void;
   title: string;
   subtitle?: string;
-  value?: string;
+  value?: string | ReactNode;
   subvalue?: string;
   rate?: Rate;
   picture?: string;
@@ -142,11 +142,15 @@ const RenderItem = ({ item }: { item: Content }) => {
             }
             picture={item.picture}
             value={
-              <HideableAmount
-                style={styles.valueText.static}
-                variant="label1"
-                stars=" * * *"
-              >{` ${item.value}`}</HideableAmount>
+              typeof item.value === 'string' ? (
+                <HideableAmount
+                  style={styles.valueText.static}
+                  variant="label1"
+                  stars=" * * *"
+                >{` ${item.value}`}</HideableAmount>
+              ) : (
+                item.value
+              )
             }
             subvalue={
               item.subvalue && (
@@ -303,7 +307,24 @@ export const WalletContentList = memo<BalancesListProps>(
           onPress: () => openJetton(item.address.rawAddress),
           picture: item.iconUrl,
           title: item.symbol,
-          value: item.quantity.formatted,
+          value: item.lock ? (
+            <HideableAmount
+              style={styles.valueText.static}
+              variant="label1"
+              stars=" * * *"
+            >
+              {item.quantity.formatted}
+              <Text type="label1" color="textTertiary">
+                {' '}
+                ·{' '}
+              </Text>
+              <Text type="label1" color="textSecondary">
+                {item.lock.formatted}
+              </Text>
+            </HideableAmount>
+          ) : (
+            item.quantity.formatted
+          ),
           subvalue: item.rate.total,
           rate: item.rate.price
             ? {

packages/mobile/src/tabs/Wallet/hooks/useTokens.ts

@@ -24,6 +24,9 @@ type TokenInfo = {
     value: string;
     formatted: string;
   };
+  lock?: {
+    formatted: string;
+  };
   price: TokenPrice;
   rate: {
     price: string | null;
@@ -65,6 +68,9 @@ export const useTonkens = (): {
           value: item.balance,
           formatted: formatter.format(item.balance),
         },
+        lock: item.lock && {
+          formatted: formatter.format(item.lock.amount),
+        },
         price: rate,
         rate: {
           price: rate.formatted.fiat,

packages/mobile/src/wallet/managers/JettonsManager.ts

@@ -7,8 +7,6 @@ import { JettonBalanceModel } from '../models/JettonBalanceModel';
 import { Address } from '@tonkeeper/core/src/formatters/Address';
 import { TokenApprovalManager } from './TokenApprovalManager';
 import { TonPriceManager } from './TonPriceManager';
-import BigNumber from 'bignumber.js';
-import { AmountFormatter } from '@tonkeeper/core';
 import { sortByPrice } from '@tonkeeper/core/src/utils/jettons';
 
 export type JettonsState = {

packages/mobile/src/wallet/models/JettonBalanceModel/JettonBalanceModel.ts

@@ -8,13 +8,22 @@ export class JettonBalanceModel {
   jettonAddress: string;
   walletAddress: string;
   verification: JettonVerification;
+  lock?: { amount: string; till: number };
 
   constructor(jettonBalance: JettonBalance) {
     this.metadata = jettonBalance.jetton;
     this.balance = AmountFormatter.fromNanoStatic(
       jettonBalance.balance,
       jettonBalance.jetton.decimals,
     );
+    // @ts-ignore will be implemented in API later
+    this.lock = jettonBalance.lock && {
+      amount: AmountFormatter.fromNanoStatic(
+        jettonBalance.lock.amount,
+        jettonBalance.jetton.decimals,
+      ),
+      till: jettonBalance.lock.till,
+    };
     this.jettonAddress = new Address(jettonBalance.jetton.address).toFriendly();
     this.walletAddress = new Address(jettonBalance.wallet_address.address).toFriendly();
     this.verification = jettonBalance.jetton

packages/shared/i18n/locales/tonkeeper/en.json

@@ -371,6 +371,7 @@
   "jetton_name": "%{name} Token",
   "jetton_open_explorer": "View details",
   "jetton_price": "Price:",
+  "jetton_locked_till": "Locked until %{date}",
   "jettons_list_title": "Tokens",
   "jettons_manage_tokens": "Manage tokens",
   "jettons_show_jettons": "Show tokens in wallet",

packages/shared/i18n/locales/tonkeeper/ru-RU.json

@@ -348,6 +348,7 @@
   "jetton_name" : "%{name} Токен",
   "jetton_open_explorer" : "Подробнее",
   "jetton_price" : "Цена:",
+  "jetton_locked_till": "Заблокированы до %{date}",
   "jettons_list_title" : "Токены",
   "jettons_manage_tokens" : "Настроить токены",
   "jetton_token" : "Токен",